Skip to content

onboarding issues fix #756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 12, 2023
+129 −128
Merged

onboarding issues fix #756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"react-helmet": "^6.1.0",
"react-html-parser": "^2.0.2",
"react-markdown": "8.0.6",
"react-overlays": "^5.2.1",
"react-redux": "^8.0.4",
"react-redux-toastr": "^7.6.10",
"react-responsive": "^9.0.0-beta.5",
Expand Down
12 changes: 1 addition & 11 deletions src/apps/onboarding/src/components/DateInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*
* Date Input control.
*/
import { Portal } from 'react-overlays'
import { createRef, FC, useState } from 'react'
import DatePicker from 'react-datepicker'
import cn from 'classnames'
Expand All @@ -16,15 +15,6 @@ import { ReactComponent as CalendarIcon } from '../../assets/images/calendar.svg

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

interface CalendarContainerProps {
children?: any
}
const CalendarContainer: FC<CalendarContainerProps> = (props: CalendarContainerProps) => {
const el: any = document.getElementById('calendar-portal')

return <Portal container={el}>{props.children}</Portal>
}

interface DateInputProps {
style2?: boolean
className?: string
Expand Down Expand Up @@ -78,7 +68,7 @@ const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
.toDate()
}
disabled={props.disabled}
popperContainer={CalendarContainer}
portalId='root'
/>
<div
className={cn(
Expand Down
33 changes: 14 additions & 19 deletions src/apps/onboarding/src/components/modal-add-education/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
const [educationInfo, setEducationInfo] = useState(emptyEducationInfo())
const [formErrors, setFormErrors] = useState<any>({
collegeName: undefined,
endDate: undefined,
major: undefined,
startDate: undefined,
})
Expand All @@ -45,10 +46,16 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
errorTmp.major = 'Required'
}

if (!validateDate(educationInfo.startDate, educationInfo.endDate)) {
if (!educationInfo.startDate) {
errorTmp.startDate = 'Required'
} else if (!validateDate(educationInfo.startDate, educationInfo.endDate)) {
errorTmp.startDate = 'Start Date should be before End Date'
}

if (!educationInfo.endDate) {
errorTmp.endDate = 'Required'
}

setFormErrors(errorTmp)
return _.isEmpty(errorTmp)
}
Expand All @@ -75,22 +82,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
label='save'
onClick={function onClick() {
if (validateField()) {
const endDate: Date | undefined = educationInfo.endDate
const endDateString: string = endDate ? moment(endDate)
.format('YYYY') : ''

let startDateString: string = educationInfo.startDate ? moment(educationInfo.startDate)
.format('YYYY') : ''
if (startDateString && endDateString) {
startDateString += '-'
}

(props.editingEducation ? props.onEdit : props.onAdd)?.({
...educationInfo,
dateDescription: (
educationInfo.startDate || educationInfo.endDate
) ? `${startDateString}${endDateString}` : '',
})
(props.editingEducation ? props.onEdit : props.onAdd)?.(educationInfo)
props.onClose?.()
}
}}
Expand Down Expand Up @@ -142,7 +134,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
className='flex-1'
>
<FormField
label='Start Date'
label='Start Date *'
error={
formErrors.startDate
}
Expand All @@ -164,7 +156,10 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
className='flex-1'
>
<FormField
label='End Date or Expected'
label='End Date or Expected *'
error={
formErrors.endDate
}
>
<DateInput
value={educationInfo.endDate}
Expand Down
55 changes: 17 additions & 38 deletions src/apps/onboarding/src/components/modal-add-work/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
const [workInfo, setWorkInfo] = useState(emptyWorkInfo())
const [formErrors, setFormErrors] = useState<any>({
company: undefined,
endDate: undefined,
position: undefined,
startDate: undefined,
})
Expand All @@ -55,10 +56,16 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
errorTmp.position = 'Required'
}

if (!validateDate(workInfo.startDate, workInfo.endDate)) {
if (!workInfo.startDate) {
errorTmp.startDate = 'Required'
} else if (!validateDate(workInfo.startDate, workInfo.endDate)) {
errorTmp.startDate = 'Start Date should be before End Date'
}

if (!workInfo.endDate && !workInfo.currentlyWorking) {
errorTmp.endDate = 'Required'
}

setFormErrors(errorTmp)
return _.isEmpty(errorTmp)
}
Expand All @@ -85,25 +92,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
label='save'
onClick={function onClick() {
if (validateField()) {
const endDate: Date | undefined = workInfo.endDate
let endDateString: string = endDate ? moment(endDate)
.format('YYYY') : ''
if (workInfo.currentlyWorking) {
endDateString = 'current'
}

let startDateString: string = workInfo.startDate ? moment(workInfo.startDate)
.format('YYYY') : ''
if (startDateString) {
startDateString += '-'
}

(props.editingWork ? props.onEdit : props.onAdd)?.({
...workInfo,
dateDescription: (
workInfo.startDate || workInfo.endDate
) ? `${startDateString}${endDateString}` : '',
})
(props.editingWork ? props.onEdit : props.onAdd)?.(workInfo)
props.onClose?.()
}
}}
Expand Down Expand Up @@ -152,6 +141,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
</div>
<div className='full-width'>
<InputSelect
tabIndex={1}
options={industryOptions}
value={workInfo.industry}
onChange={function onChange(event: any) {
Expand All @@ -163,30 +153,15 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
name='industry'
label='Industry'
placeholder='Select industry'
/>
</div>
<div className='full-width'>
<InputText
name='location'
label='Location'
value={workInfo.city}
onChange={function onChange(event: any) {
setWorkInfo({
...workInfo,
city: event.target.value,
})
}}
placeholder='Enter city, country'
tabIndex={0}
type='text'
dirty
/>
</div>
<div className='d-flex gap-16 full-width'>
<div
className='flex-1'
>
<FormField
label='Start Date'
label='Start Date *'
error={
formErrors.startDate
}
Expand All @@ -208,7 +183,10 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
className='flex-1'
>
<FormField
label='End Date'
label={workInfo.currentlyWorking ? 'End Date' : 'End Date *'}
error={
formErrors.endDate
}
>
<DateInput
disabled={workInfo.currentlyWorking}
Expand All @@ -234,6 +212,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
setWorkInfo({
...workInfo,
currentlyWorking: e.target.checked,
endDate: e.target.checked ? undefined : workInfo.endDate,
})
}}
/>
Expand Down
1 change: 1 addition & 0 deletions src/apps/onboarding/src/components/onboarding-base-modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const OnboardingBaseModal: FC<OnboardingBaseModalProps> = (props: OnboardingBase
size='body'
title={props.title}
classNames={{ modal: styles.infoModal }}
blockScroll
>
{props.children}
</BaseModal>
Expand Down
12 changes: 12 additions & 0 deletions src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,18 @@
}
}

:global(.input-wrapper) {
textarea,
input {
color: $black-100;
}
}
:global(.body-small) {
&:first-child {
color: $black-100;
}
}

hr {
margin-top: 30px;

Expand Down
3 changes: 1 addition & 2 deletions src/apps/onboarding/src/models/WorkInfo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,15 @@ export default interface WorkInfo {
company?: string
position?: string
industry?: string
city?: string
startDate?: Date
dateDescription?: string
description?: string
endDate?: Date
currentlyWorking?: boolean
id: number
}

export const emptyWorkInfo: () => WorkInfo = () => ({
city: '',
company: '',
currentlyWorking: false,
dateDescription: '',
Expand Down
23 changes: 20 additions & 3 deletions src/apps/onboarding/src/pages/educations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { FC, useEffect, useState } from 'react'
import { FC, useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { connect } from 'react-redux'
import _ from 'lodash'
import classNames from 'classnames'
import moment from 'moment'

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

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

const displayEducations = useMemo(() => (educations || []).map(educationItem => {
const startDate: Date | undefined = educationItem.startDate
const endDate: Date | undefined = educationItem.endDate
const endDateString: string = endDate ? moment(endDate)
.format('YYYY') : ''
const startDateString: string = startDate ? moment(startDate)
.format('YYYY') : ''
return {
...educationItem,
dateDescription: [
...(startDateString ? [startDateString] : []),
...(endDateString ? [endDateString] : []),
].join('-'),
}
}), [educations])

return (
<div className={classNames('d-flex flex-column', styles.container)}>
<h2>Education</h2>
Expand All @@ -67,12 +84,12 @@ export const PageEducationsContent: FC<{
Relevant education details will help make your profile more valuable to potential employers.
</span>

{(educations || []).length > 0 ? (
{displayEducations.length > 0 ? (
<div
className={'d-grid grid-2-column mobile-grid-1-column '
+ ' gap-column-16 gap-row-8 mobile-gap-row-16 full-width mt-24 mobile-mt-8'}
>
{(educations || []).map(education => (
{displayEducations.map(education => (
<CardItem
key={education.id}
title={education.major || ''}
Expand Down
12 changes: 12 additions & 0 deletions src/apps/onboarding/src/pages/onboarding/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,18 @@
}
}

:global(.input-wrapper) {
textarea,
input {
color: $black-100;
}
}
:global(.body-small) {
&:first-child {
color: $black-100;
}
}

@include ltemd {
padding: 48px 16px;
}
Expand Down
2 changes: 1 addition & 1 deletion src/apps/onboarding/src/pages/personalization/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ const PagePersonalizationContent: FC<{
)
}}
>
next
done
</Button>
</div>
</div>
Expand Down
Loading