Skip to content

Commit 562003c

Browse files
jeraderjerader
committed
address comments
1 parent 77e422e commit 562003c

File tree

10 files changed

+76
-72
lines changed

10 files changed

+76
-72
lines changed

‎app/src/organisms/AppSettings/ManualIpHostnameForm.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import { useDispatch } from 'react-redux'
33
import { useTranslation } from 'react-i18next'
4-
import { FieldError, Resolver, useForm } from 'react-hook-form'
4+
import { useForm } from 'react-hook-form'
55
import styled from 'styled-components'
66

77
import {
@@ -19,6 +19,7 @@ import { StyledText } from '../../atoms/text'
1919
import { addManualIp } from '../../redux/config'
2020
import { startDiscovery } from '../../redux/discovery'
2121

22+
import type { FieldError, Resolver } from 'react-hook-form'
2223
import type { Dispatch } from '../../redux/types'
2324

2425
const FlexForm = styled.form`
@@ -90,7 +91,6 @@ export function ManualIpHostnameForm({
9091
): Record<string, FieldError> => {
9192
const ip = data.ip.trim()
9293
let message: string | undefined
93-
// ToDo: kj 12/19/2022 for this, the best way is to use the regex because invisible unicode characters
9494
if (!ip) {
9595
message = t('add_ip_error')
9696
}

‎app/src/organisms/ConfigurePipette/ConfigForm.tsx

+41-40
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import forOwn from 'lodash/forOwn'
66
import keys from 'lodash/keys'
77
import omit from 'lodash/omit'
88
import set from 'lodash/set'
9+
import { useForm } from 'react-hook-form'
910
import { Box, OVERFLOW_AUTO } from '@opentrons/components'
1011
import { ConfigFormResetButton } from './ConfigFormResetButton'
1112
import {
@@ -14,13 +15,13 @@ import {
1415
ConfigQuirkGroup,
1516
} from './ConfigFormGroup'
1617

18+
import type { FieldError, Resolver } from 'react-hook-form'
1719
import type { FormValues } from './ConfigFormGroup'
1820
import type {
1921
PipetteSettingsField,
2022
PipetteSettingsFieldsMap,
2123
UpdatePipetteSettingsData,
2224
} from '@opentrons/api-client'
23-
import { FieldError, Resolver, useForm } from 'react-hook-form'
2425

2526
export interface DisplayFieldProps extends PipetteSettingsField {
2627
name: string
@@ -46,7 +47,7 @@ const POWER_KEYS = ['plungerCurrent', 'pickUpCurrent', 'dropTipCurrent']
4647
const TIP_KEYS = ['dropTipSpeed', 'pickUpDistance']
4748
const QUIRK_KEY = 'quirks'
4849

49-
export const ConfigForm = (props: ConfigFormProps): JSX.Element => {
50+
export function ConfigForm(props: ConfigFormProps): JSX.Element {
5051
const {
5152
updateInProgress,
5253
formId,
@@ -55,6 +56,44 @@ export const ConfigForm = (props: ConfigFormProps): JSX.Element => {
5556
groupLabels,
5657
} = props
5758

59+
const getInitialValues: () => FormValues = () => {
60+
const fields = getVisibleFields()
61+
const initialFieldValues = mapValues<
62+
PipetteSettingsFieldsMap,
63+
string | boolean
64+
>(fields, f => {
65+
if (f.value === true || f.value === false) return f.value
66+
// @ts-expect-error(sa, 2021-05-27): avoiding src code change, use optional chain to access f.value
67+
return f.value !== f.default ? f.value.toString() : ''
68+
})
69+
const initialQuirkValues = settings[QUIRK_KEY]
70+
const initialValues = Object.assign(
71+
{},
72+
initialFieldValues,
73+
initialQuirkValues
74+
)
75+
76+
return initialValues
77+
}
78+
const initialValues = getInitialValues()
79+
80+
const resolver: Resolver<FormValues> = values => {
81+
let errors = {}
82+
errors = validate(values, errors)
83+
return { values, errors }
84+
}
85+
86+
const {
87+
handleSubmit,
88+
reset,
89+
getValues,
90+
control,
91+
formState: { errors },
92+
} = useForm<FormValues>({
93+
defaultValues: initialValues,
94+
resolver: resolver,
95+
})
96+
5897
const getFieldsByKey = (
5998
keys: string[],
6099
fields: PipetteSettingsFieldsMap
@@ -166,32 +205,6 @@ export const ConfigForm = (props: ConfigFormProps): JSX.Element => {
166205
return errors
167206
}
168207

169-
const resolver: Resolver<FormValues> = values => {
170-
let errors = {}
171-
errors = validate(values, errors)
172-
return { values, errors }
173-
}
174-
175-
const getInitialValues: () => FormValues = () => {
176-
const fields = getVisibleFields()
177-
const initialFieldValues = mapValues<
178-
PipetteSettingsFieldsMap,
179-
string | boolean
180-
>(fields, f => {
181-
if (f.value === true || f.value === false) return f.value
182-
// @ts-expect-error(sa, 2021-05-27): avoiding src code change, use optional chain to access f.value
183-
return f.value !== f.default ? f.value.toString() : ''
184-
})
185-
const initialQuirkValues = settings[QUIRK_KEY]
186-
const initialValues = Object.assign(
187-
{},
188-
initialFieldValues,
189-
initialQuirkValues
190-
)
191-
192-
return initialValues
193-
}
194-
195208
const fields = getVisibleFields()
196209
const UNKNOWN_KEYS = getUnknownKeys()
197210
const plungerFields = getFieldsByKey(PLUNGER_KEYS, fields)
@@ -200,18 +213,6 @@ export const ConfigForm = (props: ConfigFormProps): JSX.Element => {
200213
const quirkFields = getKnownQuirks()
201214
const quirksPresent = quirkFields.length > 0
202215
const unknownFields = getFieldsByKey(UNKNOWN_KEYS, fields)
203-
const initialValues = getInitialValues()
204-
205-
const {
206-
handleSubmit,
207-
reset,
208-
getValues,
209-
control,
210-
formState: { errors },
211-
} = useForm<FormValues>({
212-
defaultValues: initialValues,
213-
resolver: resolver,
214-
})
215216

216217
const handleReset = (): void => {
217218
const newValues = mapValues(getValues(), v => {

‎app/src/organisms/ConfigurePipette/ConfigFormGroup.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Control, Controller } from 'react-hook-form'
2+
import { Controller } from 'react-hook-form'
33
import {
44
FormGroup,
55
Flex,
@@ -12,6 +12,7 @@ import { InputField } from '../../atoms/InputField'
1212
import { StyledText } from '../../atoms/text'
1313
import styles from './styles.css'
1414

15+
import type { Control } from 'react-hook-form'
1516
import type { DisplayFieldProps, DisplayQuirkFieldProps } from './ConfigForm'
1617

1718
export interface FormColumnProps {

‎app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import { useSelector, useDispatch } from 'react-redux'
33
import { useHistory } from 'react-router-dom'
4-
import { useForm, Resolver, Controller, FieldError } from 'react-hook-form'
4+
import { useForm, Controller } from 'react-hook-form'
55
import { useTranslation } from 'react-i18next'
66
import {
77
Flex,
@@ -28,6 +28,7 @@ import { InputField } from '../../../../../atoms/InputField'
2828
import { Banner } from '../../../../../atoms/Banner'
2929
import { useIsFlex } from '../../../hooks'
3030

31+
import { Resolver, FieldError } from 'react-hook-form'
3132
import type { UpdatedRobotName } from '@opentrons/api-client'
3233
import type { State, Dispatch } from '../../../../../redux/types'
3334
interface RenameRobotSlideoutProps {

‎app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormModal.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Control, Controller } from 'react-hook-form'
2+
import { Controller } from 'react-hook-form'
33
import styled, { css } from 'styled-components'
44

55
import {
@@ -14,6 +14,7 @@ import { SecurityField } from './SecurityField'
1414
import { FIELD_TYPE_KEY_FILE, FIELD_TYPE_SECURITY } from '../constants'
1515
import * as Copy from '../i18n'
1616

17+
import type { Control } from 'react-hook-form'
1718
import type { ConnectFormField, ConnectFormValues, WifiNetwork } from '../types'
1819

1920
const fieldStyle = css`

‎app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/form-fields.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import get from 'lodash/get'
2-
import { FieldError } from 'react-hook-form'
32

43
import * as Constants from '../constants'
54
import * as Copy from '../i18n'
65

6+
import type { FieldError } from 'react-hook-form'
77
import type {
88
WifiNetwork,
99
WifiKey,
@@ -149,16 +149,16 @@ export function validateConnectFormFields(
149149
securityType: formSecurityType,
150150
psk: formPsk,
151151
} = values
152-
let message: string | undefined
152+
let errorMessage: string | undefined
153153

154-
if (network === null && !formSsid) {
155-
message = Copy.FIELD_IS_REQUIRED(Copy.LABEL_SSID)
156-
return message != null
154+
if (network === null && (formSsid == null || formSsid.length === 0)) {
155+
errorMessage = Copy.FIELD_IS_REQUIRED(Copy.LABEL_SSID)
156+
return errorMessage != null
157157
? {
158158
...errors,
159159
ssid: {
160160
type: 'ssidError',
161-
message: message,
161+
message: errorMessage,
162162
},
163163
}
164164
: errors
@@ -168,13 +168,13 @@ export function validateConnectFormFields(
168168
(network === null || network.securityType === Constants.SECURITY_WPA_EAP) &&
169169
!formSecurityType
170170
) {
171-
message = Copy.FIELD_IS_REQUIRED(Copy.LABEL_SECURITY)
172-
return message != null
171+
errorMessage = Copy.FIELD_IS_REQUIRED(Copy.LABEL_SECURITY)
172+
return errorMessage != null
173173
? {
174174
...errors,
175175
securityType: {
176176
type: 'securityTypeError',
177-
message: message,
177+
message: errorMessage,
178178
},
179179
}
180180
: errors
@@ -185,16 +185,16 @@ export function validateConnectFormFields(
185185
formSecurityType === Constants.SECURITY_WPA_PSK) &&
186186
(!formPsk || formPsk.length < Constants.CONFIGURE_PSK_MIN_LENGTH)
187187
) {
188-
message = Copy.FIELD_NOT_LONG_ENOUGH(
188+
errorMessage = Copy.FIELD_NOT_LONG_ENOUGH(
189189
Copy.LABEL_PSK,
190190
Constants.CONFIGURE_PSK_MIN_LENGTH
191191
)
192-
return message != null
192+
return errorMessage != null
193193
? {
194194
...errors,
195195
psk: {
196196
type: 'pskError',
197-
message: message,
197+
message: errorMessage,
198198
},
199199
}
200200
: errors

‎app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/form-state.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import * as React from 'react'
2-
import {
3-
useForm,
1+
import { useEffect } from 'react'
2+
import { useForm } from 'react-hook-form'
3+
import { usePrevious } from '@opentrons/components'
4+
import type {
45
ControllerFieldState,
56
ControllerRenderProps,
67
FieldValues,
78
} from 'react-hook-form'
8-
import { usePrevious } from '@opentrons/components'
9-
109
import type { ConnectFormValues, ConnectFormFieldProps } from '../types'
1110

1211
export const useResetFormOnSecurityChange = (): void => {
@@ -25,7 +24,7 @@ export const useResetFormOnSecurityChange = (): void => {
2524
const securityType = getValues('securityType')
2625
const prevSecurityType = usePrevious(securityType)
2726

28-
React.useEffect(() => {
27+
useEffect(() => {
2928
if (prevSecurityType && securityType !== prevSecurityType) {
3029
clearErrors('ssid')
3130
clearErrors('securityType')

‎app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Control, useForm, Resolver } from 'react-hook-form'
2+
import { useForm } from 'react-hook-form'
33

44
import { useResetFormOnSecurityChange } from './form-state'
55
import {
@@ -10,6 +10,7 @@ import {
1010

1111
import { FormModal } from './FormModal'
1212

13+
import type { Control, Resolver } from 'react-hook-form'
1314
import type {
1415
ConnectFormValues,
1516
WifiConfigureRequest,

‎app/src/organisms/Devices/RobotSettings/ConnectNetwork/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FieldError } from 'react-hook-form'
1+
import type { FieldError } from 'react-hook-form'
22
import type {
33
WifiNetwork,
44
EapOption,

‎app/src/pages/NameRobot/index.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Controller, FieldError, Resolver, useForm } from 'react-hook-form'
2+
import { Controller, useForm } from 'react-hook-form'
33
import { useTranslation } from 'react-i18next'
44
import { useSelector, useDispatch } from 'react-redux'
55
import { css } from 'styled-components'
@@ -37,7 +37,7 @@ import { SmallButton } from '../../atoms/buttons'
3737
import { StepMeter } from '../../atoms/StepMeter'
3838
import { useIsUnboxingFlowOngoing } from '../../organisms/RobotSettingsDashboard/NetworkSettings/hooks'
3939
import { ConfirmRobotName } from '../../organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName'
40-
40+
import type { FieldError, Resolver } from 'react-hook-form'
4141
import type { UpdatedRobotName } from '@opentrons/api-client'
4242
import type { State, Dispatch } from '../../redux/types'
4343

@@ -84,28 +84,28 @@ export function NameRobot(): JSX.Element {
8484
errors: Record<string, FieldError>
8585
): Record<string, FieldError> => {
8686
const newName = data.newRobotName
87-
let message: string | undefined
87+
let errorMessage: string | undefined
8888
// In ODD users cannot input letters and numbers from software keyboard
8989
// so the app only checks the length of input string
9090
if (newName.length < 1) {
91-
message = t('name_rule_error_name_length')
91+
errorMessage = t('name_rule_error_name_length')
9292
}
9393

9494
if (
9595
[...connectableRobots, ...reachableRobots].some(
9696
robot => newName === robot.name && robot.ip !== ipAddress
9797
)
9898
) {
99-
message = t('name_rule_error_exist')
99+
errorMessage = t('name_rule_error_exist')
100100
}
101101

102102
const updatedErrors =
103-
message != null
103+
errorMessage != null
104104
? {
105105
...errors,
106106
newRobotName: {
107107
type: 'error',
108-
message: message,
108+
message: errorMessage,
109109
},
110110
}
111111
: errors

0 commit comments

Comments
 (0)