From 3d0e58a4b69333493fad8181a72b4312a660fe82 Mon Sep 17 00:00:00 2001
From: Francisco Cardoso <franciscocardoso.3003@gmail.com>
Date: Sat, 16 Sep 2023 13:09:37 +0100
Subject: [PATCH] Adding a circular progress bar to the edit offer form and
 making a test to verify if it is being shown.

---
 src/components/Offers/Edit/EditOfferForm.js     | 16 +++++++++++++++-
 .../Offers/Edit/EditOfferForm.spec.js           | 17 +++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/Offers/Edit/EditOfferForm.js b/src/components/Offers/Edit/EditOfferForm.js
index d7ea700d..b014d64c 100644
--- a/src/components/Offers/Edit/EditOfferForm.js
+++ b/src/components/Offers/Edit/EditOfferForm.js
@@ -8,6 +8,7 @@ import useOfferForm from "../../../hooks/useOfferForm";
 import { INITIAL_JOB_DURATION } from "../../../reducers/searchOffersReducer";
 import useSession from "../../../hooks/useSession";
 import EditOfferSchema from "./EditOfferSchema";
+import { CardContent, CircularProgress, Grid } from "@material-ui/core";
 
 export const EditOfferControllerContext = React.createContext();
 
@@ -155,7 +156,20 @@ const EditOfferForm = () => {
         canEdit,
     } = useContext(EditOfferControllerContext);
 
-    if (canEdit === undefined) return null;
+    if (canEdit === undefined)
+        return (
+            <Grid
+                container
+                direction="column"
+                alignItems="center"
+            >
+                <Grid item xs={3}>
+                    <CardContent>
+                        <CircularProgress  />
+                    </CardContent>
+                </Grid>
+            </Grid>
+        );
 
     if (errorOffer || canEdit === false) {
         return <Redirect {...redirectProps} />;
diff --git a/src/components/Offers/Edit/EditOfferForm.spec.js b/src/components/Offers/Edit/EditOfferForm.spec.js
index 3bee6bcb..a2f42483 100644
--- a/src/components/Offers/Edit/EditOfferForm.spec.js
+++ b/src/components/Offers/Edit/EditOfferForm.spec.js
@@ -186,6 +186,23 @@ describe("Edit Offer Form", () => {
 
             expect(screen.findByText("Test Redirect"));
         });
+        it("should show circular progress bar while data is being fetch", () => {
+            useSession.mockImplementation(() => ({ isValidating: true, isLoggedIn: true, data: { company: { _id: "company_id" } } }));
+            useOffer.mockImplementation(() => ({ offer, loading: false, error: null, mutate: () => {} }));
+
+            renderWithStoreAndTheme(
+                <BrowserRouter>
+                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                        <EditOfferWrapper>
+                            <EditOfferPage />
+                        </EditOfferWrapper>
+                    </MuiPickersUtilsProvider>
+                </BrowserRouter>,
+                { initialState, theme }
+            );
+            expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+
+        });
 
         it("should render enabled form", () => {
             useSession.mockImplementation(() => ({ isLoggedIn: true, data: { company: { _id: "company_id" } } }));