Feature implement search functionality

src/components/Bookings/Bookings.jsx

@@ -4,41 +4,47 @@ import { useState, useEffect } from "react";
 
 const Bookings = () => {
   const [bookings, setBookings] = useState([]);
+  const [fetchError, setFetchError] = useState(null);
 
   useEffect(() => {
-    fetch("https://nw6-cyf-hotel.glitch.me/fakebookings")
+    fetch("https://cyf-hotel-api.netlify.app/")
       .then((res) => {
         if (!res.ok) {
-          throw new Error(`${res.status}: ${getReasonPhrase(res.status)}`);
+          throw new Error(`${res.status}: ${res.statusText}`);
         }
         return res.json();
       })
       .then((data) => setBookings(data))
       .catch((error) => {
         setFetchError(error);
-        console.log(error);
+        console.error(error);
       });
-  }),
-    [];
+  }, []);
+
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
     const searchValueCase = searchVal.toLowerCase();
-    const fils = FakeBookings.filter((book) => {
-      const firstName = book.firstName.toLowerCase();
-      const lastName = book.surname.toLowerCase();
+    const filteredBookings = bookings.filter((booking) => {
+      const firstName = booking.firstName.toLowerCase();
+      const lastName = booking.surname.toLowerCase();
       return (
         firstName.includes(searchValueCase) ||
         lastName.includes(searchValueCase)
       );
     });
-    setBookings(fils);
+    setBookings(filteredBookings);
   };
 
   return (
     <main className="bookings">
       <Search search={search} />
-      <SearchResult results={bookings} />
+      {fetchError ? (
+        <div>Error: {fetchError.message}</div>
+      ) : (
+        <SearchResult results={bookings} />
+      )}
     </main>
   );
 };
+
 export default Bookings;

src/components/Search/Search.jsx

@@ -13,6 +13,7 @@ const Search = (props) => {
     event.preventDefault();
     props.search(searchInput);
   };
+
   return (
     <section className="search">
       <header className="search__header">

src/components/SearchResult/SearchResult.jsx

@@ -3,14 +3,10 @@ import "./SearchResult.scss";
 import CustomerProfile from "../CustomerProfile/CustomerProfile";
 import Table from "./Table";
 
-
-
-function SearchResult() {
-
-
+function SearchResult({ results }) {
   return (
     <>
-      <Table />
+      <Table bookings={results} />
       <CustomerProfile />
     </>
   );

src/components/SearchResult/Table.jsx

@@ -1,18 +1,18 @@
 import TableBody from "./TableBody";
 import TableHead from "./TableHead";
 import dayjs from "dayjs";
-import FakeBookings from "@/data/fakeBookings.json";
+// import FakeBookings from "@/data/fakeBookings.json";
 
-function Table() {
-  const Bookings = FakeBookings;
+function Table({ bookings }) {
+  // const Bookings = bookings;
   return (
     <>
       <table>
         <thead>
           <TableHead />
         </thead>
         <tbody>
-          {Bookings.map((book) => {
+          {bookings.map((book) => {
             const stayNightsTotal = dayjs(book.checkOutDate).diff(
               dayjs(book.checkInDate),
               "day"