Merge branch 'login' of https://github.com/logspace-ai/langflow into login

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

@@ -17,7 +17,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();
   }, []);
 
 
@@ -100,8 +92,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/contexts/index.tsx

@@ -9,11 +9,14 @@ import { LocationProvider } from "./locationContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 import { UndoRedoProvider } from "./undoRedoContext";
+import { BrowserRouter } from "react-router-dom";
+import { ApiInterceptor } from "../controllers/API/api";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context
   return (
     <>
+    <BrowserRouter>
       <AuthProvider>
         <TooltipProvider>
           <ReactFlowProvider>
@@ -21,6 +24,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
               <TypesProvider>
                 <LocationProvider>
                   <AlertProvider>
+                  <ApiInterceptor />
                     <SSEProvider>
                       <TabsProvider>
                         <UndoRedoProvider>{children}</UndoRedoProvider>
@@ -33,6 +37,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
           </ReactFlowProvider>
         </TooltipProvider>
       </AuthProvider>
+      </BrowserRouter>
     </>
   );
 }

src/frontend/src/controllers/API/api.tsx

@@ -24,7 +24,6 @@ function ApiInterceptor() {
       async (error: AxiosError) => {
         if (error.response?.status === 401) {
           const refreshToken = cookies.get("refresh_token");
-
           if (refreshToken) {
             authenticationErrorCount = authenticationErrorCount + 1;
             if (authenticationErrorCount > 3) {

src/frontend/src/index.tsx

@@ -17,10 +17,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <ContextWrapper>
-    <BrowserRouter>
       <App />
-      <ApiInterceptor />
-    </BrowserRouter>
   </ContextWrapper>
 );
 reportWebVitals();

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

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