Updated fetch cookie

ui/src/components/Topbar/index.tsx

@@ -24,7 +24,7 @@ import {
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
 import { useForm } from '@mantine/form';
-import { login, register, logout, me, refresh } from '@/api/auth';
+import { login, register, logout, me, refreshLoggedIn } from '@/api/auth';
 import { User } from '@/api/auth.types';
 import { useToggle } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
@@ -76,23 +76,18 @@ export default function Topbar() {
   const [modalType, toggle] = useToggle([undefined, 'login', 'register', 'reset']);
   const [headers, setHeaders] = useState<HeaderItem[]>([]);
   const [user, setUser] = useState<User | undefined>(undefined);
+  const [refreshId, setRefreshId] = useState<NodeJS.Timeout | undefined>(undefined);
+
   useEffect(() => {
     if (Cookies.get('logged_in')) {
       me().then((response) => {
         if (response) {
+          setRefreshId(refreshLoggedIn());
           setUser(response.user);
         }
       });
-    } else {
-      refresh(true).then((response) => {
-        if (response) {
-          setUser(response.user);
-        } else {
-          setUser(undefined);
-        }
-      });
     }
-  }, [pathName]);
+  }, []);
 
   useEffect(() => {
     const h: HeaderItem[] = [];
@@ -172,6 +167,9 @@ export default function Topbar() {
                           const response = await logout();
                           if (response?.status == 200) {
                             Cookies.remove('logged_in');
+                            if (refreshId) {
+                              clearInterval(refreshId);
+                            }
                             setUser(undefined);
                           }
                         }}
@@ -193,7 +191,7 @@ export default function Topbar() {
           )}
         </div>
       </nav>
-      <LoginModal type={modalType} toggle={toggle} setUser={setUser} />
+      <LoginModal type={modalType} toggle={toggle} setUser={setUser} setRefreshId={setRefreshId} />
     </>
   );
 }
@@ -202,9 +200,10 @@ interface LoginModalProps {
   type?: string;
   toggle: any;
   setUser: (user: User) => void;
+  setRefreshId: (id: NodeJS.Timeout) => void;
 }
 
-function LoginModal({ type, toggle, setUser }: LoginModalProps) {
+function LoginModal({ type, toggle, setUser, setRefreshId }: LoginModalProps) {
   function passwordValidator(value: string) {
     if (value.trim().length < 10) {
       return 'Password must be at least 10 characters';
@@ -325,6 +324,7 @@ function LoginModal({ type, toggle, setUser }: LoginModalProps) {
                   const loginResponse = await login(values.email, values.password);
                   if (loginResponse) {
                     setUser(loginResponse.user);
+                    setRefreshId(refreshLoggedIn());
                     onClose();
                     notifications.update({
                       id,
@@ -400,6 +400,7 @@ function LoginModal({ type, toggle, setUser }: LoginModalProps) {
                 const response = await login(values.email, values.password);
                 if (response) {
                   setUser(response.user);
+                  setRefreshId(refreshLoggedIn());
                   onClose();
                 } else {
                   notifications.show({