Merge pull request #53 from HadikaMalik/PedroRicciardi/Feature/FetchB…

…ookings

Pedro Ricciardi/Feature/Fetch Bookings

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "dayjs": "^1.11.10",
+    "http-status-codes": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/components/Bookings/Bookings.jsx

@@ -1,15 +1,45 @@
-import { useState } from "react";
-
+import { useState, useEffect } from "react";
+import { getReasonPhrase } from "http-status-codes";
 import Search from "@/components/Search/Search";
-import FakeBookings from "@/data/fakeBookings.json";
 import SearchResults from "@/components/SearchResults/SearchResults";
 
+import "./Bookings.scss";
+
 const Bookings = () => {
+  const API = "https://cyf-hotel-api.netlify.app/";
+  const [bookings, setBookings] = useState([]);
+  const [fetchError, setFetchError] = useState(null);
+
+  useEffect(() => {
+    fetch(API)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `${response.status}: ${getReasonPhrase(response.status)}`
+          );
+        }
+        return response.json();
+      })
+      .then((data) => setBookings(data))
+      .catch((error) => {
+        setFetchError(error);
+        console.log(error);
+      });
+  }, []);
+
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
   };
 
-  const [bookings, setBookings] = useState(FakeBookings);
+  if (fetchError) {
+    return (
+      <main id="bookings-fetch-error-message">
+        <h2>There was an error fetching the data</h2>
+        <h3>Description</h3>
+        <p>{fetchError.message}</p>
+      </main>
+    );
+  }
 
   return (
     <main className="bookings">

src/components/Bookings/Bookings.scss

@@ -0,0 +1,9 @@
+#bookings-fetch-error-message {
+  margin: 1rem auto;
+
+  h2,
+  h3,
+  p {
+    margin: 0.5rem;
+  }
+}