From 01fd5fa010c0c3f7af1e4b87c79c0d2343f9e9fd Mon Sep 17 00:00:00 2001
From: Cuong Vu <cuongvh@reapit.com>
Date: Thu, 16 Jul 2020 15:01:05 +0700
Subject: [PATCH] fix: #2067 wip remove hoc

---
 .../forms/contact-information-form.tsx        | 139 +++++++++---------
 1 file changed, 66 insertions(+), 73 deletions(-)

diff --git a/packages/developer-portal/src/components/pages/settings/forms/contact-information-form.tsx b/packages/developer-portal/src/components/pages/settings/forms/contact-information-form.tsx
index d7b68f39b8..b6238b23bf 100644
--- a/packages/developer-portal/src/components/pages/settings/forms/contact-information-form.tsx
+++ b/packages/developer-portal/src/components/pages/settings/forms/contact-information-form.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { compose } from 'redux'
 import {
   FormSection,
   FormHeading,
@@ -7,57 +6,78 @@ import {
   Input,
   Button,
   Form,
-  withFormik,
-  FormikProps,
   FormikBag,
   LevelRight,
   Grid,
   GridItem,
+  Formik,
 } from '@reapit/elements'
 import { DeveloperModel } from '@reapit/foundations-ts-definitions'
 import { validate } from '@/utils/form/settings-contact-information'
 
-export type ContactInformationFormProps = FormikProps<ContactInformationValues>
-
+export type ContactInformationFormProps = {
+  developerInformation: DeveloperModel | null
+  updateDeveloperInformation: (values: ContactInformationValues) => void
+}
 export const ContactInformationForm: React.FC<ContactInformationFormProps> = ({
-  isSubmitting,
-  isValidating,
-  isValid,
+  developerInformation,
+  updateDeveloperInformation,
 }) => {
   return (
-    <FormSection>
-      <Form>
-        <FormHeading>Contact Information</FormHeading>
-        <FormSubHeading>Please use the fields below to edit your contact information</FormSubHeading>
-        <Grid>
-          <GridItem>
-            <Input dataTest="company-name" type="text" labelText="Company Name" id="companyName" name="companyName" />
-          </GridItem>
-          <GridItem>
-            <Input dataTest="name" type="text" labelText="Full Name" id="name" name="name" />
-          </GridItem>
-        </Grid>
-        <Grid>
-          <GridItem>
-            <Input dataTest="job-title" type="text" labelText="Job Title" id="jobTitle" name="jobTitle" />
-          </GridItem>
-          <GridItem>
-            <Input dataTest="telephone" type="tel" labelText="Telephone" id="phone" name="telephone" />
-          </GridItem>
-        </Grid>
-        <LevelRight>
-          <Button
-            dataTest="save-changes"
-            disabled={!isValid}
-            loading={isSubmitting || isValidating}
-            variant="primary"
-            type="submit"
-          >
-            Save Changes
-          </Button>
-        </LevelRight>
-      </Form>
-    </FormSection>
+    <Formik
+      validate={validate}
+      initialValues={{
+        jobTitle: developerInformation?.jobTitle || '',
+        telephone: developerInformation?.telephone || '',
+        companyName: developerInformation?.company || '',
+        name: developerInformation?.name || '',
+      }}
+      onSubmit={handleSubmitContactInformation(updateDeveloperInformation)}
+    >
+      {({ isSubmitting, isValidating, isValid }) => {
+        return (
+          <FormSection>
+            <Form>
+              <FormHeading>Contact Information</FormHeading>
+              <FormSubHeading>Please use the fields below to edit your contact information</FormSubHeading>
+              <Grid>
+                <GridItem>
+                  <Input
+                    dataTest="company-name"
+                    type="text"
+                    labelText="Company Name"
+                    id="companyName"
+                    name="companyName"
+                  />
+                </GridItem>
+                <GridItem>
+                  <Input dataTest="name" type="text" labelText="Full Name" id="name" name="name" />
+                </GridItem>
+              </Grid>
+              <Grid>
+                <GridItem>
+                  <Input dataTest="job-title" type="text" labelText="Job Title" id="jobTitle" name="jobTitle" />
+                </GridItem>
+                <GridItem>
+                  <Input dataTest="telephone" type="tel" labelText="Telephone" id="phone" name="telephone" />
+                </GridItem>
+              </Grid>
+              <LevelRight>
+                <Button
+                  dataTest="save-changes"
+                  disabled={!isValid}
+                  loading={isSubmitting || isValidating}
+                  variant="primary"
+                  type="submit"
+                >
+                  Save Changes
+                </Button>
+              </LevelRight>
+            </Form>
+          </FormSection>
+        )
+      }}
+    </Formik>
   )
 }
 
@@ -68,38 +88,11 @@ export type ContactInformationValues = {
   telephone: string
 }
 
-export const mapPropsContactInformation = ({ developerInformation }: EnhanceContactInformationProps) => {
-  return {
-    jobTitle: developerInformation?.jobTitle || '',
-    telephone: developerInformation?.telephone || '',
-    companyName: developerInformation?.company || '',
-    name: developerInformation?.name || '',
-  }
-}
-
-export type EnhanceContactInformationProps = {
-  developerInformation: DeveloperModel | null
-  updateDeveloperInformation: (values: ContactInformationValues) => void
-}
-
-export const handleSubmitContactInformation = async (
-  values: ContactInformationValues,
-  { setSubmitting, props }: FormikBag<EnhanceContactInformationProps, ContactInformationValues>,
-) => {
+export const handleSubmitContactInformation = (
+  updateDeveloperInformation: (values: ContactInformationValues) => void,
+) => (values: ContactInformationValues, { setSubmitting }: FormikBag<null, null>) => {
   setSubmitting(true)
-  props.updateDeveloperInformation(values)
+  updateDeveloperInformation(values)
 }
 
-export const withContactInformationForm = withFormik({
-  displayName: 'WithContactInformationForm',
-  mapPropsToValues: mapPropsContactInformation,
-  handleSubmit: handleSubmitContactInformation,
-  validate,
-})
-
-const EnhanceContactInformation = compose<React.FC<EnhanceContactInformationProps>>(withContactInformationForm)(
-  ContactInformationForm,
-)
-EnhanceContactInformation.displayName = 'EnhanceContactInformation'
-
-export default EnhanceContactInformation
+export default ContactInformationForm