From 520eab172dc30d05798607e03eb22a3cdacb1540 Mon Sep 17 00:00:00 2001 From: dat Date: Wed, 12 Jul 2023 14:20:21 +0700 Subject: [PATCH] onboarding issues fix --- package.json | 1 - .../src/components/DateInput/index.tsx | 12 +--- .../components/modal-add-education/index.tsx | 33 +++++------ .../src/components/modal-add-work/index.tsx | 55 ++++++------------- .../onboarding-base-modal/index.tsx | 1 + .../onboarding-base-modal/styles.module.scss | 12 ++++ src/apps/onboarding/src/models/WorkInfo.ts | 3 +- .../onboarding/src/pages/educations/index.tsx | 23 +++++++- .../src/pages/onboarding/styles.module.scss | 12 ++++ .../src/pages/personalization/index.tsx | 2 +- src/apps/onboarding/src/pages/works/index.tsx | 30 ++++++++-- .../onboarding/src/redux/actions/member.ts | 51 ++++------------- .../onboarding/src/redux/reducers/member.ts | 21 +++---- src/apps/onboarding/src/utils/date.ts | 1 + 14 files changed, 129 insertions(+), 128 deletions(-) create mode 100644 src/apps/onboarding/src/utils/date.ts diff --git a/package.json b/package.json index e1ffe6a62..925fae1b7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/apps/onboarding/src/components/DateInput/index.tsx b/src/apps/onboarding/src/components/DateInput/index.tsx index df6a40251..5f72f98da 100644 --- a/src/apps/onboarding/src/components/DateInput/index.tsx +++ b/src/apps/onboarding/src/components/DateInput/index.tsx @@ -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' @@ -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 = (props: CalendarContainerProps) => { - const el: any = document.getElementById('calendar-portal') - - return {props.children} -} - interface DateInputProps { style2?: boolean className?: string @@ -78,7 +68,7 @@ const DateInput: FC = (props: DateInputProps) => { .toDate() } disabled={props.disabled} - popperContainer={CalendarContainer} + portalId='root' />
= (props: ModalAddEducationP const [educationInfo, setEducationInfo] = useState(emptyEducationInfo()) const [formErrors, setFormErrors] = useState({ collegeName: undefined, + endDate: undefined, major: undefined, startDate: undefined, }) @@ -45,10 +46,16 @@ const ModalAddEducation: FC = (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) } @@ -75,22 +82,7 @@ const ModalAddEducation: FC = (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?.() } }} @@ -142,7 +134,7 @@ const ModalAddEducation: FC = (props: ModalAddEducationP className='flex-1' > = (props: ModalAddEducationP className='flex-1' > = (props: ModalAddWorkProps) => { const [workInfo, setWorkInfo] = useState(emptyWorkInfo()) const [formErrors, setFormErrors] = useState({ company: undefined, + endDate: undefined, position: undefined, startDate: undefined, }) @@ -55,10 +56,16 @@ const ModalAddWork: FC = (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) } @@ -85,25 +92,7 @@ const ModalAddWork: FC = (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?.() } }} @@ -152,6 +141,7 @@ const ModalAddWork: FC = (props: ModalAddWorkProps) => {
= (props: ModalAddWorkProps) => { name='industry' label='Industry' placeholder='Select industry' - /> -
-
-
@@ -186,7 +161,7 @@ const ModalAddWork: FC = (props: ModalAddWorkProps) => { className='flex-1' > = (props: ModalAddWorkProps) => { className='flex-1' > = (props: ModalAddWorkProps) => { setWorkInfo({ ...workInfo, currentlyWorking: e.target.checked, + endDate: e.target.checked ? undefined : workInfo.endDate, }) }} /> diff --git a/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx b/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx index 642a908a2..bcf348388 100644 --- a/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx +++ b/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx @@ -20,6 +20,7 @@ const OnboardingBaseModal: FC = (props: OnboardingBase size='body' title={props.title} classNames={{ modal: styles.infoModal }} + blockScroll > {props.children} diff --git a/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss b/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss index 4582fba49..c4de60431 100644 --- a/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss +++ b/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss @@ -19,6 +19,18 @@ } } + :global(.input-wrapper) { + textarea, + input { + color: $black-100; + } + } + :global(.body-small) { + &:first-child { + color: $black-100; + } + } + hr { margin-top: 30px; diff --git a/src/apps/onboarding/src/models/WorkInfo.ts b/src/apps/onboarding/src/models/WorkInfo.ts index 87669e989..12c4193f7 100644 --- a/src/apps/onboarding/src/models/WorkInfo.ts +++ b/src/apps/onboarding/src/models/WorkInfo.ts @@ -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: '', diff --git a/src/apps/onboarding/src/pages/educations/index.tsx b/src/apps/onboarding/src/pages/educations/index.tsx index 06ecd26ed..b2ced3435 100644 --- a/src/apps/onboarding/src/pages/educations/index.tsx +++ b/src/apps/onboarding/src/pages/educations/index.tsx @@ -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' @@ -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 (

Education

@@ -67,12 +84,12 @@ export const PageEducationsContent: FC<{ Relevant education details will help make your profile more valuable to potential employers. - {(educations || []).length > 0 ? ( + {displayEducations.length > 0 ? (
- {(educations || []).map(education => ( + {displayEducations.map(education => ( - next + done
diff --git a/src/apps/onboarding/src/pages/works/index.tsx b/src/apps/onboarding/src/pages/works/index.tsx index 59b977bc1..cebb2f64c 100644 --- a/src/apps/onboarding/src/pages/works/index.tsx +++ b/src/apps/onboarding/src/pages/works/index.tsx @@ -1,8 +1,9 @@ -import { FC, useEffect, useState } from 'react' +import { FC, useEffect, useMemo, useState } from 'react' import { connect } from 'react-redux' import { useNavigate } from 'react-router-dom' import _ from 'lodash' import classNames from 'classnames' +import moment from 'moment' import { Button, IconOutline, PageDivider } from '~/libs/ui' @@ -55,6 +56,27 @@ export const PageWorksContent: FC<{ /* eslint-disable react-hooks/exhaustive-deps */ }, [works]) + const displayWorks = useMemo(() => (works || []).map(workItem => { + const startDate: Date | undefined = workItem.startDate + const endDate: Date | undefined = workItem.endDate + let endDateString: string = endDate ? moment(endDate) + .format('YYYY') : '' + if (workItem.currentlyWorking) { + endDateString = 'current' + } + + const startDateString: string = startDate ? moment(startDate) + .format('YYYY') : '' + return { + ...workItem, + dateDescription: [ + ...(startDateString ? [startDateString] : []), + ...(endDateString ? [endDateString] : []), + ].join('-'), + description: workItem.company, + } + }), [works]) + return (

Show us what you have done!

@@ -68,16 +90,16 @@ export const PageWorksContent: FC<{ Add details for career experiences that demonstrate your abilities. - {(works || []).length > 0 ? ( + {displayWorks.length > 0 ? (
- {(works || []).map(work => ( + {displayWorks.map(work => ( ({ }) export const updateWorks: any = (works: WorkInfo[]) => ({ - payload: works, + payload: [...works], type: ACTIONS.MEMBER.SET_WORKS, }) export const updateEducations: any = (educations: EducationInfo[]) => ({ - payload: educations, + payload: [...educations], type: ACTIONS.MEMBER.SET_EDUCATIONS, }) export const updatePersonalization: any = (personalization: PersonalizationInfo) => ({ - payload: personalization, + payload: { + ...personalization, + }, type: ACTIONS.MEMBER.SET_PERSONALIZATION, }) export const updateConnectInfo: any = (connectInfo: ConnectInfo) => ({ - payload: connectInfo, + payload: { + ...connectInfo, + }, type: ACTIONS.MEMBER.SET_CONNECT_INFO, }) export const updateAddress: any = (address: MemberAddress) => ({ - payload: address, + payload: { + ...address, + }, type: ACTIONS.MEMBER.SET_ADDRESS, }) @@ -92,7 +98,6 @@ export const fetchMemberInfo: any = () => async (dispatch: any) => { } } -const dateTimeToDate: any = (s: string) => (s ? new Date(s) : undefined) export const fetchMemberTraits: any = () => async (dispatch: any) => { const tokenInfo: TokenModel = await getAsyncToken() let memberTraits: any = [] @@ -111,26 +116,9 @@ export const fetchMemberTraits: any = () => async (dispatch: any) => { const works: WorkInfo[] = workExpValue.map((j: any, index: number) => { const startDate: Date | undefined = dateTimeToDate(j.timePeriodFrom) const endDate: Date | undefined = dateTimeToDate(j.timePeriodTo) - let endDateString: string = endDate ? moment(endDate) - .format('YYYY') : '' - if (j.working) { - endDateString = 'current' - } - - let startDateString: string = startDate ? moment(startDate) - .format('YYYY') : '' - if (startDateString) { - startDateString += '-' - } - - const dateDescription: string = ( - startDate || endDate - ) ? `${startDateString}${endDateString}` : '' return ({ - city: j.cityTown, company: j.company, currentlyWorking: j.working, - dateDescription, endDate, id: index + 1, industry: j.industry, @@ -150,21 +138,8 @@ export const fetchMemberTraits: any = () => async (dispatch: any) => { const educations: EducationInfo[] = educationExpValue.map((e: any, index: number) => { const startDate: Date | undefined = dateTimeToDate(e.timePeriodFrom) const endDate: Date | undefined = dateTimeToDate(e.timePeriodTo) - const endDateString: string = endDate ? moment(endDate) - .format('YYYY') : '' - - let startDateString: string = startDate ? moment(startDate) - .format('YYYY') : '' - if (startDateString && endDateString) { - startDateString += '-' - } - - const dateDescription: string = ( - startDate || endDate - ) ? `${startDateString}${endDateString}` : '' return ({ collegeName: e.schoolCollegeName, - dateDescription, endDate, id: index + 1, major: e.major, @@ -209,13 +184,11 @@ const createWorksPayloadData: any = (works: WorkInfo[]) => { company, position, industry, - city, startDate, endDate, currentlyWorking, }: any = work return { - cityTown: city, company, industry, position, diff --git a/src/apps/onboarding/src/redux/reducers/member.ts b/src/apps/onboarding/src/redux/reducers/member.ts index 9d5ccfb52..8a2799054 100644 --- a/src/apps/onboarding/src/redux/reducers/member.ts +++ b/src/apps/onboarding/src/redux/reducers/member.ts @@ -1,14 +1,15 @@ -import { Member } from '~/apps/talent-search/src/lib/models' +import _ from 'lodash' import { ACTIONS } from '../../config' import ConnectInfo from '../../models/ConnectInfo' import EducationInfo from '../../models/EducationInfo' import MemberAddress from '../../models/MemberAddress' +import MemberInfo from '../../models/MemberInfo' import PersonalizationInfo from '../../models/PersonalizationInfo' import WorkInfo from '../../models/WorkInfo' const initialState: { - memberInfo?: Member + memberInfo?: MemberInfo works?: WorkInfo[] educations?: EducationInfo[] personalization?: PersonalizationInfo @@ -72,12 +73,12 @@ const memberReducer: any = ( return state } + const newMemberInfo = _.cloneDeep(state.memberInfo) + newMemberInfo.description = action.payload + return { ...state, - memberInfo: { - ...state.memberInfo, - description: action.payload, - }, + memberInfo: newMemberInfo, } } @@ -86,12 +87,12 @@ const memberReducer: any = ( return state } + const newMemberInfo = _.cloneDeep(state.memberInfo) + newMemberInfo.photoURL = action.payload + return { ...state, - memberInfo: { - ...state.memberInfo, - photoURL: action.payload, - }, + memberInfo: newMemberInfo, } } diff --git a/src/apps/onboarding/src/utils/date.ts b/src/apps/onboarding/src/utils/date.ts new file mode 100644 index 000000000..5465a3805 --- /dev/null +++ b/src/apps/onboarding/src/utils/date.ts @@ -0,0 +1 @@ +export const dateTimeToDate: (s: string) => Date | undefined = (s: string) => (s ? new Date(s) : undefined)