app: fix site dont using cookies until reload

Pinheiro-Reis · Pinheiro-Reis · commit 85b0f5dc6f5f · 2025-11-11T07:51:15.000-03:00
diff --git a/app/src/app/(account)/page.tsx b/app/src/app/(account)/page.tsx
@@ -3,10 +3,12 @@
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { LoginForm } from '@/components/LoginForm'
+import { useUser } from '@/contexts/UserContext'
 import { login } from '@/services/auth'
 
 export default function LoginPage() {
     const router = useRouter()
+    const { refetch } = useUser() // Get the refetch function to update user data after login
     const [error, setError] = useState<string>('')
 
     const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -20,6 +22,7 @@ export default function LoginPage() {
 
         try {
             await login(email, password)
+            await refetch()
             router.push('/dashboard')
         } catch (err) {
             setError((err as Error).message || 'Erro ao realizar login')
diff --git a/app/src/app/(marketing)/about/page.tsx b/app/src/app/(marketing)/about/page.tsx
@@ -31,22 +31,40 @@ export default function About() {
             </section>
 
             <section className="mb-12 grid grid-cols-1 md:grid-cols-3 gap-8">
-                <Link href={NAVIGATION.STUDENTS} className="btn text-2xl text-center">
+                <Link
+                    href={NAVIGATION.STUDENTS}
+                    className="btn text-2xl text-center"
+                >
                     Consultar Alunos
                 </Link>
-                <Link href={NAVIGATION.PROFESSORS} className="btn text-2xl text-center">
+                <Link
+                    href={NAVIGATION.PROFESSORS}
+                    className="btn text-2xl text-center"
+                >
                     Consultar Professores
                 </Link>
-                <Link href={NAVIGATION.GROUPS} className="btn text-2xl text-center">
+                <Link
+                    href={NAVIGATION.GROUPS}
+                    className="btn text-2xl text-center"
+                >
                     Ver Turmas
                 </Link>
-                <Link href={NAVIGATION.SUBJECTS} className="btn text-2xl text-center">
+                <Link
+                    href={NAVIGATION.SUBJECTS}
+                    className="btn text-2xl text-center"
+                >
                     Disciplinas Oferecidas
                 </Link>
-                <Link href={NAVIGATION.ITINERARIES} className="btn text-2xl text-center">
+                <Link
+                    href={NAVIGATION.ITINERARIES}
+                    className="btn text-2xl text-center"
+                >
                     Itinerários Formativos
                 </Link>
-                <Link href={NAVIGATION.LESSONS} className="btn text-2xl text-center">
+                <Link
+                    href={NAVIGATION.LESSONS}
+                    className="btn text-2xl text-center"
+                >
                     Horários de Aula
                 </Link>
             </section>
diff --git a/app/src/app/AuthLayout.tsx b/app/src/app/AuthLayout.tsx
@@ -1,28 +1,40 @@
-"use client";
+'use client'
 
-import { getCookie } from "cookies-next";
-import { useEffect, useState } from "react";
-import { AppSidebar } from "@/components/AppSidebar";
-import SiteHeader from "@/components/SiteHeader";
-import { SidebarInset } from "@/components/ui/sidebar";
-import { Toaster } from "@/components/ui/sonner";
+import { getCookie } from 'cookies-next'
+import { useEffect, useState } from 'react'
+import { AppSidebar } from '@/components/AppSidebar'
+import SiteHeader from '@/components/SiteHeader'
+import { SidebarInset } from '@/components/ui/sidebar'
+import { Toaster } from '@/components/ui/sonner'
 
 export default function AuthLayout({
     children,
 }: {
-    children: React.ReactNode;
+    children: React.ReactNode
 }) {
-    const [isClient, setIsClient] = useState(false);
-    const [hasAccessToken, setHasAccessToken] = useState(false);
+    const [isClient, setIsClient] = useState(false)
+    const [hasAccessToken, setHasAccessToken] = useState(false)
 
     useEffect(() => {
-        setIsClient(true);
-        const accessToken = getCookie("access");
-        setHasAccessToken(!!accessToken);
-    }, []);
+        setIsClient(true)
+        const accessToken = getCookie('access')
+        setHasAccessToken(!!accessToken)
+
+        // Listen for storage events to detect when cookies are set from other tabs/windows
+        const handleStorageChange = () => {
+            const newToken = getCookie('access')
+            setHasAccessToken(!!newToken)
+        }
+
+        window.addEventListener('storage', handleStorageChange)
+
+        return () => {
+            window.removeEventListener('storage', handleStorageChange)
+        }
+    }, [])
 
     if (isClient && !hasAccessToken) {
-        return <main className="flex flex-1 flex-col">{children}</main>;
+        return <main className="flex flex-1 flex-col">{children}</main>
     }
 
     return (
@@ -36,5 +48,5 @@ export default function AuthLayout({
                 <Toaster />
             </SidebarInset>
         </>
-    );
+    )
 }
diff --git a/app/src/components/RoleDashboardCards/components/StaffDashboardCard.tsx b/app/src/components/RoleDashboardCards/components/StaffDashboardCard.tsx
@@ -1,6 +1,6 @@
 import { toast } from 'sonner'
-import { NAVIGATION } from '@/config'
 import { ButtonGridCard } from '@/components/ButtonGridCard'
+import { NAVIGATION } from '@/config'
 import { useUser } from '@/hooks/useUser'
 import type { DocumentRequest } from '@/types/documentRequest'
 import { RoleDashboardCardLayout } from './RoleDashboardCardLayout'
diff --git a/app/src/components/RoleDashboardCards/components/StudentDashboardCard.tsx b/app/src/components/RoleDashboardCards/components/StudentDashboardCard.tsx
@@ -1,7 +1,7 @@
 import { toast } from 'sonner'
-import { NAVIGATION, ROUTES } from '@/config'
 import { ButtonGridCard } from '@/components/ButtonGridCard'
 import { GradesTableCard } from '@/components/GradesTableCard'
+import { NAVIGATION, ROUTES } from '@/config'
 import { useUser } from '@/hooks/useUser'
 import type { DocumentRequest } from '@/types/documentRequest'
 import type { StudentProps } from '@/types/student'
diff --git a/app/src/config.ts b/app/src/config.ts
@@ -1,15 +1,15 @@
 // API URL configuration
-const API_BASE = process.env.NEXT_PUBLIC_PUBLIC_API_HOST || `/api/`;
+const API_BASE = process.env.NEXT_PUBLIC_PUBLIC_API_HOST || `/api/`
 const API_INTERNAL_BASE =
-    process.env.NEXT_PUBLIC_PRIVATE_API_HOST || `http://api:8000/api/`;
+    process.env.NEXT_PUBLIC_PRIVATE_API_HOST || `http://api:8000/api/`
 
 // Factory function to create routes based on a base URL
 function createRoutes(base: string) {
     // Django apps base URLs as variables
-    const usersUrl = `${base}users/`;
-    const studentsUrl = `${base}students/`;
-    const schoolUrl = `${base}school/`;
-    const resourcesUrl = `${base}resources/`;
+    const usersUrl = `${base}users/`
+    const studentsUrl = `${base}students/`
+    const schoolUrl = `${base}school/`
+    const resourcesUrl = `${base}resources/`
 
     return {
         // Main paths
@@ -41,13 +41,13 @@ function createRoutes(base: string) {
 
         // RESOURCES app subpaths
         RESOURCE_LOANS: `${resourcesUrl}loans/`,
-    };
+    }
 }
 
 // Frontend navigation routes
 const createNavigation = () => {
-    const apiPrefix = `/api/`;
-    const adminPrefix = `${apiPrefix}admin/`;
+    const apiPrefix = `/api/`
+    const adminPrefix = `${apiPrefix}admin/`
 
     return {
         // Main pages
@@ -78,12 +78,12 @@ const createNavigation = () => {
         ADMIN_SCHOOL_LESSON_PLAN: `${adminPrefix}school/lessonplan/`,
         ADMIN_REPORTS: `${adminPrefix}reports/`,
         ADMIN_AUTH_GROUP: `${adminPrefix}auth/group/`,
-    };
-};
+    }
+}
 
 // Export routes for application use
-const ROUTES = createRoutes(API_BASE);
-const ROUTES_INTERNAL = createRoutes(API_INTERNAL_BASE);
-const NAVIGATION = createNavigation();
+const ROUTES = createRoutes(API_BASE)
+const ROUTES_INTERNAL = createRoutes(API_INTERNAL_BASE)
+const NAVIGATION = createNavigation()
 
-export { ROUTES, ROUTES_INTERNAL, NAVIGATION };
+export { ROUTES, ROUTES_INTERNAL, NAVIGATION }
diff --git a/app/src/contexts/UserContext.tsx b/app/src/contexts/UserContext.tsx
@@ -36,7 +36,7 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
 
     const getUser = useCallback(
         async (forceRefetch: boolean = false): Promise<UserProps | null> => {
-            if (user && !forceRefetch) {
+            if (user && !forceRefetch && loading === false) {
                 // If user data already exists and we're not forcing a refetch, return it without making a new request
                 return user
             }
@@ -60,7 +60,14 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                     }
                 }
 
-                setLoading(true)
+                // Only set loading to true if this is not a force refetch
+                // This prevents flickering when user data is being revalidated
+                if (forceRefetch) {
+                    // Don't change the loading state when forcing refetch for smoother UX
+                } else {
+                    setLoading(true)
+                }
+
                 setError(null)
 
                 const response = await api.get<UserProps>(`${ROUTES.USER_INFO}`)
@@ -92,15 +99,26 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                     return null
                 }
             } finally {
-                setLoading(false)
+                // Only set loading to false if not forcing a refetch (to maintain current state during refresh)
+                if (!forceRefetch) {
+                    setLoading(false)
+                } else {
+                    // For forced refetch, ensure loading is eventually set to false
+                    setTimeout(() => {
+                        if (typeof window !== 'undefined') {
+                            setLoading(false)
+                        }
+                    }, 0)
+                }
             }
         },
-        [user],
+        [user, loading],
     )
 
-    const refetch = useCallback(() => {
-        setUser(null)
-        void getUser(true) // force refetch
+    const refetch = useCallback(async () => {
+        setLoading(true) // Set loading state during refetch
+        // Don't reset user to null during refetch to avoid UI flickering
+        return getUser(true) // force refetch and return the result
     }, [getUser])
 
     // Initialize user data on mount
@@ -132,6 +150,67 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
         }
     }, [getUser])
 
+    // Listen for token refresh events to update user info
+    useEffect(() => {
+        const handleTokenRefresh = () => {
+            if (typeof window !== 'undefined') {
+                const accessToken = getCookie('access')
+                if (accessToken) {
+                    // Token was refreshed, refetch user data
+                    void refetch()
+                }
+            }
+        }
+
+        if (typeof window !== 'undefined') {
+            window.addEventListener('tokenRefreshed', handleTokenRefresh)
+        }
+
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('tokenRefreshed', handleTokenRefresh)
+            }
+        }
+    }, [refetch])
+
+    // Listen for login and logout events to update user state accordingly
+    useEffect(() => {
+        const handleLoginCompleted = () => {
+            if (typeof window !== 'undefined') {
+                const accessToken = getCookie('access')
+                if (accessToken) {
+                    // New login, fetch user data
+                    void getUser(true) // force refetch
+                }
+            }
+        }
+
+        const handleLogoutCompleted = () => {
+            // Clear user data on logout
+            setUser(null)
+            setLoading(false)
+            setError(null)
+        }
+
+        if (typeof window !== 'undefined') {
+            window.addEventListener('loginCompleted', handleLoginCompleted)
+            window.addEventListener('logoutCompleted', handleLogoutCompleted)
+        }
+
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener(
+                    'loginCompleted',
+                    handleLoginCompleted,
+                )
+                window.removeEventListener(
+                    'logoutCompleted',
+                    handleLogoutCompleted,
+                )
+            }
+        }
+    }, [getUser])
+
     const value = {
         user,
         loading,
diff --git a/app/src/services/api.ts b/app/src/services/api.ts
@@ -31,6 +31,11 @@ api.interceptors.response.use(
 
                 setCookie('access', access, { path: '/', sameSite: 'lax' })
 
+                // Dispatch a custom event to notify the app about token refresh
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new CustomEvent('tokenRefreshed'))
+                }
+
                 if (!originalRequest.headers) {
                     originalRequest.headers = axios.AxiosHeaders.from({})
                 }
diff --git a/app/src/services/auth.ts b/app/src/services/auth.ts
@@ -3,6 +3,11 @@ import axios from 'axios'
 export async function login(email: string, password: string): Promise<void> {
     try {
         await axios.post('/auth/login', { email, password })
+
+        // Dispatch a custom event to notify the app about login
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('loginCompleted'))
+        }
     } catch (_error) {
         throw new Error('Login falhou. Verifique email e senha.')
     }
@@ -11,6 +16,11 @@ export async function login(email: string, password: string): Promise<void> {
 export async function logout(): Promise<void> {
     try {
         await axios.post('/auth/logout')
+
+        // Dispatch a custom event to notify the app about logout
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('logoutCompleted'))
+        }
     } catch (error) {
         console.error('Falha no logout:', error)
     }
