chore: improve nodes persistance

Author: fjmorant

package.json

@@ -21,8 +21,7 @@
     "url": "git+https://github.com/fjmorant/react-native-nested-listview.git"
   },
   "dependencies": {
-    "object-hash": "3.0.0",
-    "use-global-hook": "0.3.0"
+    "object-hash": "3.0.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -41,16 +40,16 @@
     "@types/react-native": "0.67.2",
     "@types/react-test-renderer": "17.0.1",
     "@types/use-global-hook": "0.1.5",
-    "@typescript-eslint/parser": "5.13.0",
-    "babel-jest": "26.6.3",
+    "@typescript-eslint/parser": "5.14.0",
+    "babel-jest": "27.5.1",
     "codecov": "3.8.3",
     "eslint": "7.32.0",
     "eslint-plugin-prettier": "4.0.0",
     "husky": "7.0.4",
     "istanbul": "0.4.5",
     "istanbul-api": "3.0.0",
     "istanbul-reports": "3.1.4",
-    "jest": "26.6.3",
+    "jest": "27.5.1",
     "metro-react-native-babel-preset": "0.69.0",
     "prettier": "2.5.1",
     "prettier-eslint": "13.0.0",

src/nested-list-view/nested-list-view.tsx

@@ -2,6 +2,7 @@ import hashObjectGenerator from 'object-hash';
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { INode, NodeView } from '../node-view';
+import { NodeProvider } from '../nodes-context-provider';
 
 const styles = StyleSheet.create({
   errorContainer: {
@@ -155,15 +156,17 @@ const NestedListView: React.FC<IProps> = React.memo(
     }
 
     return (
-      <NodeView
-        getChildrenName={_getChildrenName}
-        node={_root}
-        onNodePressed={onNodePressed}
-        level={0}
-        renderNode={renderNode}
-        extraData={extraData}
-        keepOpenedState={keepOpenedState}
-      />
+      <NodeProvider>
+        <NodeView
+          getChildrenName={_getChildrenName}
+          node={_root}
+          onNodePressed={onNodePressed}
+          level={0}
+          renderNode={renderNode}
+          extraData={extraData}
+          keepOpenedState={keepOpenedState}
+        />
+      </NodeProvider>
     );
   },
 );

src/node-view/node-view.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { FlatList, Pressable } from 'react-native';
-import globalHook, { Store } from 'use-global-hook';
-import { GlobalState, INode, NodeActions } from './types';
+import { useNodesContext } from '../nodes-context-provider';
+import { INode } from './types';
 
 export interface IProps {
   getChildrenName: (item: INode) => string;
@@ -18,24 +18,6 @@ export interface IProps {
   keepOpenedState?: boolean;
 }
 
-const actions = {
-  setOpenedNode: (
-    store: Store<GlobalState, NodeActions>,
-    { internalId, opened }: any,
-  ) => {
-    store.setState({
-      nodesState: { ...store.state.nodesState, [internalId]: opened },
-    });
-  },
-};
-
-const initialState: GlobalState = {
-  nodesState: { root: true },
-};
-
-// @ts-ignore
-const useGlobal = globalHook<GlobalState, NodeActions>(initialState, actions);
-
 const NodeView: React.FC<IProps> = React.memo(
   ({
     renderNode,
@@ -46,13 +28,13 @@ const NodeView: React.FC<IProps> = React.memo(
     onNodePressed,
     keepOpenedState,
   }) => {
-    const [globalState, globalActions]: [any, any] = useGlobal();
+    const { openedNodes, setOpenNode } = useNodesContext();
 
     const [_node, setNode]: [INode, any] = useState({
       ...node,
       opened:
-        keepOpenedState && globalState?.nodesState[node._internalId]
-          ? !!globalState?.nodesState[node._internalId]
+        keepOpenedState && openedNodes[node._internalId]
+          ? !!openedNodes[node._internalId]
           : !!node.opened,
     });
 
@@ -65,7 +47,7 @@ const NodeView: React.FC<IProps> = React.memo(
 
     const _onNodePressed = useCallback(() => {
       if (keepOpenedState) {
-        globalActions.setOpenedNode({
+        setOpenNode({
           internalId: _node._internalId,
           opened: !_node.opened,
         });
@@ -79,7 +61,7 @@ const NodeView: React.FC<IProps> = React.memo(
       if (onNodePressed) {
         onNodePressed(_node);
       }
-    }, [_node, globalActions, keepOpenedState, onNodePressed]);
+    }, [_node, keepOpenedState, onNodePressed, setOpenNode]);
 
     const renderChildren = useCallback(
       (item: INode, _level: number): ReactElement => (
@@ -107,8 +89,7 @@ const NodeView: React.FC<IProps> = React.memo(
     const nodeChildren: [] = _node[nodeChildrenName];
 
     const isNodeOpened =
-      (keepOpenedState && globalState?.nodesState[node._internalId]) ||
-      _node.opened;
+      (keepOpenedState && openedNodes[node._internalId]) || _node.opened;
 
     return (
       <>

src/node-view/types.ts

@@ -1,19 +1,6 @@
-import { Store } from 'use-global-hook';
-
 export interface INode {
   _internalId: string;
   hidden: boolean;
   opened: boolean;
   [key: string]: any;
 }
-
-export interface GlobalState {
-  nodesState: { root: boolean };
-}
-
-export interface NodeActions {
-  setOpenedNode: (
-    store: Store<GlobalState, NodeActions>,
-    { internalId, opened }: any,
-  ) => void;
-}

src/nodes-context-provider/index.ts

@@ -0,0 +1 @@
+export * from './nodes-context-provider';

src/nodes-context-provider/nodes-context-provider.tsx

@@ -0,0 +1,38 @@
+import React, { useContext, useRef } from 'react';
+
+type SetOpenedNodesParams = {
+  internalId: string;
+  opened: boolean;
+};
+
+type INodexContext = {
+  openedNodes: { [name: string]: boolean };
+  setOpenNode: ({ internalId, opened }: SetOpenedNodesParams) => void;
+};
+
+const NodesContext = React.createContext<INodexContext>({
+  openedNodes: {},
+  setOpenNode: (_: SetOpenedNodesParams) => {},
+});
+
+export const useNodesContext = () => useContext(NodesContext);
+
+const NodeProvider = ({ children }: React.PropsWithChildren<{}>) => {
+  const nodesOpenedRef = useRef({ root: true });
+
+  const setOpenNode = ({ internalId, opened }: SetOpenedNodesParams) => {
+    nodesOpenedRef.current = {
+      ...nodesOpenedRef.current,
+      [internalId]: opened,
+    };
+  };
+
+  return (
+    <NodesContext.Provider
+      value={{ openedNodes: nodesOpenedRef.current, setOpenNode }}>
+      {children}
+    </NodesContext.Provider>
+  );
+};
+
+export { NodeProvider };