From 0fa0603ec9b045b198fd6e7eca5265a5cd092fdf Mon Sep 17 00:00:00 2001
From: Pedro Ricciardi <riccip@outlook.com>
Date: Thu, 14 Mar 2024 09:32:00 +0000
Subject: [PATCH 1/5] fetching bookings from api

---
 src/components/Bookings/Bookings.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index 5cbbea4..3329c36 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -1,16 +1,23 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import Search from "@/components/Search/Search";
 import FakeBookings from "@/data/fakeBookings.json";
 import SearchResults from "@/components/SearchResults/SearchResults";
 
 const Bookings = () => {
+  const API = "https://cyf-hotel-api.netlify.app/";
+  const [bookings, setBookings] = useState([]);
+
+  useEffect(() => {
+    fetch(API)
+      .then((response) => response.json())
+      .then((data) => setBookings(data));
+  }, []);
+
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
   };
 
-  const [bookings, setBookings] = useState(FakeBookings);
-
   return (
     <main className="bookings">
       <Search search={search} />
@@ -19,4 +26,4 @@ const Bookings = () => {
   );
 };
 
-export default Bookings;
\ No newline at end of file
+export default Bookings;

From 162a276a443ad2aa36c9e60cd604ac0180c9650a Mon Sep 17 00:00:00 2001
From: Pedro Ricciardi <riccip@outlook.com>
Date: Thu, 14 Mar 2024 10:02:58 +0000
Subject: [PATCH 2/5] catch error implemented

---
 src/components/Bookings/Bookings.jsx  | 20 +++++++++++++++++---
 src/components/Bookings/Bookings.scss |  9 +++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index 3329c36..934eff9 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -1,23 +1,37 @@
 import { useState, useEffect } from "react";
-
 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) => response.json())
-      .then((data) => setBookings(data));
+      .then((data) => setBookings(data))
+      .catch((error) => {
+        setFetchError(error);
+        console.log(error);
+      });
   }, []);
 
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
   };
 
+  if (fetchError) {
+    return (
+      <main id="bookings-fetch-error-message">
+        <h2>There was an error fetching the data</h2>
+        <h3>{fetchError.name}</h3>
+        <p>{fetchError.message}</p>
+      </main>
+    );
+  }
   return (
     <main className="bookings">
       <Search search={search} />
diff --git a/src/components/Bookings/Bookings.scss b/src/components/Bookings/Bookings.scss
index e69de29..1887259 100644
--- a/src/components/Bookings/Bookings.scss
+++ b/src/components/Bookings/Bookings.scss
@@ -0,0 +1,9 @@
+#bookings-fetch-error-message {
+  margin: 1rem auto;
+
+  h2,
+  h3,
+  p {
+    margin: 0.5rem;
+  }
+}

From 73d7d2862b0086325ed0696fb807b9257175bc30 Mon Sep 17 00:00:00 2001
From: Pedro Ricciardi <riccip@outlook.com>
Date: Thu, 14 Mar 2024 10:03:14 +0000
Subject: [PATCH 3/5] correct api back

---
 src/components/Bookings/Bookings.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index 934eff9..b8e329c 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -32,6 +32,7 @@ const Bookings = () => {
       </main>
     );
   }
+  
   return (
     <main className="bookings">
       <Search search={search} />

From 2f24061e38caa9cd3cd323bbfb00de2b29f2ba3c Mon Sep 17 00:00:00 2001
From: Pedro Ricciardi <riccip@outlook.com>
Date: Thu, 14 Mar 2024 10:24:15 +0000
Subject: [PATCH 4/5] error managment improved

---
 package-lock.json                    |  6 ++++++
 package.json                         |  1 +
 src/components/Bookings/Bookings.jsx | 16 ++++++++++++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index df034c7..aecab89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "dayjs": "^1.11.10",
+        "http-status-codes": "^2.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -3086,6 +3087,11 @@
         "node": ">= 14"
       }
     },
+    "node_modules/http-status-codes": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA=="
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
diff --git a/package.json b/package.json
index 64d2226..8b9d71c 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index b8e329c..8ea3fe4 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -1,17 +1,25 @@
 import { useState, useEffect } from "react";
+import { getReasonPhrase } from "http-status-codes";
 import Search from "@/components/Search/Search";
 import SearchResults from "@/components/SearchResults/SearchResults";
 
 import "./Bookings.scss";
 
 const Bookings = () => {
-  const API = "https://cyf-hotel-api.netlify.app/";
+  const API = "https://cyf-hotel-api.netlify.app/error";
   const [bookings, setBookings] = useState([]);
   const [fetchError, setFetchError] = useState(null);
 
   useEffect(() => {
     fetch(API)
-      .then((response) => response.json())
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `${response.status}: ${getReasonPhrase(response.status)}`
+          );
+        }
+        return response.json();
+      })
       .then((data) => setBookings(data))
       .catch((error) => {
         setFetchError(error);
@@ -27,12 +35,12 @@ const Bookings = () => {
     return (
       <main id="bookings-fetch-error-message">
         <h2>There was an error fetching the data</h2>
-        <h3>{fetchError.name}</h3>
+        <h3>Description</h3>
         <p>{fetchError.message}</p>
       </main>
     );
   }
-  
+
   return (
     <main className="bookings">
       <Search search={search} />

From 007b29fb05ddf15a08b29948aaa1ccbf1a6baefe Mon Sep 17 00:00:00 2001
From: Pedro Ricciardi <riccip@outlook.com>
Date: Thu, 14 Mar 2024 10:24:53 +0000
Subject: [PATCH 5/5] correct api back

---
 src/components/Bookings/Bookings.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index 8ea3fe4..8459c10 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -6,7 +6,7 @@ import SearchResults from "@/components/SearchResults/SearchResults";
 import "./Bookings.scss";
 
 const Bookings = () => {
-  const API = "https://cyf-hotel-api.netlify.app/error";
+  const API = "https://cyf-hotel-api.netlify.app/";
   const [bookings, setBookings] = useState([]);
   const [fetchError, setFetchError] = useState(null);