From beb02236059c7fa2aa7dee1e68f8a231240fa83a Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 4 Jan 2024 11:17:09 -0300 Subject: [PATCH] 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 | 15 ++--- src/frontend/package.json | 3 +- .../components/codeTabsComponent/index.tsx | 10 ++-- .../src/components/headerComponent/index.tsx | 20 +++++-- .../tagsSelectorComponent/index.tsx | 6 +- src/frontend/src/contexts/darkContext.tsx | 57 ------------------- src/frontend/src/contexts/index.tsx | 27 ++++----- .../src/modals/codeAreaModal/index.tsx | 6 +- src/frontend/src/stores/darkStore.ts | 34 +++++++++++ 9 files changed, 83 insertions(+), 95 deletions(-) delete mode 100644 src/frontend/src/contexts/darkContext.tsx create mode 100644 src/frontend/src/stores/darkStore.ts diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 94319da10..7b20a673b 100644 --- a/src/frontend/package-lock.json +++ b/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" } diff --git a/src/frontend/package.json b/src/frontend/package.json index d411b70eb..d5783e648 100644 --- a/src/frontend/package.json +++ b/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", diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 09b90860e..6a9228f2d 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/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(false); const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null); const [openAccordion, setOpenAccordion] = useState([]); - const { dark } = useContext(darkContext); - const {setNodes} = useContext(FlowsContext); + const dark = useDarkStore((state) => state.dark); + + const { setNodes } = useContext(FlowsContext); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); useEffect(() => { diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 77cd0ded8..16688a83d 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/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 (
diff --git a/src/frontend/src/components/tagsSelectorComponent/index.tsx b/src/frontend/src/components/tagsSelectorComponent/index.tsx index 22cf19edc..ce9da74ab 100644 --- a/src/frontend/src/components/tagsSelectorComponent/index.tsx +++ b/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(null); const fadeContainerRef = useRef(null); diff --git a/src/frontend/src/contexts/darkContext.tsx b/src/frontend/src/contexts/darkContext.tsx deleted file mode 100644 index 571a89b01..000000000 --- a/src/frontend/src/contexts/darkContext.tsx +++ /dev/null @@ -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(initialValue); - -export function DarkProvider({ children }) { - const [dark, setDark] = useState( - JSON.parse(window.localStorage.getItem("isDark")!) ?? false - ); - const [stars, setStars] = useState(0); - const [gradientIndex, setGradientIndex] = useState(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 ( - - {children} - - ); -} diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index e61102846..e9ca5babb 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/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 }) { - - - - - - - - {children} - - - - - - + + + + + + + {children} + + + + + diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index c700b701b..cba033acd 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/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(null); const { setErrorData, setSuccessData } = useContext(alertContext); const [error, setError] = useState<{ diff --git a/src/frontend/src/stores/darkStore.ts b/src/frontend/src/stores/darkStore.ts new file mode 100644 index 000000000..1acf37ead --- /dev/null +++ b/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((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 }); +});