Types made as a context

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -7,9 +7,12 @@ import {
   snakeToNormalCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
+import { typesContext } from "../../contexts/typesContext";
+import { useContext } from "react";
 
 export default function GenericNode({ data }) {
   const Icon = nodeIcons[data.type];
+  const {types} = useContext(typesContext);
 
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
@@ -46,7 +49,7 @@ export default function GenericNode({ data }) {
                     
                     data={data}
                     color={
-                      nodeColors[data.types[data.node.template[t].type]] ??
+                      nodeColors[types[data.node.template[t].type]] ??
                       "black"
                     }
                     title={

space_flow/src/contexts/index.tsx

@@ -1,13 +1,16 @@
 import { AlertProvider } from "./alertContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
+import { TypesProvider } from "./typesContext";
 
 export default function ContextWrapper({ children }) {
   return (
     <>
       <LocationProvider>
         <PopUpProvider>
-          <AlertProvider>{children}</AlertProvider>
+          <TypesProvider>
+            <AlertProvider>{children}</AlertProvider>
+          </TypesProvider>
         </PopUpProvider>
       </LocationProvider>
     </>

space_flow/src/contexts/typesContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useState } from "react";
+
+type typesContextType=
+{
+    types: {};
+    setTypes:(newState:{})=>void;
+}
+
+const initialValue= {
+    types: {},
+    setTypes:()=>{},
+}
+
+export const typesContext = createContext<typesContextType>(initialValue);
+
+export function TypesProvider({children}){
+    const [types, setTypes] = useState({});
+    return (
+        <typesContext.Provider value={{ types, setTypes}}>
+            {children}
+        </typesContext.Provider>
+    )
+}

space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,20 +1,18 @@
 import { Bars2Icon, ComputerDesktopIcon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
-import { nodeColors, nodeIcons, nodeNames, toFirstUpperCase } from "../../../../utils";
-import { useEffect, useState } from "react";
+import {
+  nodeColors,
+  nodeIcons,
+  nodeNames,
+  toFirstUpperCase,
+} from "../../../../utils";
+import { useContext, useEffect, useState } from "react";
 import { getAll } from "../../../../controllers/NodesServices";
+import { typesContext } from "../../../../contexts/typesContext";
 
 export default function ExtraSidebar() {
   const [data, setData] = useState({});
-
-  const types = Object.keys(data).reduce((acc, curr) => {
-    Object.keys(data[curr]).forEach((c) => {
-      acc[c] = curr;
-      data[curr][c].base_classes?.forEach((b) => {acc[b] = curr;})
-    });
-    // console.log(acc);
-    return acc;
-  }, {str: 'advanced', bool: 'advanced', chatOutput: 'chat', chatInput: 'chat'});
+  const { setTypes } = useContext(typesContext);
 
   useEffect(() => {
     getAll().then((d) => {
@@ -23,6 +21,31 @@ export default function ExtraSidebar() {
     });
   }, []);
 
+  useEffect(() => {
+    if(data){
+      setTypes(
+        Object.keys(data).reduce(
+          (acc, curr) => {
+            Object.keys(data[curr]).forEach((c) => {
+              acc[c] = curr;
+              data[curr][c].base_classes?.forEach((b) => {
+                acc[b] = curr;
+              });
+            });
+            // console.log(acc);
+            return acc;
+          },
+          {
+            str: "advanced",
+            bool: "advanced",
+            chatOutput: "chat",
+            chatInput: "chat",
+          }
+        )
+      );
+    }
+  }, [data, setTypes])
+
   function onDragStart(event: React.DragEvent<any>, data) {
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("json", JSON.stringify(data));
@@ -46,7 +69,6 @@ export default function ExtraSidebar() {
                     onDragStart(event, {
                       type: d,
                       name: t,
-                      types: types,
                       node: data[d][t],
                     })
                   }
@@ -62,94 +84,89 @@ export default function ExtraSidebar() {
         </DisclosureComponent>
       ))}
       <DisclosureComponent
-          button={{ title: nodeNames['chat'], Icon: nodeIcons['chat'] }}
-        >
-          <div className="p-2 flex flex-col gap-2">
-            <div>
-              <div
-                draggable
-                className={" cursor-grab border-l-8 rounded-l-md"}
-                style={{ borderLeftColor: nodeColors['chat'] }}
-                onDragStart={(event) =>
-                  onDragStart(event, {
-                    type: 'chat',
-                    name: 'chatInput',
-                    types,
-                  })
-                }
-              >
-                <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                  <span className="text-black w-36 truncate">Chat Input</span>
-                  <Bars2Icon className="w-6 h-6 text-gray-400" />
-                </div>
+        button={{ title: nodeNames["chat"], Icon: nodeIcons["chat"] }}
+      >
+        <div className="p-2 flex flex-col gap-2">
+          <div>
+            <div
+              draggable
+              className={" cursor-grab border-l-8 rounded-l-md"}
+              style={{ borderLeftColor: nodeColors["chat"] }}
+              onDragStart={(event) =>
+                onDragStart(event, {
+                  type: "chat",
+                  name: "chatInput",
+                })
+              }
+            >
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+                <span className="text-black w-36 truncate">Chat Input</span>
+                <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
-            <div>
-              <div
-                draggable
-                className={" cursor-grab border-l-8 rounded-l-md"}
-                style={{ borderLeftColor: nodeColors['chat'] }}
-                onDragStart={(event) =>
-                  onDragStart(event, {
-                    type: 'chat',
-                    name: 'chatOutput',
-                    types,
-                  })
-                }
-              >
-                <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                  <span className="text-black w-36 truncate">Chat Output</span>
-                  <Bars2Icon className="w-6 h-6 text-gray-400" />
-                </div>
+          </div>
+          <div>
+            <div
+              draggable
+              className={" cursor-grab border-l-8 rounded-l-md"}
+              style={{ borderLeftColor: nodeColors["chat"] }}
+              onDragStart={(event) =>
+                onDragStart(event, {
+                  type: "chat",
+                  name: "chatOutput",
+                })
+              }
+            >
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+                <span className="text-black w-36 truncate">Chat Output</span>
+                <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
-            </div>
-        </DisclosureComponent>
+          </div>
+        </div>
+      </DisclosureComponent>
       <DisclosureComponent
-          button={{ title: nodeNames['advanced'], Icon: nodeIcons['advanced'] }}
-        >
-          <div className="p-2 flex flex-col gap-2">
-            <div>
-              <div
-                draggable
-                className={" cursor-grab border-l-8 rounded-l-md"}
-                style={{ borderLeftColor: nodeColors['advanced'] }}
-                onDragStart={(event) =>
-                  onDragStart(event, {
-                    type: 'advanced',
-                    name: 'str',
-                    types,
-                  })
-                }
-              >
-                <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                  <span className="text-black w-36 truncate">String</span>
-                  <Bars2Icon className="w-6 h-6 text-gray-400" />
-                </div>
+        button={{ title: nodeNames["advanced"], Icon: nodeIcons["advanced"] }}
+      >
+        <div className="p-2 flex flex-col gap-2">
+          <div>
+            <div
+              draggable
+              className={" cursor-grab border-l-8 rounded-l-md"}
+              style={{ borderLeftColor: nodeColors["advanced"] }}
+              onDragStart={(event) =>
+                onDragStart(event, {
+                  type: "advanced",
+                  name: "str",
+                })
+              }
+            >
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+                <span className="text-black w-36 truncate">String</span>
+                <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
-            <div>
-              <div
-                draggable
-                className={" cursor-grab border-l-8 rounded-l-md"}
-                style={{ borderLeftColor: nodeColors['advanced'] }}
-                onDragStart={(event) =>
-                  onDragStart(event, {
-                    type: 'advanced',
-                    name: 'bool',
-                    types,
-                  })
-                }
-              >
-                <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                  <span className="text-black w-36 truncate">Boolean</span>
-                  <Bars2Icon className="w-6 h-6 text-gray-400" />
-                </div>
+          </div>
+          <div>
+            <div
+              draggable
+              className={" cursor-grab border-l-8 rounded-l-md"}
+              style={{ borderLeftColor: nodeColors["advanced"] }}
+              onDragStart={(event) =>
+                onDragStart(event, {
+                  type: "advanced",
+                  name: "bool",
+                })
+              }
+            >
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+                <span className="text-black w-36 truncate">Boolean</span>
+                <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
-            </div>
-        </DisclosureComponent>
-        
+          </div>
+        </div>
+      </DisclosureComponent>
     </div>
   );
 }