Feature/page reservations

package.json

@@ -6,6 +6,7 @@
     "@reduxjs/toolkit": "^1.8.2",
     "@testing-library/user-event": "^13.5.0",
     "html-react-parser": "^1.4.14",
+    "luxon": "^2.4.0",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

src/App.js

@@ -9,6 +9,7 @@ import Reserve from './pages/reserve/Reserve';
 import Hotels from './pages/Hotels';
 import HotelDetails from './pages/HotelDetails';
 import Main from './pages/main/Main';
+import MyReservations from './pages/MyReservations';
 import './App.css';
 
 function App() {
@@ -68,6 +69,7 @@ function App() {
           <Route path="/reserve" element={<Reserve />} />
           <Route path="/hotels" element={<Hotels hotels={hotels} />} />
           <Route path="/hotels/:id" element={<HotelDetails hotels={hotels} />} />
+          <Route path="/my_reservations" element={<MyReservations />} />
           <Route path="/add_hotel" element={<AddHotel />} />
           <Route path="/delete_hotel" element={<DeleteHotel />} />
         </Routes>

src/components/Sidebar/SidebarData.js

@@ -12,7 +12,7 @@ const SidebarData = [
   },
   {
     title: 'My Reservations',
-    path: '/',
+    path: '/my_reservations',
     icon: <IoIcons.IoIosPaper />,
   },
   {

src/pages/MyReservations.js

@@ -0,0 +1,65 @@
+import { DateTime } from 'luxon';
+
+const MyReservations = () => {
+  const reservations = [
+    {
+      id: '1',
+      name: 'Best Western',
+      price: 252.5,
+      stars: 4,
+      start_date: DateTime.local(2022, 6, 10, 17, 36),
+      end_date: DateTime.local(2022, 6, 15, 17, 36),
+    },
+    {
+      id: '2',
+      name: 'Wyndham',
+      price: 641.2,
+      stars: 5,
+      start_date: DateTime.local(2022, 7, 15, 17, 36),
+      end_date: DateTime.local(2022, 7, 21, 17, 36),
+    },
+  ];
+
+  reservations.forEach((reservation) => {
+    reservation.duration = reservation.end_date.diff(reservation.start_date, ['years', 'months', 'days', 'hours']).days;
+  });
+
+  return (
+    <>
+      <h1 className="text-center mt-5">My Reservations</h1>
+      <div className="d-flex flex-column">
+        <table className="table table-bordered table-hover">
+          <caption>All your reservations</caption>
+          <thead className="table-dark">
+            <tr>
+              <th scope="col">Hotel Name</th>
+              <th scope="col">Price</th>
+              <th scope="col" className="d-none d-sm-block">Stars</th>
+              <th scope="col">Check-in</th>
+              <th scope="col" className="d-none d-sm-block">Check-out</th>
+              <th scope="col">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {reservations.map((reservation) => (
+              <tr key={reservation.id}>
+                <td>{reservation.name}</td>
+                <td>
+                  $
+                  {reservation.price}
+                </td>
+                <td className="d-none d-sm-table-cell">{reservation.stars}</td>
+                <td>{reservation.start_date.toLocaleString()}</td>
+                <td className="d-none d-sm-table-cell">{reservation.end_date.toLocaleString()}</td>
+                <td><button type="button" className="btn btn-outline-danger">Cancel</button></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+
+  );
+};
+
+export default MyReservations;