NW6 | nazanin_Saedi | Feature-sort-table-column | reactProject | Week4

src/components/SearchButton/SearchButton.test.jsx

@@ -13,3 +13,5 @@ describe("Search Button", () => {
   //     expect(searchButton).toBeInTheDocument();
   //   });
 });
+
+

src/components/SearchResult/SearchResult.jsx

@@ -1,40 +1,81 @@
+import React, { useState } from 'react';
 import "./SearchResult.scss";
 import FakeBookings from "@/data/fakeBookings.json";
 import TableBody from "./TableBody";
 import TableHead from "./TableHead";
 import dayjs from "dayjs";
 
 const Bookings = FakeBookings;
+
 function SearchResult() {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });
+
+  // Function to handle sorting when a column header is clicked
+  const handleSort = (key) => {
+    let direction = 'ascending';
+    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
+      direction = 'descending';
+    }
+    setSortConfig({ key, direction });
+  };
+
+
+  // Sorting function based on the current sort configuration
+  const sortedBookings = [...Bookings].sort((a, b) => {
+    if (sortConfig.key === null) return 0;
+
+    let aValue = a[sortConfig.key];
+    let bValue = b[sortConfig.key];
+
+    // Special handling for 'roomId' sorting
+    if (sortConfig.key === 'roomId') {
+      // Convert string room IDs to numbers for proper sorting
+      aValue = parseInt(aValue);
+      bValue = parseInt(bValue);
+    }
+
+    const sortOrder = sortConfig.direction === 'ascending' ? 1 : -1;
+    return aValue - bValue * sortOrder;
+  });
+
   return (
     <table>
       <thead>
-        <TableHead />
+        <tr>
+          <th onClick={() => handleSort('id')}>ID</th>
+          <th onClick={() => handleSort('title')}>Title</th>
+          <th onClick={() => handleSort('firstName')}>First Name</th>
+          <th onClick={() => handleSort('surname')}>Surname</th>
+          <th onClick={() => handleSort('email')}>Email</th>
+          <th onClick={() => handleSort('roomId')}>Room ID</th>
+          <th onClick={() => handleSort('checkInDate')}>Check In Date</th>
+          <th onClick={() => handleSort('checkOutDate')}>Check Out Date</th>
+        </tr>
       </thead>
       <tbody>
-        {Bookings.map((book) => {
+        {sortedBookings.map((book) => {
           const stayNightsTotal = dayjs(book.checkOutDate).diff(
             dayjs(book.checkInDate),
             "day"
           );
           return (
-              <TableBody
-                key={book.id}
-                id={book.id}
-                title={book.title}
-                firstName={book.firstName}
-                surName={book.surname}
-                email={book.email}
-                roomId={book.roomId}
-                checkInDate={book.checkInDate}
-                checkOutDate={book.checkOutDate}
-                stayNights={stayNightsTotal}
-              />
+            <TableBody
+              key={book.id}
+              id={book.id}
+              title={book.title}
+              firstName={book.firstName}
+              surName={book.surname}
+              email={book.email}
+              roomId={book.roomId}
+              checkInDate={book.checkInDate}
+              checkOutDate={book.checkOutDate}
+              stayNights={stayNightsTotal}
+            />
           );
         })}
       </tbody>
     </table>
   );
 }
-export default SearchResult;
 
+export default SearchResult;

src/components/SearchResult/SearchResult.scss

@@ -4,8 +4,8 @@ table {
 }
 
 thead {
-  background-color: rgb(31, 11, 31);
-  color: white;
+  background-color: rgb(37, 12, 37);
+  color: rgb(248, 230, 230);
 }
 
 th,
@@ -22,5 +22,5 @@ th {
   cursor: pointer;
 }
 .selected {
-  background-color: skyblue;
+  background-color: rgb(241, 176, 249);
 }

src/components/SearchResult/TableHead.jsx

@@ -2,6 +2,7 @@ function TableHead() {
   return (
     <>
       <tr>
+
         <th>ID</th>
         <th>Title</th>
         <th>First name</th>
@@ -11,6 +12,7 @@ function TableHead() {
         <th>Check in date</th>
         <th>Check out date</th>
         <th>Total Nights to Stay</th>
+
       </tr>
     </>
   );