TableBody components props improved, CustomerProfile component added

RbAvci · Mar 13, 2024 · e02e398 · e02e398
1 parent 72cfd36
commit e02e398
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 31 deletions.
diff --git a/src/components/SearchResults/SearchResults.jsx b/src/components/SearchResults/SearchResults.jsx
@@ -1,32 +1,29 @@
 // SearchResults.jsx
-import React from "react";
+import React, { useState } from "react";
 import TableHead from "./TableHead";
 import TableBody from "./TableBody";
-import dayjs from "dayjs";
+import CustomerProfile from "../CustomerProfile/CustomerProfile";
 
-const SearchResults = ({ results }) => {
+const SearchResults = ({ bookings }) => {
+  const [selectedProfile, setSelectedProfile] = useState(null);
+
+  function handleShowProfile(e) {
+    setSelectedProfile(Number(e.target.value));
+  }
   return (
-    <table>
-      <thead>
-        <TableHead />
-      </thead>
-      <tbody>
-        {results.map((booking) => (
-          <TableBody
-            key={booking.id}
-            id={booking.id}
-            title={booking.title}
-            firstName={booking.firstName}
-            surName={booking.surname}
-            nights={dayjs(booking.checkOutDate)
-              .diff(dayjs(booking.checkInDate), "days")
-              .toString()
-              .padStart(2, "0")}
-            email={booking.email}
-          />
-        ))}
-      </tbody>
-    </table>
+    <>
+      <table>
+        <thead>
+          <TableHead />
+        </thead>
+        <tbody>
+          {bookings.map((booking) => (
+            <TableBody key={booking.id} booking={booking} handleShowProfile={handleShowProfile} />
+          ))}
+        </tbody>
+      </table>
+      <CustomerProfile id={selectedProfile} bookings={bookings} />
+    </>
   );
 };
 

diff --git a/src/components/SearchResults/TableBody.jsx b/src/components/SearchResults/TableBody.jsx
@@ -1,14 +1,26 @@
 import React from "react";
+import dayjs from "dayjs";
 
-const TableBody = ({ id, title, firstName, surName, email, nights }) => {
+const TableBody = ({ booking, handleShowProfile }) => {
+  const testid = "showProfileButton" + booking.id;
   return (
     <tr>
-      <td>{id}</td>
-      <td>{title}</td>
-      <td>{firstName}</td>
-      <td>{surName}</td>
-      <td>{nights}</td>
-      <td>{email}</td>
+      <td>{booking.id}</td>
+      <td>{booking.title}</td>
+      <td>{booking.firstName}</td>
+      <td>{booking.surname}</td>
+      <td>
+        {dayjs(booking.checkOutDate)
+          .diff(dayjs(booking.checkInDate), "days")
+          .toString()
+          .padStart(2, "0")}
+      </td>
+      <td>{booking.email}</td>
+      <td>
+        <button data-testid={testid} value={booking.id} onClick={handleShowProfile}>
+          Show Profile
+        </button>
+      </td>
     </tr>
   );
 };