Onboarding code cleanup

src/apps/onboarding/src/components/DateInput/index.tsx

@@ -1,32 +1,28 @@
-/* eslint-disable ordered-imports/ordered-imports */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable unicorn/no-null */
-/* eslint-disable max-len */
-/* eslint-disable react/destructuring-assignment */
 /**
  * DateInput
  *
  * Date Input control.
  */
-import React, { FC, createRef, useState } from 'react'
-import DatePicker from 'react-datepicker'
 import { Portal } from 'react-overlays'
+import { createRef, FC, useState } from 'react'
+import DatePicker from 'react-datepicker'
 import cn from 'classnames'
 import moment from 'moment'
-
 import 'react-datepicker/dist/react-datepicker.css'
 
+import { IconOutline } from '~/libs/ui'
+
 import { ReactComponent as CalendarIcon } from '../../assets/images/calendar.svg'
-import { ReactComponent as ArrowIcon } from '../../assets/images/cheveron-down.svg'
+
 import styles from './styles.module.scss'
 
 interface CalendarContainerProps {
     children?: any
 }
-const CalendarContainer: FC<CalendarContainerProps> = ({ children }: CalendarContainerProps) => {
+const CalendarContainer: FC<CalendarContainerProps> = (props: CalendarContainerProps) => {
     const el: any = document.getElementById('calendar-portal')
 
-    return <Portal container={el}>{children}</Portal>
+    return <Portal container={el}>{props.children}</Portal>
 }
 
 interface DateInputProps {
@@ -53,7 +49,9 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
             )}
         >
             <div
-                onClick={() => calendarRef.current.setOpen(true)}
+                onClick={function openCalendar() {
+                    calendarRef.current.setOpen(true)
+                }}
                 className={cn(styles.icon, styles['icon-calendar'])}
             >
                 <CalendarIcon />
@@ -65,15 +63,17 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
                 selected={props.value}
                 onChange={props.onChange as any}
                 onBlur={props.onBlur}
-                onCalendarClose={() => {
+                onCalendarClose={function closeCalendar() {
                     setOpen(false)
                 }}
                 onFocus={props.onFocus}
                 showYearDropdown
                 dropdownMode='select'
-                onCalendarOpen={() => setOpen(true)}
+                onCalendarOpen={function openCalendar() {
+                    setOpen(true)
+                }}
                 maxDate={
-                    props.allowFutureDate ? null : moment()
+                    props.allowFutureDate ? undefined : moment()
                         .subtract(1, 'days')
                         .toDate()
                 }
@@ -86,9 +86,11 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
                     styles['icon-arrow'],
                     open ? styles['icon-arrow-open'] : '',
                 )}
-                onClick={() => calendarRef.current.setOpen(true)}
+                onClick={function openCalendar() {
+                    calendarRef.current.setOpen(true)
+                }}
             >
-                <ArrowIcon />
+                <IconOutline.ChevronDownIcon />
             </div>
         </div>
     )

src/apps/onboarding/src/components/FieldAvatar/index.tsx

@@ -1,43 +1,34 @@
-/* eslint-disable ordered-imports/ordered-imports */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable unicorn/no-null */
 /**
  * FieldAvatar
  *
  * A Form Field Is a wrapper for input to add the label to it
  */
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import classNames from 'classnames'
-import _ from 'lodash'
 
 import { Button, IconOutline } from '~/libs/ui'
 
-import styles from './styles.module.scss'
-import MemberInfo from '../../models/MemberInfo'
 import AvatarPlaceholder from '../../assets/images/avatar-placeholder.png'
+import MemberInfo from '../../models/MemberInfo'
 import ModalUploadPhoto from '../modal-upload-photo'
 
+import styles from './styles.module.scss'
+
 interface FieldAvatarProps {
     className?: string
     memberInfo?: MemberInfo,
     setMemberPhotoUrl: (photoUrl: string) => void
     updateMemberPhotoUrl: (photoUrl: string) => void
 }
 
-const FieldAvatar: FC<FieldAvatarProps> = ({
-    className,
-    memberInfo,
-    setMemberPhotoUrl,
-    updateMemberPhotoUrl,
-}: FieldAvatarProps) => {
+const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
     const [imgUrl, setImgUrl] = useState<string>('')
     useEffect(() => {
-        if (memberInfo) {
-            setImgUrl(memberInfo.photoURL)
+        if (props.memberInfo) {
+            setImgUrl(props.memberInfo.photoURL)
         }
         /* eslint-disable react-hooks/exhaustive-deps */
-    }, [memberInfo])
+    }, [props.memberInfo])
 
     const [isPhotoEditMode, setIsPhotoEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -51,16 +42,20 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
     async function handleRemovePhoto(): Promise<void> {
         setIsSaving(true)
         try {
-            await updateMemberPhotoUrl('')
+            await props.updateMemberPhotoUrl('')
         } catch (error) {
         }
 
         setIsSaving(false)
     }
 
+    function showEditPhoto(): void {
+        setIsPhotoEditMode(true)
+    }
+
     return (
         <div
-            className={classNames(styles.container, className, 'd-flex flex-column gap-20 align-items-start')}
+            className={classNames(styles.container, props.className, 'd-flex flex-column gap-20 align-items-start')}
         >
             <h3>Photo</h3>
             <div className='d-flex gap-30'>
@@ -90,8 +85,8 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
                                 secondary
                                 iconToLeft
                                 icon={IconOutline.UploadIcon}
-                                disabled={!memberInfo || isSaving}
-                                onClick={() => setIsPhotoEditMode(true)}
+                                disabled={!props.memberInfo || isSaving}
+                                onClick={showEditPhoto}
                                 className='mt-16'
                             >
                                 change
@@ -101,11 +96,8 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
                                 secondary
                                 iconToLeft
                                 icon={IconOutline.TrashIcon}
-                                disabled={!memberInfo || isSaving}
-                                onClick={() => {
-                                    handleRemovePhoto()
-                                        .then(_.noop)
-                                }}
+                                disabled={!props.memberInfo || isSaving}
+                                onClick={handleRemovePhoto}
                                 className='mt-16'
                             >
                                 delete
@@ -117,8 +109,8 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
                             secondary
                             iconToLeft
                             icon={IconOutline.UploadIcon}
-                            disabled={!memberInfo}
-                            onClick={() => setIsPhotoEditMode(true)}
+                            disabled={!props.memberInfo}
+                            onClick={showEditPhoto}
                             className='mt-16'
                         >
                             add image
@@ -128,11 +120,11 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
             </div>
 
             {
-                isPhotoEditMode && memberInfo && (
+                isPhotoEditMode && props.memberInfo && (
                     <ModalUploadPhoto
                         onClose={handleModifyPhotoModalClose}
-                        memberInfo={memberInfo}
-                        setMemberPhotoUrl={setMemberPhotoUrl}
+                        memberInfo={props.memberInfo}
+                        setMemberPhotoUrl={props.setMemberPhotoUrl}
                     />
                 )
             }

src/apps/onboarding/src/components/FormField/index.tsx

@@ -1,7 +1,3 @@
-/* eslint-disable ordered-imports/ordered-imports */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable unicorn/no-null */
 /**
  * FormField
  *
@@ -21,13 +17,15 @@ interface FormFieldProps {
     error?: string
 }
 
-const FormField: FC<FormFieldProps> = ({
-    children,
-    className,
-    label,
-    ...props
-}: FormFieldProps) => {
-    const handleClick: any = (e: any) => {
+const FormField: FC<FormFieldProps> = (componentProps: FormFieldProps) => {
+    const {
+        children,
+        className,
+        label,
+        ...props
+    }: FormFieldProps = componentProps
+
+    function handleClick(e: any): void {
         // focus on input label click
         const inputElement: any = e.target.closest('.form-field')
             .querySelector('input')
@@ -45,7 +43,7 @@ const FormField: FC<FormFieldProps> = ({
                 {children}
             </div>
             <div className={classNames(styles.error, 'd-flex align-items-center')}>
-                {props.error ? (<IconSolid.ExclamationIcon width={12} height={12} />) : null}
+                {props.error ? (<IconSolid.ExclamationIcon width={12} height={12} />) : undefined}
                 {props.error}
             </div>
         </div>

src/apps/onboarding/src/components/InputTextAutoSave/index.tsx

@@ -1,13 +1,10 @@
-/* eslint-disable ordered-imports/ordered-imports */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable unicorn/no-null */
 /**
  * InputTextAutoSave
  *
  * A Form Field Is a wrapper for input to add the label to it
  */
-import React, { FC, useEffect, useState } from 'react'
+import { FC, FocusEvent, useEffect, useState } from 'react'
+
 import { InputText, InputValue } from '~/libs/ui'
 import { InputTextTypes } from '~/libs/ui/lib/components/form/form-groups/form-input/input-text/InputText'
 
@@ -40,10 +37,12 @@ const InputTextAutoSave: FC<InputTextProps> = (props: InputTextProps) => {
         <InputText
             {...props}
             value={value}
-            onChange={event => {
+            onChange={function onChange(event: FocusEvent<HTMLInputElement>) {
                 setValue(event.target.value)
             }}
-            onBlur={() => props.onChange(`${value}`)}
+            onBlur={function onBlur() {
+                props.onChange(`${value}`)
+            }}
         />
     )
 }

src/apps/onboarding/src/components/InputTextareaAutoSave/index.tsx

@@ -1,13 +1,10 @@
-/* eslint-disable ordered-imports/ordered-imports */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable unicorn/no-null */
 /**
  * InputTextareaAutoSave
  *
  * A Form Field Is a wrapper for input to add the label to it
  */
-import React, { FC, useEffect, useState } from 'react'
+import { FC, FocusEvent, useEffect, useState } from 'react'
+
 import { InputTextarea } from '~/libs/ui'
 
 export interface InputTextareaProps {
@@ -35,10 +32,12 @@ const InputTextareaAutoSave: FC<InputTextareaProps> = (props: InputTextareaProps
         <InputTextarea
             {...props}
             value={value}
-            onChange={event => {
+            onChange={function onChange(event: FocusEvent<HTMLTextAreaElement>) {
                 setValue(event.target.value)
             }}
-            onBlur={() => props.onChange(`${value}`)}
+            onBlur={function onBlur() {
+                props.onChange(`${value}`)
+            }}
         />
     )
 }

src/apps/onboarding/src/components/card-item/index.tsx

@@ -1,11 +1,9 @@
-/* eslint-disable ordered-imports/ordered-imports */
-/* eslint-disable react/jsx-no-bind */
 import React, { FC } from 'react'
 import classNames from 'classnames'
 
+import { IconOutline } from '~/libs/ui'
+
 import styles from './styles.module.scss'
-import IconEdit from '../../assets/images/edit.svg'
-import IconTrash from '../../assets/images/trash.svg'
 
 interface CardItemProps {
     title: string
@@ -30,7 +28,7 @@ export const CardItem: FC<CardItemProps> = (props: CardItemProps) => (
                     disabled={props.disabled}
                     className={styles.btn}
                 >
-                    <img src={IconEdit} alt='' />
+                    <IconOutline.PencilIcon width={24} height={24} />
                 </button>
                 <button
                     aria-label='delete'
@@ -39,7 +37,7 @@ export const CardItem: FC<CardItemProps> = (props: CardItemProps) => (
                     disabled={props.disabled}
                     className={styles.btn}
                 >
-                    <img src={IconTrash} alt='' />
+                    <IconOutline.TrashIcon width={24} height={24} />
                 </button>
             </div>
         </div>

src/apps/onboarding/src/components/card-item/styles.module.scss

@@ -34,6 +34,7 @@
 
 .btn {
     flex-shrink: 0;
+    color: $turq-160;
 
     &:disabled {
         opacity: 0.2;