diff --git a/src/components/Company/Edit/EditCompanyProfileForm.js b/src/components/Company/Edit/EditCompanyProfileForm.js index ab705b24..3a30e325 100644 --- a/src/components/Company/Edit/EditCompanyProfileForm.js +++ b/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 (); -}; +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 = () => <> + + + {"Upload your Company's logo."} + + +; + +const EditImage = ({ classname, image, imageAlt }) => { + const { + logoUploadOptions, + register, + errors, + } = useContext(EditCompanyControllerContext); + + const [editingImage, setEditingImage] = useState(false); + + return editingImage ? + + + + : + (<> + + + + + + ); +}; + 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 }) => { > - - - + {