improve context api

src/components/CustomNode/index.tsx

@@ -18,7 +18,7 @@ const baseLabelStyle = {
   strokeWidth: 0,
 };
 
-const CustomNode = (nodeProps: NodeProps) => {
+export const CustomNode = (nodeProps: NodeProps) => {
   const { properties: data } = nodeProps;
 
   return (
@@ -53,7 +53,3 @@ const CustomNode = (nodeProps: NodeProps) => {
     </Node>
   );
 };
-
-const MemoizedCustomNode = React.memo(CustomNode);
-
-export { MemoizedCustomNode as CustomNode };

src/components/Graph/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Canvas, EdgeData, NodeData } from "reaflow";
+import { Canvas, EdgeData, ElkRoot, NodeData } from "reaflow";
 import { CustomNode } from "src/components/CustomNode";
 import { useConfig } from "src/hocs/config";
 import { getEdgeNodes } from "src/containers/LiveEditor/helpers";
@@ -12,9 +12,7 @@ export const Graph = () => {
     height: 2000,
   });
 
-  const {
-    states: { json, settings },
-  } = useConfig();
+  const { json, settings } = useConfig();
 
   React.useEffect(() => {
     const { nodes, edges } = getEdgeNodes(json, settings.expand);
@@ -28,22 +26,24 @@ export const Graph = () => {
     if (input) input.blur();
   };
 
+  const onLayoutChange = (layout: ElkRoot) => {
+    if (layout.width && layout.height)
+      setSize({ width: layout.width, height: layout.height });
+  };
+
   return (
     <Canvas
       nodes={nodes}
-      node={(props) => <CustomNode {...props} />}
       edges={edges}
       maxWidth={size.width}
       maxHeight={size.height}
-      zoomable={false}
       direction={settings.layout}
-      readonly
       key={settings.layout}
       onCanvasClick={onCanvasClick}
-      onLayoutChange={(lay) => {
-        if (lay.width && lay.height)
-          setSize({ width: lay.width, height: lay.height });
-      }}
+      onLayoutChange={onLayoutChange}
+      node={CustomNode}
+      zoomable={false}
+      readonly
     />
   );
 };

src/components/Sidebar/index.tsx

@@ -103,16 +103,13 @@ const StyledImportFile = styled.label`
 
 function getLayoutIcon(layout: CanvasDirection) {
   if (layout === "LEFT") return <CgArrowLongLeftE />;
-  if (layout === "UP") return <CgArrowLongDownE />;
+  if (layout === "UP") return <CgArrowLongUpE />;
   if (layout === "RIGHT") return <CgArrowLongRightE />;
-  return <CgArrowLongUpE />;
+  return <CgArrowLongDownE />;
 }
 
 export const Sidebar: React.FC = () => {
-  const {
-    states: { settings },
-    dispatch,
-  } = useConfig();
+  const { settings, dispatch } = useConfig();
   const router = useRouter();
   const [jsonFile, setJsonFile] = React.useState<File | null>(null);
 

src/containers/Editor/Tools.tsx

@@ -41,9 +41,9 @@ const StyledToolElement = styled.button`
 `;
 
 export const Tools: React.FC = () => {
-  const { states, dispatch } = useConfig();
+  const { json, settings, dispatch } = useConfig();
   const handleSave = () => {
-    localStorage.setItem("json", states.json);
+    localStorage.setItem("json", json);
     toast.success("Saved JSON successfully!");
   };
 
@@ -63,7 +63,7 @@ export const Tools: React.FC = () => {
         <AiOutlineFullscreen />
       </StyledToolElement>
       <StyledToolElement aria-label="switch theme" onClick={toggleTheme}>
-        {states.settings.lightmode ? <HiOutlineMoon /> : <HiOutlineSun />}
+        {settings.lightmode ? <HiOutlineMoon /> : <HiOutlineSun />}
       </StyledToolElement>
       <Input />
       <StyledToolElement aria-label="save" onClick={handleSave}>

src/containers/Editor/index.tsx

@@ -8,9 +8,7 @@ import { useConfig } from "src/hocs/config";
 import { Allotment } from "allotment";
 
 const Editor: React.FC = () => {
-  const {
-    states: { settings },
-  } = useConfig();
+  const { settings } = useConfig();
 
   return (
     <Styles.StyledPageWrapper>

src/hocs/config.tsx

@@ -18,12 +18,13 @@ export const initialStates: AppConfig = {
 };
 
 interface Config {
-  states: AppConfig;
+  json: string;
+  settings: StorageConfig;
   dispatch: React.Dispatch<ReducerAction>;
 }
 
 const defaultContext: Config = {
-  states: initialStates,
+  ...initialStates,
   dispatch: () => {},
 };
 
@@ -35,7 +36,11 @@ const useConfig = () => React.useContext(ConfigContext);
 const WithConfig: ReactComponent = ({ children }) => {
   const [render, setRender] = React.useState(false);
   const [states, dispatch] = React.useReducer(useConfigReducer, initialStates);
-  const value = { states, dispatch };
+  const value = {
+    dispatch,
+    json: states.json,
+    settings: states.settings,
+  };
 
   React.useEffect(() => {
     const jsonStored = localStorage.getItem("json");

src/hooks/useFocusNode.tsx

@@ -14,9 +14,7 @@ export const useFocusNode = () => {
     debounced: "",
   });
 
-  const {
-    states: { settings },
-  } = useConfig();
+  const { settings } = useConfig();
 
   const skip = () => setSelectedNode((current) => current + 1);
 

src/pages/_app.tsx

@@ -9,9 +9,7 @@ import { useConfig, withConfig } from "src/hocs/config";
 import { GoogleAnalytics } from "src/components/GoogleAnalytics";
 
 function JsonVisio({ Component, pageProps }: AppProps) {
-  const {
-    states: { settings },
-  } = useConfig();
+  const { settings } = useConfig();
 
   return (
     <>