Merge pull request #695 from topcoder-platform/profiles-app

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss

@@ -5,10 +5,6 @@
     flex-direction: column;
     margin-bottom: $sp-8;
 
-    @include ltelg {
-        padding: $sp-4;
-    }
-
     .title {
         display: flex;
         justify-content: space-between;

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss

@@ -9,4 +9,9 @@
         align-items: center;
         margin-bottom: $sp-4;
     }
+
+    .educationContentWrap {
+        display: flex;
+        flex-direction: column;
+    }
 }

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx

@@ -9,6 +9,7 @@ import { EditMemberPropertyBtn } from '../../components'
 import { MemberTCAInfo } from '../tca-info'
 
 import { ModifyEducationModal } from './ModifyEducationModal'
+import { EducationCard } from './EducationCard'
 import styles from './EducationAndCertifications.module.scss'
 
 interface EducationAndCertificationsProps {
@@ -31,7 +32,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     }
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education })
 
-    const education: UserTrait[] | undefined
+    const memberEducation: UserTrait[] | undefined
         = useMemo(() => memberEducationTraits?.[0]?.traits?.data, [memberEducationTraits])
 
     useEffect(() => {
@@ -50,7 +51,10 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     }
 
     function handleEditEducationModalSave(): void {
-        mutateTraits()
+        setTimeout(() => {
+            setIsEditMode(false)
+            mutateTraits()
+        }, 1000)
     }
 
     return (
@@ -66,16 +70,26 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                 }
             </div>
 
+            <div className={styles.educationContentWrap}>
+                {
+                    memberEducation?.map((education: UserTrait) => (
+                        <EducationCard
+                            key={`${education.schoolCollegeName}-${education.major}`}
+                            education={education}
+                        />
+                    ))
+                }
+            </div>
+
             <MemberTCAInfo profile={props.profile} />
 
             {
                 isEditMode && (
                     <ModifyEducationModal
-                        // profile={props.profile}
-                        // authProfile={props.authProfile}
+                        profile={props.profile}
                         onClose={handleEditEducationModalClose}
                         onSave={handleEditEducationModalSave}
-                        education={education}
+                        education={memberEducation}
                     />
                 )
             }

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss

@@ -0,0 +1,12 @@
+@import '@libs/ui/styles/includes';
+
+.educationCard {
+    margin-bottom: $sp-4;
+    flex: 1;
+
+    .educationCardHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+    }
+}

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react'
+import moment from 'moment'
+
+import { UserTrait } from '~/libs/core'
+
+import styles from './EducationCard.module.scss'
+
+interface EducationCardProps {
+    education: UserTrait
+}
+
+const EducationCard: FC<EducationCardProps> = (props: EducationCardProps) => (
+    <div className={styles.educationCard}>
+        <div className={styles.educationCardHeader}>
+            <div className={styles.educationCardHeaderLeft}>
+                <p className='body-main-bold'>
+                    {props.education.major}
+                </p>
+                <p>
+                    {props.education.schoolCollegeName}
+                </p>
+            </div>
+            {
+                props.education.timePeriodFrom || props.education.timePeriodTo ? (
+                    <div className={styles.educationCardHeaderRight}>
+                        <p>
+                            {props.education.timePeriodFrom ? moment(props.education.timePeriodFrom)
+                                .format('MM/YYYY') : ''}
+                            {' '}
+                            -
+                            {' '}
+                            {props.education.timePeriodTo ? moment(props.education.timePeriodTo)
+                                .format('MM/YYYY') : (props.education.graduated ? 'Graduated' : '')}
+                        </p>
+                    </div>
+                ) : undefined
+            }
+        </div>
+    </div>
+)
+
+export default EducationCard

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/index.ts

@@ -0,0 +1 @@
+export { default as EducationCard } from './EducationCard'

src/apps/profiles/src/member-profile/education-and-certifications/ModifyEducationModal/ModifyEducationModal.module.scss

@@ -3,10 +3,89 @@
 .container {
     display: flex;
     flex-direction: column;
+
+    .educationWrap {
+        margin-bottom: $sp-8;
+
+        &.noItems {
+            margin-bottom: 0;
+        }
+
+        .educationCardWrap {
+            display: flex;
+            align-items: center;
+
+            .actionElements {
+                display: flex;
+                align-items: center;
+                margin-left: $sp-15;
+
+                :global(button) {
+                    padding: $sp-2;
+
+                    @include ltelg {
+                        padding: $sp-1;
+                    }
+                }
+
+                svg {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        :global(.input-wrapper) {
+            flex: 1;
+
+            @include ltelg {
+                min-width: 100%;
+            }
+
+            &:first-child {
+                margin-right: $sp-2;
+
+                @include ltelg {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    .formWrap {
+        margin-top: $sp-4;
+
+        @include ltelg {
+            :global(.input-wrapper) {
+                margin-bottom: $sp-2;
+            }
+        }
+
+        .formCTAs {
+            display: flex;
+            align-items: center;
+
+            svg {
+                width: 14px;
+                height: 14px;
+                margin-right: $sp-1;
+            }
+
+            .ctaBtnCancel {
+                margin-left: $sp-8;
+            }
+        }
+    }
 }
 
 .modalButtons {
     display: flex;
     justify-content: space-between;
     width: 100%;
-}
+}