up to 92

src/App.js

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import PrivateRoute from "./components/PrivateRoute";
 import Navbar from "./components/Navbar";
 import Explore from "./pages/Explore";
 import Profile from "./pages/Profile";
@@ -16,7 +17,9 @@ function App() {
         <Routes>
           <Route path="/" element={<Explore />} />
           <Route path="/offers" element={<Offers />} />
-          <Route path="/profile" element={<Profile />} />
+          <Route path="/profile" element={<PrivateRoute />}>
+            <Route path="/profile" element={<Profile />} />
+          </Route>
           <Route path="/sign-in" element={<Signin />} />
           <Route path="/sign-up" element={<Signup />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />

src/components/Navbar.jsx

@@ -45,7 +45,7 @@ function Navbar() {
                   : "navbarListItemName"
               }
             >
-              Explore
+              Offers
             </p>
           </li>
           <li className="navbarListItems" onClick={() => navigate("/profile")}>
@@ -61,7 +61,7 @@ function Navbar() {
                   : "navbarListItemName"
               }
             >
-              Explore
+              Profile
             </p>
           </li>
         </ul>

src/components/PrivateRoute.jsx

@@ -0,0 +1,14 @@
+import { useAuthStatus } from "../hooks/useAuthStatus";
+import { Navigate, Outlet } from "react-router-dom";
+import Spinner from "./Spinner";
+
+const PrivateRoute = () => {
+  const { loggedIn, checkingStatus } = useAuthStatus();
+
+  if (checkingStatus) {
+    return <Spinner/>
+  }
+console.log(loggedIn)
+  return loggedIn ? <Outlet /> : <Navigate to="/sign-in" />;
+};
+export default PrivateRoute;

src/components/Spinner.jsx

@@ -0,0 +1,7 @@
+function Spinner(){
+  return (
+    <div className="loadingSpinerContainer">
+      <div className="loadingSpinner"></div>
+    </div>)
+}
+export default Spinner

src/hooks/useAuthStatus.js

@@ -0,0 +1,24 @@
+import { useEffect, useState, useRef } from "react";
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+
+export const useAuthStatus = () => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [checkingStatus, setCheckingStatus] = useState(true);
+  const isMouted = useRef(true);
+
+  useEffect(() => {
+    if (isMouted) {
+      const auth = getAuth();
+      onAuthStateChanged(auth, (user) => {
+        if (user) {
+          setLoggedIn(true);
+        }
+        setCheckingStatus(false);
+      });
+    }
+    return () => {
+      isMouted.current = false;
+    };
+  },[isMouted]);
+  return { loggedIn, checkingStatus };
+};

src/pages/Profile.jsx

@@ -1,13 +1,89 @@
+import { toast } from "react-toastify";
 import { useEffect, useState } from "react";
-import { getAuth } from "firebase/auth";
+import { getAuth, updateProfile } from "firebase/auth";
+import { useNavigate, Link } from "react-router-dom";
+import { db } from "../firebase.config";
+import { updateDoc ,doc } from "firebase/firestore";
 
 function Profile() {
-  const [user, setUser] = useState();
+  const [changeDetails, setChangeDetails] = useState(false);
   const auth = getAuth();
-  useEffect(() => {
-    setUser(auth.currentUser);
-  }, []);
-  
-  return user ? <h1>{user.displayName}</h1> : "Not Logged In";
+  const [formData, setFormData] = useState({
+    name: auth.currentUser.displayName,
+    email: auth.currentUser.email,
+  });
+  const navigate = useNavigate();
+  const { name, email } = formData;
+  const onLogout = () => {
+    auth.signOut();
+    navigate("/");
+  };
+
+  const onSubmit = async () => {
+    try {
+      if (auth.currentUser.displayName !== name) {
+        await updateProfile(auth.currentUser, {
+          displayName: name,
+        });
+        const userRef = doc(db,'users',auth.currentUser.uid)
+        await updateDoc(userRef,{
+          name
+        })
+      }
+    } catch (error) {
+      toast.error('could no update profile details')
+    }
+  };
+  const onChange = (e) => {
+    setFormData((prevState) => ({
+      ...prevState,
+      [e.target.id]: e.target.value,
+    }));
+  };
+  return (
+    <div className="profile">
+      <header className="profileHeader">
+        <p className="pageHeader">My Profile</p>
+        <button type="button" className="logOut" onclick={onLogout}>
+          Logout
+        </button>
+      </header>
+      <main>
+        <div className="profileDetailsHeader">
+          <p className="profileDetailsText">
+            <p
+              className="changePersonalDetails"
+              onClick={() => {
+                changeDetails && onSubmit();
+                setChangeDetails((prevState) => !prevState);
+              }}
+            >
+              {changeDetails ? "done" : "change"}
+            </p>
+          </p>
+        </div>
+        <div className="profileCard">
+          <form>
+            <input
+              type="text"
+              id="email"
+              className={!changeDetails ? "profileEmail" : "profileEmailActive"}
+              disabled={!changeDetails}
+              value={email}
+              onChange={onChange}
+            />
+            <input
+              type="text"
+              id="name"
+              className={!changeDetails ? "profileName" : "profileNameActive"}
+              disabled={!changeDetails}
+              value={name}
+              onChange={onChange}
+            />
+          </form>
+        </div>
+      </main>
+    </div>
+  );
 }
 export default Profile;

src/pages/Signup.jsx

@@ -49,7 +49,8 @@ function Signup() {
 
       navigate("/");
     } catch (error) {
-      toast.error("something went wron with the registration")
+      console.log(error)
+      toast.error("something went wrong with the registration")
     }
   };
   return (