Merge pull request #62 from areebsattar/main

updated

.eslintrc.cjs

@@ -16,5 +16,6 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "react/prop-types": "off",
   },
 };

src/components/Bookings/Bookings.jsx

@@ -1,11 +1,25 @@
 import Search from "@/components/Search/Search";
 import SearchResult from "../SearchResult/SearchResult";
-import FakeBookings from "@/data/fakeBookings.json";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const Bookings = () => {
-  const [bookings, setBookings] = useState(FakeBookings);
+  const [bookings, setBookings] = useState([]);
 
+  useEffect(() => {
+    fetch("https://nw6-cyf-hotel.glitch.me/fakebookings")
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`${res.status}: ${getReasonPhrase(res.status)}`);
+        }
+        return res.json();
+      })
+      .then((data) => setBookings(data))
+      .catch((error) => {
+        setFetchError(error);
+        console.log(error);
+      });
+  }),
+    [];
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
     const searchValueCase = searchVal.toLowerCase();

src/components/CustomerProfile/CustomerProfile.jsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+function CustomerProfile({ id }) {
+  const [customerProfileData, setCustomerProfileData] = useState(null);
+
+  useEffect(() => {
+    fetch(`https://cyf-hotel-api.netlify.app/customers/${id}`)
+      .then((res) => res.json())
+      .then((data) => setCustomerProfileData(data))
+      .catch((error) =>
+        console.error("Error fetching customer profile:", error)
+      );
+  }, [id]);
+
+  if (!customerProfileData) {
+    return (
+      <tr className="customer-row">
+        <td colSpan={2}>Loading...</td>
+      </tr>
+    );
+  }
+  return (
+    <tr className="customer-row">
+          <td colSpan={2}>{customerProfileData.phoneNumber}</td>
+          <td colSpan={2} className={customerProfileData.vip ? "vip-customer": ""}>
+          {customerProfileData.vip ? `VIP Customer`: `Regular Customer`}
+          </td>
+          <td>ID: {customerProfileData.id}</td>
+    </tr>
+  );
+}
+
+export default CustomerProfile;

src/components/CustomerProfile/CustomerProfile.test.jsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import CustomerProfile from "./CustomerProfile";
+
+describe("CustomerProfile", () => {
+  it("renders loading state initially", () => {
+    render(<CustomerProfile id={1} />);
+    const loadingText = screen.getByText("Loading...");
+    expect(loadingText).toBeInTheDocument();
+  });
+
+  it("renders customer profile after data is fetched", async () => {
+    global.fetch = () =>
+      Promise.resolve({
+        json: async () => ({
+          id: 1,
+          phoneNumber: "+44 1632 960185",
+          vip: true,
+        }),
+      });
+
+    render(<CustomerProfile id={1} />);
+
+    await screen.findByText("+44 1632 960185");
+
+    const phoneNumber = screen.getByText("+44 1632 960185");
+    expect(phoneNumber).toBeInTheDocument();
+    expect(screen.getByText("VIP Customer")).toBeInTheDocument();
+    expect(screen.getByText("ID: 1")).toBeInTheDocument();
+  });
+});

src/components/Footer/Footer.jsx

@@ -1,16 +1,14 @@
 import React from "react";
-import "./Footer.scss"
+import "./Footer.scss";
 
 export default function Footer(props) {
   return (
     <>
-      <footer>
-        <ul>
-          {props.details.map((detail, id) => (
-            <li key={id}>{detail}</li>
-          ))}
-        </ul>
-      </footer>
+      <ul>
+        {props.details.map((detail, id) => (
+          <li key={id}>{detail}</li>
+        ))}
+      </ul>
     </>
   );
 }

src/components/SearchResult/SearchResult.jsx

@@ -1,39 +1,18 @@
 import "./SearchResult.scss";
-import TableBody from "./TableBody";
-import TableHead from "./TableHead";
-import dayjs from "dayjs";
 
-function SearchResult(props) {
-  const Bookings = props.results;
+import CustomerProfile from "../CustomerProfile/CustomerProfile";
+import Table from "./Table";
+
+
+
+function SearchResult() {
+
+
   return (
-    <table>
-      <thead>
-        <TableHead />
-      </thead>
-      <tbody>
-        {Bookings.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}
-              />
-          );
-        })}
-      </tbody>
-    </table>
+    <>
+      <Table />
+      <CustomerProfile />
+    </>
   );
 }
 export default SearchResult;
-

src/components/SearchResult/Table.jsx

@@ -0,0 +1,41 @@
+import TableBody from "./TableBody";
+import TableHead from "./TableHead";
+import dayjs from "dayjs";
+import FakeBookings from "@/data/fakeBookings.json";
+
+function Table() {
+  const Bookings = FakeBookings;
+  return (
+    <>
+      <table>
+        <thead>
+          <TableHead />
+        </thead>
+        <tbody>
+          {Bookings.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}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default Table;

src/components/SearchResult/TableBody.jsx

@@ -1,9 +1,16 @@
 import React from "react";
 import { useState } from "react";
+import CustomerProfile from "../CustomerProfile/CustomerProfile";
 function TableBody(props) {
   const [selectedRow, setSelectedRow] = useState("unselect");
+  const [showProfile, setShowProfile] = useState(false);
   function handleSelect() {
     setSelectedRow(selectedRow === "unselect" ? "selected" : "unselect");
+    showProfileHandle();
+  }
+
+  function showProfileHandle() {
+    setShowProfile(!showProfile);
   }
   let {
     id,
@@ -33,7 +40,9 @@ function TableBody(props) {
         <td>{checkInDate}</td>
         <td>{checkOutDate}</td>
         <td>{stayNights}</td>
+        <td><button className="btn-show-customer-profile" onClick={handleSelect}>Show Profile</button></td>
       </tr>
+      {showProfile ? <CustomerProfile id={id}/> : null}
     </>
   );
 }

src/components/SearchResult/TableHead.jsx

@@ -11,6 +11,7 @@ function TableHead() {
         <th>Check in date</th>
         <th>Check out date</th>
         <th>Total Nights to Stay</th>
+        <th>Profile</th>
       </tr>
     </>
   );