feat(app): deprecate formik, migrate to react-hook-form (#14424)

closes RAUT-960
Opentrons · May 20, 2024 · eb7121a · eb7121a
1 parent 33d9795
commit eb7121a
Show file tree

Hide file tree

Showing 19 changed files with 748 additions and 386 deletions.
diff --git a/app/package.json b/app/package.json
@@ -33,14 +33,14 @@
     "date-fns": "2.25.0",
     "events": "3.0.0",
     "file-saver": "2.0.1",
-    "formik": "2.1.4",
     "history": "4.7.2",
     "i18next": "^19.8.3",
     "is-ip": "3.1.0",
     "jszip": "3.2.2",
     "lodash": "4.17.21",
     "mixpanel-browser": "2.22.1",
     "netmask": "2.0.2",
+    "react-hook-form": "7.50.1",
     "path-to-regexp": "3.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { useFormik } from 'formik'
+import { useForm } from 'react-hook-form'
 import styled from 'styled-components'
 
 import {
@@ -19,6 +19,7 @@ import { StyledText } from '../../atoms/text'
 import { addManualIp } from '../../redux/config'
 import { startDiscovery } from '../../redux/discovery'
 
+import type { FieldError, Resolver } from 'react-hook-form'
 import type { Dispatch } from '../../redux/types'
 
 const FlexForm = styled.form`
@@ -56,8 +57,8 @@ const StyledInput = styled.input`
   }
 `
 
-interface FormikErrors {
-  ip?: string
+interface FormValues {
+  ip: string
 }
 interface ManualIpHostnameFormProps {
   setMostRecentAddition: (ip: string) => void
@@ -72,47 +73,65 @@ export function ManualIpHostnameForm({
     dispatch(addManualIp(ip))
     dispatch(startDiscovery())
   }
-  const formik = useFormik({
-    initialValues: {
+
+  const resolver: Resolver<FormValues> = values => {
+    let errors = {}
+    errors = validateForm(values, errors)
+    return { values, errors }
+  }
+  const { formState, handleSubmit, register, reset } = useForm<FormValues>({
+    defaultValues: {
       ip: '',
     },
-    onSubmit: (values, { resetForm }) => {
-      const ip = values.ip.trim()
-      const inputForm = document.getElementById('ip')
-      if (inputForm != null)
-        inputForm.style.border = `1px solid ${String(COLORS.grey30)}`
-      addManualIpAndHostname(ip)
-      resetForm()
-      setMostRecentAddition(ip)
-    },
-    validate: values => {
-      const errors: FormikErrors = {}
-      const ip = values.ip.trim()
-      // ToDo: kj 12/19/2022 for this, the best way is to use the regex because invisible unicode characters
-      if (!ip) {
-        errors.ip = t('add_ip_error')
-        const inputForm = document.getElementById('ip')
-        if (inputForm != null)
-          inputForm.style.border = `1px solid ${String(COLORS.red50)}`
-      }
-      return errors
-    },
+    resolver: resolver,
   })
 
+  const validateForm = (
+    data: FormValues,
+    errors: Record<string, FieldError>
+  ): Record<string, FieldError> => {
+    const ip = data.ip.trim()
+    let message: string | undefined
+    if (!ip) {
+      message = t('add_ip_error')
+    }
+    const updatedErrors =
+      message != null
+        ? {
+            ...errors,
+            ip: {
+              type: 'error',
+              message: message,
+            },
+          }
+        : errors
+    return updatedErrors
+  }
+
+  const onSubmit = (data: FormValues): void => {
+    const trimmedIp = data.ip.trim()
+    const inputForm = document.getElementById('ip')
+
+    if (inputForm !== null) {
+      inputForm.style.border = `1px solid ${COLORS.grey30}`
+    }
+
+    addManualIpAndHostname(trimmedIp)
+    reset()
+    setMostRecentAddition(trimmedIp)
+  }
+
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}
       margin={`${SPACING.spacing4} 0`}
       height={SPACING.spacing32}
     >
-      <FlexForm onSubmit={formik.handleSubmit}>
+      <FlexForm onSubmit={handleSubmit(onSubmit)}>
         <StyledInput
           id="ip"
-          name="ip"
           type="text"
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          value={formik.values.ip}
+          {...register('ip')}
           data-testid="manual-ip-hostname-input"
         />
         <TertiaryButton
@@ -125,13 +144,13 @@ export function ManualIpHostnameForm({
           {t('add_ip_button')}
         </TertiaryButton>
       </FlexForm>
-      {formik.errors.ip != null && (
+      {formState.errors?.ip != null && (
         <StyledText
           as="label"
           marginTop={SPACING.spacing4}
           color={COLORS.red50}
         >
-          {formik.errors.ip}
+          {formState.errors.ip.message}
         </StyledText>
       )}
     </Flex>

diff --git a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
@@ -135,7 +135,7 @@ describe('ConnectRobotSlideout', () => {
   it.todo(
     'Clicking Add button with an IP address/hostname should display the IP address/hostname and Not Found label'
   )
-  // NOTE: consider mocking formik here?
+  // NOTE: consider mocking react-hook-form here?
   // , async () => {
   //   mockGetConfig.mockReturnValue({ discovery: { candidates: ['1.1.1.2'] } } as any)
   //   mockGetViewableRobots.mockReturnValue([] as any[])