diff --git a/src/Bookings.js b/src/Bookings.js index cf6ec9fa0..01368fc66 100644 --- a/src/Bookings.js +++ b/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 (
Page loading...
: ( <> + {isError ? ( +Error loading...
+ ) : isLoading ? ( +Page loading...
+ ) : ( + <>Error loading...
+) : isLoading ? ( +Page loading...
+) : ( + <> +