Fixed typing and naming of zustand functions

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -31,7 +31,7 @@ import { FlowsContext } from "../../../../contexts/flowsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { postCustomComponentUpdate } from "../../../../controllers/API";
-import useFlow from "../../../../stores/flowManagerStore";
+import useFlowStore from "../../../../stores/flowStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import { NodeDataType } from "../../../../types/flow";
@@ -72,9 +72,9 @@ export default function ParameterComponent({
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { tabId, flows } = useContext(FlowsContext);
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
-  const setNode = useFlow((state) => state.setNode);
+  const setNode = useFlowStore((state) => state.setNode);
 
 
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -16,7 +16,7 @@ import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
-import useFlow from "../../stores/flowManagerStore";
+import useFlowStore from "../../stores/flowStore";
 
 export default function GenericNode({
   data,
@@ -30,8 +30,8 @@ export default function GenericNode({
   yPos: number;
 }): JSX.Element {
   const { types } = useContext(typesContext);
-  const deleteNode = useFlow((state) => state.deleteNode);
+  const deleteNode = useFlowStore((state) => state.deleteNode);
-  const setNode = useFlow((state) => state.setNode);
+  const setNode = useFlowStore((state) => state.setNode);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(data.node!.display_name);

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -12,7 +12,7 @@ import { FlowsState } from "../../../types/tabs";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
-import useFlow from "../../../stores/flowManagerStore";
+import useFlowStore from "../../../stores/flowStore";
 
 export default function BuildTrigger({
   open,
@@ -26,8 +26,8 @@ export default function BuildTrigger({
 }): JSX.Element {
   const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
   const { setTabsState, saveFlow } = useContext(FlowsContext);
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [isIconTouched, setIsIconTouched] = useState(false);
   const eventClick = isBuilding ? "pointer-events-none" : "";

src/frontend/src/components/chatComponent/index.tsx

@@ -9,14 +9,14 @@ import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
 import FormModal from "../../modals/formModal";
 import { NodeType } from "../../types/flow";
-import useFlow from "../../stores/flowManagerStore";
+import useFlowStore from "../../stores/flowStore";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
-  const isBuilt = useFlow((state) => state.isBuilt);
+  const isBuilt = useFlowStore((state) => state.isBuilt);
-  const setIsBuilt = useFlow((state) => state.setIsBuilt);
+  const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
-  const isPending = useFlow((state) => state.isPending);
+  const isPending = useFlowStore((state) => state.isPending);
   const { tabsState } =
     useContext(FlowsContext);
 

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -40,7 +40,7 @@ import { classNames } from "../../utils/utils";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
 import KeypairListComponent from "../keypairListComponent";
-import useFlow from "../../stores/flowManagerStore";
+import useFlowStore from "../../stores/flowStore";
 
 export default function CodeTabsComponent({
   flow,
@@ -55,7 +55,7 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const dark = useDarkStore((state) => state.dark);
 
-  const setNodes = useFlow((state) => state.setNodes);
+  const setNodes = useFlowStore((state) => state.setNodes);
 
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 

src/frontend/src/contexts/flowsContext.tsx

@@ -62,7 +62,7 @@ import {
 import { alertContext } from "./alertContext";
 import { AuthContext } from "./authContext";
 import { typesContext } from "./typesContext";
-import useFlow from "../stores/flowManagerStore";
+import useFlowStore from "../stores/flowStore";
 
 const uid = new ShortUniqueId({ length: 5 });
 
@@ -104,11 +104,11 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   const { setData } = useContext(typesContext);
   const [tabsState, setTabsState] = useState<FlowsState>({});
 
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
-  const reactFlowInstance = useFlow((state) => state.reactFlowInstance);
+  const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
-  const setPending = useFlow((state) => state.setPending);
+  const setPending = useFlowStore((state) => state.setPending);
-  const paste = useFlow((state) => state.paste);
+  const paste = useFlowStore((state) => state.paste);
 
   function refreshFlows() {
     setIsLoading(true);

src/frontend/src/contexts/undoRedoContext.tsx

@@ -13,7 +13,7 @@ import {
 } from "../types/typesContext";
 import { isWrappedWithClass } from "../utils/utils";
 import { FlowsContext } from "./flowsContext";
-import useFlow from "../stores/flowManagerStore";
+import useFlowStore from "../stores/flowStore";
 
 const initialValue = {
   undo: () => {},
@@ -32,10 +32,10 @@ export function UndoRedoProvider({ children }) {
   const { tabId, flows } =
     useContext(FlowsContext);
 
-  const setNodes = useFlow((state) => state.setNodes);
+  const setNodes = useFlowStore((state) => state.setNodes);
-  const setEdges = useFlow((state) => state.setEdges);
+  const setEdges = useFlowStore((state) => state.setEdges);
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
 
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -38,7 +38,7 @@ import {
 } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import useFlow from "../../stores/flowManagerStore";
+import useFlowStore from "../../stores/flowStore";
 
 const EditNodeModal = forwardRef(
   (
@@ -57,10 +57,10 @@ const EditNodeModal = forwardRef(
   ) => {
     const [myData, setMyData] = useState(data);
 
-    const setPending = useFlow((state) => state.setPending);
+    const setPending = useFlowStore((state) => state.setPending);
-    const edges = useFlow((state) => state.edges);
+    const edges = useFlowStore((state) => state.edges);
-    const setNode = useFlow((state) => state.setNode);
+    const setNode = useFlowStore((state) => state.setNode);
-    
+
     const { setModalContextOpen } = useContext(alertContext);
 
     function changeAdvanced(n) {

src/frontend/src/modals/formModal/index.tsx

@@ -25,7 +25,7 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
-import useFlow from "../../stores/flowManagerStore";
+import useFlowStore from "../../stores/flowStore";
 import { FlowsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
 
@@ -39,8 +39,8 @@ export default function FormModal({
   flow: FlowType;
 }): JSX.Element {
   const { tabsState, setTabsState } = useContext(FlowsContext);
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
   const [chatValue, setChatValue] = useState(() => {
     try {
       const { formKeysData } = tabsState[flow.id];

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -26,7 +26,7 @@ import { FlowsContext } from "../../../../contexts/flowsContext";
 import { locationContext } from "../../../../contexts/locationContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
-import useFlow from "../../../../stores/flowManagerStore";
+import useFlowStore from "../../../../stores/flowStore";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType } from "../../../../types/flow";
 import {
@@ -63,20 +63,20 @@ export default function Page({
 
   const { takeSnapshot } = useContext(undoRedoContext);
 
-  const reactFlowInstance = useFlow((state) => state.reactFlowInstance);
+  const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
-  const setReactFlowInstance = useFlow((state) => state.setReactFlowInstance);
+  const setReactFlowInstance = useFlowStore((state) => state.setReactFlowInstance);
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
-  const onNodesChange = useFlow((state) => state.onNodesChange);
+  const onNodesChange = useFlowStore((state) => state.onNodesChange);
-  const onEdgesChange = useFlow((state) => state.onEdgesChange);
+  const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
-  const onConnect = useFlow((state) => state.onConnect);
+  const onConnect = useFlowStore((state) => state.onConnect);
-  const setNodes = useFlow((state) => state.setNodes);
+  const setNodes = useFlowStore((state) => state.setNodes);
-  const setEdges = useFlow((state) => state.setEdges);
+  const setEdges = useFlowStore((state) => state.setEdges);
-  const deleteNode = useFlow((state) => state.deleteNode);
+  const deleteNode = useFlowStore((state) => state.deleteNode);
-  const deleteEdge = useFlow((state) => state.deleteEdge);
+  const deleteEdge = useFlowStore((state) => state.deleteEdge);
-  const setPending = useFlow((state) => state.setPending);
+  const setPending = useFlowStore((state) => state.setPending);
-  const isPending = useFlow((state) => state.isPending);
+  const isPending = useFlowStore((state) => state.isPending);
-  const paste = useFlow((state) => state.paste);
+  const paste = useFlowStore((state) => state.paste);
 
   const position = useRef({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =

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

@@ -10,7 +10,7 @@ import { typesContext } from "../../../../contexts/typesContext";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import ShareModal from "../../../../modals/shareModal";
-import useFlow from "../../../../stores/flowManagerStore";
+import useFlowStore from "../../../../stores/flowStore";
 import { useStoreStore } from "../../../../stores/storeStore";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import {
@@ -35,8 +35,8 @@ export default function ExtraSidebar(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
   const validApiKey = useStoreStore((state) => state.validApiKey);
 
-  const isBuilt = useFlow((state) => state.isBuilt);
+  const isBuilt = useFlowStore((state) => state.isBuilt);
-  const isPending = useFlow((state) => state.isPending);
+  const isPending = useFlowStore((state) => state.isPending);
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -13,7 +13,7 @@ import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import ShareModal from "../../../../modals/shareModal";
-import useFlow from "../../../../stores/flowManagerStore";
+import useFlowStore from "../../../../stores/flowStore";
 import { useStoreStore } from "../../../../stores/storeStore";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { FlowType } from "../../../../types/flow";
@@ -66,11 +66,11 @@ export default function NodeToolbarComponent({
   const isMinimal = canMinimize();
   const isGroup = data.node?.flow ? true : false;
 
-  const paste = useFlow((state) => state.paste);
+  const paste = useFlowStore((state) => state.paste);
-  const nodes = useFlow((state) => state.nodes);
+  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlow((state) => state.edges);
+  const edges = useFlowStore((state) => state.edges);
-  const setNodes = useFlow((state) => state.setNodes);
+  const setNodes = useFlowStore((state) => state.setNodes);
-  const setEdges = useFlow((state) => state.setEdges);
+  const setEdges = useFlowStore((state) => state.setEdges);
 
   const { saveComponent, flows, version } = useContext(FlowsContext);
   const { takeSnapshot } = useContext(undoRedoContext);

src/frontend/src/stores/darkStore.tsx

@@ -1,17 +1,6 @@
 import { create } from "zustand";
 import { getRepoStars } from "../controllers/API";
-
+import { DarkStoreType } from "../types/zustand/dark";
-type State = {
-  dark: boolean;
-  stars: number;
-  gradientIndex: number;
-};
-
-type Action = {
-  setDark: (dark: State["dark"]) => void;
-  setStars: (starts: State["stars"]) => void;
-  setGradientIndex: (gradientIndex: State["gradientIndex"]) => void;
-};
 
 function gradientIndexInitialState() {
   const min = 0;
@@ -19,7 +8,7 @@ function gradientIndexInitialState() {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export const useDarkStore = create<State & Action>((set) => ({
+export const useDarkStore = create<DarkStoreType>((set) => ({
   dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
   stars: 0,
   gradientIndex: gradientIndexInitialState(),

src/frontend/src/stores/flowStore.ts

@@ -27,33 +27,10 @@ import {
   scapeJSONParse,
   scapedJSONStringfy,
 } from "../utils/reactflowUtils";
-
+import { FlowStoreType } from "../types/zustand/flow";
-type RFState = {
-  reactFlowInstance: ReactFlowInstance | null;
-  setReactFlowInstance: (newState: ReactFlowInstance) => void;
-  nodes: Node[];
-  edges: Edge[];
-  onNodesChange: OnNodesChange;
-  onEdgesChange: OnEdgesChange;
-  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
-  setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
-  getNode: (id: string) => Node | undefined;
-  onConnect: OnConnect;
-  deleteNode: (nodeId: string | Array<string>) => void;
-  deleteEdge: (edgeId: string | Array<string>) => void;
-  paste: (
-    selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
-    ) => void;
-  isBuilt: boolean;
-  setIsBuilt: (isBuilt: boolean) => void;
-  isPending: boolean;
-  setPending: (pending: boolean) => void;
-};
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
-const useFlow = create<RFState>((set, get) => ({
+const useFlowStore = create<FlowStoreType>((set, get) => ({
   reactFlowInstance: null,
   setReactFlowInstance: (newState) => {
     set({ reactFlowInstance: newState });
@@ -245,4 +222,4 @@ const useFlow = create<RFState>((set, get) => ({
   },
 }));
 
-export default useFlow;
+export default useFlowStore;

src/frontend/src/stores/flowsManagerStore.ts

@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import { FlowsContextType } from "../types/tabs";
+import { FlowsManagerStoreType } from "../types/zustand/flowsManager";
+  
+const useFlowStore = create<FlowsManagerStoreType>((set, get) => ({
+    flows: [],
+}));
+
+export default useFlowStore;

src/frontend/src/stores/storeStore.tsx

@@ -1,21 +1,8 @@
 import { create } from "zustand";
 import { checkHasApiKey, checkHasStore } from "../controllers/API";
+import { StoreStoreType } from "../types/zustand/store";
 
-type State = {
+export const useStoreStore = create<StoreStoreType>((set) => ({
-  hasStore: boolean;
-  validApiKey: boolean;
-  hasApiKey: boolean;
-  loadingApiKey: boolean;
-};
-
-type Action = {
-  updateHasStore: (hasStore: State["hasStore"]) => void;
-  updateValidApiKey: (validApiKey: State["validApiKey"]) => void;
-  updateHasApiKey: (hasApiKey: State["hasApiKey"]) => void;
-  updateLoadingApiKey: (loadingApiKey: State["loadingApiKey"]) => void;
-};
-
-export const useStoreStore = create<State & Action>((set) => ({
   hasStore: true,
   validApiKey: false,
   hasApiKey: false,

src/frontend/src/types/zustand/dark/index.ts

@@ -0,0 +1,8 @@
+export type DarkStoreType = {
+    dark: boolean;
+    stars: number;
+    gradientIndex: number;
+    setDark: (dark: boolean) => void;
+    setStars: (stars: number) => void;
+    setGradientIndex: (gradientIndex: number) => void;
+  };

src/frontend/src/types/zustand/flow/index.ts

@@ -0,0 +1,25 @@
+import { Node, Edge, OnEdgesChange, OnNodesChange, ReactFlowInstance, OnConnect } from "reactflow";
+
+export type FlowStoreType = {
+    reactFlowInstance: ReactFlowInstance | null;
+    setReactFlowInstance: (newState: ReactFlowInstance) => void;
+    nodes: Node[];
+    edges: Edge[];
+    onNodesChange: OnNodesChange;
+    onEdgesChange: OnEdgesChange;
+    setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
+    setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
+    setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
+    getNode: (id: string) => Node | undefined;
+    onConnect: OnConnect;
+    deleteNode: (nodeId: string | Array<string>) => void;
+    deleteEdge: (edgeId: string | Array<string>) => void;
+    paste: (
+      selection: { nodes: any; edges: any },
+      position: { x: number; y: number; paneX?: number; paneY?: number }
+      ) => void;
+    isBuilt: boolean;
+    setIsBuilt: (isBuilt: boolean) => void;
+    isPending: boolean;
+    setPending: (pending: boolean) => void;
+  };

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -0,0 +1,7 @@
+import { XYPosition } from "reactflow";
+import { FlowType, NodeDataType } from "../../flow";
+import { FlowsState } from "../../tabs";
+
+export type FlowsManagerStoreType = {
+    flows: Array<FlowType>;
+  };

src/frontend/src/types/zustand/store/index.ts

@@ -0,0 +1,10 @@
+export type StoreStoreType = {
+  hasStore: boolean;
+  validApiKey: boolean;
+  hasApiKey: boolean;
+  loadingApiKey: boolean;
+  updateHasStore: (hasStore: boolean) => void;
+  updateValidApiKey: (validApiKey: boolean) => void;
+  updateHasApiKey: (hasApiKey: boolean) => void;
+  updateLoadingApiKey: (loadingApiKey: boolean) => void;
+};