chore(package.json): add zustand package as a dependency to the frontend package.json file

fix(codeTabsComponent): remove unused imports and update import for FlowsContext

fix(headerComponent): remove unused imports and update import for FlowsContext, useDarkStore, and remove darkContext

fix(tagsSelectorComponent): remove unused import and update import for useDarkStore

refactor(darkStore): move darkContext functionality to a separate zustand store called darkStore

refactor(index.tsx): remove import for darkContext and DarkProvider

fix(codeAreaModal): remove unused imports and update import for useDarkStore

feat(darkStore): add zustand store for managing dark mode state, stars count, and gradient index

feat(darkStore): fetch and set stars count from API in darkStore

feat(darkStore): generate and set random gradient index in darkStore

feat(darkStore): add updateDark, updateStars, and updateGradientIndex actions to darkStore

feat(darkStore): initialize dark mode state, stars count, and gradient index in darkStore

feat(darkStore): fetch and set stars count from API in darkStore

feat(darkStore): generate and set random gradient index in darkStore

feat(darkStore): add updateDark, updateStars, and updateGradientIndex actions to darkStore

feat(darkStore): initialize dark mode state, stars count, and gradient index in darkStore

src/frontend/package-lock.json

@@ -71,7 +71,8 @@
         "tailwindcss-animate": "^1.0.7",
         "uuid": "^9.0.0",
         "vite-plugin-svgr": "^3.2.0",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "zustand": "^4.4.7"
       },
       "devDependencies": {
         "@playwright/test": "^1.38.0",
@@ -11719,9 +11720,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.6.tgz",
-      "integrity": "sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==",
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz",
+      "integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
       },
@@ -19291,9 +19292,9 @@
       "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg=="
     },
     "zustand": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.6.tgz",
-      "integrity": "sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==",
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz",
+      "integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==",
       "requires": {
         "use-sync-external-store": "1.2.0"
       }

src/frontend/package.json

@@ -66,7 +66,8 @@
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.0",
     "vite-plugin-svgr": "^3.2.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.4.7"
   },
   "scripts": {
     "dev:docker": "vite --host 0.0.0.0",

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

@@ -28,8 +28,8 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
-import { darkContext } from "../../contexts/darkContext";
-import { typesContext } from "../../contexts/typesContext";
+import { FlowsContext } from "../../contexts/flowsContext";
+import { useDarkStore } from "../../stores/darkStore";
 import { codeTabsPropsType } from "../../types/components";
 import {
   convertObjToArray,
@@ -41,7 +41,6 @@ import { classNames } from "../../utils/utils";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
 import KeypairListComponent from "../keypairListComponent";
-import { FlowsContext } from "../../contexts/flowsContext";
 
 export default function CodeTabsComponent({
   flow,
@@ -54,8 +53,9 @@ export default function CodeTabsComponent({
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
-  const { dark } = useContext(darkContext);
-  const {setNodes} = useContext(FlowsContext);
+  const dark = useDarkStore((state) => state.dark);
+
+  const { setNodes } = useContext(FlowsContext);
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   useEffect(() => {

src/frontend/src/components/headerComponent/index.tsx

@@ -1,14 +1,14 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
-import { darkContext } from "../../contexts/darkContext";
 import { StoreContext } from "../../contexts/storeContext";
 
 import { FlowsContext } from "../../contexts/flowsContext";
+import { useDarkStore } from "../../stores/darkStore";
 import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
@@ -25,14 +25,26 @@ import MenuBar from "./components/menuBar";
 
 export default function Header(): JSX.Element {
   const { flows, tabId } = useContext(FlowsContext);
-  const { dark, setDark } = useContext(darkContext);
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();
   const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext);
   const { hasStore } = useContext(StoreContext);
-  const { stars, gradientIndex } = useContext(darkContext);
   const navigate = useNavigate();
 
+  const dark = useDarkStore((state) => state.dark);
+  const setDark = useDarkStore((state) => state.updateDark);
+  const stars = useDarkStore((state) => state.stars);
+  const gradientIndex = useDarkStore((state) => state.gradientIndex);
+
+  useEffect(() => {
+    if (dark) {
+      document.getElementById("body")!.classList.add("dark");
+    } else {
+      document.getElementById("body")!.classList.remove("dark");
+    }
+    window.localStorage.setItem("isDark", dark.toString());
+  }, [dark]);
+
   return (
     <div className="header-arrangement">
       <div className="header-start-display lg:w-[30%]">

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -1,5 +1,5 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { darkContext } from "../../contexts/darkContext";
+import { useEffect, useRef, useState } from "react";
+import { useDarkStore } from "../../stores/darkStore";
 import { cn } from "../../utils/utils";
 import { Badge } from "../ui/badge";
 
@@ -24,7 +24,7 @@ export function TagsSelector({
         : selectedTags.filter((_, i) => i !== index);
     setSelectedTags(newArray);
   };
-  const { dark } = useContext(darkContext);
+  const dark = useDarkStore((state) => state.dark);
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fadeContainerRef = useRef<HTMLDivElement>(null);

src/frontend/src/contexts/darkContext.tsx

@@ -1,57 +0,0 @@
-import { createContext, useEffect, useState } from "react";
-import { getRepoStars } from "../controllers/API";
-import { darkContextType } from "../types/typesContext";
-
-const initialValue = {
-  dark: {},
-  setDark: () => {},
-  stars: 0,
-  setStars: (stars) => 0,
-  gradientIndex: 0,
-  setGradientIndex: () => 0,
-};
-
-export const darkContext = createContext<darkContextType>(initialValue);
-
-export function DarkProvider({ children }) {
-  const [dark, setDark] = useState(
-    JSON.parse(window.localStorage.getItem("isDark")!) ?? false
-  );
-  const [stars, setStars] = useState<number>(0);
-  const [gradientIndex, setGradientIndex] = useState<number>(0);
-
-  useEffect(() => {
-    async function fetchStars() {
-      const starsCount = await getRepoStars("logspace-ai", "langflow");
-      setStars(starsCount);
-    }
-    fetchStars();
-    const min = 0;
-    const max = 30;
-    setGradientIndex(Math.floor(Math.random() * (max - min + 1)) + min);
-  }, []);
-
-  useEffect(() => {
-    if (dark) {
-      document.getElementById("body")!.classList.add("dark");
-    } else {
-      document.getElementById("body")!.classList.remove("dark");
-    }
-    window.localStorage.setItem("isDark", dark.toString());
-  }, [dark]);
-
-  return (
-    <darkContext.Provider
-      value={{
-        setStars,
-        stars,
-        dark,
-        setDark,
-        setGradientIndex,
-        gradientIndex,
-      }}
-    >
-      {children}
-    </darkContext.Provider>
-  );
-}

src/frontend/src/contexts/index.tsx

@@ -6,7 +6,6 @@ import { ApiInterceptor } from "../controllers/API/api";
 import { SSEProvider } from "./SSEContext";
 import { AlertProvider } from "./alertContext";
 import { AuthProvider } from "./authContext";
-import { DarkProvider } from "./darkContext";
 import { FlowsProvider } from "./flowsContext";
 import { LocationProvider } from "./locationContext";
 import { StoreProvider } from "./storeContext";
@@ -23,20 +22,18 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
           <AuthProvider>
             <TooltipProvider>
               <ReactFlowProvider>
-                <DarkProvider>
-                  <TypesProvider>
-                    <LocationProvider>
-                      <ApiInterceptor />
-                      <SSEProvider>
-                        <FlowsProvider>
-                          <UndoRedoProvider>
-                            <StoreProvider>{children}</StoreProvider>
-                          </UndoRedoProvider>
-                        </FlowsProvider>
-                      </SSEProvider>
-                    </LocationProvider>
-                  </TypesProvider>
-                </DarkProvider>
+                <TypesProvider>
+                  <LocationProvider>
+                    <ApiInterceptor />
+                    <SSEProvider>
+                      <FlowsProvider>
+                        <UndoRedoProvider>
+                          <StoreProvider>{children}</StoreProvider>
+                        </UndoRedoProvider>
+                      </FlowsProvider>
+                    </SSEProvider>
+                  </LocationProvider>
+                </TypesProvider>
               </ReactFlowProvider>
             </TooltipProvider>
           </AuthProvider>

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -11,9 +11,8 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
-import { darkContext } from "../../contexts/darkContext";
-import { typesContext } from "../../contexts/typesContext";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
+import { useDarkStore } from "../../stores/darkStore";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
 
@@ -27,7 +26,8 @@ export default function CodeAreaModal({
   readonly = false,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
-  const { dark } = useContext(darkContext);
+  const dark = useDarkStore((state) => state.dark);
+
   const [height, setHeight] = useState<string | null>(null);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [error, setError] = useState<{

src/frontend/src/stores/darkStore.ts

@@ -0,0 +1,34 @@
+import { create } from "zustand";
+import { getRepoStars } from "../controllers/API";
+
+type State = {
+  dark: boolean;
+  stars: number;
+  gradientIndex: number;
+};
+
+type Action = {
+  updateDark: (dark: State["dark"]) => void;
+  updateStars: (starts: State["stars"]) => void;
+  updateGradientIndex: (gradientIndex: State["gradientIndex"]) => void;
+};
+
+function gradientIndexInitialState() {
+  const min = 0;
+  const max = 30;
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export const useDarkStore = create<State & Action>((set) => ({
+  dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
+  stars: 0,
+  gradientIndex: gradientIndexInitialState(),
+  updateDark: (dark) => set(() => ({ dark: dark })),
+  updateStars: (starts) => set(() => ({ stars: starts })),
+  updateGradientIndex: (gradientIndex) =>
+    set(() => ({ gradientIndex: gradientIndex })),
+}));
+
+getRepoStars("logspace-ai", "langflow").then((res) => {
+  useDarkStore.setState({ stars: res });
+});