Fix: github stars on header always reloading

docker-compose.debug.yml

@@ -1,33 +1,33 @@
-version: "3.4"
-
-services:
-  backend:
-    volumes:
-      - ./:/app
-    build:
-      context: ./
-      dockerfile: ./dev.Dockerfile
-    command:
-      [
-        "sh",
-        "-c",
-        "pip install debugpy -t /tmp && python /tmp/debugpy --wait-for-client --listen 0.0.0.0:5678 -m uvicorn --factory src.backend.langflow.main:create_app --host 0.0.0.0 --port 7860 --reload",
-      ]
-    ports:
-      - 7860:7860
-      - 5678:5678
-    restart: on-failure
-
-  frontend:
-    build:
-      context: ./src/frontend
-      dockerfile: ./dev.Dockerfile
-      args:
-        - BACKEND_URL=http://backend:7860
-    ports:
-      - "3000:3000"
-    volumes:
-      - ./src/frontend/public:/home/node/app/public
-      - ./src/frontend/src:/home/node/app/src
-      - ./src/frontend/package.json:/home/node/app/package.json
-    restart: on-failure
+version: "3.4"
+
+services:
+  backend:
+    volumes:
+      - ./:/app
+    build:
+      context: ./
+      dockerfile: ./dev.Dockerfile
+    command:
+      [
+        "sh",
+        "-c",
+        "pip install debugpy -t /tmp && python /tmp/debugpy --wait-for-client --listen 0.0.0.0:5678 -m uvicorn --factory src.backend.langflow.main:create_app --host 0.0.0.0 --port 7860 --reload",
+      ]
+    ports:
+      - 7860:7860
+      - 5678:5678
+    restart: on-failure
+
+  frontend:
+    build:
+      context: ./src/frontend
+      dockerfile: ./dev.Dockerfile
+      args:
+        - BACKEND_URL=http://backend:7860
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./src/frontend/public:/home/node/app/public
+      - ./src/frontend/src:/home/node/app/src
+      - ./src/frontend/package.json:/home/node/app/package.json
+    restart: on-failure

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

@@ -18,20 +18,9 @@ export default function Header(): JSX.Element {
   const { dark, setDark } = useContext(darkContext);
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();
-  const { logout, autoLogin, isAdmin, setIsAdmin } = useContext(AuthContext);
+  const { logout, autoLogin, isAdmin, stars } = useContext(AuthContext);
   const navigate = useNavigate();
 
-  const [stars, setStars] = useState(null);
-
-  // Get and set numbers of stars on header
-  useEffect(() => {
-    async function fetchStars() {
-      const starsCount = await getRepoStars("logspace-ai", "langflow");
-      setStars(starsCount);
-    }
-    fetchStars();
-  }, []);
-
   return (
     <div className="header-arrangement">
       <div className="header-start-display">

src/frontend/src/contexts/authContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState } from "react";
 import Cookies from "universal-cookie";
-import { getLoggedUser } from "../controllers/API";
+import { getLoggedUser, getRepoStars } from "../controllers/API";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
 
@@ -19,6 +19,8 @@ const initialValue: AuthContextType = {
   authenticationErrorCount: 0,
   autoLogin: false,
   setAutoLogin: () => {},
+  stars: 0,
+  setStars: (stars) => 0,
 };
 
 export const AuthContext = createContext<AuthContextType>(initialValue);
@@ -30,6 +32,7 @@ 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(() => {
@@ -37,6 +40,11 @@ export function AuthProvider({ children }): React.ReactElement {
     if (storedAccessToken) {
       setAccessToken(storedAccessToken);
     }
+    async function fetchStars() {
+      const starsCount = await getRepoStars("logspace-ai", "langflow");
+      setStars(starsCount);
+    }
+    fetchStars();
   }, []);
 
   useEffect(() => {
@@ -100,6 +108,8 @@ export function AuthProvider({ children }): React.ReactElement {
     // !! to convert string to boolean
     <AuthContext.Provider
       value={{
+        stars,
+        setStars,
         isAdmin,
         setIsAdmin,
         isAuthenticated: !!accessToken,

src/frontend/src/routes.tsx

@@ -88,9 +88,9 @@ const Router = () => {
       <Route
         path="/admin"
         element={
-          <ProtectedAdminRoute>
+
             <AdminPage />
-          </ProtectedAdminRoute>
+
         }
       />
 

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

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