Update the redirection routes for signin, signup.

src/components/MyReservations/MyReservationsList.js

@@ -1,35 +1,59 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchCarReservations } from '../../redux/thunk';
 
 const MyReservationsList = () => {
-    const dispatch = useDispatch();
-    const myReservations = useSelector((state) => state.reservation.reservations);
-    const status = useSelector((state) => state.reservation.status);
-    const error = useSelector((state) => state.reservation.error);
+    const mockData = [
+        {
+          id: 1,
+          car: {
+            id: 3,
+            name: "Car1"
+          },
+          date: "2023-01-02",
+          city: "No Peace"
+        },
+        {
+          id: 2,
+          car: {
+            id: 4,
+            name: "Car2"
+          },
+          date: "2023-01-03",
+          city: "Tranquil Town"
+        },
+        // Add more mock data as needed
+      ];
+  const dispatch = useDispatch();
+//   const myReservations = useSelector((state) => state.reservation.reservations);
+const myReservations = mockData;
+  const status = useSelector((state) => state.reservation.status);
+  const error = useSelector((state) => state.reservation.error);
 
-    useEffect(() => {
-        dispatch(fetchCarReservations());
-    }, [dispatch]);
+  useEffect(() => {
+    dispatch(fetchCarReservations());
+  }, [dispatch]);
 
-    if (status === 'loading') {
+  if (status === 'loading') {
     return <p>Loading...</p>;
-    }
+  }
 
-    if (status === 'failed') {
+  if (status === 'failed') {
     return <p>Error: {error}</p>;
-    }
+  }
 
-    return (
-    <div>
-        <h1>My Reservations</h1>
-        {myReservations.map((reservation) => (
-        <div key={reservation.id}>
-            <p>{`Car: ${reservation.car.name}, Date: ${reservation.date}, City: ${reservation.city}`}</p>
+  return (
+    <div className='my-reservations-inner'>
+      <h1>My Reservations</h1>
+      {myReservations && myReservations.map((reservation) => (
+        <div key={reservation.id} className='each-reservation-div'>
+          <span>{`Car: ${reservation.car.name}`}</span>
+          <span>{`Date: ${reservation.date}`}</span>
+          <span>{`City: ${reservation.city}`}</span>
         </div>
-        ))}
+      ))}
     </div>
-    );
+  );
 };
 
 export default MyReservationsList;

src/layout/UsersDashboard/sideNav/Nav.js

@@ -2,10 +2,19 @@ import React from "react";
 
 import styled from "@emotion/styled";
 
+import { useDispatch } from "react-redux";
+
 import navConfig from "./navConfig";
 import { NavBoxItem } from "../../../components/Link/Link";
+import { logoutUser } from "../../../redux/thunk";
 
 const Nav = () => {
+  const dispatch = useDispatch();
+
+  const handleLogout = () => {
+    dispatch(logoutUser());
+    console.log('log out successful');
+  }
   return (
     <Container>
       <NavbtnSection>
@@ -15,8 +24,8 @@ const Nav = () => {
           </NavBoxItem>
         ))}
       </NavbtnSection>
-      <LogoutBtn>
-        <NavBoxItem path={'/account/signin'}>
+      <LogoutBtn onClick={handleLogout}>
+        <NavBoxItem path={'/'}>
           Logout
         </NavBoxItem>
       </LogoutBtn>

src/layout/UsersDashboard/sideNav/navConfig.js

@@ -3,8 +3,8 @@ import {
   MY_RESERVATIONS,
   USERDASHBOARDHOME,
   ADD_NEW_CAR,
-  DELETE_RESERVATION,
-  CONTACT
+  CONTACT,
+  DELETE_CAR
 } from '../../../routes/routeConstants';
 
 const navConfig = [
@@ -33,8 +33,8 @@ const navConfig = [
   },
 
   {
-    title: 'Delete Reservation',
-    path: DELETE_RESERVATION,
+    title: 'Delete Car',
+    path: DELETE_CAR,
     // icon: PlaneIcon(),
   },
 

src/pages/Auth/SignIn/SigninForm.js

@@ -15,8 +15,11 @@ const SignInForm = () => {
   const handleSubmit = (values) => {
     console.log(values);
     dispatch(loginUser(values));
-    console.log('Login successful');
-    navigate('/');
+    if (getAuthenticationToken()) {
+      console.log('token status:', getAuthenticationToken());
+      console.log('Login successful');
+      navigate('/u/dashboard/home');
+    }
   };
 
   return (

src/pages/Auth/SignUp/SignupForm.js

@@ -14,7 +14,8 @@ const SignUpForm = () => {
   const handleSubmit = (values) => {
     console.log(values);
     dispatch(registerUser(values));
-    navigate('/');
+    console.log('Sigup successful');
+    navigate('/u/dashboard/home');
   };
 
   return (

src/redux/authentication/authenticationSlice.js

@@ -49,7 +49,9 @@ const authenticationSlice = createSlice({
       })
       .addCase(logoutUser.fulfilled, (state, action) => {
         state.authenticatedUser = {};
+        console.log('user has been logged out')
         state.status = action.payload.status;
+        console.log('current status is:', state.status)
       })
       .addCase(logoutUser.rejected, (state, action) => {
         state.status = 'failed';

src/redux/reservations/reservationSlice.js

@@ -33,6 +33,8 @@ const reservationSlice = createSlice({
       .addCase(fetchCarReservations.fulfilled, (state, action) => {
         state.status = 'succeeded';
         state.reservations = action.payload.data;
+        console.log('the reservations: ')
+        console.log(state.reservations);
       })
       .addCase(fetchCarReservations.rejected, (state, action) => {
         state.status = 'failed';

src/routes/routeConstants.js

@@ -9,7 +9,7 @@ export const HOME = '/';
 export const MY_RESERVATIONS = 'my-reservations';
 export const RESERVE_CARS = 'reserve-cars';
 export const ADD_NEW_CAR = 'add-new-car';
-export const DELETE_RESERVATION = 'delete-reservation';
+export const DELETE_CAR = 'delete-car';
 export const CONTACT = 'contact'
 export const ITEMS = 'cars';
 export const ITEM_DETAIL = '/u/dashboard/item-details';

src/routes/routes.js

@@ -21,16 +21,17 @@ import {
   USERDASHBOARDHOME,
   USERS_DASHBOARD,
   ADD_NEW_CAR,
-  DELETE_RESERVATION,
+  DELETE_CAR,
   ITEM_DETAIL,
   CONTACT,
   NOTFOUND,
 } from './routeConstants';
 import UsersDashboardLayout from '../layout/UsersDashboard/UsersDashboardLayout';
 import DashboardHome from '../pages/UserDashboard/DashboardHome';
 import AddNewCar from '../pages/LandingPage/AddNewCar/AddNewCar';
-import DeleteReservation from '../pages/LandingPage/DeleteReservation/DeleteReservation';
+import DeleteCar from '../pages/LandingPage/DeleteCar/DeleteCar';
 import Contact from '../pages/LandingPage/Contact/Contact';
+import DeleteList from '../components/DeleteCars/DeleteList';
 
 export default function Router() {
   return useRoutes([
@@ -52,7 +53,7 @@ export default function Router() {
         { path: RESERVE_CARS, element: <ReserveCars /> },
         { path: ADD_NEW_CAR, element: <AddNewCar /> },
         { path: ITEM_DETAIL, element: <ItemDetail />},
-        { path: DELETE_RESERVATION, element: <DeleteReservation /> },
+        { path: DELETE_CAR, element: <DeleteList /> },
         { path: CONTACT, element: <Contact /> },
 
         { path: NOTFOUND, element: <NotFound404 /> },

src/styles/App.css

@@ -66,3 +66,21 @@ select.css-zdsokt {
   border-radius: 3rem;
   min-width: 150px;
 }
+
+.my-reservations-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+}
+
+.each-reservation-div {
+  width: 100%;
+  padding: 1rem 2rem;
+  background: #fff;
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+}