From 8221660ca42090423a270b50f7c559118f885877 Mon Sep 17 00:00:00 2001 From: dat Date: Tue, 27 Jun 2023 15:40:08 +0700 Subject: [PATCH] The entered data is not saved if the user clicks Back button in any step --- .../src/components/skill-tag/index.tsx | 8 +++- .../components/skill-tag/styles.module.scss | 4 ++ .../onboarding/src/pages/educations/index.tsx | 37 ++++++++++------ .../src/pages/educations/styles.module.scss | 4 ++ .../onboarding/src/pages/skills/index.tsx | 26 ++++++++---- src/apps/onboarding/src/pages/works/index.tsx | 42 ++++++++++++------- .../src/pages/works/styles.module.scss | 6 ++- 7 files changed, 88 insertions(+), 39 deletions(-) diff --git a/src/apps/onboarding/src/components/skill-tag/index.tsx b/src/apps/onboarding/src/components/skill-tag/index.tsx index b31b377f8..4b24d1934 100644 --- a/src/apps/onboarding/src/components/skill-tag/index.tsx +++ b/src/apps/onboarding/src/components/skill-tag/index.tsx @@ -12,12 +12,18 @@ import styles from './styles.module.scss' interface SkillTagProps { skill: Skill onDelete?: () => void + disabled?: boolean } const SkillTag: FC = (props: SkillTagProps) => (
{props.skill.name} -
diff --git a/src/apps/onboarding/src/components/skill-tag/styles.module.scss b/src/apps/onboarding/src/components/skill-tag/styles.module.scss index eabe14698..7f91068f5 100644 --- a/src/apps/onboarding/src/components/skill-tag/styles.module.scss +++ b/src/apps/onboarding/src/components/skill-tag/styles.module.scss @@ -16,4 +16,8 @@ flex-shrink: 0; width: 15px; height: 15px; + + &:disabled { + opacity: 0.2; + } } \ No newline at end of file diff --git a/src/apps/onboarding/src/pages/educations/index.tsx b/src/apps/onboarding/src/pages/educations/index.tsx index 09cbaacf7..872119d00 100644 --- a/src/apps/onboarding/src/pages/educations/index.tsx +++ b/src/apps/onboarding/src/pages/educations/index.tsx @@ -39,6 +39,25 @@ export const PageEducationsContent: FC<{ /* eslint-disable react-hooks/exhaustive-deps */ }, [props.reduxEducations]) + useEffect(() => { + const saveData: any = async () => { + setLoading(true) + if (!props.reduxEducations) { + await props.createMemberEducations(educations || []) + } else { + await props.updateMemberEducations(educations || []) + } + + setLoading(false) + } + + if (!!educations && !_.isEqual(props.reduxEducations, educations)) { + saveData() + .then(_.noop) + } + /* eslint-disable react-hooks/exhaustive-deps */ + }, [educations]) + return (

Add your education information

@@ -57,6 +76,8 @@ export const PageEducationsContent: FC<{ setEditingEducation(education) setShowAddEducationModal(true) }} + disabled={loading} + className={styles.btn} > @@ -64,6 +85,8 @@ export const PageEducationsContent: FC<{ aria-label='edit' type='button' onClick={() => setEducations(_.filter(educations, w => w.id !== education.id))} + disabled={loading} + className={styles.btn} > @@ -111,19 +134,7 @@ export const PageEducationsContent: FC<{ size='lg' primary iconToLeft - disabled={loading || props.loadingMemberTraits} - onClick={async () => { - setLoading(true) - if (!_.isEqual(props.reduxEducations, educations)) { - if (!props.reduxEducations) { - await props.createMemberEducations(educations || []) - } else { - await props.updateMemberEducations(educations || []) - } - } - - setLoading(false) - }} + disabled={loading} > next diff --git a/src/apps/onboarding/src/pages/educations/styles.module.scss b/src/apps/onboarding/src/pages/educations/styles.module.scss index 70463203a..2389438b5 100644 --- a/src/apps/onboarding/src/pages/educations/styles.module.scss +++ b/src/apps/onboarding/src/pages/educations/styles.module.scss @@ -10,3 +10,7 @@ margin-top: auto; margin-bottom: 32px; } + +.btn:disabled { + opacity: 0.2; +} diff --git a/src/apps/onboarding/src/pages/skills/index.tsx b/src/apps/onboarding/src/pages/skills/index.tsx index 6f1372ac2..429b4e44a 100644 --- a/src/apps/onboarding/src/pages/skills/index.tsx +++ b/src/apps/onboarding/src/pages/skills/index.tsx @@ -33,6 +33,20 @@ const PageSkillsContent: FC<{ /* eslint-disable react-hooks/exhaustive-deps */ }, [props.memberInfo]) + useEffect(() => { + const saveData: any = async () => { + setLoading(true) + await props.updateMemberSkills([...(skillsFilter || [])]) + setLoading(false) + } + + if (!!skillsFilter && !_.isEqual(props.memberInfo?.emsiSkills, skillsFilter)) { + saveData() + .then(_.noop) + } + /* eslint-disable react-hooks/exhaustive-deps */ + }, [skillsFilter]) + return (

What skills do you have?

@@ -58,6 +72,7 @@ const PageSkillsContent: FC<{ { setSkillsFilter( _.filter(skillsFilter, skill => skill.name !== skillItem.name), @@ -121,6 +136,7 @@ const PageSkillsContent: FC<{ size='lg' primary iconToLeft + disabled={loading} onClick={() => navigate('../start')} > back @@ -130,15 +146,7 @@ const PageSkillsContent: FC<{ primary iconToLeft disabled={loading} - onClick={async () => { - setLoading(true) - if (!_.isEqual(props.memberInfo?.emsiSkills, skillsFilter)) { - await props.updateMemberSkills([...(skillsFilter || [])]) - } - - setLoading(false) - navigate('../works') - }} + onClick={() => navigate('../works')} > next diff --git a/src/apps/onboarding/src/pages/works/index.tsx b/src/apps/onboarding/src/pages/works/index.tsx index de933170a..9348be2e2 100644 --- a/src/apps/onboarding/src/pages/works/index.tsx +++ b/src/apps/onboarding/src/pages/works/index.tsx @@ -39,6 +39,25 @@ export const PageWorksContent: FC<{ /* eslint-disable react-hooks/exhaustive-deps */ }, [props.reduxWorks]) + useEffect(() => { + const saveData: any = async () => { + setLoading(true) + if (!props.reduxWorks) { + await props.createMemberWorks(works || []) + } else { + await props.updateMemberWorks(works || []) + } + + setLoading(false) + } + + if (!!works && !_.isEqual(props.reduxWorks, works)) { + saveData() + .then(_.noop) + } + /* eslint-disable react-hooks/exhaustive-deps */ + }, [works]) + return (

Add your work experience here

@@ -58,6 +77,8 @@ export const PageWorksContent: FC<{ setEditingWork(work) setShowAddWorkModal(true) }} + disabled={loading} + className={styles.btn} > @@ -65,6 +86,8 @@ export const PageWorksContent: FC<{ aria-label='delete' type='button' onClick={() => setWorks(_.filter(works, w => w.id !== work.id))} + disabled={loading} + className={styles.btn} > @@ -89,7 +112,7 @@ export const PageWorksContent: FC<{ secondary iconToLeft onClick={() => setShowAddWorkModal(true)} - disabled={props.loadingMemberTraits} + disabled={props.loadingMemberTraits || loading} > + add work experience @@ -113,6 +136,7 @@ export const PageWorksContent: FC<{ size='lg' primary iconToLeft + disabled={loading} onClick={() => navigate('../skills')} > back @@ -121,20 +145,8 @@ export const PageWorksContent: FC<{ size='lg' primary iconToLeft - disabled={loading || props.loadingMemberTraits} - onClick={async () => { - setLoading(true) - if (!_.isEqual(props.reduxWorks, works)) { - if (!props.reduxWorks) { - await props.createMemberWorks(works || []) - } else { - await props.updateMemberWorks(works || []) - } - } - - setLoading(false) - navigate('../educations') - }} + disabled={loading} + onClick={() => navigate('../educations')} > next diff --git a/src/apps/onboarding/src/pages/works/styles.module.scss b/src/apps/onboarding/src/pages/works/styles.module.scss index ecb8d6941..7d4bb91c3 100644 --- a/src/apps/onboarding/src/pages/works/styles.module.scss +++ b/src/apps/onboarding/src/pages/works/styles.module.scss @@ -17,4 +17,8 @@ .textPosition { font-weight: 700; -} \ No newline at end of file +} + +.btn:disabled { + opacity: 0.2; +}