Refactored stars and version refreshing

src/frontend/src/App.tsx

@@ -17,7 +17,7 @@ import {
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
 import { locationContext } from "./contexts/locationContext";
-import { getHealth, getVersion } from "./controllers/API";
+import { getHealth, getRepoStars, getVersion } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useTypesStore } from "./stores/typesStore";
@@ -132,10 +132,14 @@ export default function App() {
 
   const { isAuthenticated } = useContext(AuthContext);
   const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
-  const setVersion = useDarkStore((state) => state.setVersion);
   const getTypes = useTypesStore((state) => state.getTypes);
+  const refreshVersion = useDarkStore((state) => state.refreshVersion);
+  const refreshStars = useDarkStore((state) => state.refreshStars);
 
   useEffect(() => {
+    refreshStars();
+    refreshVersion();
+
     // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
     if (isAuthenticated === true) {
       // get data from db
@@ -144,9 +148,6 @@ export default function App() {
       });
     }
 
-    getVersion().then((data) => {
-      setVersion(data.version);
-    });
   }, [isAuthenticated]);
 
   useEffect(() => {

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

@@ -33,7 +33,6 @@ export default function Header(): JSX.Element {
   const dark = useDarkStore((state) => state.dark);
   const setDark = useDarkStore((state) => state.setDark);
   const stars = useDarkStore((state) => state.stars);
-  const gradientIndex = useDarkStore((state) => state.gradientIndex);
 
   useEffect(() => {
     if (dark) {
@@ -167,7 +166,7 @@ export default function Header(): JSX.Element {
                   <button
                     className={
                       "h-7 w-7 rounded-full focus-visible:outline-0 " +
-                      (userData?.profile_image ?? gradients[gradientIndex])
+                      (userData?.profile_image ?? gradients[parseInt(userData?.id ?? "", 30) % gradients.length])
                     }
                   />
                 </DropdownMenuTrigger>

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -98,6 +98,7 @@ export default function ProfileSettingsPage(): JSX.Element {
                     Password{" "}
                   </Form.Label>
                   <InputComponent
+                    id="pasword"
                     onChange={(value) => {
                       handleInput({ target: { name: "password", value } });
                     }}
@@ -119,6 +120,7 @@ export default function ProfileSettingsPage(): JSX.Element {
                   </Form.Label>
 
                   <InputComponent
+                    id="cnfPassword"
                     onChange={(value) => {
                       handleInput({ target: { name: "cnfPassword", value } });
                     }}
@@ -144,9 +146,9 @@ export default function ProfileSettingsPage(): JSX.Element {
                 <GradientChooserComponent
                   value={
                     gradient == ""
-                      ? userData!.profile_image ??
+                      ? userData?.profile_image ??
                         gradients[
-                          parseInt(userData!.id ?? "", 30) % gradients.length
+                          parseInt(userData?.id ?? "", 30) % gradients.length
                         ]
                       : gradient
                   }

src/frontend/src/stores/darkStore.tsx

@@ -1,25 +1,20 @@
 import { create } from "zustand";
-import { getRepoStars } from "../controllers/API";
+import { getRepoStars, getVersion } from "../controllers/API";
 import { DarkStoreType } from "../types/zustand/dark";
 
-function gradientIndexInitialState() {
-  const min = 0;
-  const max = 30;
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
 export const useDarkStore = create<DarkStoreType>((set) => ({
   dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
   stars: 0,
-  gradientIndex: gradientIndexInitialState(),
   version: "",
-  setVersion: (version) => set(() => ({ version: version })),
   setDark: (dark) => set(() => ({ dark: dark })),
-  setStars: (starts) => set(() => ({ stars: starts })),
-  setGradientIndex: (gradientIndex) =>
-    set(() => ({ gradientIndex: gradientIndex })),
+  refreshVersion: () => {
+    getVersion().then((data) => {
+      set(() => ({ version: data.version }));
+    });
+  },
+  refreshStars: () => {
+    getRepoStars("logspace-ai", "langflow").then((res) => {
+      set(() => ({ stars: res }));
+    });
+  },
 }));
-
-getRepoStars("logspace-ai", "langflow").then((res) => {
-  useDarkStore.setState({ stars: res });
-});

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

@@ -1,10 +1,8 @@
 export type DarkStoreType = {
   dark: boolean;
   stars: number;
-  gradientIndex: number;
   version: string;
-  setVersion: (version: string) => void;
   setDark: (dark: boolean) => void;
-  setStars: (stars: number) => void;
-  setGradientIndex: (gradientIndex: number) => void;
+  refreshVersion: () => void;
+  refreshStars: () => void;
 };