Refactor form to use FormTextField w/o HoC

bryphe-coder · bryphe-coder · commit e1b450fce8ff · 2022-01-25T22:04:17.000Z
diff --git a/site/components/Form/FormDropdownField.tsx b/site/components/Form/FormDropdownField.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 
-import { formTextFieldFactory, FormTextFieldProps } from "./FormTextField"
+import { FormTextField, FormTextFieldProps } from "./FormTextField"
 
 export interface DropdownItem {
   value: string
@@ -17,8 +17,6 @@ export interface FormDropdownFieldProps<T> extends FormTextFieldProps<T> {
 }
 
 export const formDropdownFieldFactory = <T,>(): React.FC<FormDropdownFieldProps<T>> => {
-  const FormTextField = formTextFieldFactory<T>()
-
   const Component: React.FC<FormDropdownFieldProps<T>> = ({ items, ...props }) => {
     const styles = useStyles()
     return (
diff --git a/site/forms/CreateProjectForm.tsx b/site/forms/CreateProjectForm.tsx
@@ -1,16 +1,10 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
-import { useFormik } from "formik"
+import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 
-import {
-  FormTitle,
-  FormSection,
-  formTextFieldFactory,
-  formDropdownFieldFactory,
-  DropdownItem,
-} from "../components/Form"
+import { FormTextField, FormTitle, FormSection, formDropdownFieldFactory, DropdownItem } from "../components/Form"
 import { LoadingButton } from "../components/Button"
 import { Organization, Project, Provisioner, CreateProjectRequest } from "./../api"
 
@@ -27,7 +21,6 @@ const validationSchema = Yup.object({
   name: Yup.string().required("Name is required"),
 })
 
-const FormTextField = formTextFieldFactory<CreateProjectRequest>()
 const FormDropdownField = formDropdownFieldFactory<CreateProjectRequest>()
 
 export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
@@ -38,7 +31,7 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
 }) => {
   const styles = useStyles()
 
-  const form = useFormik<CreateProjectRequest>({
+  const form: FormikContextType<CreateProjectRequest> = useFormik<CreateProjectRequest>({
     initialValues: {
       provisioner: provisioners[0].id,
       organizationId: organizations[0].name,
