added profile show on navbar

GDGVIT · Dec 31, 2023 · baf9dff · baf9dff
1 parent bff20fc
commit baf9dff
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 41 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,9 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import Dashboard from "./pages/Dashboard";
 // import Loader from "./components/Loader";
 import { useAuthStore } from "./store/authStore";
-import Timetable from "./pages/TimeTable";
+import Profile from "./components/Profile";
+// import Timetable from "./pages/TimeTable";
+import { useShowProfileStore } from "./store/profileStore";
 
 const App: React.FC = () => {
   const firebaseConfig = {
@@ -25,19 +27,21 @@ const App: React.FC = () => {
   const app = initializeApp(firebaseConfig);
   const { initializeFromLocalStorge, login, isLoggedIn } =
     useAuthStore();
+  const { showProfile } = useShowProfileStore()
 
   useEffect(() => {
     const auth = getAuth();
     onAuthStateChanged(auth, (user1) => {
+      console.log(user1, 'user1');
       if (user1 !== null) {
         console.log(user1);
         localStorage.setItem("uuid", user1.uid);
         localStorage.setItem("profile", user1.photoURL || "");
-        localStorage.setItem("username", user1.displayName || "");
+        localStorage.setItem("name", user1.displayName || "");
         localStorage.setItem("email", user1.email || "");
         login(user1.uid, user1.photoURL || "", user1.displayName || "");
       } else {
-        console.log("user is null");
+        console.log("user is null from app.tsx");
       }
     });
   }, [isLoggedIn, login]);
@@ -46,21 +50,14 @@ const App: React.FC = () => {
     initializeFromLocalStorge();
   }, [initializeFromLocalStorge]);
 
-  // const logOut = (): void => {
-  //   const auth = getAuth()
-  //   signOut(auth).then(() => {
-  //     console.log(auth.currentUser)
-  //     logout
-  //   }).catch((error) => {
-  //     console.error(error)
-  //   })
-  // }
   useEffect(() => {
     document.title = "VITTY";
   }, []);
   return (
     <Template>
       {isLoggedIn ? <Dashboard /> : <LoginPage />}
+      {showProfile &&
+          <Profile/>}
     </Template>
   );
 };

diff --git a/src/components/Auth.tsx b/src/components/Auth.tsx
@@ -19,25 +19,11 @@ const Auth = () => {
   const auth = getAuth();
   const googleProvider = new GoogleAuthProvider();
   const appleProvider = new OAuthProvider("apple.com");
-  // const Navigate = useNavigate();
-  // const [user, setUser] = useState<any>(null);
-  // const { isLoggedIn } = useAuthStore();
+
   const logIn = (auth: any, provider: any) => {
     void signInWithRedirect(auth, provider);
   };
 
-  // onAuthStateChanged(auth, (user1) => {
-  //   if (user1 !== null) {
-  //     setUser(user1);
-  //   }
-  // });
-
-  // useEffect(() => {
-  //   if (isLoggedIn) {
-  //     Navigate("/dashboard");
-  //   }
-  // }, [setUser, user]);
-
   return (
     <div className="flex flex-col justify-center items-center z-[4]">
       <h1 className="hidden text-3xl font-semibold md:flex mb-10">

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -5,13 +5,13 @@ import VTLogo from './../assets/landing_logo.png'
 import userIcon from './../assets/icon.png'
 import './../styles/Nav.css'
 import { useAuthStore } from '../store/authStore'
+import { useShowProfileStore } from '../store/profileStore'
 
 const Nav: React.FC = () => {
 
   const [text, setText] = useState('Sign In');
-  const [onShow, setShow] = useState(false);
-
   const { name, profile, email, logout } = useAuthStore()
+  const { toggleProfile, showProfile } = useShowProfileStore()
   const user = name;
   const pic = profile;
   const logOut = (): void => {
@@ -23,6 +23,11 @@ const Nav: React.FC = () => {
     })
   }
 
+  const toggle = (): void => {
+    toggleProfile()
+    console.log(showProfile, "profile");
+  }
+
   useEffect(() => {
     if (user !== '' && user !== 'loading') setText('Sign Out')
   }, [user])
@@ -35,7 +40,7 @@ const Nav: React.FC = () => {
       </div>
       {
         user !== null && user !== '' &&
-          <div className='user-pfp' >
+          <div className='user-pfp' onClick={toggle} >
             <img src={(pic !== null && pic !== '') ? pic : userIcon} alt='DP' />
           </div>
       }

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -1,27 +1,42 @@
 import React from 'react'
 import { FaTimes } from 'react-icons/fa'
 import './../styles/Modal.css'
+import { useShowProfileStore } from '../store/profileStore'
+import { useAuthStore } from '../store/authStore'
+import { getAuth, signOut } from 'firebase/auth'
 
-interface ProfileProps {
-    onClose: () => void;
-    onLogOut: () => void;
-    name: string | null;
-    email: string;
-}
+const Profile: React.FC = () => {
+
+    const { toggleProfile } = useShowProfileStore()
+    const { name, email, logout } = useAuthStore()
+
+    const toggle = (): void => {
+        toggleProfile()
+    }
+
+    const logOut = (): void => {
+        const auth = getAuth()
+        signOut(auth).then(() => {
+            console.log(auth.currentUser)
+            logout();
+            toggleProfile();
+        }).catch((error) => {
+            console.error(error)
+        })
+    }
 
-const Profile: React.FC<ProfileProps> = ({ onClose, onLogOut, name, email }) => {
   return (
-    <div className='modal' onClick={onClose}>
+    <div className='modal' onClick={toggle}>
       <div className='modal-content' onClick={e => e.stopPropagation()}>
         <div className='modal-header'>
           <h3>Profile</h3>
-          <FaTimes onClick={onClose} />
+          <FaTimes onClick={toggle}/>
         </div>
         <div className='modal-body'>
           {name !== null && <div className='modal-message'><span>Name:</span> {name}</div>}
           <div className='modal-message'><span>Email:</span> {email}</div>
           <div className='modal-buttons'>
-            <button className='modal-yes' onClick={onLogOut}>Log Out</button>
+            <button className='modal-yes' onClick={logOut}>Log Out</button>
           </div>
         </div>
       </div>

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -18,6 +18,7 @@ export default function Dashboard() {
                 console.log(data);
                 updateUsername(data.username);
                 updateToken(data.token);
+                localStorage.setItem("email", data.email);
             } else {
                 window.alert("Some error occured");
             }

diff --git a/src/store/authStore.tsx b/src/store/authStore.tsx
@@ -70,8 +70,12 @@ export const useAuthStore = create<AuthStore>((set) => ({
       uuid: "",
       isLoggedIn: false,
       profile: "",
-      name: "",
       username: null,
+      email: "",
+      name: "",
+      token: "",
+      timetable: {},
+      regNo: "",
     }));
     localStorage.clear();
   },

diff --git a/src/store/profileStore.tsx b/src/store/profileStore.tsx
@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+interface showProfileStore {
+    showProfile: boolean;
+    toggleProfile: () => void;
+    setProfile: (showProfile: boolean) => void;
+    }
+
+export const useShowProfileStore = create<showProfileStore>((set) => ({
+    showProfile: false,
+    toggleProfile: () => {
+        set((state) => ({
+            showProfile: !state.showProfile,
+        }));
+    },
+    setProfile: (showProfile) => {
+        set(() => ({
+            showProfile,
+        }));
+    },
+}));