Create delete hotel page, add basic hotel reducer

src/App.js

@@ -1,7 +1,8 @@
 import { Routes, Route } from 'react-router-dom';
+import DeleteHotel from './pages/admin/deleteHotel/DeleteHotel';
 import SplashScreen from './pages/registration/SplashScreen';
 import Signup from './pages/registration/signup/Signup';
-import AddHotel from './pages/admin/addHotel/addHotel';
+import AddHotel from './pages/admin/addHotel/AddHotel';
 import Sidebar from './components/Sidebar/Sidebar';
 import LogIn from './pages/registration/LogIn';
 import Reserve from './pages/reserve/Reserve';
@@ -22,6 +23,7 @@ function App() {
           <Route path="/login" element={<LogIn />} />
           <Route path="/reserve" element={<Reserve />} />
           <Route path="/add_hotel" element={<AddHotel />} />
+          <Route path="/delete_hotel" element={<DeleteHotel />} />
         </Routes>
       </main>
     </>

src/components/DeleteHotel/DeleteHotelList.js

@@ -0,0 +1,26 @@
+import { useSelector } from 'react-redux';
+import DeleteHotelListRow from './DeleteHotelListRow';
+import style from './DeleteHotelList.module.css';
+
+const DeleteHotelList = () => {
+  const hotels = useSelector((state) => state.hotel.hotels);
+  return (
+    <table className={style['delete-table']}>
+      <thead>
+        <tr className="fs-5">
+          <th>Hotel Name</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        {
+          hotels.map((hotel) => (
+            <DeleteHotelListRow key={hotel.id} id={hotel.id} name={hotel.name} />
+          ))
+        }
+      </tbody>
+    </table>
+  );
+};
+
+export default DeleteHotelList;

src/components/DeleteHotel/DeleteHotelList.module.css

@@ -0,0 +1,36 @@
+.delete-table {
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.9em;
+  font-family: sans-serif;
+  width: 75%;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+.delete-table thead tr {
+  background-color: var(--green);
+  color: #fff;
+  text-align: left;
+}
+
+.delete-table th,
+.delete-table td {
+  padding: 0.75rem 1rem;
+}
+
+.delete-table tbody tr {
+  border-bottom: 1px solid #ddd;
+}
+
+.delete-table tbody tr:nth-of-type(even) {
+  background-color: #f3f3f3;
+}
+
+.delete-table tbody tr:last-of-type {
+  border-bottom: 2px solid var(--green);
+}
+
+.delete-table tbody tr.active-row {
+  font-weight: bold;
+  color: var(--green);
+}

src/components/DeleteHotel/DeleteHotelListRow.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { deleteHotel } from '../../redux/hotels/hotel-slice';
+
+const DeleteHotelListRow = ({ id, name }) => {
+  const dispatch = useDispatch();
+
+  const removeHotel = () => {
+    dispatch(deleteHotel({ id }));
+  };
+
+  return (
+    <tr className="border border-top-1 fs-6">
+      <th>{name}</th>
+      <th>
+        <button className="btn btn-outline-danger" onClick={removeHotel}>
+          Delete
+        </button>
+      </th>
+    </tr>
+  );
+};
+
+DeleteHotelListRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default DeleteHotelListRow;

src/components/Sidebar/SidebarData.js

@@ -22,7 +22,7 @@ const SidebarData = [
   },
   {
     title: 'Delete Hotel',
-    path: '/',
+    path: '/delete_hotel',
     icon: <AiIcons.AiFillDelete />,
   },
   {

src/pages/admin/deleteHotel/DeleteHotel.js

@@ -0,0 +1,13 @@
+import DeleteHotelList from '../../../components/DeleteHotel/DeleteHotelList';
+
+const DeleteHotel = () => (
+  <section className="h-100 d-flex flex-column align-items-center">
+    <div className="text-center my-5">
+      <h1>Delete Hotel</h1>
+    </div>
+
+    <DeleteHotelList />
+  </section>
+);
+
+export default DeleteHotel;

src/redux/hotels/hotel-slice.js

@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const hotelSlice = createSlice({
+  name: 'hotel',
+  initialState: {
+    hotels: [
+      {
+        id: 1,
+        name: 'hotel1',
+      },
+      {
+        id: 2,
+        name: 'hotel2',
+      },
+      {
+        id: 3,
+        name: 'hotel3',
+      },
+      {
+        id: 4,
+        name: 'hotel4',
+      },
+      {
+        id: 5,
+        name: 'hotel5',
+      },
+    ],
+  },
+  reducers: {
+    deleteHotel(state, action) {
+      // fetch data
+      state.hotels.splice(state.hotels.findIndex((hotel) => hotel.id === action.payload.id), 1);
+    },
+  },
+});
+
+export const { deleteHotel } = hotelSlice.actions;
+export default hotelSlice.reducer;

src/redux/store.js

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from './counter/counter-slice';
+import hotelReducer from './hotels/hotel-slice';
 
 const store = configureStore({
   reducer: {
     counter: counterReducer,
+    hotel: hotelReducer,
   },
 });