feat: Added Private Routes

package.json

@@ -25,6 +25,7 @@
         "react-dom": "^18.2.0",
         "react-i18next": "^11.18.1",
         "react-icons": "^4.4.0",
+        "react-protected-route-component": "^0.1.1",
         "react-router-dom": "^6.3.0",
         "react-router-hash-link": "^2.4.3",
         "react-scripts": "^5.0.1",

src/App.jsx

@@ -8,10 +8,33 @@ import AllEvents from "./containers/AllEvents";
 import SignIn from "./components/SignIn/SignIn";
 import NgoProfilePage from "./containers/NgoProfilePage";
 import Register from "./components/Register/Register";
-
+import Protected from "./services/Protected";
 import VolunteerProfile from "./containers/VolunteerProfile/VolunteerProfile";
+import React, { useState, useEffect } from "react";
+import ProtectedRoute from "react-protected-route-component";
+import { Navigate } from "react-router-dom";
 
 function App() {
+    let isLoggedAsVolunteer = false;
+    let isLoggedAsNgo = false;
+    // console.log(localStorage.getItem("userId"));
+    // console.log(localStorage.getItem("userType"));
+
+    if (
+        localStorage.getItem("userId") !== undefined &&
+        localStorage.getItem("userType") === "Volunteer"
+    ) {
+        isLoggedAsVolunteer = true;
+    } else if (
+        localStorage.getItem("userId") !== undefined &&
+        localStorage.getItem("userType") === "Ngo"
+    ) {
+        isLoggedAsNgo = true;
+    } else {
+        isLoggedAsVolunteer = true;
+        isLoggedAsNgo = true;
+    }
+
     return (
         <div className=''>
             <Routes>
@@ -21,9 +44,24 @@ function App() {
                 <Route path='/sign-in' element={<SignIn />} />
                 <Route
                     path='/volunteer-profile'
-                    element={<VolunteerProfile />}
+                    element={
+                        <Protected isLoggedIn={isLoggedAsVolunteer}>
+                            <VolunteerProfile
+                                userId={localStorage.getItem("userId")}
+                            />
+                        </Protected>
+                    }
+                />
+                <Route
+                    path='/ngo-admin'
+                    element={
+                        <Protected isLoggedIn={isLoggedAsNgo}>
+                            <AdminDashboard
+                                userId={localStorage.getItem("userId")}
+                            />
+                        </Protected>
+                    }
                 />
-                <Route path='/ngo-admin' element={<AdminDashboard />} />
                 <Route path='/ngo-profile' element={<NgoProfilePage />} />
                 <Route path='/register' element={<Register />} />
                 <Route path='/' element={<Home />} />

src/components/AdminDashboardHeroSection/AdminDashboardHeroSection.jsx

@@ -1,31 +1,31 @@
 import React, { useState } from "react";
 import "../../App.css";
-import NGOImage from "../../assets/NGOImage.png";
+import NGOImage from "../../assets/theBluesProfile.png";
+import NGOEvent from "../../assets/theBluesEvents.jpg";
 import "../../App.css";
 import EditInfoForm from "./EditInfoForm";
 import { useQuery } from "@tanstack/react-query";
 
-function AdminDashboardHeroSection() {
+function AdminDashboardHeroSection({ userId }) {
     const [info, setInfo] = useState([]); //changed {} to []
     const { isLoading, error, data } = useQuery(["repoData"], () =>
-        fetch("https://reach-capstone.herokuapp.com/api/ngos").then((res) =>
-            res.json().then((data) => setInfo(data.data[0]))
+        fetch(`https://reach-capstone.herokuapp.com/api/ngos/${userId}`).then(
+            (res) => res.json().then((data) => setInfo(data.data))
         )
     );
     if (isLoading) return "Loading...";
 
     // if (error) return error.messag;
-
     return (
         <>
             <section
                 className={
-                    "flex   flex-col justify-around gap-6  bg-gray p-6 pb-24 md:px-20 lg:flex-row-reverse lg:gap-12 lg:px-10 xl:px-40 "
+                    "-mb-12   flex h-[60rem] flex-col   justify-around  gap-6 bg-gray p-6 pb-12 md:px-20 lg:flex-row-reverse  lg:px-10 xl:px-40 "
                 }
             >
-                <main className='relative md:mr-6 lg:w-2/3 xl:w-2/4 '>
+                <main className='relative mt-56 md:mr-6 lg:mt-6 lg:w-10/12 xl:w-2/4  '>
                     <span>
-                        <EditInfoForm />
+                        <EditInfoForm userId={userId} />
                     </span>
                     <div className='my-6  flex justify-end gap-6 md:justify-end '></div>
                     <div className='row1 grid md:flex md:flex-row-reverse  '>
@@ -35,7 +35,7 @@ function AdminDashboardHeroSection() {
                             alt=''
                         />
                         <ul className='mt-4 grid w-full gap-1.5 justify-self-auto text-left font-SourceSansPro text-sm font-semibold text-light-gray'>
-                            <h1 className=' my-2 mb-4 justify-self-center  font-quicksand text-4xl font-semibold text-blue-dark md:justify-self-start'>
+                            <h1 className=' my-2 mb-4 justify-self-center font-quicksand  text-4xl font-semibold uppercase text-blue-dark md:justify-self-start'>
                                 {info.name}
                             </h1>
                             <li>Location: {info.location}</li>
@@ -47,7 +47,20 @@ function AdminDashboardHeroSection() {
                     </div>
                     <div className='row2 my-4 grid text-justify'>
                         <p className='text-md my-2 font-semibold  text-blue-dark'>
-                            {info.message}
+                            {info.message}The goal of Save the Children is to
+                            promote global education and the rights of children
+                            around the world. To increase the quality of
+                            instruction and help ensure lasting education, Save
+                            the Children teaches effective teaching strategies
+                            to instructors and trains them to engage students.
+                            They coach parents and caregivers to help foster
+                            learning early on, and offer ways for parents to
+                            encourage schoolwork and continued learning outside
+                            of the classroom. They also hope to introduce
+                            children to artistic expression, encourage learning
+                            during and after crisis and invest in the health of
+                            children to ensure they don’t fall behind. In 2012,
+                            Save the Children reached 9 million children
                         </p>
                         <a
                             href={"https://" + info.website}
@@ -57,10 +70,10 @@ function AdminDashboardHeroSection() {
                         </a>
                     </div>
                 </main>
-                <div className='image grid place-items-center  md:p-4'>
+                <div className='image  grid place-items-center  md:p-4'>
                     <img
-                        src={NGOImage}
-                        className='md:w-4/4  items-center justify-self-center rounded-lg object-contain  lg:justify-self-start	  '
+                        src={NGOEvent}
+                        className=' w-3/4 items-center justify-self-center rounded-lg border-black object-contain shadow-lg  md:w-10/12  lg:justify-self-start	  '
                         alt=''
                     />
                 </div>

src/components/AdminDashboardHeroSection/EditInfoForm.jsx

@@ -9,7 +9,7 @@ import {
     useQueryClient,
 } from "@tanstack/react-query";
 
-function EditInfoForm() {
+function EditInfoForm({ userId }) {
     const [showModal, setShowModal] = useState(false);
     const [info, setInfo] = useState([]);
     const [formValidation, setFormValidation] = useState(false);
@@ -32,7 +32,7 @@ function EditInfoForm() {
                     setFormValidation(true);
 
                     return axios.patch(
-                        `http://localhost:8000/adminDashboard/1`,
+                        `https://reach-capstone.herokuapp.com/api/profile/${userId}`,
                         newComment
                     );
                 } else {
@@ -42,7 +42,7 @@ function EditInfoForm() {
             } catch {
                 setFormValidation(true);
                 return axios.patch(
-                    `http://localhost:8000/adminDashboard/1`,
+                    `https://reach-capstone.herokuapp.com/api/profile/${userId}`,
                     newComment
                 );
             }

src/components/SignIn/SignIn.jsx

@@ -15,8 +15,8 @@ function SignIn() {
     const navigate = useNavigate();
     const navigateHome = () => {
         // 👇️ navigate to /
-        navigate('/');
-      };
+        navigate("/");
+    };
     const [formData, setFormData] = useState({
         email: "",
         password: "",
@@ -36,25 +36,29 @@ function SignIn() {
 
     function handleSubmit(event) {
         event.preventDefault();
-        console.log(formData);
     }
     const SendtoSignIn = useMutation((SignInData) => {
-            axios.post(`https://reach-capstone.herokuapp.com/api/auth/login`, SignInData).then(
-                function () {
-                    alert("You have Successfuly Signed In");
-                    navigateHome()
-                  }
-            ).catch(function (error) {
-                console.log(error)
+        axios
+            .post(
+                `https://reach-capstone.herokuapp.com/api/auth/login`,
+                SignInData
+            )
+            .then(function (res) {
+                if (res.data.success) {
+                    localStorage.setItem("userId", res.data.data._id);
+                    localStorage.setItem("userType", res.data.data.type);
+                }
+                navigateHome();
+            })
+            .catch(function (error) {
                 let isArray = Array.isArray(error.response.data.errors);
                 if (isArray) {
-                  alert(error.response.data.errors[0].msg)
+                    alert(error.response.data.errors[0].msg);
+                } else {
+                    alert(error.response.data.error);
                 }
-                else{
-                  alert(error.response.data.error);
-                };
             });
-        });
+    });
     return (
         <div className=' bg-blue-dark'>
             <div className='flex justify-between pl-2 pr-2 md:pl-40 md:pr-40 md:pt-2'>
@@ -68,13 +72,13 @@ function SignIn() {
                     onClick={() => navigate(-1)}
                 />
             </div>
-            <div className='flex content-center w-full justify-evenly bg-blue-dark p-24'>
+            <div className='flex w-full content-center justify-evenly bg-blue-dark p-24'>
                 <img
                     src={SigninPic}
                     alt={
                         "a drawing of a little boy in a classroom raising his hand"
                     }
-                    className='lg:6/12 w-0 md:w-6/12 object-contain'
+                    className='lg:6/12 w-0 object-contain md:w-6/12'
                 />
 
                 <div className='w-full pt-16 md:w-4/12'>
@@ -85,10 +89,13 @@ function SignIn() {
                         className='font-body flex flex-col gap-3 text-lg text-gray'
                         onSubmit={handleSubmit}
                     >
-                        <p className=' flex-row font-SourceSansPro inline'>
-                            If you don`t have an account register, you can {" "}
-                            <Link to='/sign-up' className="" >
-                                <p className='ml-1 text-red '> register here!</p>
+                        <p className=' inline flex-row font-SourceSansPro'>
+                            If you don`t have an account register, you can{" "}
+                            <Link to='/sign-up' className=''>
+                                <p className='ml-1 text-red '>
+                                    {" "}
+                                    register here!
+                                </p>
                             </Link>
                         </p>
 
@@ -180,4 +187,4 @@ function SignIn() {
         </div>
     );
 }
-export default SignIn;
+export default SignIn;

src/containers/AdminDashboard.jsx

@@ -8,7 +8,7 @@ import { useQuery } from "@tanstack/react-query";
 import Navbar from "../components/layout/Navbar/Navbar";
 import Footer from "../components/layout/Footer/Footer";
 
-function AdminDashboard() {
+function AdminDashboard({ userId }) {
     const { isLoading, error, data } = useQuery(["events"], () => getEvents());
 
     if (isLoading) return "Loading...";
@@ -17,7 +17,7 @@ function AdminDashboard() {
     return (
         <>
             <Navbar />
-            <AdminDashboardHeroSection />
+            <AdminDashboardHeroSection userId={userId} />
             <Carousel carouselHeader='Previous Events' events={data.data} />
             <Footer />
         </>

src/services/Protected.jsx

@@ -0,0 +1,9 @@
+import { Navigate } from "react-router-dom";
+import AdminDashboard from "../containers/AdminDashboard";
+const Protected = ({ isLoggedIn, children }) => {
+    if (!isLoggedIn) {
+        return <Navigate to='/' replace />;
+    }
+    return children;
+};
+export default Protected;

tailwind.config.js

@@ -27,6 +27,8 @@ module.exports = {
             },
             zIndex: {
                 '100': '100',
+            }, height: {
+                '128': '32rem',
             }
         },
     },