Skip to content

Commit 8e9fe79

Browse files
kylecarbskylecarbs
committed
fix: Replace getFormHelpers
Fixes #3209.
1 parent 4c8be34 commit 8e9fe79

File tree

8 files changed

+23
-36
lines changed

8 files changed

+23
-36
lines changed

‎site/src/components/SettingsAccountForm/SettingsAccountForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
33
import { FormikContextType, FormikTouched, useFormik } from "formik"
44
import { FC } from "react"
55
import * as Yup from "yup"
6-
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
6+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
77
import { LoadingButton } from "../LoadingButton/LoadingButton"
88
import { Stack } from "../Stack/Stack"
99

@@ -47,7 +47,7 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
4747
onSubmit,
4848
initialTouched,
4949
})
50-
const getFieldHelpers = getFormHelpersWithError<AccountFormValues>(form, updateProfileError)
50+
const getFieldHelpers = getFormHelpers<AccountFormValues>(form, updateProfileError)
5151

5252
return (
5353
<>

‎site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
33
import { FormikContextType, FormikTouched, useFormik } from "formik"
44
import React from "react"
55
import * as Yup from "yup"
6-
import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
6+
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
77
import { LoadingButton } from "../LoadingButton/LoadingButton"
88
import { Stack } from "../Stack/Stack"
99

@@ -62,7 +62,7 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
6262
onSubmit,
6363
initialTouched,
6464
})
65-
const getFieldHelpers = getFormHelpersWithError<SecurityFormValues>(form, updateSecurityError)
65+
const getFieldHelpers = getFormHelpers<SecurityFormValues>(form, updateSecurityError)
6666

6767
return (
6868
<>

‎site/src/components/SignInForm/SignInForm.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { FormikContextType, FormikTouched, useFormik } from "formik"
1111
import { FC } from "react"
1212
import * as Yup from "yup"
1313
import { AuthMethods } from "../../api/typesGenerated"
14-
import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
14+
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
1515
import { Welcome } from "../Welcome/Welcome"
1616
import { LoadingButton } from "./../LoadingButton/LoadingButton"
1717

@@ -113,10 +113,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
113113
onSubmit,
114114
initialTouched,
115115
})
116-
const getFieldHelpers = getFormHelpersWithError<BuiltInAuthFormValues>(
117-
form,
118-
loginErrors.authError,
119-
)
116+
const getFieldHelpers = getFormHelpers<BuiltInAuthFormValues>(form, loginErrors.authError)
120117

121118
return (
122119
<>

‎site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { defaultSchedule, emptySchedule } from "pages/WorkspaceSchedulePage/sche
2121
import { defaultTTL } from "pages/WorkspaceSchedulePage/ttl"
2222
import { ChangeEvent, FC } from "react"
2323
import * as Yup from "yup"
24-
import { getFormHelpersWithError } from "../../util/formUtils"
24+
import { getFormHelpers } from "../../util/formUtils"
2525
import { FormFooter } from "../FormFooter/FormFooter"
2626
import { FullPageForm } from "../FullPageForm/FullPageForm"
2727
import { Stack } from "../Stack/Stack"
@@ -189,10 +189,7 @@ export const WorkspaceScheduleForm: FC<React.PropsWithChildren<WorkspaceSchedule
189189
validationSchema,
190190
initialTouched,
191191
})
192-
const formHelpers = getFormHelpersWithError<WorkspaceScheduleFormValues>(
193-
form,
194-
submitScheduleError,
195-
)
192+
const formHelpers = getFormHelpers<WorkspaceScheduleFormValues>(form, submitScheduleError)
196193

197194
const checkboxes: Array<{ value: boolean; name: string; label: string }> = [
198195
{ value: form.values.sunday, name: "sunday", label: Language.daySundayLabel },

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
1010
import { Loader } from "../../components/Loader/Loader"
1111
import { ParameterInput } from "../../components/ParameterInput/ParameterInput"
1212
import { Stack } from "../../components/Stack/Stack"
13-
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
13+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
1414

1515
export const Language = {
1616
templateLabel: "Template",
@@ -84,7 +84,7 @@ export const CreateWorkspacePageView: FC<React.PropsWithChildren<CreateWorkspace
8484
},
8585
})
8686

87-
const getFieldHelpers = getFormHelpersWithError<TypesGen.CreateWorkspaceRequest>(
87+
const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(
8888
form,
8989
props.createWorkspaceErrors[CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR],
9090
)

‎site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Stack } from "components/Stack/Stack"
1313
import { FormikContextType, FormikTouched, useFormik } from "formik"
1414
import { FC, useRef, useState } from "react"
1515
import { colors } from "theme/colors"
16-
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "util/formUtils"
16+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
1717
import * as Yup from "yup"
1818

1919
export const Language = {
@@ -79,7 +79,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
7979
},
8080
initialTouched,
8181
})
82-
const getFieldHelpers = getFormHelpersWithError<UpdateTemplateMeta>(form, error)
82+
const getFieldHelpers = getFormHelpers<UpdateTemplateMeta>(form, error)
8383
const styles = useStyles()
8484
const hasIcon = form.values.icon && form.values.icon !== ""
8585
const emojiButtonRef = useRef<HTMLButtonElement>(null)

‎site/src/util/formUtils.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,19 @@ describe("form util functions", () => {
7171
it("shows an error if there is only an API error", () => {
7272
const getFieldHelpers = getFormHelpers<TestType>(form, { touchedGoodField: "API error!" })
7373
const result = getFieldHelpers("touchedGoodField")
74-
expect(result.error).toBeTruthy
74+
expect(result.error).toBeTruthy()
7575
expect(result.helperText).toEqual("API error!")
7676
})
7777
it("shows an error if there is only a validation error", () => {
7878
const getFieldHelpers = getFormHelpers<TestType>(form, {})
7979
const result = getFieldHelpers("touchedBadField")
80-
expect(result.error).toBeTruthy
80+
expect(result.error).toBeTruthy()
8181
expect(result.helperText).toEqual("oops!")
8282
})
8383
it("shows the API error if both are present", () => {
8484
const getFieldHelpers = getFormHelpers<TestType>(form, { touchedBadField: "API error!" })
8585
const result = getFieldHelpers("touchedBadField")
86-
expect(result.error).toBeTruthy
86+
expect(result.error).toBeTruthy()
8787
expect(result.helperText).toEqual("API error!")
8888
})
8989
})

‎site/src/util/formUtils.ts

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ interface FormHelpers {
2727

2828
// backendErrorName can be used if the backend names a field differently than the frontend does
2929
export const getFormHelpers =
30-
<T>(form: FormikContextType<T>, apiValidationErrors?: FormikErrors<T>) =>
30+
<T>(form: FormikContextType<T>, error?: Error | unknown) =>
3131
(name: keyof T, HelperText: ReactNode = "", backendErrorName?: string): FormHelpers => {
32+
const apiValidationErrors =
33+
isApiError(error) && hasApiFieldErrors(error)
34+
? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
35+
: error
3236
if (typeof name !== "string") {
3337
throw new Error(`name must be type of string, instead received '${typeof name}'`)
3438
}
@@ -39,26 +43,15 @@ export const getFormHelpers =
3943
const touched = getIn(form.touched, name)
4044
const apiError = getIn(apiValidationErrors, apiErrorName)
4145
const frontendError = getIn(form.errors, name)
42-
const error = apiError ?? frontendError
46+
const returnError = apiError ?? frontendError
4347
return {
4448
...form.getFieldProps(name),
4549
id: name,
46-
error: touched && Boolean(error),
47-
helperText: touched ? error || HelperText : HelperText,
50+
error: touched && Boolean(returnError),
51+
helperText: touched ? returnError || HelperText : HelperText,
4852
}
4953
}
5054

51-
export const getFormHelpersWithError = <T>(
52-
form: FormikContextType<T>,
53-
error?: Error | unknown,
54-
): ((name: keyof T, HelperText?: ReactNode, errorName?: string) => FormHelpers) => {
55-
const apiValidationErrors =
56-
isApiError(error) && hasApiFieldErrors(error)
57-
? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
58-
: undefined
59-
return getFormHelpers(form, apiValidationErrors)
60-
}
61-
6255
export const onChangeTrimmed =
6356
<T>(form: FormikContextType<T>) =>
6457
(event: ChangeEvent<HTMLInputElement>): void => {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy