TCA-1179 - lint "lib" folder

Author: vas3a

src-ts/.eslintrc.js

@@ -92,6 +92,7 @@ module.exports = {
         'jsx-a11y/click-events-have-key-events': 'off',
         'jsx-a11y/no-noninteractive-element-interactions': 'off',
         'jsx-a11y/no-static-element-interactions': 'off',
+        'jsx-a11y/label-has-associated-control': 'off',
         'jsx-a11y/tabindex-no-positive': [
             'warn'
         ],

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -28,6 +28,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                                     <BreadcrumbItem
                                         index={index + 1}
                                         item={item}
+                                        // eslint-disable-next-line react/no-array-index-key
                                         key={index}
                                     />
                                 ))
@@ -63,6 +64,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                             <BreadcrumbItem
                                 index={index + 1}
                                 item={item}
+                                // eslint-disable-next-line react/no-array-index-key
                                 key={index}
                             />
                         ))}

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
+import classNames from 'classnames'
 
 import styles from '../Breadcrumb.module.scss'
 
@@ -19,10 +20,10 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
     return (
         <li
             key={props.index}
-            onClick={() => onClick()}
+            onClick={onClick}
         >
             <Link
-                className={props.item.isElipsis && styles.elipsis}
+                className={classNames(props.item.isElipsis && styles.elipsis)}
                 to={props.item.url}
             >
                 {props.item.name}

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useState } from 'react'
 
 import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../form'
+import { FormValue } from '../form/form-functions'
 import { LoadingSpinner } from '../loading-spinner'
 import { profileContext, ProfileContextData } from '../profile-provider'
 
@@ -27,13 +28,13 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
     useEffect(() => {
         if (!loading && saveOnSuccess) {
-            props.onSave()
+            props.onSave.call(undefined)
         }
     }, [loading, saveOnSuccess, props.onSave])
 
-    const generateRequest: (inputs: ReadonlyArray<FormInputModel>) => void = useCallback((
+    const generateRequest: (inputs: ReadonlyArray<FormInputModel>) => FormValue = useCallback((
         inputs: ReadonlyArray<FormInputModel>,
-    ): ContactSupportRequest => {
+    ): FormValue => {
         const firstName: string
             = formGetInputModel(inputs, ContactSupportFormField.first).value as string
         const lastName: string
@@ -50,12 +51,12 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
             lastName,
             question,
         }
-    }, [props.workId])
+    }, [props.isSelfService, props.workId])
 
-    const saveAsync: (request: ContactSupportRequest) => Promise<void>
-        = useCallback(async (request: ContactSupportRequest): Promise<void> => {
+    const saveAsync: (request: FormValue) => Promise<void>
+        = useCallback(async (request: FormValue): Promise<void> => {
             setLoading(true)
-            return contactSupportSubmitRequestAsync(request)
+            return contactSupportSubmitRequestAsync(request as unknown as ContactSupportRequest)
                 .then(() => {
                     setSaveOnSuccess(true)
                 })
@@ -92,7 +93,7 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
             <Form
                 formDef={props.formDef}
-                formValues={profile}
+                formValues={profile as unknown as FormValue}
                 requestGenerator={generateRequest}
                 save={saveAsync}
             />

src-ts/lib/form/Form.tsx

@@ -44,7 +44,10 @@ interface FormProps<ValueType, RequestType> {
     readonly shouldDisableButton?: (isPrimaryGroup: boolean, index: number) => boolean
 }
 
-const Form: <ValueType extends FormValue, RequestType extends FormValue>(props: FormProps<ValueType, RequestType>) => JSX.Element
+const Form: <
+    ValueType extends FormValue,
+    RequestType extends FormValue
+>(props: FormProps<ValueType, RequestType>) => JSX.Element
     = <ValueType extends FormValue, RequestType extends FormValue>(props: FormProps<ValueType, RequestType>) => {
 
         const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
@@ -60,8 +63,10 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
             = useState<RefObject<HTMLFormElement>>(createRef<HTMLFormElement>())
 
         // This will hold all the inputs
-        const [inputs, setInputs]: [Array<FormInputModel>, Dispatch<SetStateAction<Array<FormInputModel>>>] = useState<Array<FormInputModel>>(formGetInputFields(formDef.groups || []))
-        const [isFormInvalid, setFormInvalid]: [boolean, Dispatch<boolean>] = useState<boolean>(inputs.filter(item => !!item.error).length > 0)
+        const [inputs, setInputs]: [Array<FormInputModel>, Dispatch<SetStateAction<Array<FormInputModel>>>]
+            = useState<Array<FormInputModel>>(formGetInputFields(formDef.groups || []))
+        const [isFormInvalid, setFormInvalid]: [boolean, Dispatch<boolean>]
+            = useState<boolean>(inputs.filter(item => !!item.error).length > 0)
 
         useEffect(() => {
             if (!formRef.current?.elements) {
@@ -129,7 +134,14 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
 
         async function onSubmitAsync(event: FormEvent<HTMLFormElement>): Promise<void> {
             const values: RequestType = props.requestGenerator(inputs)
-            formOnSubmitAsync<RequestType>(props.action || 'submit', event, formDef, values, props.save, props.onSuccess)
+            formOnSubmitAsync<RequestType>(
+                props.action || 'submit',
+                event,
+                formDef,
+                values,
+                props.save,
+                props.onSuccess,
+            )
                 .then(() => {
                     if (!props.resetFormAfterSave) {
                         setFormKey(Date.now())
@@ -149,22 +161,17 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
 
         formInitializeValues(inputs, props.formValues)
 
-        const setOnClickOnReset: (button: FormButton) => FormButton = button => {
+        const setOnClickOnReset: (button: FormButton) => FormButton = button => (
             // if this is a reset button, set its onclick to reset
-            if (!!button.isReset) {
-                button = {
-                    ...button,
-                    onClick: onReset,
-                }
-            }
-
-            return button
-        }
+            !button.isReset ? button : { ...button, onClick: onReset }
+        )
 
-        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => groups.map((button, index) => {
-            button = setOnClickOnReset(button)
+        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element>
+        = (groups, isPrimaryGroup) => groups.map((button, index) => {
+            Object.assign(button, setOnClickOnReset(button))
 
-            const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
+            const disabled: boolean = (button.isSubmit && isFormInvalid)
+                || !!props.shouldDisableButton?.(isPrimaryGroup, index)
 
             return (
                 <Button

src-ts/lib/form/form-functions/form.functions.ts

@@ -9,7 +9,10 @@ import { FormValue } from './form-value.model'
 
 export type ValidationEvent = 'blur' | 'change' | 'submit' | 'initial'
 
-export function getInputElement(formElements: HTMLFormControlsCollection, fieldName: string): HTMLInputElement | undefined {
+export function getInputElement(
+    formElements: HTMLFormControlsCollection,
+    fieldName: string,
+): HTMLInputElement | undefined {
     return formElements.namedItem(fieldName) as HTMLInputElement
 }
 
@@ -79,14 +82,20 @@ export function onReset<T extends FormValue>(inputs: ReadonlyArray<FormInputMode
     })
 }
 
+type CustomFormValidator = (
+    formElements: HTMLFormControlsCollection,
+    event: ValidationEvent,
+    inputs: ReadonlyArray<FormInputModel>,
+) => boolean
+
 export async function onSubmitAsync<T extends FormValue>(
     action: FormAction,
     event: FormEvent<HTMLFormElement>,
     formDef: FormDefinition,
     formValue: T,
     save: (value: T) => Promise<void>,
     onSuccess?: () => void,
-    customValidateForm?: (formElements: HTMLFormControlsCollection, event: ValidationEvent, inputs: ReadonlyArray<FormInputModel>) => boolean,
+    customValidateForm?: CustomFormValidator,
 ): Promise<void> {
 
     event.preventDefault()

src-ts/lib/form/form-groups/FormGroups.tsx

@@ -22,10 +22,8 @@ interface FormGroupsProps {
 
 const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsProps) => {
 
-    const { formDef, onBlur, onChange }: FormGroupsProps = props
-
     function getTabIndex(input: FormInputModel, index: number): number {
-        const tabIndex: number = input.notTabbable ? -1 : index + 1 + (formDef.tabIndexStart || 0)
+        const tabIndex: number = input.notTabbable ? -1 : index + 1 + (props.formDef.tabIndexStart || 0)
         return tabIndex
     }
 
@@ -41,7 +39,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <InputRating
                         {...input}
-                        onChange={onChange}
+                        onChange={props.onChange}
                         tabIndex={tabIndex}
                         value={input.value as number | undefined}
                     />
@@ -51,8 +49,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <InputTextarea
                         {...input}
-                        onBlur={onBlur}
-                        onChange={onChange}
+                        onBlur={props.onBlur}
+                        onChange={props.onChange}
                         tabIndex={tabIndex}
                         value={input.value as string | undefined}
                     />
@@ -63,8 +61,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                     <InputText
                         {...input}
                         checked={!!input.value}
-                        onBlur={onBlur}
-                        onChange={onChange}
+                        onBlur={props.onBlur}
+                        onChange={props.onChange}
                         tabIndex={tabIndex}
                         type='checkbox'
                     />
@@ -74,7 +72,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <FormRadio
                         {...input}
-                        onChange={onChange}
+                        onChange={props.onChange}
                         value={input.value}
                     />
                 )
@@ -83,7 +81,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <FormCardSet
                         {...input}
-                        onChange={onChange}
+                        onChange={props.onChange}
                         value={input.value}
                     />
                 )
@@ -92,7 +90,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <InputImagePicker
                         {...input}
-                        onChange={onChange}
+                        onChange={props.onChange}
                         value={input.value}
                     />
                 )
@@ -101,8 +99,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                 inputElement = (
                     <InputText
                         {...input}
-                        onBlur={onBlur}
-                        onChange={onChange}
+                        onBlur={props.onBlur}
+                        onChange={props.onChange}
                         tabIndex={tabIndex}
                         type={input.type as InputTextTypes || 'text'}
                         value={input.value as string | undefined}
@@ -122,13 +120,14 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
         )
     }
 
-    const formGroups: Array<JSX.Element | undefined> = formDef?.groups
+    const formGroups: Array<JSX.Element | undefined> = props.formDef?.groups
         ?.map((element: FormGroup, index: number) => (
             <FormGroupItem
+                // eslint-disable-next-line react/no-array-index-key
                 key={`element-${index}`}
                 group={element}
                 renderFormInput={renderInputField}
-                totalGroupCount={formDef.groups?.length || 0}
+                totalGroupCount={props.formDef.groups?.length || 0}
                 renderDividers={props.formDef.groupsOptions?.renderGroupDividers}
             />
         ))

src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx

@@ -37,7 +37,7 @@ const FormCardSet: React.FC<FormCardSetProps> = (props: FormCardSetProps) => {
 
     const getButton: (card: FormCard, selected: boolean) => JSX.Element = (card, selected) => (
         <Button
-            onClick={evt => props.onChange(evt)}
+            onClick={props.onChange}
             label={selected ? 'Selected' : 'Choose package'}
             buttonStyle={selected ? 'primary' : 'secondary'}
             type={selected ? 'button' : 'submit'}