23. Show an error message

Finally, display an error message in <Bookings /> if there is an HTTP error when fetching data from the server. To test this, try loading data from https://cyf-react.glitch.me/error, which will return a 500 HTTP error.

Hint: Try looking at your Pokemon app that you worked on in class for an example.

Test: When loading bookings data from the /error endpoint, an error message should be displayed on the screen.

src/Bookings.js

@@ -1,44 +1,60 @@
 import React, {useEffect, useState} from 'react';
 import Search from "./Search.js";
 import SearchResults from "./components/SearchResults.jsx";
-
-
 // import SearchResultsOther from './components/SearchResultsOther.js';
 
 const Bookings = () => {
   const [bookings, setBookings] = useState([]);
+
   const [searchVal, setSearchVal] = useState("");
 
   const [isLoading, setIsLoading] = useState(true);
-
+
+  const [isError, setIsError] = useState(false);
+
   useEffect(() => {
-    fetch("https://cyf-react.glitch.me/delayed")
+    fetch("https://cyf-react.glitch.me/error")
       .then((res) => res.json())
       .then((data) => {
-        setIsLoading(false);
-        setBookings(data);
-      });
+        if (data.error !== undefined) {
+          console.log("error");
+          setIsError(true);
+        } else {
+          setIsLoading(false);
+          setBookings(data);
+        }
+      })
   }, []);
 
+  /*
+isLoading: true, isError: false,  
+isLoading: false, isError: false, 
+isLoading: false, isError: true, 
+*/
 
-const search = searchVal => {
-  console.log("TO DO!", searchVal);
-  setSearchVal(searchVal);
-}
+  const search = (searchVal) => {
+    console.log("TO DO!", searchVal);
+    setSearchVal(searchVal);
+  };
 
-  const displayedBookings = bookings.filter(
+  let displayedBookings = bookings.filter(
     (booking) =>
       booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
       booking.surname.toLowerCase().includes(searchVal.toLowerCase())
   );
 
-
+  
   return (
     <div className="App-content">
       <div className="container">
-        {isLoading ? <p>Page loading...</p> : ( <>
+        {isError ? (
+          <p>Error loading...</p>
+        ) : isLoading ? (
+          <p>Page loading...</p>
+        ) : (
+          <>
             <Search search={search} />
-            <SearchResults  results={displayedBookings} /> 
+            <SearchResults results={displayedBookings} />
           </>
         )}
         {/* <SearchResultsOther results={bookings} /> */}
@@ -48,3 +64,4 @@ const search = searchVal => {
 };
 
 export default Bookings;
+