Add recoil state

ui/src/app/profile/page.tsx

@@ -1,23 +1,26 @@
 'use client';
 
 import { me } from '@/api/auth';
-import { User } from '@/api/auth.types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { useRecoilState } from 'recoil';
+import { userState } from '@/state/auth';
 
 export default function Page() {
-  const [user, setUser] = useState<User | undefined>(undefined);
+  const [user, setUser] = useRecoilState(userState);
   const router = useRouter();
 
   useEffect(() => {
-    me().then((response) => {
-      if (response) {
-        setUser(response.user);
-      } else {
-        router.push('/');
-      }
-    });
-  }, []);
+    if (!user) {
+      me().then((response) => {
+        if (response) {
+          setUser(response.user);
+        } else {
+          router.push('/');
+        }
+      });
+    }
+  }, [user]);
 
   if (user) {
     return <div>Logged in as {user.email}</div>;

ui/src/components/Header/index.tsx

@@ -7,20 +7,21 @@ import { Avatar, Button, Card, Grid, Group, Menu, Text, UnstyledButton } from '@
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
 import { logout, me, refreshLoggedIn } from '@/api/auth';
-import { User } from '@/api/auth.types';
 import { useToggle } from '@mantine/hooks';
 import { HeaderModal } from './HeaderModal';
 import { HeaderItem, headerItems } from './headerItems';
+import { userState } from '@/state/auth';
+import { useRecoilState } from 'recoil';
 
 export default function Header() {
   const pathName = usePathname();
   const [modalType, toggle] = useToggle([undefined, 'login', 'register', 'reset']);
   const [headers, setHeaders] = useState<HeaderItem[]>([]);
-  const [user, setUser] = useState<User | undefined>(undefined);
+  const [user, setUser] = useRecoilState(userState);
   const [refreshId, setRefreshId] = useState<NodeJS.Timeout | undefined>(undefined);
 
   useEffect(() => {
-    if (Cookies.get('logged_in')) {
+    if (!user && Cookies.get('logged_in')) {
       me().then((response) => {
         if (response) {
           setRefreshId(refreshLoggedIn());
@@ -28,7 +29,7 @@ export default function Header() {
         }
       });
     }
-  }, []);
+  }, [user]);
 
   useEffect(() => {
     const h: HeaderItem[] = [];

ui/src/state/auth.ts

@@ -0,0 +1,12 @@
+import { User } from '@/api/auth.types';
+import { atom } from 'recoil';
+
+export const userState = atom({
+  key: 'userState',
+  default: undefined as User | undefined
+});
+
+export const isAuthenticatedState = atom({
+  key: 'isAuthenticatedState',
+  default: false
+});