adding user api functions and display confirm message behavior

app/api.jsx

@@ -0,0 +1,23 @@
+import { doc, getDoc, updateDoc } from 'firebase/firestore';
+import { db } from '@/app/firebase';
+
+export function updateUser(uid) {
+	const userDocRef = doc(db, 'authUsers', uid);
+	updateDoc(userDocRef, {
+		closedConfirmationMessage: true,
+	});
+}
+
+export function getUser(uid) {
+	const userDocRef = doc(db, 'authUsers', uid);
+	return getDoc(userDocRef)
+		.then((userDocSnapshot) => {
+			// Extract the custom fields from the document data
+			const userData = userDocSnapshot.data();
+			console.log(userData);
+			return userData;
+		})
+		.catch((error) => {
+			console.error('Error getting user data:', error);
+		});
+}

app/auth/useAuth.jsx

@@ -3,7 +3,6 @@ import { UserContext } from '../context/user';
 
 export const useAuth = () => {
 	const { user } = useContext(UserContext);
-	console.log(user, UserContext);
 
 	return { user };
 };

app/context/UserProvider.jsx

@@ -10,6 +10,11 @@ export function UserProvider({ children }) {
 	useEffect(() => {
 		const listen = onAuthStateChanged(auth, (fireBaseUser) => {
 			if (fireBaseUser) {
+				console.log(
+					fireBaseUser,
+					fireBaseUser.displayName,
+					fireBaseUser.closedConfirmationMessage
+				);
 				setUser(fireBaseUser);
 			} else {
 				setUser(null);

app/page.js

@@ -3,14 +3,42 @@ import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 import { useAuth } from './auth/useAuth';
 import { UserProvider } from './context/UserProvider';
+import { updateUser, getUser } from './api';
+import ConfirmationMessage from '@/components/ConfirmationMessage';
 export default function Home() {
 	const { user } = useAuth();
+	const [displayConfirmationMessage, setDisplayConfirmationMessage] =
+		useState(false);
+
+	useEffect(() => {
+		if (user) {
+			getUser(user.uid).then((userData) => {
+				setDisplayConfirmationMessage(!userData.closedConfirmationMessage);
+			});
+		}
+	}, [user]);
+
+	async function hideConfirmationMessage() {
+		setDisplayConfirmationMessage(false);
+		updateUser(user.uid);
+	}
+
 	return (
 		<UserProvider>
 			<div>
-				Home
+				<h1>Home</h1>
+
 				{!!user ? (
-					<div>Hi, {user.displayName}</div>
+					<>
+						{displayConfirmationMessage && (
+							<ConfirmationMessage
+								userDisplayName={user.displayName}
+								hideConfirmationMessage={hideConfirmationMessage}
+							/>
+						)}
+
+						<div>Hi, {user.displayName}</div>
+					</>
 				) : (
 					<div>no user authenticated</div>
 				)}

components/ConfirmationMessage.js

@@ -0,0 +1,21 @@
+export default function ConfirmationMessage({
+	userDisplayName,
+	hideConfirmationMessage,
+}) {
+	return (
+		<div className=' border border-black'>
+			<h1>Welcome {userDisplayName} </h1>
+			<p>
+				You can now start logging your reflections. Let’s get started with your
+				first one!
+			</p>
+			<p>Select your current career emotion from the icons on our homepage.</p>
+			<p>Explore prompts and content tailored to your chosen emotion.</p>
+			<p>
+				Gain clarity on your goals and identify areas for focus through these
+				exercises.
+			</p>
+			<button onClick={hideConfirmationMessage}>Get started</button>
+		</div>
+	);
+}

components/auth/registerForm.tsx

@@ -97,6 +97,7 @@ const RegisterForm = () => {
 							setDoc(doc(db, 'authUsers', authUser.user.uid), {
 								email: emailAddress,
 								displayName: displayName,
+								closedConfirmationMessage: false,
 							})
 								.then((docRef: any) => {
 									router.push('/');