My reservations feature

src/components/MyReservations/MyReservationsList.js

@@ -1 +1,35 @@
-// my reservations list component
+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);
+
+    useEffect(() => {
+        dispatch(fetchCarReservations());
+    }, [dispatch]);
+
+    if (status === 'loading') {
+    return <p>Loading...</p>;
+    }
+
+    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>
+        </div>
+        ))}
+    </div>
+    );
+};
+
+export default MyReservationsList;

src/pages/Auth/SignIn/SignIn.js

@@ -2,9 +2,12 @@ import React from 'react';
 import SignInForm from './SigninForm';
 
 const SignIn = () => (
-  <div>
-    <h1>Login Page</h1>
-    <SignInForm />
+  <div className='signin-page-outer'>
+    <h1 id='login-title'>Sign in</h1>
+    <p className='user-headline'>Hello there! Sign in and start managing your application</p>
+    <div className='login-form-outer'>
+      <SignInForm />
+    </div>
   </div>
 );
 

src/pages/Auth/SignUp/SignUp.js

@@ -3,9 +3,12 @@ import { NavLink } from 'react-router-dom';
 import SignUpForm from './SignupForm';
 
 const SignUp = () => (
-  <div>
-    <h1>Signup page</h1>
-    <SignUpForm />
+  <div className='signup-page-outer'>
+    <h1 id='signup-title'>Sign up</h1>
+    <p className='user-headline'>Hello there! Register and start managing your application</p>
+    <div className='signup-form-outer'>
+      <SignUpForm />
+    </div>
     <p>Have an existing account ?</p>
     <NavLink to="/account/signin">
       Log In

src/pages/LandingPage/MyReservation/MyReservation.js

@@ -1,5 +1,11 @@
 import React from 'react';
+import MyReservationsList from '../../../components/MyReservations/MyReservationsList';
 
-const MyReservations = () => <p>My Reservations</p>;
+const MyReservations = () => (
+    <div className='my-reservations-page-outer'>
+        <h1>My Current Reservations</h1>
+        <MyReservationsList />
+    </div>
+);
 
 export default MyReservations;

src/redux/reservations/reservationSlice.js

@@ -1,8 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { postReserveCar } from '../thunk';
+import { fetchCarReservations, postReserveCar } from '../thunk';
 
 const initialState = {
   reservation: {},
+  reservations: [],
   status: 'idle',
   error: null,
 };
@@ -24,6 +25,18 @@ const reservationSlice = createSlice({
       .addCase(postReserveCar.rejected, (state, action) => {
         state.status = 'failed';
         state.error = action.error.message;
+      })
+      .addCase(fetchCarReservations.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(fetchCarReservations.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.reservations = action.payload.data;
+      })
+      .addCase(fetchCarReservations.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.error.message;
       });
   },
 });

src/redux/thunk.js

@@ -108,3 +108,20 @@ export const postReserveCar = createAsyncThunk(
     }
   },
 );
+
+export const fetchCarReservations = createAsyncThunk(
+    'reservations/fetchCarReservations',
+    async (_, thunkAPI) => {
+      try {
+        const token = localStorage.getItem('token');
+        const response = await axios.get(`${baseURL}/my_reservations`, {
+          headers: {
+            Authorization: token,
+          },
+        });
+        return response.data;
+      } catch (error) {
+        return thunkAPI.rejectWithValue(error);
+      }
+    },
+);

src/styles/App.css

@@ -5,13 +5,31 @@
   font-family: 'Lato', sans-serif;
 }
 
+.signin-page-outer,
+.signup-page-outer,
+.my-reservations-page-outer {
+  background: #ffd700;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  gap: 2rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+p.user-headline {
+  text-align: center;
+  width: 70%;
+}
+
 .reserve-car-outer {
-  background: url('../assets/reserve_page_background.png') center/cover;
+  background: url('../assets/yellow-background-image-2.png') center/cover;
   height: 100vh;
 }
 
 .reserve-car-inner {
-  color: #fff;
+  color: #000;
   width: 100%;
   height: 100%;
   display: flex;