From d66505cae63486582e622a6036c82eb5bbffb161 Mon Sep 17 00:00:00 2001 From: Jethary Date: Thu, 8 Feb 2024 15:36:52 -0500 Subject: [PATCH] clean up connectNetwork components --- .../AppSettings/ManualIpHostnameForm.tsx | 1 + .../RenameRobotSlideout.tsx | 2 +- .../ConnectNetwork/ConnectModal/FormModal.tsx | 29 +++++++++++++------ .../ConnectModal/KeyFileField.tsx | 23 +++++++++++++-- .../ConnectModal/SecurityField.tsx | 14 ++++++++- .../ConnectNetwork/ConnectModal/TextField.tsx | 14 +++++++-- .../ConnectNetwork/ConnectModal/form-state.ts | 17 ++++++----- app/src/pages/NameRobot/index.tsx | 2 +- 8 files changed, 79 insertions(+), 23 deletions(-) diff --git a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx index 2f3c888c87f7..54ee765cbc2c 100644 --- 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/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx index 3f796e102b64..d1c00fc4bd72 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx +++ b/app/src/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 index 47ec7391a50d..85d9ddf1eea5 100644 --- 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 => { ( + render={({ field, fieldState }) => ( )} /> @@ -109,10 +110,15 @@ export const FormModal = (props: FormModalProps): JSX.Element => { ( - + render={({ field, fieldState }) => ( + )} /> ) @@ -122,10 +128,15 @@ export const FormModal = (props: FormModalProps): JSX.Element => { ( - + render={({ field, fieldState }) => ( + )} /> ) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/KeyFileField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/KeyFileField.tsx index 11d7afbe286f..da4e9d4db4bc 100644 --- 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 + 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(null) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/SecurityField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/SecurityField.tsx index 1d942ea972b9..142a5e6d624e 100644 --- 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 + 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 index 913604b57b60..961e47eb0935 100644 --- 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 + 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 index c5647e8ecb98..ad61d62f6b49 100644 --- 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, + 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 index 7e148f9a1084..af28e1066792 100644 --- 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 (