clean up connectNetwork components

Opentrons · Feb 8, 2024 · d66505c · d66505c
1 parent 9fcfc00
commit d66505c
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 23 deletions.
diff --git a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx
@@ -103,6 +103,7 @@ export function ManualIpHostnameForm({
     },
     resolver: resolver,
   })
+console.log('errors', formState.errors)
 
   const onSubmit = (data: FormValues): void => {
     const trimmedIp = data.ip.trim()

diff --git a/.../organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx b/.../organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx
@@ -157,7 +157,7 @@ export function RenameRobotSlideout({
         newRobotName: newRobotName,
       },
     })
-    handleSubmit(onSubmit)
+    handleSubmit(onSubmit)()
   }
 
   return (

diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormModal.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Control, Controller } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import styled, { css } from 'styled-components'
 
 import {
@@ -91,13 +91,14 @@ export const FormModal = (props: FormModalProps): JSX.Element => {
               <Controller
                 key={name}
                 control={control}
-                //  @ts-expect-error: name is correct type
                 name={name}
-                render={() => (
+                render={({ field, fieldState }) => (
                   <StyledSecurityField
                     key={name}
                     id={fieldId}
                     {...fieldProps}
+                    field={field}
+                    fieldState={fieldState}
                   />
                 )}
               />
@@ -109,10 +110,15 @@ export const FormModal = (props: FormModalProps): JSX.Element => {
               <Controller
                 key={name}
                 control={control}
-                //  @ts-expect-error: name is correct type
                 name={name}
-                render={() => (
-                  <StyledKeyFileField key={name} id={fieldId} {...fieldProps} />
+                render={({ field, fieldState }) => (
+                  <StyledKeyFileField
+                    key={name}
+                    id={fieldId}
+                    {...fieldProps}
+                    field={field}
+                    fieldState={fieldState}
+                  />
                 )}
               />
             )
@@ -122,10 +128,15 @@ export const FormModal = (props: FormModalProps): JSX.Element => {
             <Controller
               key={name}
               control={control}
-              //  @ts-expect-error: name is correct type
               name={name}
-              render={() => (
-                <StyledTextField key={name} id={fieldId} {...fieldProps} />
+              render={({ field, fieldState }) => (
+                <StyledTextField
+                  key={name}
+                  id={fieldId}
+                  {...fieldProps}
+                  field={field}
+                  fieldState={fieldState}
+                />
               )}
             />
           )

diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/KeyFileField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/KeyFileField.tsx
@@ -7,6 +7,11 @@ import { LABEL_ADD_NEW_KEY } from '../i18n'
 import { useConnectFormField } from './form-state'
 
 import type { WifiKey } from '../types'
+import type {
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+} from 'react-hook-form'
 
 export interface KeyFileFieldProps {
   id: string
@@ -15,6 +20,8 @@ export interface KeyFileFieldProps {
   placeholder: string
   robotName: string
   wifiKeys: WifiKey[]
+  field: ControllerRenderProps<FieldValues, any>
+  fieldState: ControllerFieldState
   className?: string
 }
 
@@ -31,8 +38,20 @@ const makeKeyOptions = (
 })
 
 export const KeyFileField = (props: KeyFileFieldProps): JSX.Element => {
-  const { id, name, label, placeholder, robotName, wifiKeys } = props
-  const { value, error, setValue, setTouched } = useConnectFormField(name)
+  const {
+    id,
+    name,
+    label,
+    placeholder,
+    robotName,
+    wifiKeys,
+    field,
+    fieldState,
+  } = props
+  const { value, error, setValue, setTouched } = useConnectFormField(
+    field,
+    fieldState
+  )
   const options = [makeKeyOptions(wifiKeys), ADD_NEW_KEY_OPTION_GROUP]
   const uploadKeyRef = React.useRef<HTMLInputElement>(null)
 

diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/SecurityField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/SecurityField.tsx
@@ -7,6 +7,11 @@ import { useConnectFormField } from './form-state'
 import { FormRow } from './FormRow'
 
 import type { EapOption } from '../types'
+import type {
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+} from 'react-hook-form'
 
 export interface SecurityFieldProps {
   id: string
@@ -15,6 +20,8 @@ export interface SecurityFieldProps {
   label: string
   showAllOptions: boolean
   eapOptions: EapOption[]
+  field: ControllerRenderProps<FieldValues, any>
+  fieldState: ControllerFieldState
   className?: string
 }
 
@@ -41,9 +48,14 @@ export const SecurityField = (props: SecurityFieldProps): JSX.Element => {
     showAllOptions,
     eapOptions,
     className,
+    field,
+    fieldState,
   } = props
 
-  const { value, error, setValue, setTouched } = useConnectFormField(name)
+  const { value, error, setValue, setTouched } = useConnectFormField(
+    field,
+    fieldState
+  )
 
   const options = [
     ...(showAllOptions ? ALL_SECURITY_OPTIONS : []),

diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx
@@ -10,18 +10,28 @@ import {
 import { FormRow } from './FormRow'
 import { useConnectFormField } from './form-state'
 import { LABEL_SHOW_PASSWORD } from '../i18n'
+import type {
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+} from 'react-hook-form'
 
 export interface TextFieldProps {
   id: string
   name: string
   label: string
   isPassword: boolean
+  field: ControllerRenderProps<FieldValues, any>
+  fieldState: ControllerFieldState
   className?: string
 }
 
 export const TextField = (props: TextFieldProps): JSX.Element => {
-  const { id, name, label, isPassword, className } = props
-  const { value, error, onChange, onBlur } = useConnectFormField(name)
+  const { id, name, label, isPassword, className, field, fieldState } = props
+  const { value, error, onChange, onBlur } = useConnectFormField(
+    field,
+    fieldState
+  )
   const [showPw, toggleShowPw] = React.useReducer(show => !show, false)
   const type = isPassword && !showPw ? INPUT_TYPE_PASSWORD : INPUT_TYPE_TEXT
 

diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/form-state.ts b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/form-state.ts
@@ -1,5 +1,10 @@
 import * as React from 'react'
-import { useForm, useController } from 'react-hook-form'
+import {
+  useForm,
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+} from 'react-hook-form'
 import { usePrevious } from '@opentrons/components'
 
 import type { ConnectFormValues, ConnectFormFieldProps } from '../types'
@@ -40,12 +45,10 @@ export const useResetFormOnSecurityChange = (): void => {
   ])
 }
 
-export const useConnectFormField = (name: string): ConnectFormFieldProps => {
-  const { field, fieldState } = useController({
-    name,
-    defaultValue: '',
-  })
-
+export const useConnectFormField = (
+  field: ControllerRenderProps<FieldValues, any>,
+  fieldState: ControllerFieldState
+): ConnectFormFieldProps => {
   const error = fieldState.error?.message
 
   return {

diff --git a/app/src/pages/NameRobot/index.tsx b/app/src/pages/NameRobot/index.tsx
@@ -177,7 +177,7 @@ export function NameRobot(): JSX.Element {
         newRobotName: newRobotName,
       },
     })
-    handleSubmit(onSubmit)
+    handleSubmit(onSubmit)()
   }
 
   return (