From 11facd9badb28f3f1b459f796ed78671442df861 Mon Sep 17 00:00:00 2001
From: Benjamin Sherriff <ben.sherriff@blackcape.io>
Date: Fri, 20 Oct 2023 07:36:10 -0400
Subject: [PATCH] Add recoil state

---
 ui/src/app/profile/page.tsx        | 25 ++++++++++++++-----------
 ui/src/components/Header/index.tsx |  9 +++++----
 ui/src/state/auth.ts               | 12 ++++++++++++
 3 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/state/auth.ts

diff --git a/ui/src/app/profile/page.tsx b/ui/src/app/profile/page.tsx
index 121e814..96a50d0 100644
--- a/ui/src/app/profile/page.tsx
+++ b/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>;
diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
index 2076664..23ad73b 100644
--- a/ui/src/components/Header/index.tsx
+++ b/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[] = [];
diff --git a/ui/src/state/auth.ts b/ui/src/state/auth.ts
new file mode 100644
index 0000000..356cdd8
--- /dev/null
+++ b/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
+});