Added page with form to edit a company profile page

docker-compose.yml

@@ -9,4 +9,4 @@ services:
     ports:
       - ${HOST_PORT}:3000
     environment:
-      - PORT=3000
+      - PORT=3000

src/AppRouter.js

@@ -38,6 +38,8 @@ 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";
 
 /**
  *
@@ -188,6 +190,23 @@ const AppRouter = () => (
                     <CompanyOffersManagementPage />
                 </PageLayout>
             </ProtectedRoute>
+            <ProtectedRoute
+                exact
+                key="/company/:id/edit"
+                path="/company/:id/edit"
+                unauthorizedRedirectPath="/"
+                unauthorizedRedirectMessage="You are not allowed to edit this company"
+                authorize={(user) => !!(user?.company || user?.isAdmin)}
+                // controller={EditCompanyController}
+            >
+                <PageLayout
+                    key="/company/:id/edit"
+                    pageTitle="Edit Profile"
+                    layout={LayoutType.DESKTOP}
+                >
+                    <EditCompanyProfilePage />
+                </PageLayout>
+            </ProtectedRoute>
             <ProtectedRoute
                 exact
                 path="/offer/:id/edit"

src/components/Company/Edit/EditCompanyProfileForm.js

@@ -0,0 +1,166 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import {
+    CardHeader,
+    CardContent,
+    DialogContent,
+    Grid,
+    FormControl,
+    Typography,
+    Button,
+    TextField,
+    Avatar,
+    makeStyles,
+    Box,
+} from "@material-ui/core";
+import { useMobile } from "../../../utils/media-queries";
+import useOfferFormStyles from "../../../components/Offers/Form/form-components/offerStyles";
+import TextEditorComponent from "../../Offers/Form/form-components/TextEditorComponent";
+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 { yupResolver } from "@hookform/resolvers/yup";
+import EditCompanySchema from "./EditCompanySchema";
+import MultiOptionTextField from "../../utils/form/MultiOptionTextField";
+import LogoUploadForm from "../Registration/Finish/LogoUploadForm";
+import { useContacts } from "../Registration/Finish/ContactsForm";
+
+export const EditCompanyControllerContext = React.createContext();
+
+const useStyles = makeStyles((theme) => ({
+    submitBtn: {
+        marginTop: theme.spacing(2)
+    }
+}));
+
+export const EditCompanyController = () => {
+
+};
+
+const EditCompanyProfileForm = ({ title }) => {
+    const isMobile = useMobile();
+    const formCardClasses = useOfferFormStyles(isMobile)();
+
+    const classes = useStyles();
+
+    const { id } = useParams();
+    const { company } = useCompany(id);
+
+    const { control } = useForm({
+        mode: "all",
+        resolver: yupResolver(EditCompanySchema),
+        reValidateMode: "onChange",
+    });
+
+    const { fields, append, remove } = useContacts({ control });
+
+    const getContacts = useCallback(() => {
+        if (!company) return [{}];
+
+        const contacts = company.contacts;
+
+        const result = [];
+        for (let i = 0; i < contacts.length; i++) {
+            result.push({
+                id: i,
+                value: contacts[i],
+            });
+        }
+
+        return result;
+    }, [company]);
+
+    const Content = isMobile ? DialogContent : CardContent;
+
+    return <>
+        <div className={formCardClasses.formCard}>
+            <CardHeader title={title} />
+            <Content className={formCardClasses.formContent}>
+                <Grid container spacing={4} className={formCardClasses.formArea}>
+                    <Grid item xs={12}>
+                        <Box
+                            display="flex"
+                            justifyContent="center"
+                        >
+                            <Avatar
+                                alt={`${company?.name}'s logo`}
+                                src={company?.logo}
+                                style={{ height: '5em', width: '5em' }}
+                            />
+                        </Box>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <TextField
+                            label="Name"
+                            value={company?.name}
+                            fullWidth
+                            required
+                            autoFocus
+                        />
+                    </Grid>
+                    <Grid item xs={12}>
+                        <MultiOptionTextField
+                            control={control}
+                            controllerName="contacts"
+                            values={getContacts()}
+                            onAdd={append}
+                            onRemove={remove}
+                        />
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Controller
+                            name="bio"
+                            render={(
+                                { field: { onChange, onBlur, ref, name, value } },
+                            ) => (
+                                <TextField
+                                    name={name}
+                                    value={value}
+                                    label="Company Bio"
+                                    id="bio"
+                                    // error={!!errors.bio}
+                                    inputRef={ref}
+                                    onBlur={onBlur}
+                                    onChange={onChange}
+                                    multiline
+                                    // helperText={
+                                    //     `${value?.length}/${FinishCompanyRegistrationConstants.bio.maxLength} ${errors.bio?.message || ""}`
+                                    // }
+                                    rows={5}
+                                    variant="outlined"
+                                    FormHelperTextProps={{
+                                        style: {
+                                            marginLeft: 0,
+                                        },
+                                    }}
+                                    fullWidth
+                                />)}
+                            control={control}
+                        />
+                    </Grid>
+                </Grid>
+                <Button
+                    // disabled={loading || formDisabled}
+                    variant="contained"
+                    color="primary"
+                    type="submit"
+                    className={classes.submitBtn}
+                >
+                    Submit
+                </Button>
+                <div className={formCardClasses.requiredFields}>
+                    <Typography>* Required fields</Typography>
+                </div>
+            </Content>
+        </div>
+
+    </>;
+};
+
+EditCompanyProfileForm.propTypes = {
+    title: PropTypes.string
+}
+
+export default EditCompanyProfileForm;

src/components/Company/Registration/Finish/BioForm.js

@@ -5,7 +5,6 @@ import { Controller, useWatch } from "react-hook-form";
 import { FinishCompanyRegistrationConstants } from "./FinishCompanyRegistrationUtils";
 
 export const useBio = ({ control }) => {
-
     const bio = useWatch({
         name: "bio",
         control,
@@ -15,8 +14,8 @@ export const useBio = ({ control }) => {
     return {
         validateStep,
     };
-
 };
+
 const BioForm = () => {
     const { control, errors } = useContext(FinishCompanyRegistrationControllerContext);
     return (

src/components/Company/Registration/Finish/ReviewForm.js

@@ -8,7 +8,7 @@ import getCroppedImg from "../../../utils/image/cropImage";
 import { getHumanError } from "./FinishCompanyRegistrationUtils";
 import { FinishCompanyRegistrationControllerContext } from "./FinishCompanyRegistrationWidget";
 
-const useStyles = (isMobile) => makeStyles((theme) => ({
+export const useStyles = (isMobile) => makeStyles((theme) => ({
     companyCard: {
         display: "flex",
         width: isMobile ? "90vw" : "600px",

src/components/HomePage/SearchResultsArea/Offer/OfferDetails.js

@@ -38,6 +38,8 @@ const OfferDetails = ({
     handleError,
 }) => {
 
+    console.log("fds: ", offer.ownerLogo);
+
     const { data, isValidating, error, isLoggedIn } = useSession();
     const sessionData = (!isValidating && !error && isLoggedIn) ? data : null;
     const classes = useSearchResultsWidgetStyles({ isMobile, isPage, loading, hasApplyButton: !!offer?.applyURL });

src/components/utils/form/MultiOptionTextField.js

@@ -44,13 +44,14 @@ const MultiOptionTextField = ({
     id,
 }) => {
     const classes = useMultiOptionTextFieldStyle();
+
     return (
         <>
             <Typography variant="h6">
                 {label}
             </Typography>
             <Box id={id} display="flex" flexDirection="column">
-                {values.map(({ id }, i) => (
+                {values.map(({ id, value }, i) => (
                     <Controller
                         key={id}
                         name={`${controllerName}.${i}.value`}
@@ -75,7 +76,7 @@ const MultiOptionTextField = ({
                                 {...textFieldProps}
                             />)}
                         control={control}
-                        defaultValue={getValues(`${controllerName}.${i}.value`) || ""}
+                        defaultValue={getValues ? (getValues(`${controllerName}.${i}.value`) || "") : value}
                     />
                 ))}
                 <Button

src/pages/EditCompanyProfilePage.js

@@ -0,0 +1,10 @@
+import React from "react";
+import EditCompanyProfileForm from "../components/Company/Edit/EditCompanyProfileForm";
+
+const EditCompanyProfilePage = () => (
+    <>
+        <EditCompanyProfileForm title="Edit Profile" />
+    </>
+);
+
+export default EditCompanyProfilePage;