Added company profile edit permissions validation

src/AppRouter.js

@@ -32,14 +32,14 @@ import {
 import { CookieConsent } from "./cookieConsent";
 import {
     EditOfferController,
-    EditOfferControllerContext,
+    EditOfferControllerContext
 } from "./components/Offers/Edit/EditOfferForm";
 import EditOfferPage from "./pages/EditOfferPage";
 import PrivacyPolicyPage from "./pages/PrivacyPolicyPage";
 import TermsAndConditionsPage from "./pages/TermsAndConditionsPage";
 import ChangeLogPage from "./pages/ChangeLogPage";
 import EditCompanyProfilePage from "./pages/EditCompanyProfilePage";
-import { EditCompanyController } from "./components/Company/Edit/EditCompanyProfileForm";
+import { EditCompanyController, EditCompanyControllerContext } from "./components/Company/Edit/EditCompanyProfileForm";
 
 /**
  *
@@ -197,7 +197,8 @@ const AppRouter = () => (
                 unauthorizedRedirectPath="/"
                 unauthorizedRedirectMessage="You are not allowed to edit this company"
                 authorize={(user) => !!(user?.company || user?.isAdmin)}
-                // controller={EditCompanyController}
+                context={EditCompanyControllerContext}
+                controller={EditCompanyController}
             >
                 <PageLayout
                     key="/company/:id/edit"

src/components/Company/Edit/EditCompanyProfileForm.js

@@ -20,7 +20,7 @@ import useOffer from "../../../hooks/useOffer";
 import { Controller, useForm } from "react-hook-form";
 import useCompany from "../../../hooks/useCompany";
 import useSession from "../../../hooks/useSession";
-import { useParams } from "react-router-dom/cjs/react-router-dom.min";
+import { Redirect, useLocation, useParams } from "react-router-dom/cjs/react-router-dom.min";
 import { yupResolver } from "@hookform/resolvers/yup";
 import EditCompanySchema from "./EditCompanySchema";
 import MultiOptionTextField from "../../utils/form/MultiOptionTextField";
@@ -36,17 +36,65 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const EditCompanyController = () => {
+    const { id } = useParams();
+    const { company, error: companyError, loading: loadingCompany } = useCompany(id);
+    const { data: user, isValidating } = useSession();
+    let canEditRaceControl = false;
+
+    const shouldRevalidateEditingPermissions = useCallback(() => {
+        return user?.isAdmin || user?.company?._id === id;
+    }, [company, user]);
+
+    const [canEdit, setCanEdit] = useState(shouldRevalidateEditingPermissions());
 
+    useEffect(() => {
+        setCanEdit(shouldRevalidateEditingPermissions());
+        if (!loadingCompany && !isValidating) {
+            canEditRaceControl = true;
+        }
+    }, [shouldRevalidateEditingPermissions, loadingCompany, company, user]);
+
+    const location = useLocation();
+    const redirectProps = {
+        to: {
+            pathname: "/",
+            state: {
+                from: location,
+                message: "You are not authorized to edit this company.",
+            },
+        },
+    };
+
+    return {
+        controllerOptions: {
+            initialValue: {
+                canEdit,
+                company,
+                redirectProps,
+                loadingCompany,
+                companyError,
+                isValidating,
+                canEditRaceControl,
+            }
+        },
+    };
 };
 
 const EditCompanyProfileForm = ({ title }) => {
     const isMobile = useMobile();
     const formCardClasses = useOfferFormStyles(isMobile)();
 
-    const classes = useStyles();
+    const {
+        company,
+        loadingCompany,
+        companyError,
+        canEdit,
+        redirectProps,
+        isValidating,
+        canEditRaceControl,
+    } = useContext(EditCompanyControllerContext);
 
-    const { id } = useParams();
-    const { company } = useCompany(id);
+    const classes = useStyles();
 
     const { control } = useForm({
         mode: "all",
@@ -74,6 +122,10 @@ const EditCompanyProfileForm = ({ title }) => {
 
     const Content = isMobile ? DialogContent : CardContent;
 
+    if (companyError || (!loadingCompany && !isValidating && !canEdit && canEditRaceControl)) {
+        return <Redirect {...redirectProps} />;
+    }
+
     return <>
         <div className={formCardClasses.formCard}>
             <CardHeader title={title} />

src/components/Offers/Edit/EditOfferForm.js

@@ -50,6 +50,7 @@ export const EditOfferController = () => {
     const { id } = useParams();
     const { offer, error: errorOffer, loading: loadingOffer } = useOffer(id);
     const { data: user, isValidating } = useSession();
+    let canEditRaceControl = false;
 
     // This portion of code is used to remove race conditions between useState of canEdit and useEffect
     // If the value of useState is false by default, this condition will be wrongly verified, resulting in unwanted redirects
@@ -63,6 +64,9 @@ export const EditOfferController = () => {
 
     useEffect(() => {
         setCanEdit(shouldRevalidateEditingPermissions());
+        if (!loadingOffer && !isValidating) {
+            canEditRaceControl = true;
+        }
     }, [shouldRevalidateEditingPermissions, loadingOffer, offer, user]);
 
     const location = useLocation();
@@ -144,6 +148,7 @@ export const EditOfferController = () => {
                 user,
                 isValidating,
                 canEdit,
+                canEditRaceControl,
             },
         },
     };
@@ -156,9 +161,10 @@ const EditOfferForm = () => {
         redirectProps,
         isValidating,
         canEdit,
+        canEditRaceControl,
     } = useContext(EditOfferControllerContext);
 
-    if (errorOffer || (!loadingOffer && !isValidating && canEdit === false)) {
+    if (errorOffer || (!loadingOffer && !isValidating && !canEdit && canEditRaceControl)) {
         return <Redirect {...redirectProps} />;
     }
 

src/hooks/useCompany.js

@@ -31,7 +31,7 @@ export default  (id) => {
     return {
         company,
         error,
-        loading: isLoading,
+        loading: !data,
         mutate,
     };
 };