💖 add Logout functionality anddashboardd boilerplate

client/src/assets/styles/components/Nav.scss

@@ -1,8 +1,9 @@
 .Nav {
-  padding: var(--side-spacing);
+  padding: 1rem;
 
   .container {
     display: flex;
+    padding: 0;
     justify-content: space-between;
     align-items: center;
     flex-direction: row-reverse;
@@ -28,7 +29,15 @@
     align-items: center;
   }
 
+  a {
+    cursor: pointer;
+    > * {
+      cursor: pointer;
+    }
+  }
+
   &__icon {
     width: 24px;
+    cursor: pointer;
   }
 }

client/src/assets/styles/components/NotificationBox.scss

@@ -0,0 +1,2 @@
+.notificationBox {
+}

client/src/assets/styles/components/PageTitle.scss

@@ -0,0 +1,24 @@
+.pageTitle {
+  text-align: center;
+  position: relative;
+  padding-block: 2rem;
+
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--Primary-200, #2b0547);
+    border-radius: 50%;
+    top: 0;
+    left: 0;
+    filter: blur(70px);
+    z-index: -1;
+  }
+
+  h1 {
+    font-size: 39.81px;
+    font-weight: 700;
+    line-height: 54px;
+  }
+}

client/src/components/common/Alerts.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { PropTypes } from "prop-types";
 import "../../assets/styles/components/Alert.scss";
 
 const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
@@ -10,7 +10,7 @@ const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
           xmlns="http://www.w3.org/2000/svg"
           width="21"
           height="20"
-          viewBox="0 0 21 20" 
+          viewBox="0 0 21 20"
         >
           <path
             d="M6.78033 5.21967C6.48744 4.92678 6.01256 4.92678 5.71967 5.21967C5.42678 5.51256 5.42678 5.98744 5.71967 6.28033L9.43934 10L5.71967 13.7197C5.42678 14.0126 5.42678 14.4874 5.71967 14.7803C6.01256 15.0732 6.48744 15.0732 6.78033 14.7803L10.5 11.0607L14.2197 14.7803C14.5126 15.0732 14.9874 15.0732 15.2803 14.7803C15.5732 14.4874 15.5732 14.0126 15.2803 13.7197L11.5607 10L15.2803 6.28033C15.5732 5.98744 15.5732 5.51256 15.2803 5.21967C14.9874 4.92678 14.5126 4.92678 14.2197 5.21967L10.5 8.93934L6.78033 5.21967Z"
@@ -24,15 +24,24 @@ const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
             className={
               showRightBox ? "right-box " + color : "right-box hide " + color
             }
-          / >
+          />
         </div>
       </div>
       <text className="alert-info">{info}</text>
       <button className={"alert-btn " + color} onClick={Onclick}>
         {buttontext}
       </button>
-    </div> 
+    </div>
   );
 };
 
+Alert.propTypes = {
+  title: PropTypes.string.isRequired,
+  info: PropTypes.string.isRequired,
+  buttontext: PropTypes.string.isRequired,
+  Onclick: PropTypes.func.isRequired,
+  showRightBox: PropTypes.bool,
+  color: PropTypes.string,
+};
+
 export default Alert;

client/src/components/common/InfoBox.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import "../../assets/styles/components/infoBox.scss";
 const InfoBox = ({ title, value, width = "narrow", color = "dark" }) => {
   return (

client/src/components/common/InfoSection.jsx

@@ -0,0 +1,5 @@
+import "../../assets/styles/components/InfoSection.scss";
+
+export default function InfoSection() {
+  return <div>InfoSection</div>;
+}

client/src/components/common/NotificationBox.jsx

@@ -0,0 +1,5 @@
+import "../../assets/styles/components/NotificationBox.scss";
+
+export default function NotificationBox() {
+  return <div>NotificationBox</div>;
+}

client/src/components/common/PageTitle.jsx

@@ -1,9 +1,16 @@
-import React from 'react'
+import PropTypes from "prop-types";
+import "../../assets/styles/components/PageTitle.scss";
 
-const PageTitle = ({title}) => {
+const PageTitle = ({ title }) => {
   return (
-    <h1>{title}</h1>
-  ) 
-}
+    <div className="pageTitle container">
+      <h1>{title}</h1>
+    </div>
+  );
+};
 
-export default PageTitle
+PageTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default PageTitle;

client/src/components/common/TermInfoSection.jsx

@@ -0,0 +1,8 @@
+
+import "../../assets/styles/components/TermInfoSection.scss";
+
+export default function TermInfoSection() {
+  return (
+    <div>TermInfoSection</div>
+  )
+}

client/src/components/common/UserActions.jsx

@@ -0,0 +1,8 @@
+
+import "../../assets/styles/components/UserActions.scss";
+
+export default function UserActions() {
+  return (
+    <div>UserActions</div>
+  )
+}

client/src/components/common/nav.jsx

@@ -1,16 +1,54 @@
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { useLogoutMutation } from "../../redux/slices/usersApiSlice";
+import { clearCredentials } from "../../redux/slices/authSlice";
+import { useDispatch } from "react-redux";
 
 // icons
 import { UserCircleIcon } from "@heroicons/react/24/outline";
-import { BellIcon } from "@heroicons/react/24/outline";
+import {
+  BellIcon,
+  ArrowLeftOnRectangleIcon,
+} from "@heroicons/react/24/outline";
 // logo
 import logo from "../../assets/images/logo.svg";
 // styles
 import "../../assets/styles/components/Nav.scss";
 
-export default function Nav(props) {
-  const { showIcons } = props;
+export default function Nav() {
+  const [show, setShow] = useState(false);
+
+  const { userInfo } = useSelector((state) => state.auth);
+
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const [logout, { isLoading, error }] = useLogoutMutation();
+
+  useEffect(() => {
+    if (userInfo) {
+      setShow(true);
+    } else {
+      setShow(false);
+    }
+  }, [userInfo]);
+
+  const handleLogout = async () => {
+    try {
+      const res = await logout().unwrap();
+      toast.dark("تم تسجيل الخروج بنجاح");
+      dispatch(clearCredentials());
+      navigate("/");
+    } catch (err) {
+      toast.dark("حدث خطأ ما");
+      toast.error(err?.data?.message || err.error || JSON.stringify(err));
+      console.error(err);
+    }
+  };
 
   return (
     <nav className="Nav">
@@ -21,8 +59,11 @@ export default function Nav(props) {
             <h2 className="logo-text">كشافة</h2>
           </Link>
         </div>
-        {showIcons && (
+        {show && (
           <div className="Nav__icons">
+            <Link onClick={handleLogout}>
+              <ArrowLeftOnRectangleIcon className="Nav__icon" />
+            </Link>
             {/* TODO: add route later */}
             <Link to="/">
               <UserCircleIcon className="Nav__icon" />
@@ -39,5 +80,5 @@ export default function Nav(props) {
 }
 
 Nav.propTypes = {
-  showIcons: PropTypes.bool.isRequired,
+  showIcons: PropTypes.bool,
 };

client/src/components/dashboard/Dashboard.jsx

@@ -0,0 +1,44 @@
+import PageTitle from "../common/PageTitle";
+import "./Dashboard.scss";
+import { useSelector } from "react-redux";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import NotificationBox from "../common/NotificationBox";
+import TermInfoSection from "../common/TermInfoSection";
+import UserActions from "../common/UserActions";
+import InfoSection from "../common/InfoSection";
+
+export default function Dashboard() {
+  const { userInfo } = useSelector((state) => state.auth);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!userInfo) {
+      navigate("/logIn");
+    }
+  }, [navigate, userInfo]);
+
+  const titleMsg = `مرحباً يا كاتبن ${userInfo?.firstName} ${userInfo?.middleName}`;
+
+  return (
+    <div className="dashboard">
+      <PageTitle title={titleMsg} />
+      <section className="dashboard__section container">
+        <h4 className="section__heading">إشعارات</h4>
+        <NotificationBox />
+      </section>
+      <section className="dashboard__section container">
+        <h4 className="section__heading">معلومات</h4>
+        <InfoSection />
+      </section>
+      <section className="dashboard__section container">
+        <h4 className="section__heading">الفترة الحالية</h4>
+        <TermInfoSection />
+      </section>
+      <section className="dashboard__section container ">
+        <h4 className="section__heading">إجراءات</h4>
+        <UserActions />
+      </section>
+    </div>
+  );
+}

client/src/components/dashboard/Dashboard.scss

@@ -0,0 +1,8 @@
+.dashboard {
+  &__section {
+    .section__heading {
+      margin-bottom: 2rem;
+      direction: rtl;
+    }
+  }
+}

client/src/components/layout/PublicLayout.jsx

@@ -6,7 +6,7 @@ import Footer from "../common/Footer";
 export default function PublicLayout() {
   return (
     <div className="public_layout">
-      <Nav showIcons={false} />
+      <Nav />
       <Outlet />
       <Footer />
     </div>

client/src/components/login/logIn.jsx

@@ -21,8 +21,7 @@ export default function LogIn() {
 
   useEffect(() => {
     if (userInfo) {
-      /* TODO: Add later the home page not the landing page */
-      navigate("/");
+      navigate("/dashboard");
     }
   }, [navigate, userInfo]);
 
@@ -31,6 +30,7 @@ export default function LogIn() {
     try {
       const res = await login({ email, password }).unwrap();
       dispatch(setCredentials({ ...res?.data }));
+      toast.dark("تم تسجيل الدخول بنجاح");
       navigate("/");
     } catch (err) {
       toast.error(err?.data?.message || err.error);
@@ -61,6 +61,8 @@ export default function LogIn() {
             onChange={(e) => setPassword(e.target.value)}
             required={true}
           />
+          {isLoading && <p>جاري التحميل...</p>}
+          {error && <p>{error}</p>}
           <Button type="submit" className="Button--medium Button--success">
             تسجيل الدخول
           </Button>

client/src/components/signup/signUp.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import Button from "../common/Button";
 import TextInput, { RadioInput } from "../common/Inputs";
@@ -27,8 +27,7 @@ export default function SignUp() {
 
   useEffect(() => {
     if (userInfo) {
-      /* TODO: Add later the home page not the landing page */
-      navigate("/");
+      navigate("/dashboard");
     }
   }, [navigate, userInfo]);
 
@@ -58,6 +57,7 @@ export default function SignUp() {
         gender: gender == "ذكر" ? "male" : "female",
       }).unwrap();
       dispatch(setCredentials({ ...res?.data }));
+      toast.dark(" تم تسجيل الحساب بنجاح");
       navigate("/");
     } catch (err) {
       toast.error(err?.data?.message || err.error);
@@ -150,6 +150,7 @@ export default function SignUp() {
             />
           </div>
           {isLoading && <p>جاري التحميل...</p>}
+          {error && <p>{error}</p>}
           <Button type="submit" className="Button--success Button-medium">
             تسجيل
           </Button>

client/src/redux/slices/usersApiSlice.js

@@ -14,7 +14,7 @@ export const usersApi = apiSlice.injectEndpoints({
     logout: builder.mutation({
       query: () => ({
         url: `${USERS_API}/logout`,
-        method: "POST",
+        method: "GET",
       }),
     }),
     signup: builder.mutation({

client/src/routes.jsx

@@ -17,6 +17,7 @@ import PublicLayout from "./components/layout/PublicLayout";
 // Import Testing Routes here
 import TestTypo from "./components/testing/testTypo";
 import TestLayout from "./components/testing/testLayout";
+import Dashboard from "./components/dashboard/Dashboard";
 
 function Routes() {
   return (
@@ -26,6 +27,7 @@ function Routes() {
           <Route exact path="/" element={<LandingPage />} />
           <Route exact path="/signUp" element={<SignUp />} />
           <Route exact path="/logIn" element={<LogIn />} />
+          <Route exact path="/dashboard" element={<Dashboard />} />
         </Route>
 
         {/* Testing Routes */}