Skip to content

Commit bbf2b88

Browse files
jmgasperjmgasper
authored
Merge pull request #728 from topcoder-platform/issue-725
Onboarding code cleanup
2 parents 9acfb5d + a48a8cd commit bbf2b88

File tree

37 files changed

+321
-364
lines changed

37 files changed

+321
-364
lines changed

‎src/apps/onboarding/src/assets/images/back-green.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/apps/onboarding/src/assets/images/cheveron-down.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/apps/onboarding/src/assets/images/edit.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/apps/onboarding/src/assets/images/trash.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/apps/onboarding/src/assets/images/x-icon.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

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

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
/* eslint-disable ordered-imports/ordered-imports */
2-
/* eslint-disable react/jsx-no-bind */
3-
/* eslint-disable unicorn/no-null */
4-
/* eslint-disable max-len */
5-
/* eslint-disable react/destructuring-assignment */
61
/**
72
* DateInput
83
*
94
* Date Input control.
105
*/
11-
import React, { FC, createRef, useState } from 'react'
12-
import DatePicker from 'react-datepicker'
136
import { Portal } from 'react-overlays'
7+
import { createRef, FC, useState } from 'react'
8+
import DatePicker from 'react-datepicker'
149
import cn from 'classnames'
1510
import moment from 'moment'
16-
1711
import 'react-datepicker/dist/react-datepicker.css'
1812

13+
import { IconOutline } from '~/libs/ui'
14+
1915
import { ReactComponent as CalendarIcon } from '../../assets/images/calendar.svg'
20-
import { ReactComponent as ArrowIcon } from '../../assets/images/cheveron-down.svg'
16+
2117
import styles from './styles.module.scss'
2218

2319
interface CalendarContainerProps {
2420
children?: any
2521
}
26-
const CalendarContainer: FC<CalendarContainerProps> = ({ children }: CalendarContainerProps) => {
22+
const CalendarContainer: FC<CalendarContainerProps> = (props: CalendarContainerProps) => {
2723
const el: any = document.getElementById('calendar-portal')
2824

29-
return <Portal container={el}>{children}</Portal>
25+
return <Portal container={el}>{props.children}</Portal>
3026
}
3127

3228
interface DateInputProps {
@@ -53,7 +49,9 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
5349
)}
5450
>
5551
<div
56-
onClick={() => calendarRef.current.setOpen(true)}
52+
onClick={function openCalendar() {
53+
calendarRef.current.setOpen(true)
54+
}}
5755
className={cn(styles.icon, styles['icon-calendar'])}
5856
>
5957
<CalendarIcon />
@@ -65,15 +63,17 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
6563
selected={props.value}
6664
onChange={props.onChange as any}
6765
onBlur={props.onBlur}
68-
onCalendarClose={() => {
66+
onCalendarClose={function closeCalendar() {
6967
setOpen(false)
7068
}}
7169
onFocus={props.onFocus}
7270
showYearDropdown
7371
dropdownMode='select'
74-
onCalendarOpen={() => setOpen(true)}
72+
onCalendarOpen={function openCalendar() {
73+
setOpen(true)
74+
}}
7575
maxDate={
76-
props.allowFutureDate ? null : moment()
76+
props.allowFutureDate ? undefined : moment()
7777
.subtract(1, 'days')
7878
.toDate()
7979
}
@@ -86,9 +86,11 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
8686
styles['icon-arrow'],
8787
open ? styles['icon-arrow-open'] : '',
8888
)}
89-
onClick={() => calendarRef.current.setOpen(true)}
89+
onClick={function openCalendar() {
90+
calendarRef.current.setOpen(true)
91+
}}
9092
>
91-
<ArrowIcon />
93+
<IconOutline.ChevronDownIcon />
9294
</div>
9395
</div>
9496
)

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

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,34 @@
1-
/* eslint-disable ordered-imports/ordered-imports */
2-
/* eslint-disable react/jsx-no-bind */
3-
/* eslint-disable react/destructuring-assignment */
4-
/* eslint-disable unicorn/no-null */
51
/**
62
* FieldAvatar
73
*
84
* A Form Field Is a wrapper for input to add the label to it
95
*/
106
import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
117
import classNames from 'classnames'
12-
import _ from 'lodash'
138

149
import { Button, IconOutline } from '~/libs/ui'
1510

16-
import styles from './styles.module.scss'
17-
import MemberInfo from '../../models/MemberInfo'
1811
import AvatarPlaceholder from '../../assets/images/avatar-placeholder.png'
12+
import MemberInfo from '../../models/MemberInfo'
1913
import ModalUploadPhoto from '../modal-upload-photo'
2014

15+
import styles from './styles.module.scss'
16+
2117
interface FieldAvatarProps {
2218
className?: string
2319
memberInfo?: MemberInfo,
2420
setMemberPhotoUrl: (photoUrl: string) => void
2521
updateMemberPhotoUrl: (photoUrl: string) => void
2622
}
2723

28-
const FieldAvatar: FC<FieldAvatarProps> = ({
29-
className,
30-
memberInfo,
31-
setMemberPhotoUrl,
32-
updateMemberPhotoUrl,
33-
}: FieldAvatarProps) => {
24+
const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
3425
const [imgUrl, setImgUrl] = useState<string>('')
3526
useEffect(() => {
36-
if (memberInfo) {
37-
setImgUrl(memberInfo.photoURL)
27+
if (props.memberInfo) {
28+
setImgUrl(props.memberInfo.photoURL)
3829
}
3930
/* eslint-disable react-hooks/exhaustive-deps */
40-
}, [memberInfo])
31+
}, [props.memberInfo])
4132

4233
const [isPhotoEditMode, setIsPhotoEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
4334
= useState<boolean>(false)
@@ -51,16 +42,20 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
5142
async function handleRemovePhoto(): Promise<void> {
5243
setIsSaving(true)
5344
try {
54-
await updateMemberPhotoUrl('')
45+
await props.updateMemberPhotoUrl('')
5546
} catch (error) {
5647
}
5748

5849
setIsSaving(false)
5950
}
6051

52+
function showEditPhoto(): void {
53+
setIsPhotoEditMode(true)
54+
}
55+
6156
return (
6257
<div
63-
className={classNames(styles.container, className, 'd-flex flex-column gap-20 align-items-start')}
58+
className={classNames(styles.container, props.className, 'd-flex flex-column gap-20 align-items-start')}
6459
>
6560
<h3>Photo</h3>
6661
<div className='d-flex gap-30'>
@@ -90,8 +85,8 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
9085
secondary
9186
iconToLeft
9287
icon={IconOutline.UploadIcon}
93-
disabled={!memberInfo || isSaving}
94-
onClick={() => setIsPhotoEditMode(true)}
88+
disabled={!props.memberInfo || isSaving}
89+
onClick={showEditPhoto}
9590
className='mt-16'
9691
>
9792
change
@@ -101,11 +96,8 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
10196
secondary
10297
iconToLeft
10398
icon={IconOutline.TrashIcon}
104-
disabled={!memberInfo || isSaving}
105-
onClick={() => {
106-
handleRemovePhoto()
107-
.then(_.noop)
108-
}}
99+
disabled={!props.memberInfo || isSaving}
100+
onClick={handleRemovePhoto}
109101
className='mt-16'
110102
>
111103
delete
@@ -117,8 +109,8 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
117109
secondary
118110
iconToLeft
119111
icon={IconOutline.UploadIcon}
120-
disabled={!memberInfo}
121-
onClick={() => setIsPhotoEditMode(true)}
112+
disabled={!props.memberInfo}
113+
onClick={showEditPhoto}
122114
className='mt-16'
123115
>
124116
add image
@@ -128,11 +120,11 @@ const FieldAvatar: FC<FieldAvatarProps> = ({
128120
</div>
129121

130122
{
131-
isPhotoEditMode && memberInfo && (
123+
isPhotoEditMode && props.memberInfo && (
132124
<ModalUploadPhoto
133125
onClose={handleModifyPhotoModalClose}
134-
memberInfo={memberInfo}
135-
setMemberPhotoUrl={setMemberPhotoUrl}
126+
memberInfo={props.memberInfo}
127+
setMemberPhotoUrl={props.setMemberPhotoUrl}
136128
/>
137129
)
138130
}

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/* eslint-disable ordered-imports/ordered-imports */
2-
/* eslint-disable react/jsx-no-bind */
3-
/* eslint-disable react/destructuring-assignment */
4-
/* eslint-disable unicorn/no-null */
51
/**
62
* FormField
73
*
@@ -21,13 +17,15 @@ interface FormFieldProps {
2117
error?: string
2218
}
2319

24-
const FormField: FC<FormFieldProps> = ({
25-
children,
26-
className,
27-
label,
28-
...props
29-
}: FormFieldProps) => {
30-
const handleClick: any = (e: any) => {
20+
const FormField: FC<FormFieldProps> = (componentProps: FormFieldProps) => {
21+
const {
22+
children,
23+
className,
24+
label,
25+
...props
26+
}: FormFieldProps = componentProps
27+
28+
function handleClick(e: any): void {
3129
// focus on input label click
3230
const inputElement: any = e.target.closest('.form-field')
3331
.querySelector('input')
@@ -45,7 +43,7 @@ const FormField: FC<FormFieldProps> = ({
4543
{children}
4644
</div>
4745
<div className={classNames(styles.error, 'd-flex align-items-center')}>
48-
{props.error ? (<IconSolid.ExclamationIcon width={12} height={12} />) : null}
46+
{props.error ? (<IconSolid.ExclamationIcon width={12} height={12} />) : undefined}
4947
{props.error}
5048
</div>
5149
</div>

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
/* eslint-disable ordered-imports/ordered-imports */
2-
/* eslint-disable react/jsx-no-bind */
3-
/* eslint-disable react/destructuring-assignment */
4-
/* eslint-disable unicorn/no-null */
51
/**
62
* InputTextAutoSave
73
*
84
* A Form Field Is a wrapper for input to add the label to it
95
*/
10-
import React, { FC, useEffect, useState } from 'react'
6+
import { FC, FocusEvent, useEffect, useState } from 'react'
7+
118
import { InputText, InputValue } from '~/libs/ui'
129
import { InputTextTypes } from '~/libs/ui/lib/components/form/form-groups/form-input/input-text/InputText'
1310

@@ -40,10 +37,12 @@ const InputTextAutoSave: FC<InputTextProps> = (props: InputTextProps) => {
4037
<InputText
4138
{...props}
4239
value={value}
43-
onChange={event => {
40+
onChange={function onChange(event: FocusEvent<HTMLInputElement>) {
4441
setValue(event.target.value)
4542
}}
46-
onBlur={() => props.onChange(`${value}`)}
43+
onBlur={function onBlur() {
44+
props.onChange(`${value}`)
45+
}}
4746
/>
4847
)
4948
}

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
/* eslint-disable ordered-imports/ordered-imports */
2-
/* eslint-disable react/jsx-no-bind */
3-
/* eslint-disable react/destructuring-assignment */
4-
/* eslint-disable unicorn/no-null */
51
/**
62
* InputTextareaAutoSave
73
*
84
* A Form Field Is a wrapper for input to add the label to it
95
*/
10-
import React, { FC, useEffect, useState } from 'react'
6+
import { FC, FocusEvent, useEffect, useState } from 'react'
7+
118
import { InputTextarea } from '~/libs/ui'
129

1310
export interface InputTextareaProps {
@@ -35,10 +32,12 @@ const InputTextareaAutoSave: FC<InputTextareaProps> = (props: InputTextareaProps
3532
<InputTextarea
3633
{...props}
3734
value={value}
38-
onChange={event => {
35+
onChange={function onChange(event: FocusEvent<HTMLTextAreaElement>) {
3936
setValue(event.target.value)
4037
}}
41-
onBlur={() => props.onChange(`${value}`)}
38+
onBlur={function onBlur() {
39+
props.onChange(`${value}`)
40+
}}
4241
/>
4342
)
4443
}

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
/* eslint-disable ordered-imports/ordered-imports */
2-
/* eslint-disable react/jsx-no-bind */
31
import React, { FC } from 'react'
42
import classNames from 'classnames'
53

4+
import { IconOutline } from '~/libs/ui'
5+
66
import styles from './styles.module.scss'
7-
import IconEdit from '../../assets/images/edit.svg'
8-
import IconTrash from '../../assets/images/trash.svg'
97

108
interface CardItemProps {
119
title: string
@@ -30,7 +28,7 @@ export const CardItem: FC<CardItemProps> = (props: CardItemProps) => (
3028
disabled={props.disabled}
3129
className={styles.btn}
3230
>
33-
<img src={IconEdit} alt='' />
31+
<IconOutline.PencilIcon width={24} height={24} />
3432
</button>
3533
<button
3634
aria-label='delete'
@@ -39,7 +37,7 @@ export const CardItem: FC<CardItemProps> = (props: CardItemProps) => (
3937
disabled={props.disabled}
4038
className={styles.btn}
4139
>
42-
<img src={IconTrash} alt='' />
40+
<IconOutline.TrashIcon width={24} height={24} />
4341
</button>
4442
</div>
4543
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434

3535
.btn {
3636
flex-shrink: 0;
37+
color: $turq-160;
3738

3839
&:disabled {
3940
opacity: 0.2;

0 commit comments

Comments
 (0)