Trying to edit offer redirects you to home page

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();
 
@@ -42,7 +43,7 @@ const parseOfferForm = ({
     vacancies: vacancies || "",
     description,
     descriptionText: parseDescription(description),
-    applyURL: applyURL.startsWith("mailto:") ? applyURL.substring(7) : applyURL,
+    applyURL: applyURL?.startsWith("mailto:") ? applyURL.substring(7) : applyURL,
     ...offer,
 });
 
@@ -59,11 +60,11 @@ export const EditOfferController = () => {
             (offer?.owner === user?.company?._id) || user?.isAdmin);
     }, [offer, user]);
 
-    const [canEdit, setCanEdit] = useState(shouldRevalidateEditingPermissions());
+    const [canEdit, setCanEdit] = useState(undefined);
 
     useEffect(() => {
-        setCanEdit(shouldRevalidateEditingPermissions());
-    }, [shouldRevalidateEditingPermissions, loadingOffer, offer, user]);
+        if (!isValidating && !loadingOffer) setCanEdit(shouldRevalidateEditingPermissions());
+    }, [isValidating, loadingOffer, shouldRevalidateEditingPermissions]);
 
     const location = useLocation();
 
@@ -154,11 +155,25 @@ const EditOfferForm = () => {
         loadingOffer,
         errorOffer,
         redirectProps,
-        isValidating,
         canEdit,
     } = useContext(EditOfferControllerContext);
 
-    if (errorOffer || (!loadingOffer && !isValidating && canEdit === false)) {
+    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} />;
     }
 

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" } } }));
@@ -579,7 +596,8 @@ describe("Edit Offer Form", () => {
         });
 
         it("should fail validation if applyURL not following the regex", async () => {
-            useSession.mockImplementation(() => ({ isLoggedIn: true, data: { company: { name: "Company Name" } } }));
+            useSession.mockImplementation(() => ({ isLoggedIn: true, data: { company: { _id: "company_id" } } }));
+            useOffer.mockImplementation(() => ({ offer, loading: false, error: null, mutate: () => {} }));
 
             const wrapper = renderWithStoreAndTheme(
                 <BrowserRouter>

src/components/Offers/New/CreateOfferForm.js

@@ -15,6 +15,7 @@
         (data) => {
             params.setLoading(true);
             const [jobMinDuration, jobMaxDuration] = data.jobDuration;
+            const parsedApplyURL = parseApplyURL(data.applyURL);
             newOffer({
                 ...data,
                 vacancies: data.vacancies || undefined,
@@ -23,7 +24,7 @@
                 isPaid: data.isPaid === "none" ? undefined : data.isPaid,
                 jobStartDate: !data.jobStartDate ? undefined : data.jobStartDate,
                 owner: data.owner || params.company,
-                applyURL: parseApplyURL(data.applyURL),
+                applyURL: !parsedApplyURL ? undefined : parsedApplyURL,
                 jobMinDuration,
                 jobMaxDuration,
             })