Added companies being able to edit their info

src/components/Company/Edit/EditCompanyProfileForm.js

@@ -24,25 +24,73 @@ import { Redirect, useLocation, useParams } from "react-router-dom/cjs/react-rou
 import { yupResolver } from "@hookform/resolvers/yup";
 import EditCompanySchema from "./EditCompanySchema";
 import MultiOptionTextField from "../../utils/form/MultiOptionTextField";
-import LogoUploadForm from "../Registration/Finish/LogoUploadForm";
+import LogoUploadForm, { turnImgIntoFile } from "../Registration/Finish/LogoUploadForm";
 import { useContacts } from "../Registration/Finish/ContactsForm";
-
-export const EditCompanyControllerContext = React.createContext();
-
-const EditImage = ({ style, image, imageAlt }) => {
-    return (<Avatar
-        alt={imageAlt}
-        src={image}
-        style={style}
-    />);
-};
+import { FinishCompanyRegistrationController, FinishCompanyRegistrationControllerContext } from "../Registration/Finish/FinishCompanyRegistrationWidget";
+import { useLogoUpload } from "../Registration/Finish/LogoUploadForm";
+import { CloudUpload, Edit } from "@material-ui/icons";
+import getCroppedImg from "../../utils/image/cropImage";
 
 const useStyles = makeStyles((theme) => ({
     submitBtn: {
         marginTop: theme.spacing(2),
     },
+    avatar: {
+        marginBottom: theme.spacing(1),
+        height: "5em",
+        width: "5em",
+    },
 }));
 
+export const EditCompanyControllerContext = React.createContext();
+
+const EditImageText = () => <>
+    <Box
+        marginY={2}
+    >
+        <Typography align="center" variant="h6">
+            {"Upload your Company's logo."}
+        </Typography>
+    </Box>
+</>;
+
+const EditImage = ({ classname, image, imageAlt }) => {
+    const {
+        logoUploadOptions,
+        register,
+        errors,
+    } = useContext(EditCompanyControllerContext);
+
+    const [editingImage, setEditingImage] = useState(false);
+
+    return editingImage ?
+        <FinishCompanyRegistrationControllerContext.Provider value={{ logoUploadOptions, register, errors }}>
+            <LogoUploadForm InfoText={EditImageText} />
+        </FinishCompanyRegistrationControllerContext.Provider>
+        :
+        (<>
+            <Box
+                align="center"
+            >
+                <Avatar
+                    alt={imageAlt}
+                    src={image}
+                    className={classname}
+                />
+                <Button
+                    onClick={() => setEditingImage(true)}
+                    variant="contained"
+                    component="span"
+                    color="primary"
+                    startIcon={<Edit />}
+                >
+                    Edit
+                </Button>
+            </Box>
+        </>
+        );
+};
+
 const getParsedCompanyContacts = (contacts) => {
     const newContacts = [];
     for (const contact of contacts) {
@@ -58,20 +106,25 @@ const parseCompany = ({
 }) => ({
     contacts: contacts.map((value) => ({ value })),
     ...company,
-    logo: "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1SzV5xZOzNbaUOENWpw9vwHaHa%26pid%3DApi&f=1&ipt=36ec7cc75953554a84897bc0aaa6402e9267a031b8618c412927094349aca538&ipo=images"
 });
 
+const getCorrectEditedImage = (logoUploadOptions, logo) => {
+    if (!logoUploadOptions.logoPreview) {
+
+    }
+};
+
 export const EditCompanyController = () => {
     const { id } = useParams();
     const { company, error: companyError, loading: loadingCompany } = useCompany(id);
     const { data: user, isValidating } = useSession();
     let canEditRaceControl = false;
 
-    const { handleSubmit, control, reset, getValues } = useForm({
+    const { handleSubmit, control, reset, getValues, register, watch, formState: { errors } } = useForm({
         mode: "all",
         resolver: yupResolver(EditCompanySchema),
         defaultValues: {
-            logo: "",
+            logo: undefined,
             name: "",
             contacts: [],
             bio: "",
@@ -109,15 +162,26 @@ export const EditCompanyController = () => {
         },
     };
 
-    const submit = (data) => {
+    const submit = async (data) => {
         const contacts = getParsedCompanyContacts(data.contacts);
-        editCompany({ ...data, contacts: contacts }).then(() => {
+
+        const croppedImage = logoUploadOptions.logoPreview ? await
+            getCroppedImg(
+                logoUploadOptions.logoPreview,
+                logoUploadOptions.croppedAreaPixels,
+                0
+            ) : undefined;
+
+        editCompany({ ...data, contacts: contacts, logo: croppedImage }).then(() => {
 
         }).catch((err) => {
 
         });
+
     };
 
+    const logoUploadOptions = useLogoUpload({ control, watch });
+
     return {
         controllerOptions: {
             initialValue: {
@@ -131,6 +195,9 @@ export const EditCompanyController = () => {
                 control,
                 fields,
                 getValues,
+                logoUploadOptions,
+                register,
+                errors,
                 submit: handleSubmit(submit),
             },
         },
@@ -152,6 +219,8 @@ const EditCompanyProfileForm = ({ title }) => {
         control,
         getValues,
         submit,
+        register,
+        errors,
     } = useContext(EditCompanyControllerContext);
 
     const classes = useStyles();
@@ -175,16 +244,11 @@ const EditCompanyProfileForm = ({ title }) => {
                         >
                             <Grid container spacing={4}>
                                 <Grid item xs={12}>
-                                    <Box
-                                        display="flex"
-                                        justifyContent="center"
-                                    >
-                                        <EditImage
-                                            image={company?.logo}
-                                            style={{ height: "5em", width: "5em" }}
-                                            imageAlt={`${company?.name}'s logo`}
-                                        />
-                                    </Box>
+                                    <EditImage
+                                        image={company?.logo}
+                                        imageAlt={`${company?.name}'s logo`}
+                                        classname={classes.avatar}
+                                    />
                                 </Grid>
                                 <Grid item xs={12}>
                                     <Controller
@@ -254,7 +318,7 @@ const EditCompanyProfileForm = ({ title }) => {
                                 </Grid>
                             </Grid>
                             <Button
-                                // disabled={loading || formDisabled}
+                                disabled={loadingCompany}
                                 variant="contained"
                                 color="primary"
                                 type="submit"

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

@@ -10,6 +10,7 @@ import {
     StepLabel,
     Stepper,
     Typography,
+    Box,
 } from "@material-ui/core";
 import LogoUploadForm, { useLogoUpload } from "./LogoUploadForm";
 import ContactsForm, { useContacts } from "./ContactsForm";
@@ -29,11 +30,24 @@ import useSession from "../../../../hooks/useSession";
 import useFinishCompanyRegistrationStyles from "./finishCompanyRegistrationStyles";
 import Constants from "../../../../utils/Constants";
 
+const ImageUploadText = () => <>
+    <Typography variant="h6">
+        {"Upload your Company's logo."}
+    </Typography>
+    <Typography variant="caption" gutterBottom paragraph>
+        {"A picture is worth a thousand words. Is there any better way to represent your brand than your Company's logo?"}
+    </Typography>
+    <Box marginY={1} fontStyle="italic">
+        <Typography variant="caption" gutterBottom paragraph>
+            {"It should be a PNG or JPG file, with no more than 10MB."}
+        </Typography>
+    </Box>
+</>;
 
 function getStepContent(step) {
     switch (step) {
         case 0:
-            return <LogoUploadForm />;
+            return <LogoUploadForm InfoText={ImageUploadText} />;
         case 1:
             return <BioForm />;
         case 2:

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

@@ -15,6 +15,14 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
+const turnImgIntoFile = (imageLink) => {
+    fetch(imageLink).then(async (res) => {
+        const imageBlob = res.blob();
+
+        return new File([imageBlob]);
+    });
+};
+
 export const useLogoUpload = ({ watch }) => {
     const [logoPreview, setLogoPreview] = useState(null);
     const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
@@ -31,19 +39,18 @@ export const useLogoUpload = ({ watch }) => {
     }, [logoInput]);
 
     useEffect(() => {
-        if (!logoInput) {
+        if (!logoInput || typeof watch("logo") !== "object") {
             setLogoPreview(undefined);
             return () => { };
         } else {
-
             const objectUrl = URL.createObjectURL(logoInput);
             setLogoPreview(objectUrl);
 
             // free memory when ever this component is unmounted
             return () => URL.revokeObjectURL(objectUrl);
         }
 
-    }, [logoInput, setLogoPreview]);
+    }, [logoInput, setLogoPreview, watch]);
 
     const onCropComplete = (_, croppedAreaPixels) => {
         setCroppedAreaPixels(croppedAreaPixels);
@@ -116,7 +123,7 @@ LogoPreview.propTypes = {
     img: PropTypes.string,
 };
 
-const LogoUploadForm = () => {
+const LogoUploadForm = ({ InfoText }) => {
 
     const {
         logoUploadOptions,
@@ -139,17 +146,7 @@ const LogoUploadForm = () => {
                 alignItems="center"
             >
                 <Grid item xs={12}>
-                    <Typography variant="h6">
-                        {"Upload your Company's logo."}
-                    </Typography>
-                    <Typography variant="caption" gutterBottom paragraph>
-                        {"A picture is worth a thousand words. Is there any better way to represent your brand than your Company's logo?"}
-                    </Typography>
-                    <Box marginY={1} fontStyle="italic">
-                        <Typography variant="caption" gutterBottom paragraph>
-                            {"It should be a PNG or JPG file, with no more than 10MB."}
-                        </Typography>
-                    </Box>
+                    <InfoText />
                 </Grid>
                 <Grid item xs="auto">
                     <input

src/components/utils/form/MultiOptionTextField.js

@@ -77,7 +77,7 @@ const MultiOptionTextField = ({
                                 {...textFieldProps}
                             />)}
                         control={control}
-                        defaultValue={getValues(`${controllerName}.${i}.value` || "")}
+                        defaultValue={getValues(`${controllerName}.${i}.value`) || ""}
                     />
                 ))}
                 <Button

src/services/companyEditService.js

@@ -22,14 +22,20 @@ export const editCompany = measureTime(TIMED_ACTIONS.OFFER_EDIT, async ({
         logo,
     };
 
+    const formData = new FormData();
+
+    if (logo) formData.append("logo", logo);
+    formData.append("name", name);
+    contacts.forEach((contact) => {
+        formData.append("contacts", contact);
+    });
+    formData.append("bio", bio);
+
     try {
         const res = await fetch(`${API_HOSTNAME}/company/${id}/edit`, {
             method: "PUT",
-            headers: {
-                "Content-Type": "application/json",
-            },
+            body: formData,
             credentials: "include",
-            body: JSON.stringify(updatedCompany),
         });
         const json = await res.json();