chore(meshwide): implement provider

libremesh · May 6, 2024 · 884ffc1 · 884ffc1
1 parent 8d1a0fd
commit 884ffc1
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 21 deletions.
diff --git a/plugins/lime-plugin-mesh-wide/src/hooks/useNodes.tsx b/plugins/lime-plugin-mesh-wide/src/hooks/useNodes.tsx
@@ -1,4 +1,6 @@
+import { ComponentChildren, createContext } from "preact";
 import { useMemo } from "preact/compat";
+import { useContext } from "preact/hooks";
 
 import { isValidCoordinate } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import {
@@ -7,8 +9,31 @@ import {
 } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
 import { INodes } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
-// todo(kon): this should be inside a provider to don't repeat the calculations
-export const useNodes = () => {
+interface NodesContextType {
+    hasInvalidNodes: boolean;
+    allNodes: {
+        meshWideNodesReference: INodes;
+        meshWideNodesActual: INodes;
+    };
+    invalidNodes: {
+        invalidNodesReference: INodes;
+        invalidNodesActual: INodes;
+    };
+    locatedNodes: {
+        locatedNodesReference: INodes;
+        locatedNodesActual: INodes;
+        allLocatedNodes: INodes;
+        locatedNewNodes: INodes;
+    };
+}
+
+const NodesContext = createContext<NodesContextType>(null);
+
+export const NodesProvider = ({
+    children,
+}: {
+    children: ComponentChildren;
+}) => {
     const { data: meshWideNodesReference } = useMeshWideNodesReference({});
     const { data: meshWideNodesActual } = useMeshWideNodes({});
 
@@ -83,22 +108,37 @@ export const useNodes = () => {
         ...locatedNewNodes,
     };
 
-    return {
-        hasInvalidNodes,
-        allNodes: {
-            meshWideNodesReference,
-            meshWideNodesActual,
-        },
-        // Invalid nodes doesn't contain a correct lat long
-        invalidNodes: {
-            invalidNodesReference,
-            invalidNodesActual,
-        },
-        locatedNodes: {
-            locatedNodesReference,
-            locatedNodesActual,
-            allLocatedNodes,
-            locatedNewNodes, // New nodes (not on the ref state)
-        },
-    };
+    return (
+        <NodesContext.Provider
+            value={{
+                hasInvalidNodes,
+                allNodes: {
+                    meshWideNodesReference,
+                    meshWideNodesActual,
+                },
+                // Invalid nodes doesn't contain a correct lat long
+                invalidNodes: {
+                    invalidNodesReference,
+                    invalidNodesActual,
+                },
+                locatedNodes: {
+                    locatedNodesReference,
+                    locatedNodesActual,
+                    allLocatedNodes,
+                    locatedNewNodes, // New nodes (not on the ref state)
+                },
+            }}
+        >
+            {children}
+        </NodesContext.Provider>
+    );
+};
+
+// Helper hook to use the context
+export const useNodes = () => {
+    const context = useContext(NodesContext);
+    if (context === null) {
+        throw new Error("useNodesContext must be used within a NodesProvider");
+    }
+    return context;
 };
diff --git a/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx b/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx
@@ -7,8 +7,9 @@ import { useLoadLeaflet } from "plugins/lime-plugin-locate/src/locateQueries";
 import { FloatingAlert } from "plugins/lime-plugin-mesh-wide/src/components/Map/FloatingAlert";
 import { MeshWideMap } from "plugins/lime-plugin-mesh-wide/src/containers/Map";
 import { SelectedFeatureBottomSheet } from "plugins/lime-plugin-mesh-wide/src/containers/SelectedFeatureBottomSheet";
+import { NodesProvider } from "plugins/lime-plugin-mesh-wide/src/hooks/useNodes";
 
-const MeshWidePage = () => {
+const MeshWide = () => {
     const {
         isError: isAssetError,
         isFetchedAfterMount: assetsLoaded,
@@ -45,4 +46,12 @@ const MeshWidePage = () => {
     );
 };
 
+const MeshWidePage = () => {
+    return (
+        <NodesProvider>
+            <MeshWide />
+        </NodesProvider>
+    );
+};
+
 export default MeshWidePage;