feat: added authcontext for logged User and userData

src/components/form/FormContainer.jsx

@@ -1,13 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
+import AuthContext from '../../context/AuthContext';
 import { Heading, Paragraph } from '../shared';
 import { Inputs, TextAreaInput } from '../shared/partials/FormInputs';
 import formimg from '../../assets/images/form-tickets.png';
 import { donation, feeCoverage, initialContent, inputContent, lastPartContent } from '../../data/formInformation';
 import { storeFormData } from '../../firebase/registration';
-import { loggedUser, logUserRegData } from '../../firebase/login';
+//import { loggedUser, logUserRegData } from '../../firebase/login';
 
 const FormContainer = () => {
-	const userData = logUserRegData;
+	const { currentUser, userData } = useContext(AuthContext);
+	//const userData = logUserRegData;
 
 	const [isValid, setValid] = useState({
 		recRollNumber: false,
@@ -51,7 +53,7 @@ const FormContainer = () => {
 	useEffect(() => {
 		if (userData) {
 			setFormData({
-				uid: userData?.uid?.toString() || '',
+				uid: currentUser?.uid?.toString() || '',
 				recRollNumber: userData?.rollNumber || '',
 				name: userData?.name || '',
 				email: userData?.email || '',
@@ -61,8 +63,8 @@ const FormContainer = () => {
 				prefix: userData?.prefix || '',
 				mobile: userData?.mobile || '',
 				regType: userData?.regType || '',
-				googlName: loggedUser?.name || '',
-				googleMail: loggedUser?.email || '',
+				googlName: currentUser?.name || '',
+				googleMail: currentUser?.email || '',
 			});
 		}
 	}, [userData]);

src/components/shared/NavBar.jsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
+import AuthContext from '../../context/AuthContext';
 import { Link } from 'react-router-dom';
 import Text from './typography/Text';
 import Navigation from '../../data/Navigation';
@@ -9,6 +10,8 @@ import Hamburger from './Hamburger';
 import { signInWithGoogle } from '../../firebase/login';
 
 function NavBar() {
+	const { setUserData } = useContext(AuthContext);
+
 	const { navItems, logo } = Navigation;
 	const [isNavOpen, setIsNavOpen] = useState(false);
 
@@ -40,7 +43,9 @@ function NavBar() {
 						style={{
 							boxShadow: '2px 2px 0px 0px #000, 3px 4px 9.2px 0px rgba(222, 222, 222, 0.48) inset',
 						}}
-						onClick={signInWithGoogle}>
+						onClick={() => {
+							setUserData(signInWithGoogle);
+						}}>
 						<Text variant='navButton'>Login</Text>
 					</Button>
 				</div>

src/context/AuthContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AuthContext = createContext();
+
+export default AuthContext;

src/data/formInformation.js

@@ -23,17 +23,11 @@ export const donation =
 	'Alumni donating/contributing more than ₹50,000 can pay "Individual Only (without family)" registration fee for their family registration and they do not need to pay "With Family (spouse + kids)" registration fee.';
 
 export const STAGES = {
-	TYPE_OF_USER: 'Are you an NITR Student?',
 	STUDENT_FORM: 'Register',
+	PAYMENT_STATUS: 'Paid',
 	REGISTRATION_CLOSED: 'Registration Closed',
 };
 
-export const INIT_STATE = {
-	value: '',
-	errorVisibility: false,
-	errorMessage: '',
-};
-
 export const currentUser = {
 	rollNumber: '',
 	name: '',

src/firebase/login.js

@@ -18,6 +18,8 @@ export const signInWithGoogle = () => {
 
 			logUserRegData = await getUserData(user.uid);
 			console.log('User Registration Data:', logUserRegData);
+
+			return { loggedUser, logUserRegData };
 		})
 		.catch(error => {
 			const errorMessage = error.message;
@@ -33,11 +35,10 @@ export const getUserData = async userId => {
 		if (!querySnapshot.empty) {
 			const userRegData = querySnapshot.docs[0].data();
 
-			//logUserData = userRegData;
 			return userRegData;
 		} else {
 			console.log('No such document!');
-			return null;
+			return {};
 		}
 	} catch (error) {
 		console.error('Error getting user data:', error);

src/pages/home.jsx

@@ -1,34 +1,40 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Button from '../components/shared/Button';
+import AuthContext from '../context/AuthContext';
 
 export default function Home() {
+	const [user, setUser] = useState({});
+
 	return (
-		<div className='container py-6'>
-			<h1 className='text-3xl font-bold'>1999 Reunion Tour</h1>
-			<div className='mt-4'>
-				<h2 className='text-xl font-bold'>How to contribute</h2>
-				<p>
-					1. Store content and other data in <code className='bg-gray-200 p-1 rounded-sm'>data</code> folder.
-				</p>
-				<p>
-					2. Store reusable components in <code className='bg-gray-200 p-1'>components</code> folder.
-				</p>
-				<p>
-					3. Store pages in <code className='bg-gray-200 p-1'>pages</code> folder.
-				</p>
-				<p>
-					4. Add custom styles in <code className='bg-gray-200 p-1'>tailwind.config.css</code> file.
-				</p>
-				<p>
-					5. Add shared ui in <code className='bg-gray-200 p-1'>ui</code> folder.
-				</p>
-				<p>
-					6. Add images and other assets in <code className='bg-gray-200 p-1'>assets</code> folder.
-				</p>
+		<AuthContext.Provider value={{ user, setUser }}>
+			<div className='container py-6'>
+				<h1 className='text-3xl font-bold'>1999 Reunion Tour</h1>
+				<div className='mt-4'>
+					<h2 className='text-xl font-bold'>How to contribute</h2>
+					<p>
+						1. Store content and other data in <code className='bg-gray-200 p-1 rounded-sm'>data</code> folder.
+					</p>
+					<p>
+						2. Store reusable components in <code className='bg-gray-200 p-1'>components</code> folder.
+					</p>
+					<p>
+						3. Store pages in <code className='bg-gray-200 p-1'>pages</code> folder.
+					</p>
+					<p>
+						4. Add custom styles in <code className='bg-gray-200 p-1'>tailwind.config.css</code> file.
+					</p>
+					<p>
+						5. Add shared ui in <code className='bg-gray-200 p-1'>ui</code> folder.
+					</p>
+					<p>
+						6. Add images and other assets in <code className='bg-gray-200 p-1'>assets</code> folder.
+					</p>
+				</div>
+				<Link to='/play'>
+					<Button className='text-white'>Go to playground</Button>
+				</Link>
 			</div>
-			<Link to='/play'>
-				<Button className='text-white'>Go to playground</Button>
-			</Link>
-		</div>
+		</AuthContext.Provider>
 	);
 }

src/pages/playground.jsx

@@ -1,42 +1,48 @@
-import { Heading, Paragraph, PersonalizedText, Text } from '../components/shared';
+import { useState } from 'react';
+import AuthContext from '../context/AuthContext.js';
 
+import { Heading, Paragraph, PersonalizedText, Text } from '../components/shared';
 import Footer from '../components/shared/marginals/footer.jsx';
 import FormContainer from '../components/form/FormContainer.jsx';
 import NavBar from '../components/shared/NavBar';
 
 export default function Playground() {
+	const [{ currentUser, userData }, setUserData] = useState({});
+
 	return (
-		<div>
-			<NavBar />
-			<div className='container py-6'>
-				<h1>Hero Text</h1>
-				<PersonalizedText>Personalized Text</PersonalizedText>
-				<Heading variant='h1'>Heading 1</Heading>
-				<Heading variant='h2'>Heading 2</Heading>
-				<Heading variant='h3'>Heading 3</Heading>
-				<Paragraph variant='body1'>Paragraph body1</Paragraph>
-				<Paragraph variant='body2'>Paragraph body2</Paragraph>
-				<Paragraph variant='body3'>Paragraph body3</Paragraph>
-				<Text variant='button'>Text button</Text>
+		<AuthContext.Provider value={{ currentUser, userData, setUserData }}>
+			<div>
+				<NavBar />
+				<div className='container py-6'>
+					<h1>Hero Text</h1>
+					<PersonalizedText>Personalized Text</PersonalizedText>
+					<Heading variant='h1'>Heading 1</Heading>
+					<Heading variant='h2'>Heading 2</Heading>
+					<Heading variant='h3'>Heading 3</Heading>
+					<Paragraph variant='body1'>Paragraph body1</Paragraph>
+					<Paragraph variant='body2'>Paragraph body2</Paragraph>
+					<Paragraph variant='body3'>Paragraph body3</Paragraph>
+					<Text variant='button'>Text button</Text>
 
-				<Text variant='nav'>Text nav</Text>
-				<Text variant='navButton'>Text navButton</Text>
-				<Text variant='footer'>Text footer</Text>
+					<Text variant='nav'>Text nav</Text>
+					<Text variant='navButton'>Text navButton</Text>
+					<Text variant='footer'>Text footer</Text>
 
-				<Heading variant='h1' className='mt-6'>
-					Colors
-				</Heading>
-				<ul>
-					<li className='text-primary'>Primary</li>
-					<li className='text-primary-foreground'>Primary Foreground</li>
-					<li className='text-primary-yellow'>Primary Yellow</li>
-					<li className='text-black'>Black</li>
-					<li className='text-black-foreground'>Black Foreground</li>
-				</ul>
-			</div>
+					<Heading variant='h1' className='mt-6'>
+						Colors
+					</Heading>
+					<ul>
+						<li className='text-primary'>Primary</li>
+						<li className='text-primary-foreground'>Primary Foreground</li>
+						<li className='text-primary-yellow'>Primary Yellow</li>
+						<li className='text-black'>Black</li>
+						<li className='text-black-foreground'>Black Foreground</li>
+					</ul>
+				</div>
 
-			<FormContainer />
-			<Footer />
-		</div>
+				<FormContainer />
+				<Footer />
+			</div>
+		</AuthContext.Provider>
 	);
 }