From 91eb16a117b285464409b8a136a6d62ccd4bc0d2 Mon Sep 17 00:00:00 2001
From: AADESHak007 <123197632+AADESHak007@users.noreply.github.com>
Date: Thu, 7 Nov 2024 21:03:00 +0530
Subject: [PATCH] added recoil logic
---
package-lock.json | 25 +++++++++++++++
package.json | 1 +
src/atoms/authState.js | 27 ++++++++++++++++
src/components/Navbar.jsx | 7 +++--
src/components/SignIn.jsx | 6 ++--
src/components/SignUp.jsx | 5 +--
src/contexts/authContext/index.jsx | 50 ++++++++++--------------------
src/main.jsx | 9 ++++--
8 files changed, 87 insertions(+), 43 deletions(-)
create mode 100644 src/atoms/authState.js
diff --git a/package-lock.json b/package-lock.json
index 73792b6..57f0d9f 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
"react-icons": "^5.3.0",
"react-router-dom": "^6.27.0",
"react-toastify": "^9.1.3",
+ "recoil": "^0.7.7",
"uuid": "^9.0.1"
},
"devDependencies": {
@@ -4249,6 +4250,11 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"dev": true
},
+ "node_modules/hamt_plus": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+ "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+ },
"node_modules/has-bigints": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -8696,6 +8702,25 @@
"node": ">=8.10.0"
}
},
+ "node_modules/recoil": {
+ "version": "0.7.7",
+ "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+ "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+ "dependencies": {
+ "hamt_plus": "1.0.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.13.1"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ }
+ },
"node_modules/reflect.getprototypeof": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
diff --git a/package.json b/package.json
index 8c89825..3a03ead 100755
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"react-icons": "^5.3.0",
"react-router-dom": "^6.27.0",
"react-toastify": "^9.1.3",
+ "recoil": "^0.7.7",
"uuid": "^9.0.1"
},
"devDependencies": {
diff --git a/src/atoms/authState.js b/src/atoms/authState.js
new file mode 100644
index 0000000..e717668
--- /dev/null
+++ b/src/atoms/authState.js
@@ -0,0 +1,27 @@
+// authState.js
+import { atom } from "recoil";
+
+export const currentUserState = atom({
+ key: "currentUserState",
+ default: null,
+});
+
+export const userLoggedInState = atom({
+ key: "userLoggedInState",
+ default: false,
+});
+
+export const isEmailUserState = atom({
+ key: "isEmailUserState",
+ default: false,
+});
+
+export const isGoogleUserState = atom({
+ key: "isGoogleUserState",
+ default: false,
+});
+
+export const authLoadingState = atom({
+ key: "authLoadingState",
+ default: true,
+});
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c310aad..c1eda3d 100755
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,11 +1,12 @@
import React from "react";
import { useNavigate } from "react-router-dom";
-import { useAuth } from "../contexts/authContext/index";
import UserAccount from "./UserAccount";
+import { useRecoilValue } from "recoil";
+import { currentUserState, userLoggedInState } from "../atoms/authState";
const Navbar = () => {
- const { currentUser } = useAuth();
- const { userLoggedIn } = useAuth();
+ const currentUser = useRecoilValue(currentUserState);
+ const userLoggedIn = useRecoilValue(userLoggedInState);
const [isVisible, setIsVisible] = React.useState(false);
const navigate = useNavigate();
// function to download passwords
diff --git a/src/components/SignIn.jsx b/src/components/SignIn.jsx
index de2e168..9ecc6a6 100644
--- a/src/components/SignIn.jsx
+++ b/src/components/SignIn.jsx
@@ -1,11 +1,13 @@
import { useState } from 'react';
import { Link, Navigate } from 'react-router-dom';
import { doSignInWithEmailAndPassword, doSignInWithGoogle } from '../firebase/auth';
-import { useAuth } from '../contexts/authContext/index';
+
import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai'; // Importing React Icons
+import { useRecoilValue } from 'recoil';
+import { userLoggedInState } from '../atoms/authState';
const SignIn = () => {
- const { userLoggedIn } = useAuth();
+ const { userLoggedIn } = useRecoilValue(userLoggedInState);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
diff --git a/src/components/SignUp.jsx b/src/components/SignUp.jsx
index bfc4a4d..6ed3e18 100644
--- a/src/components/SignUp.jsx
+++ b/src/components/SignUp.jsx
@@ -1,8 +1,9 @@
import { useState } from 'react'
import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai'
import { Link, Navigate } from 'react-router-dom'
-import { useAuth } from '../contexts/authContext/index'
import { doCreateUserWithEmailAndPassword } from '../firebase/auth'
+import { useRecoilValue } from 'recoil'
+import { userLoggedInState } from '../atoms/authState'
const Register = () => {
@@ -14,7 +15,7 @@ const Register = () => {
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
- const { userLoggedIn } = useAuth()
+ const { userLoggedIn } = useRecoilValue(userLoggedInState)
const onSubmit = async (e) => {
e.preventDefault()
diff --git a/src/contexts/authContext/index.jsx b/src/contexts/authContext/index.jsx
index ecc4d83..92510da 100644
--- a/src/contexts/authContext/index.jsx
+++ b/src/contexts/authContext/index.jsx
@@ -1,20 +1,17 @@
-import React, { useContext, useState, useEffect } from "react";
-import { auth } from "../../firebase/firebase";
-// import { GoogleAuthProvider } from "firebase/auth";
+import React, { useEffect } from "react";
+import { useRecoilValue, useSetRecoilState } from "recoil";
import { onAuthStateChanged } from "firebase/auth";
-
-const AuthContext = React.createContext();
-
-export function useAuth() {
- return useContext(AuthContext);
-}
+import { auth } from "../../firebase/firebase";
+import { authLoadingState, currentUserState, isEmailUserState, isGoogleUserState, userLoggedInState } from "../../atoms/authState";
export function AuthProvider({ children }) {
- const [currentUser, setCurrentUser] = useState(null);
- const [userLoggedIn, setUserLoggedIn] = useState(false);
- const [isEmailUser, setIsEmailUser] = useState(false);
- const [isGoogleUser, setIsGoogleUser] = useState(false);
- const [loading, setLoading] = useState(true);
+ const setCurrentUser = useSetRecoilState(currentUserState);
+ const setUserLoggedIn = useSetRecoilState(userLoggedInState);
+ const setIsEmailUser = useSetRecoilState(isEmailUserState);
+ const setIsGoogleUser = useSetRecoilState(isGoogleUserState);
+ const setLoading = useSetRecoilState(authLoadingState);
+
+ const loading = useRecoilValue(authLoadingState); // Retrieve the loading state
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, initializeUser);
@@ -23,20 +20,19 @@ export function AuthProvider({ children }) {
async function initializeUser(user) {
if (user) {
-
setCurrentUser({ ...user });
- // check if provider is email and password login
+ // Check if provider is email and password login
const isEmail = user.providerData.some(
(provider) => provider.providerId === "password"
);
setIsEmailUser(isEmail);
- // check if the auth provider is google or not
- // const isGoogle = user.providerData.some(
+ // Uncomment and add GoogleAuthProvider if needed
+ // const isGoogle = user.providerData.some(
// (provider) => provider.providerId === GoogleAuthProvider.PROVIDER_ID
- // );
- // setIsGoogleUser(isGoogle);
+ // );
+ // setIsGoogleUser(isGoogle);
setUserLoggedIn(true);
} else {
@@ -47,17 +43,5 @@ export function AuthProvider({ children }) {
setLoading(false);
}
- const value = {
- userLoggedIn,
- isEmailUser,
- isGoogleUser,
- currentUser,
- setCurrentUser
- };
-
- return (
-
- {!loading && children}
-
- );
+ return <>{!loading && children};
}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 491d31f..9722c93 100755
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { AuthProvider } from './contexts/authContext/index.jsx'
+import { RecoilRoot } from 'recoil'
ReactDOM.createRoot(document.getElementById('root')).render(
-
-
-
+
+
+
+
+
,
)
\ No newline at end of file