fix SidebarContext

aBgAmeuR · Nov 3, 2023 · bd11d3a · bd11d3a
1 parent 9ff9576
commit bd11d3a
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 56 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,33 +1,23 @@
-"use client";
+"use client"
 
-import React, { SetStateAction } from "react";
-import { ReactFlowProvider } from "reactflow";
-import { AppBar } from "@/components/Editor/AppBar";
-import { Editor } from "@/components/Editor/Editor";
-import { createContext, useState } from 'react';
+import React, { useState } from "react"
+import { ReactFlowProvider } from "reactflow"
 
-interface AppContextInterface {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<SetStateAction<boolean>>;
-}
-export const ContextDefaultValue: AppContextInterface = {
-  isOpen: true,
-  setIsOpen: () => true
-}
-export const SidebarContext = createContext(ContextDefaultValue);
+import SidebarContext from "@/hooks/SidebarContext"
+import { AppBar } from "@/components/Editor/AppBar"
+import { Editor } from "@/components/Editor/Editor"
 
 export default function EditPage() {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
-  const value: AppContextInterface = { isOpen, setIsOpen }
+  const [isOpen, setIsOpen] = useState<boolean>(true)
 
   return (
     <>
-      <SidebarContext.Provider value={value}>
+      <SidebarContext.Provider value={{ isOpen, setIsOpen }}>
         <ReactFlowProvider>
           <AppBar />
           <Editor />
         </ReactFlowProvider>
       </SidebarContext.Provider>
     </>
   )
-}
+}
diff --git a/components/Editor/AppBar.tsx b/components/Editor/AppBar.tsx
@@ -1,12 +1,14 @@
-import { Save, Layout } from "lucide-react";
-import { ThemeToggle } from "../theme-toggle";
-import { Icons } from "../icons";
-import { siteConfig } from "@/config/site";
-import { useContext } from "react";
-import { SidebarContext } from "@/app/page";
+import { useContext } from "react"
+import { Layout, Save } from "lucide-react"
+
+import { siteConfig } from "@/config/site"
+import SidebarContext from "@/hooks/SidebarContext"
+
+import { Icons } from "../icons"
+import { ThemeToggle } from "../theme-toggle"
 
 export function AppBar() {
-  let { isOpen, setIsOpen } = useContext(SidebarContext);
+  let { isOpen, setIsOpen } = useContext(SidebarContext)
 
   return (
     <div className="flex h-14 w-screen flex-row items-center justify-between border-b border-neutral-100 bg-white p-2 px-4 dark:border-white/5 dark:bg-neutral-900">
@@ -27,11 +29,14 @@ export function AppBar() {
         {/* <button className="rounded bg-neutral-100 p-2 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400">
           <Save size={18} strokeWidth={2} />
         </button> */}
-        <button className="rounded bg-neutral-100 p-2 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400" onClick={e => setIsOpen(!isOpen)}>
+        <button
+          className="rounded bg-neutral-100 p-2 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400"
+          onClick={(e) => setIsOpen(!isOpen)}
+        >
           <Layout size={18} strokeWidth={2} />
         </button>
         <ThemeToggle />
       </div>
     </div>
-  );
-}
+  )
+}
diff --git a/components/Editor/OptionBar/index.tsx b/components/Editor/OptionBar/index.tsx
@@ -1,44 +1,74 @@
-import { BackgroundVariant, Edge, MarkerType, Node, useOnSelectionChange } from "reactflow";
-import { ClassOptions } from "./Class";
-import { DefaultOptions } from "./Default";
-import { EdgeOptions } from "./Edge";
-import { useContext, useEffect, useState } from "react";
-import { SidebarContext } from "@/app/page";
+import { useContext, useEffect, useState } from "react"
+import {
+  BackgroundVariant,
+  Edge,
+  MarkerType,
+  Node,
+  useOnSelectionChange,
+} from "reactflow"
+
+import SidebarContext from "@/hooks/SidebarContext"
+
+import { ClassOptions } from "./Class"
+import { DefaultOptions } from "./Default"
+import { EdgeOptions } from "./Edge"
 
 interface OptionBarProps {
-  editNode: (id: string, newData: any) => void;
-  editEdge: (id: string, label: string, markerStart: string, markerEnd: string, path: string, startLabel: string, endLabel: string) => void
-  setBgVariant: (variant: BackgroundVariant) => void;
-  deleteEdge: (id: string) => void;
+  editNode: (id: string, newData: any) => void
+  editEdge: (
+    id: string,
+    label: string,
+    markerStart: string,
+    markerEnd: string,
+    path: string,
+    startLabel: string,
+    endLabel: string
+  ) => void
+  setBgVariant: (variant: BackgroundVariant) => void
+  deleteEdge: (id: string) => void
 }
 
-export function OptionBar({ editNode, setBgVariant, editEdge, deleteEdge }: OptionBarProps) {
-  const [entitySelected, setEntitySelected] = useState<Node | Edge | null>(null);
-  let { isOpen } = useContext(SidebarContext);
+export function OptionBar({
+  editNode,
+  setBgVariant,
+  editEdge,
+  deleteEdge,
+}: OptionBarProps) {
+  const [entitySelected, setEntitySelected] = useState<Node | Edge | null>(null)
+  let { isOpen } = useContext(SidebarContext)
 
   useOnSelectionChange({
     onChange: (e) => {
-      const node = e.nodes[0];
-      const edge = e.edges[0];
-      if (entitySelected?.type === "floating" && !node) return;
-      if (node) setEntitySelected(node);
-      else if (edge) setEntitySelected(edge);
-      else setEntitySelected(null);
-    }
-  });
+      const node = e.nodes[0]
+      const edge = e.edges[0]
+      if (entitySelected?.type === "floating" && !node) return
+      if (node) setEntitySelected(node)
+      else if (edge) setEntitySelected(edge)
+      else setEntitySelected(null)
+    },
+  })
 
   function getOptions() {
-    if (!entitySelected) return <DefaultOptions setBgVariant={setBgVariant} />;
+    if (!entitySelected) return <DefaultOptions setBgVariant={setBgVariant} />
     if (entitySelected.type === "Class")
-      return <ClassOptions node={entitySelected as Node} editNode={editNode} />;
+      return <ClassOptions node={entitySelected as Node} editNode={editNode} />
     if (entitySelected.type === "floating")
-      return <EdgeOptions edge={entitySelected as Edge} editEdge={editEdge} deleteEdge={deleteEdge} />;
-    else
-      return <DefaultOptions setBgVariant={setBgVariant} />;
+      return (
+        <EdgeOptions
+          edge={entitySelected as Edge}
+          editEdge={editEdge}
+          deleteEdge={deleteEdge}
+        />
+      )
+    else return <DefaultOptions setBgVariant={setBgVariant} />
   }
 
   return (
-    <div className={`flex ${isOpen ? 'w-[400px]' : 'hidden'} flex-col border-l border-neutral-100 p-4 dark:border-white/5`}>
+    <div
+      className={`flex ${
+        isOpen ? "w-[400px]" : "hidden"
+      } flex-col border-l border-neutral-100 p-4 dark:border-white/5`}
+    >
       {getOptions()}
     </div>
   )

diff --git a/hooks/SidebarContext.ts b/hooks/SidebarContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from "react"
+
+const SidebarContext = createContext({
+  isOpen: true,
+  setIsOpen: (value: boolean) => {},
+})
+
+export default SidebarContext