Lint, type fixes

presleyp · presleyp · commit 108c77e72712 · 2022-03-24T21:55:55.000Z
diff --git a/site/src/components/Form/index.test.tsx b/site/src/components/Form/index.test.tsx
@@ -1,5 +1,5 @@
-import { FormikContextType } from 'formik/dist/types'
-import { getFormHelpers, onChangeTrimmed } from './index'
+import { FormikContextType } from "formik/dist/types"
+import { getFormHelpers, onChangeTrimmed } from "./index"
 
 interface TestType {
   untouchedGoodField: string
@@ -10,12 +10,12 @@ interface TestType {
 
 const mockHandleChange = jest.fn()
 
-const form = { 
+const form = {
   errors: {
     untouchedGoodField: undefined,
     untouchedBadField: "oops!",
     touchedGoodField: undefined,
-    touchedBadField: 'oops!',
+    touchedBadField: "oops!",
   },
   touched: {
     untouchedGoodField: false,
@@ -30,9 +30,9 @@ const form = {
       name,
       onBlur: jest.fn(),
       onChange: jest.fn(),
-      value: ''
+      value: "",
     }
-  }
+  },
 } as unknown as FormikContextType<TestType>
 
 describe("form util functions", () => {
@@ -66,7 +66,7 @@ describe("form util functions", () => {
 
   describe("onChangeTrimmed", () => {
     it("calls handleChange with trimmed value", () => {
-      const event = { target: { value: " hello "}} as React.ChangeEvent<HTMLInputElement>
+      const event = { target: { value: " hello " } } as React.ChangeEvent<HTMLInputElement>
       onChangeTrimmed<TestType>(form)(event)
       expect(mockHandleChange).toHaveBeenCalledWith({ target: { value: "hello" } })
     })
diff --git a/site/src/components/Form/index.ts b/site/src/components/Form/index.ts
@@ -1,25 +1,37 @@
-import { FormikContextType } from "formik/dist/types"
+import { FormikContextType, getIn } from "formik"
+import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react"
 
 export * from "./FormCloseButton"
 export * from "./FormSection"
 export * from "./FormDropdownField"
 export * from "./FormTextField"
 export * from "./FormTitle"
 
-export function getFormHelpers<T>(form: FormikContextType<T>, name: keyof T) {
-    const touched = form.touched[name]
-    const errors = form.errors[name]
-    return {
-      ...form.getFieldProps(name),
-      id: name,
-      error: touched && Boolean(errors),
-      helperText: touched && errors
-    }
+interface FormHelpers {
+  name: string
+  onBlur: FocusEventHandler
+  onChange: ChangeEventHandler
+  id: string
+  value?: string | number
+  error: boolean
+  helperText?: string
+}
+
+export function getFormHelpers<T>(form: FormikContextType<T>, name: string): FormHelpers {
+  // getIn is a util function from Formik that gets at any depth of nesting, and is necessary for the types to work
+  const touched = getIn(form.touched, name)
+  const errors = getIn(form.errors, name)
+  return {
+    ...form.getFieldProps(name),
+    id: name,
+    error: touched && Boolean(errors),
+    helperText: touched && errors,
   }
+}
 
-export function onChangeTrimmed<T>(form: FormikContextType<T>) {
-  return (event: React.ChangeEvent<HTMLInputElement>) => {
-    event.target.value = event?.target?.value?.trim()
+export function onChangeTrimmed<T>(form: FormikContextType<T>): (event: ChangeEvent<HTMLInputElement>) => void {
+  return (event: ChangeEvent<HTMLInputElement>): void => {
+    event.target.value = event.target.value.trim()
     form.handleChange(event)
   }
 }
