Skip to content

Commit e8e14cb

Browse files
jmgasperjmgasper
authored
Merge pull request #756 from topcoder-platform/onboarding-minor-fixes
2 parents 0f9f052 + 520eab1 commit e8e14cb

File tree

14 files changed

+129
-128
lines changed

14 files changed

+129
-128
lines changed

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@
8383
"react-helmet": "^6.1.0",
8484
"react-html-parser": "^2.0.2",
8585
"react-markdown": "8.0.6",
86-
"react-overlays": "^5.2.1",
8786
"react-redux": "^8.0.4",
8887
"react-redux-toastr": "^7.6.10",
8988
"react-responsive": "^9.0.0-beta.5",

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
*
44
* Date Input control.
55
*/
6-
import { Portal } from 'react-overlays'
76
import { createRef, FC, useState } from 'react'
87
import DatePicker from 'react-datepicker'
98
import cn from 'classnames'
@@ -16,15 +15,6 @@ import { ReactComponent as CalendarIcon } from '../../assets/images/calendar.svg
1615

1716
import styles from './styles.module.scss'
1817

19-
interface CalendarContainerProps {
20-
children?: any
21-
}
22-
const CalendarContainer: FC<CalendarContainerProps> = (props: CalendarContainerProps) => {
23-
const el: any = document.getElementById('calendar-portal')
24-
25-
return <Portal container={el}>{props.children}</Portal>
26-
}
27-
2818
interface DateInputProps {
2919
style2?: boolean
3020
className?: string
@@ -78,7 +68,7 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
7868
.toDate()
7969
}
8070
disabled={props.disabled}
81-
popperContainer={CalendarContainer}
71+
portalId='root'
8272
/>
8373
<div
8474
className={cn(

‎src/apps/onboarding/src/components/modal-add-education/index.tsx

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
2323
const [educationInfo, setEducationInfo] = useState(emptyEducationInfo())
2424
const [formErrors, setFormErrors] = useState<any>({
2525
collegeName: undefined,
26+
endDate: undefined,
2627
major: undefined,
2728
startDate: undefined,
2829
})
@@ -45,10 +46,16 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
4546
errorTmp.major = 'Required'
4647
}
4748

48-
if (!validateDate(educationInfo.startDate, educationInfo.endDate)) {
49+
if (!educationInfo.startDate) {
50+
errorTmp.startDate = 'Required'
51+
} else if (!validateDate(educationInfo.startDate, educationInfo.endDate)) {
4952
errorTmp.startDate = 'Start Date should be before End Date'
5053
}
5154

55+
if (!educationInfo.endDate) {
56+
errorTmp.endDate = 'Required'
57+
}
58+
5259
setFormErrors(errorTmp)
5360
return _.isEmpty(errorTmp)
5461
}
@@ -75,22 +82,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
7582
label='save'
7683
onClick={function onClick() {
7784
if (validateField()) {
78-
const endDate: Date | undefined = educationInfo.endDate
79-
const endDateString: string = endDate ? moment(endDate)
80-
.format('YYYY') : ''
81-
82-
let startDateString: string = educationInfo.startDate ? moment(educationInfo.startDate)
83-
.format('YYYY') : ''
84-
if (startDateString && endDateString) {
85-
startDateString += '-'
86-
}
87-
88-
(props.editingEducation ? props.onEdit : props.onAdd)?.({
89-
...educationInfo,
90-
dateDescription: (
91-
educationInfo.startDate || educationInfo.endDate
92-
) ? `${startDateString}${endDateString}` : '',
93-
})
85+
(props.editingEducation ? props.onEdit : props.onAdd)?.(educationInfo)
9486
props.onClose?.()
9587
}
9688
}}
@@ -142,7 +134,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
142134
className='flex-1'
143135
>
144136
<FormField
145-
label='Start Date'
137+
label='Start Date *'
146138
error={
147139
formErrors.startDate
148140
}
@@ -164,7 +156,10 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
164156
className='flex-1'
165157
>
166158
<FormField
167-
label='End Date or Expected'
159+
label='End Date or Expected *'
160+
error={
161+
formErrors.endDate
162+
}
168163
>
169164
<DateInput
170165
value={educationInfo.endDate}

‎src/apps/onboarding/src/components/modal-add-work/index.tsx

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
3333
const [workInfo, setWorkInfo] = useState(emptyWorkInfo())
3434
const [formErrors, setFormErrors] = useState<any>({
3535
company: undefined,
36+
endDate: undefined,
3637
position: undefined,
3738
startDate: undefined,
3839
})
@@ -55,10 +56,16 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
5556
errorTmp.position = 'Required'
5657
}
5758

58-
if (!validateDate(workInfo.startDate, workInfo.endDate)) {
59+
if (!workInfo.startDate) {
60+
errorTmp.startDate = 'Required'
61+
} else if (!validateDate(workInfo.startDate, workInfo.endDate)) {
5962
errorTmp.startDate = 'Start Date should be before End Date'
6063
}
6164

65+
if (!workInfo.endDate && !workInfo.currentlyWorking) {
66+
errorTmp.endDate = 'Required'
67+
}
68+
6269
setFormErrors(errorTmp)
6370
return _.isEmpty(errorTmp)
6471
}
@@ -85,25 +92,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
8592
label='save'
8693
onClick={function onClick() {
8794
if (validateField()) {
88-
const endDate: Date | undefined = workInfo.endDate
89-
let endDateString: string = endDate ? moment(endDate)
90-
.format('YYYY') : ''
91-
if (workInfo.currentlyWorking) {
92-
endDateString = 'current'
93-
}
94-
95-
let startDateString: string = workInfo.startDate ? moment(workInfo.startDate)
96-
.format('YYYY') : ''
97-
if (startDateString) {
98-
startDateString += '-'
99-
}
100-
101-
(props.editingWork ? props.onEdit : props.onAdd)?.({
102-
...workInfo,
103-
dateDescription: (
104-
workInfo.startDate || workInfo.endDate
105-
) ? `${startDateString}${endDateString}` : '',
106-
})
95+
(props.editingWork ? props.onEdit : props.onAdd)?.(workInfo)
10796
props.onClose?.()
10897
}
10998
}}
@@ -152,6 +141,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
152141
</div>
153142
<div className='full-width'>
154143
<InputSelect
144+
tabIndex={1}
155145
options={industryOptions}
156146
value={workInfo.industry}
157147
onChange={function onChange(event: any) {
@@ -163,30 +153,15 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
163153
name='industry'
164154
label='Industry'
165155
placeholder='Select industry'
166-
/>
167-
</div>
168-
<div className='full-width'>
169-
<InputText
170-
name='location'
171-
label='Location'
172-
value={workInfo.city}
173-
onChange={function onChange(event: any) {
174-
setWorkInfo({
175-
...workInfo,
176-
city: event.target.value,
177-
})
178-
}}
179-
placeholder='Enter city, country'
180-
tabIndex={0}
181-
type='text'
156+
dirty
182157
/>
183158
</div>
184159
<div className='d-flex gap-16 full-width'>
185160
<div
186161
className='flex-1'
187162
>
188163
<FormField
189-
label='Start Date'
164+
label='Start Date *'
190165
error={
191166
formErrors.startDate
192167
}
@@ -208,7 +183,10 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
208183
className='flex-1'
209184
>
210185
<FormField
211-
label='End Date'
186+
label={workInfo.currentlyWorking ? 'End Date' : 'End Date *'}
187+
error={
188+
formErrors.endDate
189+
}
212190
>
213191
<DateInput
214192
disabled={workInfo.currentlyWorking}
@@ -234,6 +212,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
234212
setWorkInfo({
235213
...workInfo,
236214
currentlyWorking: e.target.checked,
215+
endDate: e.target.checked ? undefined : workInfo.endDate,
237216
})
238217
}}
239218
/>

‎src/apps/onboarding/src/components/onboarding-base-modal/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const OnboardingBaseModal: FC<OnboardingBaseModalProps> = (props: OnboardingBase
2020
size='body'
2121
title={props.title}
2222
classNames={{ modal: styles.infoModal }}
23+
blockScroll
2324
>
2425
{props.children}
2526
</BaseModal>

‎src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,18 @@
1919
}
2020
}
2121

22+
:global(.input-wrapper) {
23+
textarea,
24+
input {
25+
color: $black-100;
26+
}
27+
}
28+
:global(.body-small) {
29+
&:first-child {
30+
color: $black-100;
31+
}
32+
}
33+
2234
hr {
2335
margin-top: 30px;
2436

‎src/apps/onboarding/src/models/WorkInfo.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ export default interface WorkInfo {
22
company?: string
33
position?: string
44
industry?: string
5-
city?: string
65
startDate?: Date
76
dateDescription?: string
7+
description?: string
88
endDate?: Date
99
currentlyWorking?: boolean
1010
id: number
1111
}
1212

1313
export const emptyWorkInfo: () => WorkInfo = () => ({
14-
city: '',
1514
company: '',
1615
currentlyWorking: false,
1716
dateDescription: '',

‎src/apps/onboarding/src/pages/educations/index.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { FC, useEffect, useState } from 'react'
1+
import { FC, useEffect, useMemo, useState } from 'react'
22
import { useNavigate } from 'react-router-dom'
33
import { connect } from 'react-redux'
44
import _ from 'lodash'
55
import classNames from 'classnames'
6+
import moment from 'moment'
67

78
import { Button, IconOutline, PageDivider } from '~/libs/ui'
89

@@ -55,6 +56,22 @@ export const PageEducationsContent: FC<{
5556
/* eslint-disable react-hooks/exhaustive-deps */
5657
}, [educations])
5758

59+
const displayEducations = useMemo(() => (educations || []).map(educationItem => {
60+
const startDate: Date | undefined = educationItem.startDate
61+
const endDate: Date | undefined = educationItem.endDate
62+
const endDateString: string = endDate ? moment(endDate)
63+
.format('YYYY') : ''
64+
const startDateString: string = startDate ? moment(startDate)
65+
.format('YYYY') : ''
66+
return {
67+
...educationItem,
68+
dateDescription: [
69+
...(startDateString ? [startDateString] : []),
70+
...(endDateString ? [endDateString] : []),
71+
].join('-'),
72+
}
73+
}), [educations])
74+
5875
return (
5976
<div className={classNames('d-flex flex-column', styles.container)}>
6077
<h2>Education</h2>
@@ -67,12 +84,12 @@ export const PageEducationsContent: FC<{
6784
Relevant education details will help make your profile more valuable to potential employers.
6885
</span>
6986

70-
{(educations || []).length > 0 ? (
87+
{displayEducations.length > 0 ? (
7188
<div
7289
className={'d-grid grid-2-column mobile-grid-1-column '
7390
+ ' gap-column-16 gap-row-8 mobile-gap-row-16 full-width mt-24 mobile-mt-8'}
7491
>
75-
{(educations || []).map(education => (
92+
{displayEducations.map(education => (
7693
<CardItem
7794
key={education.id}
7895
title={education.major || ''}

‎src/apps/onboarding/src/pages/onboarding/styles.module.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@
2828
}
2929
}
3030

31+
:global(.input-wrapper) {
32+
textarea,
33+
input {
34+
color: $black-100;
35+
}
36+
}
37+
:global(.body-small) {
38+
&:first-child {
39+
color: $black-100;
40+
}
41+
}
42+
3143
@include ltemd {
3244
padding: 48px 16px;
3345
}

‎src/apps/onboarding/src/pages/personalization/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const PagePersonalizationContent: FC<{
170170
)
171171
}}
172172
>
173-
next
173+
done
174174
</Button>
175175
</div>
176176
</div>

0 commit comments

Comments
 (0)