Tidied up devtools frontend a little
Brian Vaughn committed
Feb 1, 2019 at 09:25 UTC
9aa6e13d5f50fa6e556f1cadc2cfee1ac38257c9
5 files changed
+8
-59
src/devtools/views/Element.js
+1
-1
@@ -1,7 +1,7 @@
1
// @flow
2
3
import React, { Fragment, useContext } from 'react';
4
-import { TreeContext } from './contexts';
4
+import { TreeContext } from './context';
5
6
import styles from './Element.css';
7
src/devtools/views/Elements.js
+1
-1
@@ -3,7 +3,7 @@
3
import React, { useLayoutEffect, useMemo, useState } from 'react';
4
import Store from '../store';
5
import Tree from './Tree';
6
-import { StoreContext, TreeContext } from './contexts';
6
+import { StoreContext, TreeContext } from './context';
7
import SearchIcon from './SearchIcon';
8
import styles from './Elements.css';
9
src/devtools/views/Tree.js
+1
-1
@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
4
import AutoSizer from 'react-virtualized-auto-sizer';
5
import { FixedSizeList } from 'react-window';
6
import Element from './Element';
7
-import { TreeContext } from './contexts';
7
+import { TreeContext } from './context';
8
9
import styles from './Tree.css';
10
src/devtools/views/context.js
renamed
+5
-1
@@ -6,8 +6,12 @@ import type { TreeMetadataType } from '../types';
6
7
import Store from '../store';
8
9
-export const RootsContext = createContext<Array<string>>([]);
9
export const StoreContext = createContext<Store>(((null: any): Store));
10
+// $FlowFixMe displayName is a valid attribute of React$Context
11
+StoreContext.displayName = 'StoreContext';
12
+
13
export const TreeContext = createContext<TreeMetadataType>(
14
((null: any): TreeMetadataType)
15
);
16
+// $FlowFixMe displayName is a valid attribute of React$Context
17
+TreeContext.displayName = 'TreeMetadataContext';
src/devtools/views/hooks.js
deleted
-55
@@ -1,55 +0,0 @@
1
-// @flow
2
-
3
-import { useLayoutEffect, useState } from 'react';
4
-
5
-import type { Element } from '../types';
6
-import Store from '../store';
7
-
8
-// TODO useEffect has a bug where sometimes subscriptions don't get cleaned up correctly.
9
-// Potentially related to github.com/facebookincubator/redux-react-hook/issues/17
10
-// As a temporary work around, switch back to layout effect.
11
-
12
-export function useElement(store: Store, id: number): ?Element {
13
- const [element, setElement] = useState<?Element>(store.getElementByID(id));
14
-
15
- useLayoutEffect(() => {
16
- const handler = () =>
17
- setElement(((store.getElementByID(id): any): Element));
18
-
19
- // Listen for changes to the element.
20
- store.addListener((id: any), handler);
21
-
22
- // Check for changes that may have happened between render and mount.
23
- const newElement = store.getElementByID(id);
24
- if (element !== newElement) {
25
- setElement(newElement);
26
- }
27
-
28
- // Remove event listener on unmount.
29
- return () => store.removeListener((id: any), handler);
30
- }, [store, id]);
31
-
32
- return element;
33
-}
34
-
35
-export function useRoots(store: Store): $ReadOnlyArray<number> {
36
- const [roots, setRoots] = useState<$ReadOnlyArray<number>>(store.roots);
37
-
38
- useLayoutEffect(() => {
39
- const handler = () => setRoots(store.roots);
40
-
41
- // Listen for changes to roots.
42
- store.addListener('roots', handler);
43
-
44
- // Check for changes that may have happened between render and mount.
45
- const newRoots = store.roots;
46
- if (roots !== newRoots) {
47
- setRoots(newRoots);
48
- }
49
-
50
- // Remove event listener on unmount.
51
- return () => store.removeListener('roots', handler);
52
- }, [store]);
53
-
54
- return roots;
55
-}