From 6138cbdb4b7935dc669048951730066152822362 Mon Sep 17 00:00:00 2001
From: areebsattar <areebsattar1@gmail.com>
Date: Fri, 29 Mar 2024 01:40:17 +0000
Subject: [PATCH 1/2] Loading message added

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

diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index 085416c..bb3bc95 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -3,20 +3,25 @@ import SearchResult from "../SearchResult/SearchResult";
 import { useState, useEffect } from "react";
 
 const Bookings = () => {
-  const [bookings, setBookings] = useState([]);
+    const [bookings, setBookings] = useState([]);
+    const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetch("https://nw6-cyf-hotel.glitch.me/fakebookings")
+    fetch("https://nw6-cyf-hotel.glitch.me/delayed")
       .then((res) => {
         if (!res.ok) {
           throw new Error(`${res.status}: ${getReasonPhrase(res.status)}`);
         }
         return res.json();
       })
-      .then((data) => setBookings(data))
+      .then((data) => {
+        setBookings(data);
+        setLoading(false);
+      })
       .catch((error) => {
         setFetchError(error);
         console.log(error);
+        setLoading(false);
       });
   }),
     [];
@@ -27,7 +32,8 @@ const Bookings = () => {
   return (
     <main className="bookings">
       <Search search={search} />
-      <SearchResult results={bookings} />
+      {loading && <p>Loading Information Please Wait...</p>}
+      {!loading && <SearchResult results={bookings} />}
     </main>
   );
 };

From 4b91b35fb4b4de79883ef48fdfb40091e0f32212 Mon Sep 17 00:00:00 2001
From: areebsattar <areebsattar1@gmail.com>
Date: Fri, 29 Mar 2024 01:56:28 +0000
Subject: [PATCH 2/2] Test completed for the component as well

---
 src/components/Bookings/Bookings.test.jsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/Bookings/Bookings.test.jsx b/src/components/Bookings/Bookings.test.jsx
index 69e294f..290b32f 100644
--- a/src/components/Bookings/Bookings.test.jsx
+++ b/src/components/Bookings/Bookings.test.jsx
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import Bookings from "./Bookings.jsx";
 
 describe("Bookings Component", () => {
@@ -8,4 +8,24 @@ describe("Bookings Component", () => {
     const mainElement = screen.getByRole("main");
     expect(mainElement).toBeInTheDocument();
   });
+
+  it("displays the loading message initially", () => {
+    render(<Bookings />);
+    const loadingMessage = screen.getByText("Loading Information Please Wait...");
+    expect(loadingMessage).toBeInTheDocument();
+  });
+
+  it("hides the loading message when booking data is rendered", async () => {
+    global.fetch = () =>
+      Promise.resolve({
+        ok: true,
+        json: async() => [{ id: 1, name: "John Doe" }] ,
+      });
+    
+    render(<Bookings />);
+    await waitFor(() => {
+      const loadingMessage = screen.queryByText('Loading Information Please Wait...');
+      expect(loadingMessage).not.toBeInTheDocument();
+    });
+  });
 });