world-wide-techies · Remi-dee · Jul 13, 2023 · Jul 13, 2023 · Jul 13, 2023 · Jul 13, 2023
diff --git a/development/src/app/layout.js b/development/src/app/layout.js
@@ -1,20 +1,23 @@
-'use client';
+"use client";
 
-import './globals.css';
-import { nohemi } from '@/app/localFont';
-import { ThemeProvider } from 'next-themes';
-import { TabProvider } from '@/composables/tabContext';
-import { SessionContextProvider } from '@/composables/sessionContext';
+import "./globals.css";
+import { nohemi } from "@/app/localFont";
+import { ThemeProvider } from "next-themes";
+import { TabProvider } from "@/composables/tabContext";
+import { SessionContextProvider } from "@/composables/sessionContext";
+import { AuthProvider } from "@/composables/authContext";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={`${nohemi.variable} `}>
-        <SessionContextProvider>
-          <TabProvider>
-            <ThemeProvider attribute="class">{children}</ThemeProvider>
-          </TabProvider>
-        </SessionContextProvider>
+        <AuthProvider>
+          <SessionContextProvider>
+            <TabProvider>
+              <ThemeProvider attribute="class">{children}</ThemeProvider>
+            </TabProvider>
+          </SessionContextProvider>
+        </AuthProvider>
       </body>
     </html>
   );

diff --git a/development/src/components/navbar_components/editorNavbar_comp.js b/development/src/components/navbar_components/editorNavbar_comp.js
@@ -1,29 +1,22 @@
-'use client';
-import { useState, useContext, useEffect } from 'react';
-import AuthNavControls from './authNavControls_comp';
-import Image from 'next/image';
-import moon from '../../../public/assets/onboardingIcons/moon.png';
-import sun from '../../../public/assets/onboardingIcons/sun.png';
-import { useTheme } from 'next-themes';
-import { useTabContext } from '@/composables/tabContext';
-import { Suspense } from 'react';
-import userIcon from '../../../public//assets/authNavBarControls/peers-2.png';
-import { isUserSignedIn } from '@/composables/verifySignedIn';
-import { appAuth } from '@/composables/firebaseConfig/config';
-import Link from 'next/link';
+"use client";
+import { useState, useContext, useEffect } from "react";
+import AuthNavControls from "./authNavControls_comp";
+import Image from "next/image";
+import moon from "../../../public/assets/onboardingIcons/moon.png";
+import sun from "../../../public/assets/onboardingIcons/sun.png";
+import { useTheme } from "next-themes";
+import { useTabContext } from "@/composables/tabContext";
+import { Suspense } from "react";
+import userIcon from "../../../public//assets/authNavBarControls/peers-2.png";
+import { isUserSignedIn } from "@/composables/verifySignedIn";
+import { appAuth } from "@/composables/firebaseConfig/config";
+import Link from "next/link";
+import { useAuthContext } from "@/composables/authContext";
 
 function EditorNavBar() {
-  const [auth, setAuth] = useState(true);
   const { theme, setTheme } = useTheme();
   const { items } = useTabContext();
-
-  useEffect(() => {
-    if (isUserSignedIn()) {
-      setAuth(true);
-    } else {
-      setAuth(false);
-    }
-  }, [appAuth]);
+  const { currentUser } = useAuthContext();
 
   return (
     <main className="font-nohemi">
@@ -32,7 +25,7 @@ function EditorNavBar() {
           <h1 className="dark:text-white text-[#5F5BD7] uppercase font-bold text-4xl">
             Carai
           </h1>
-          {auth ? (
+          {currentUser ? (
             <div className="flex justify-end space-x-4 items-center">
               <button
                 onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
@@ -63,22 +56,23 @@ function EditorNavBar() {
                   <Image alt="moon" src={moon} width={20} height={20} />
                 )}
               </button>
-              {!isUserSignedIn() && (items.length > 1 || items[0]?.title !== "Welcome") && (
-                <>
-                  <Link
-                    href={"/?view=signup"}
-                    className="ml-6 mr-3 py-3 px-6 rounded-lg bg-[#5F5BD7] text-white text-lg font-normal flex items-center"
-                  >
-                    Sign Up
-                  </Link>
-                  <Link
-                    href={"/?view=login"}
-                    className=" py-3 px-6 rounded-lg  text-lg font-normal flex items-center text-[#121212] bg-[#CDCDDA]"
-                  >
-                    Log In
-                  </Link>
-                </>
-              )}
+              {!currentUser &&
+                (items.length > 1 || items[0]?.title !== "Welcome") && (
+                  <>
+                    <Link
+                      href={"/?view=signup"}
+                      className="ml-6 mr-3 py-3 px-6 rounded-lg bg-[#5F5BD7] text-white text-lg font-normal flex items-center"
+                    >
+                      Sign Up
+                    </Link>
+                    <Link
+                      href={"/?view=login"}
+                      className=" py-3 px-6 rounded-lg  text-lg font-normal flex items-center text-[#121212] bg-[#CDCDDA]"
+                    >
+                      Log In
+                    </Link>
+                  </>
+                )}
             </div>
           )}
         </div>

diff --git a/development/src/components/signup_comp.js b/development/src/components/signup_comp.js
@@ -53,7 +53,6 @@ function SignUpComponent() {
   const [usernameAvailable, setUsernameAvailable] = useState(null);
   const [showVerificationOverlay, setShowVerificationOverlay] = useState(false);
   const [showForm, setShowForm] = useState(true);
-  const router = useRouter();
 
   const handleCloseForm = () => {
     setShowForm(false);

diff --git a/development/src/composables/authContext.js b/development/src/composables/authContext.js
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { useContext, createContext } from "react";
+import { appAuth } from "./firebaseConfig/config";
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState("");
+
+  useEffect(() => {
+    const persistUser = localStorage.getItem("user");
+
+    setCurrentUser(JSON.parse(persistUser));
+  }, []);
+
+  useEffect(() => {
+    appAuth.onAuthStateChanged((user) => {
+      setCurrentUser(user);
+    });
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ currentUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuthContext = () => {
+  return useContext(AuthContext);
+};
diff --git a/development/src/composables/sessionContext.js b/development/src/composables/sessionContext.js
@@ -1,14 +1,22 @@
-import { useEffect } from 'react';
-import { useState } from 'react';
-import { useContext, createContext } from 'react';
+import { useEffect } from "react";
+import { useState } from "react";
+import { useContext, createContext } from "react";
 
 export const SessionContext = createContext();
 
 export const SessionContextProvider = ({ children }) => {
   const [sessionData, setSessionData] = useState({});
+  const [storeSession, setStoreSession] = useState({});
 
   return (
-    <SessionContext.Provider value={{ sessionData, setSessionData }}>
+    <SessionContext.Provider
+      value={{
+        sessionData,
+        setSessionData,
+        storeSession,
+        setStoreSession,
+      }}
+    >
       {children}
     </SessionContext.Provider>
   );

diff --git a/package-lock.json b/package-lock.json