Merge pull request #7 from hmunish/add-reservation-list

Add reservation list

src/App.css

@@ -76,7 +76,8 @@ main {
 
 /* Add reservation page starts here */
 
-section.add-reservation {
+section.add-reservation,
+section.reservation-list {
   width: 100%;
   min-height: 100vh;
   background: url(./assets/cars-bg-home.png) center no-repeat;
@@ -93,7 +94,8 @@ div.green-overlay {
   background: #96bf0ff3;
 }
 
-section.add-reservation > .wrapper {
+section.add-reservation > .wrapper,
+section.reservation-list > table {
   width: 50%;
   min-width: 500px;
   height: 50%;
@@ -109,7 +111,8 @@ section.add-reservation > .wrapper {
 }
 
 @media screen and (max-width: 500px) {
-  section.add-reservation > .wrapper {
+  section.add-reservation > .wrapper,
+  section.reservation-list > table {
     width: 90%;
     min-width: 90%;
   }
@@ -153,3 +156,17 @@ section.add-reservation > .wrapper > hr {
 }
 
 /* Add reservation page ends here */
+
+/* Reservation list starts here */
+section.reservation-list > table {
+  display: table;
+  border-collapse: collapse;
+}
+
+section.reservation-list > table td,
+th {
+  border: 1px solid #fff;
+  padding: 5px;
+}
+
+/* Reservation list ends here */

src/components/reservation/ReservationList.js

@@ -1,5 +1,52 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getReservations } from "../../redux/reservations/reservationSlice";
+import { getCars } from "../../redux/cars/carsSlice";
+
 function ReservationList() {
-  return <section className="reservation-list">Reservation List</section>;
+  const { userId } = useSelector((state) => state.login);
+  const { reservations, isLoading, isError } = useSelector(
+    (state) => state.reservations,
+  );
+  const { cars } = useSelector((state) => state.cars);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getReservations(userId));
+    dispatch(getCars());
+  }, [dispatch, userId]);
+
+  if (isLoading) return <p>Loading...</p>;
+  if (isError) return <p>Error</p>;
+
+  if (reservations) {
+    return (
+      <section className="reservation-list">
+        <div className="green-overlay" />
+        <table>
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Location</th>
+              <th>Model</th>
+            </tr>
+          </thead>
+          <tbody>
+            {reservations.map((reservation) => (
+              <tr key={reservation.id}>
+                <td>{reservation.date}</td>
+                <td>{reservation.location}</td>
+                <td>
+                  {cars.filter((car) => car.id === reservation.car_id)[0]?.name}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+    );
+  }
+
+  return <p>No reservations available</p>;
 }
 
 export default ReservationList;

src/redux/reservations/reservationSlice.js

@@ -12,13 +12,27 @@ const initialState = {
   isCreated: false,
 };
 
+export const getReservations = createAsyncThunk(
+  "reservation/getReservations",
+  async (userId, thunkAPI) => {
+    try {
+      const response = await axios.get(
+        `${API_URL}/users/${userId}/reservations`,
+      );
+      if (response.status !== 200) throw new Error("Error");
+      return response.data;
+    } catch (err) {
+      return thunkAPI.rejectWithValue("Error fetching reservations");
+    }
+  },
+);
+
 export const addReservation = createAsyncThunk(
   "reservation/addReservation",
   async ({
     userId, bookingDate: date, location, carId,
   }, thunkAPI) => {
     try {
-      console.log(userId);
       const res = await axios.post(
         `${API_URL}/users/${userId}/reservations`,
         {
@@ -57,6 +71,18 @@ export const reservationSlice = createSlice({
       state.isError = action.payload;
       state.isCreated = false;
     });
+    builder.addCase(getReservations.fulfilled, (state, action) => {
+      state.isLoading = false;
+      state.isError = false;
+      state.reservations = action.payload.status.data;
+    });
+    builder.addCase(getReservations.pending, (state) => {
+      state.isLoading = true;
+    });
+    builder.addCase(getReservations.rejected, (state, action) => {
+      state.isLoading = false;
+      state.isError = action.payload;
+    });
   },
 });