Refactor: Move github stars context to darkContext

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

@@ -18,7 +18,8 @@ export default function Header(): JSX.Element {
   const { dark, setDark } = useContext(darkContext);
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();
-  const { logout, autoLogin, isAdmin, stars } = useContext(AuthContext);
+  const { logout, autoLogin, isAdmin } = useContext(AuthContext);
+  const { stars } = useContext(darkContext);
   const navigate = useNavigate();
 
   return (

src/frontend/src/contexts/authContext.tsx

@@ -19,8 +19,6 @@ const initialValue: AuthContextType = {
   authenticationErrorCount: 0,
   autoLogin: false,
   setAutoLogin: () => {},
-  stars: 0,
-  setStars: (stars) => 0,
 };
 
 export const AuthContext = createContext<AuthContextType>(initialValue);
@@ -32,7 +30,6 @@ export function AuthProvider({ children }): React.ReactElement {
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(null);
   const [autoLogin, setAutoLogin] = useState<boolean>(false);
-  const [stars, setStars] = useState<number>(0);
   const cookies = new Cookies();
 
   useEffect(() => {
@@ -40,11 +37,6 @@ export function AuthProvider({ children }): React.ReactElement {
     if (storedAccessToken) {
       setAccessToken(storedAccessToken);
     }
-    async function fetchStars() {
-      const starsCount = await getRepoStars("logspace-ai", "langflow");
-      setStars(starsCount);
-    }
-    fetchStars();
   }, []);
 
   useEffect(() => {
@@ -108,8 +100,6 @@ export function AuthProvider({ children }): React.ReactElement {
     // !! to convert string to boolean
     <AuthContext.Provider
       value={{
-        stars,
-        setStars,
         isAdmin,
         setIsAdmin,
         isAuthenticated: !!accessToken,

src/frontend/src/contexts/darkContext.tsx

@@ -1,9 +1,12 @@
 import { createContext, useEffect, useState } from "react";
 import { darkContextType } from "../types/typesContext";
+import { getRepoStars } from "../controllers/API";
 
 const initialValue = {
   dark: {},
   setDark: () => {},
+  stars: 0,
+  setStars: (stars) => 0,
 };
 
 export const darkContext = createContext<darkContextType>(initialValue);
@@ -12,6 +15,16 @@ export function DarkProvider({ children }) {
   const [dark, setDark] = useState(
     JSON.parse(window.localStorage.getItem("isDark")!) ?? false
   );
+  const [stars, setStars] = useState<number>(0);
+
+  useEffect(() => {
+    async function fetchStars() {
+      const starsCount = await getRepoStars("logspace-ai", "langflow");
+      setStars(starsCount);
+    }
+    fetchStars();
+  }, []);
+
   useEffect(() => {
     if (dark) {
       document.getElementById("body")!.classList.add("dark");
@@ -20,9 +33,12 @@ export function DarkProvider({ children }) {
     }
     window.localStorage.setItem("isDark", dark.toString());
   }, [dark]);
+
   return (
     <darkContext.Provider
       value={{
+        setStars,
+        stars,
         dark,
         setDark,
       }}

src/frontend/src/types/contexts/auth.ts

@@ -15,6 +15,4 @@ export type AuthContextType = {
   authenticationErrorCount: number;
   autoLogin: boolean;
   setAutoLogin: (autoLogin: boolean) => void;
-  stars: number;
-  setStars: (stars: number) => void;
 };

src/frontend/src/types/typesContext/index.ts

@@ -44,6 +44,8 @@ export type alertContextType = {
 export type darkContextType = {
   dark: {};
   setDark: (newState: {}) => void;
+  stars: number;
+  setStars: (stars: number) => void;
 };
 
 export type locationContextType = {