MP-29 skills picker

Author: kkartunov

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss

@@ -7,11 +7,11 @@
     height: 100%;
 
     .profileHeaderWrap {
-        background: url('../../lib/assets/profile-header-bg.png') no-repeat right center / auto, linear-gradient(#0d83c5, #0e89d5);
+        background: url('../../lib/assets/profile-header-bg.png') no-repeat right top / auto, linear-gradient(#0d83c5, #0e89d5);
 
         .profileHeaderContent {
             padding: 0;
-            max-height: 200px;
+            max-height: 260px;
             overflow: visible;
 
             @include ltelg {
@@ -57,7 +57,7 @@
             .profileInfoRight {
                 display: flex;
                 flex-direction: column;
-                margin-top: -215px;
+                margin-top: -275px;
 
                 @include ltelg {
                     margin-top: 0;

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -80,7 +80,11 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
 
                         <div className={styles.sectionWrap}>
                             <div className={styles.skillsWrap}>
-                                <MemberSkillsInfo profile={props.profile} authProfile={props.authProfile} />
+                                <MemberSkillsInfo
+                                    profile={props.profile}
+                                    authProfile={props.authProfile}
+                                    refreshProfile={props.refreshProfile}
+                                />
                             </div>
                         </div>
 

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss

@@ -9,7 +9,7 @@
 
     .photoWrap {
         position: relative;
-        margin-right: $sp-13;
+        margin-right: 60px;
 
         .verifiedBadge {
             position: absolute;

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx

@@ -14,6 +14,7 @@ import styles from './MemberSkillsInfo.module.scss'
 interface MemberSkillsInfoProps {
     profile: UserProfile
     authProfile: UserProfile | undefined
+    refreshProfile: (handle: string) => void
 }
 
 const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProps) => {
@@ -47,6 +48,13 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setIsEditMode(false)
     }
 
+    function handleModyfSkillsSave(): void {
+        setTimeout(() => {
+            setIsEditMode(false)
+            props.refreshProfile(props.profile.handle)
+        }, 1500)
+    }
+
     return memberEMSISkills ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
@@ -98,8 +106,8 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             {
                 isEditMode && (
                     <ModifySkillsModal
-                        // profile={props.profile}
                         onClose={handleModyfSkillsModalClose}
+                        onSave={handleModyfSkillsSave}
                     />
                 )
             }

src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss

@@ -3,10 +3,29 @@
 .container {
     display: flex;
     flex-direction: column;
+
+    :global(.body-main-bold) {
+        font-size: 20px;
+        margin-bottom: $sp-2;
+    }
+
+    .skillPicker {
+        margin-top: $sp-4;
+    }
 }
 
 .modalButtons {
     display: flex;
     justify-content: space-between;
     width: 100%;
 }
+
+.skillsModal {
+    @include gtemd {
+        overflow: visible !important;
+    }
+}
+
+.skillsModalBody {
+    overflow: visible !important;
+}

src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx

@@ -1,25 +1,42 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { toast } from 'react-toastify'
 
-// import { UserProfile } from '~/libs/core'
 import { BaseModal, Button } from '~/libs/ui'
+import { MemberSkillEditor, useMemberSkillEditor } from '~/libs/shared'
 
 import styles from './ModifySkillsModal.module.scss'
 
 interface ModifySkillsModalProps {
-    // profile: UserProfile
     onClose: () => void
+    onSave: () => void
 }
 
 const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalProps) => {
     const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
+    const { formInput: emsiFormInput, saveSkills: saveEmsiSkills }: MemberSkillEditor = useMemberSkillEditor()
+
     function handleModifySkillsSave(): void {
         setIsSaving(true)
+
+        saveEmsiSkills()
+            .then(() => {
+                toast.success('Skills updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
+                props.onSave()
+            })
+            .catch(() => {
+                toast.error('Failed to update your skills.', { position: toast.POSITION.BOTTOM_RIGHT })
+                setIsSaving(false)
+            })
     }
 
     return (
         <BaseModal
+            bodyClassName={styles.skillsModalBody}
+            classNames={{
+                modal: styles.skillsModal,
+            }}
             onClose={props.onClose}
             open
             size='lg'
@@ -39,7 +56,17 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
                     />
                 </div>
             )}
-        />
+        >
+            <div className={styles.container}>
+                <p className='body-main-bold'>What are your skills?</p>
+                <p>
+                    Understanding your skills will allow us to connect you to the right opportunities.
+                </p>
+                <div className={styles.skillPicker}>
+                    {emsiFormInput}
+                </div>
+            </div>
+        </BaseModal>
     )
 }