Add recoil to app. Update to track auth using global state.

jbouder · Jul 12, 2024 · 68f03e1 · 68f03e1
1 parent aa487c8
commit 68f03e1
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.52.1"
+    "react-hook-form": "^7.52.1",
+    "recoil": "0.7.7"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Footer } from "@components/footer/footer";
 import { Header } from "@components/header/header";
 import { Metadata } from "next";
+import RecoilContextProvider from "src/providers/recoil-context-provider";
 
 export const metadata: Metadata = {
   title: "Starter App - Next",
@@ -18,11 +19,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <Header />
-        <main id="mainSection" className="usa-section">
-          {children}
-        </main>
-        <Footer />
+        <RecoilContextProvider>
+          <Header />
+          <main id="mainSection" className="usa-section">
+            {children}
+          </main>
+          <Footer />
+        </RecoilContextProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,15 +2,19 @@
 import { Alert } from "@components/comet";
 import "./styles.scss";
 import useAuth from "@hooks/use-auth";
+import { getDisplayName } from "@utils/auth";
 
 export default function Home() {
-  const { isSignedIn } = useAuth();
+  const { isSignedIn, currentUserData } = useAuth();
 
   return (
     <div className="grid-container">
       <div className="grid-row">
         <div className="grid-col">
-          <h1>Welcome Guest</h1>
+          <h1>
+            Welcome{" "}
+            {currentUserData ? getDisplayName(currentUserData) : "Guest"}
+          </h1>
         </div>
       </div>
       {!isSignedIn && (

diff --git a/src/data/user.ts b/src/data/user.ts
@@ -0,0 +1,9 @@
+import { User } from "../types/user";
+
+export const userData: User = {
+  firstName: "John",
+  lastName: "Doe",
+  displayName: "John Doe",
+  emailAddress: "johndoe@test.com",
+  phoneNumber: "123-456-7890",
+};
diff --git a/src/hooks/use-auth.ts b/src/hooks/use-auth.ts
@@ -1,20 +1,29 @@
 import { useState } from "react";
+import { currentUser, signedIn } from "../store";
+import { useRecoilState } from "recoil";
+import { User } from "../types/user";
+import { userData } from "../data/user";
 
 const useAuth = () => {
-  const [isSignedIn, setIsSignedIn] = useState(false);
-  const [error] = useState("");
+  const [isSignedIn, setIsSignedIn] = useRecoilState<boolean>(signedIn);
+  const [error] = useState<string | null>();
+  const [currentUserData, setCurrentUserData] = useRecoilState<
+    User | undefined
+  >(currentUser);
 
   const signIn = () => {
     console.log("Sign in");
     setIsSignedIn(true);
+    setCurrentUserData(userData);
   };
 
   const signOut = () => {
     console.log("Sign out");
     setIsSignedIn(false);
+    setCurrentUserData({} as User);
   };
 
-  return { isSignedIn, error, signIn, signOut };
+  return { isSignedIn, currentUserData, error, signIn, signOut };
 };
 
 export default useAuth;
diff --git a/src/providers/recoil-context-provider.tsx b/src/providers/recoil-context-provider.tsx
@@ -0,0 +1,9 @@
+"use client";
+import React from "react";
+import { RecoilRoot } from "recoil";
+
+const RecoilContextProvider = ({ children }) => {
+  return <RecoilRoot>{children}</RecoilRoot>;
+};
+
+export default RecoilContextProvider;
diff --git a/src/store.ts b/src/store.ts
@@ -0,0 +1,14 @@
+import { User } from "./types/user";
+import { atom } from "recoil";
+
+const signedIn = atom({
+  key: "signedIn",
+  default: false,
+});
+
+const currentUser = atom<User | undefined>({
+  key: "currentUser",
+  default: undefined,
+});
+
+export { currentUser, signedIn };
diff --git a/src/types/user.ts b/src/types/user.ts
@@ -0,0 +1,7 @@
+export interface User {
+  firstName: string | undefined;
+  lastName: string | undefined;
+  displayName: string | undefined;
+  emailAddress: string | undefined;
+  phoneNumber: string | undefined;
+}
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
@@ -0,0 +1,13 @@
+import { User } from "../types/user";
+
+export const getDisplayName = (user: User): string => {
+  if (user.displayName) {
+    return user.displayName;
+  } else if (user.firstName && user.lastName) {
+    return `${user.firstName} ${user.lastName}`;
+  } else if (user.firstName && !user.lastName) {
+    return user.firstName;
+  } else {
+    return "";
+  }
+};