Merge pull request #931 from topcoder-platform/TSJR-111-skills-UI-updates

TSJR-111 skills UI updates -> feature/standardized-skills

Author: kkartunov

package.json

@@ -89,7 +89,6 @@
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",
     "react-responsive": "^9.0.0-beta.5",
-    "react-responsive-masonry": "^2.1.7",
     "react-responsive-modal": "^6.2.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
@@ -160,7 +159,6 @@
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-helmet": "^6.1.6",
     "@types/react-redux-toastr": "^7.6.2",
-    "@types/react-responsive-masonry": "^2.1.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-actions": "2.6.2",
     "@types/redux-logger": "^3.0.9",

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

@@ -22,30 +22,13 @@
         justify-content: space-between;
         align-items: center;
         margin-bottom: $sp-6;
-
-        .skillActions {
-            display: flex;
-            align-items: center;
-
-            @include ltemd {
-                flex-direction: column;
-                align-items: flex-end;
-            }
-
-            > button:nth-child(2) {
-                margin-left: $sp-4;
-
-                @include ltemd {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 
     .skillsWrap {
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: $sp-1;
-        row-gap: $sp-2;
+        padding-bottom: $sp-8;
+
+        @include ltemd {
+            padding-bottom: $sp-4;
+        }
     }
 }

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

@@ -35,6 +35,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
 
     const groupedSkillsByCategory: { [key: string]: UserSkill[] } = useMemo(() => {
         const grouped: { [key: string]: UserSkill[] } = {}
+        const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {}
 
         memberSkills.forEach((skill: UserSkill) => {
             if (grouped[skill.category.name]) {
@@ -44,11 +45,14 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             }
         })
 
-        return grouped
-    }, [memberSkills])
+        Object.keys(grouped)
+            .sort()
+            .forEach(key => {
+                sortedGroupedSkillsByCategory[key] = grouped[key]
+            })
 
-    const [skillsCatsCollapsed, setSkillsCatsCollapsed]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(true)
+        return sortedGroupedSkillsByCategory
+    }, [memberSkills])
 
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -87,10 +91,6 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setHowSkillsWorkVisible(false)
     }
 
-    function handleExpandAllClick(): void {
-        setSkillsCatsCollapsed(!skillsCatsCollapsed)
-    }
-
     return (
         <div className={styles.container}>
             {
@@ -119,24 +119,13 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         onClick={handleHowSkillsWorkClick}
                         variant='linkblue'
                     />
-                    {
-                        memberSkills.length > 0 && (
-                            <Button
-                                link
-                                label={skillsCatsCollapsed ? 'Expand all' : 'Collapse all'}
-                                onClick={handleExpandAllClick}
-                                variant='linkblue'
-                            />
-                        )
-                    }
                 </div>
             </div>
 
             <div className={styles.skillsWrap}>
                 {memberSkills.length > 0 && (
                     <GroupedSkillsUI
                         groupedSkillsByCategory={groupedSkillsByCategory}
-                        skillsCatsCollapsed={skillsCatsCollapsed}
                     />
                 )}
                 {!memberSkills.length && (

src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx

@@ -2,4 +2,13 @@
 
 .skillsCategories {
     flex: 1;
+    columns: 3 auto;
+
+    @include xl {
+        columns: 2 auto;
+    }
+
+    @include ltelg {
+        columns: 1 auto;
+    }
 }

src/libs/shared/lib/components/collapsible-skills-list/index.ts

@@ -1,47 +1,41 @@
 import { FC } from 'react'
-import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 
 import { UserSkill } from '~/libs/core'
 import { SkillPill } from '~/libs/shared'
 
-import { CollapsibleSkillsList } from '../collapsible-skills-list'
+import { SkillsList } from '../skills-list'
 
 import styles from './GroupedSkillsUI.module.scss'
 
 interface GroupedSkillsUIProps {
     groupedSkillsByCategory: { [key: string]: UserSkill[] }
-    skillsCatsCollapsed: boolean
 }
 const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps) => (
-    <ResponsiveMasonry
+    <div
         className={styles.skillsCategories}
-        columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
     >
-        <Masonry>
-            {
-                Object.keys(props.groupedSkillsByCategory)
-                    .map((categoryName: string) => (
+        {
+            Object.keys(props.groupedSkillsByCategory)
+                .map((categoryName: string) => (
 
-                        <CollapsibleSkillsList
-                            key={categoryName}
-                            header={categoryName}
-                            isCollapsed={props.skillsCatsCollapsed}
-                        >
-                            {
-                                props.groupedSkillsByCategory[categoryName]
-                                    .map((skill: UserSkill) => (
-                                        <SkillPill
-                                            skill={skill}
-                                            key={skill.id}
-                                            theme='catList'
-                                        />
-                                    ))
-                            }
-                        </CollapsibleSkillsList>
-                    ))
-            }
-        </Masonry>
-    </ResponsiveMasonry>
+                    <SkillsList
+                        key={categoryName}
+                        header={categoryName}
+                    >
+                        {
+                            props.groupedSkillsByCategory[categoryName]
+                                .map((skill: UserSkill) => (
+                                    <SkillPill
+                                        skill={skill}
+                                        key={skill.id}
+                                        theme='catList'
+                                    />
+                                ))
+                        }
+                    </SkillsList>
+                ))
+        }
+    </div>
 )
 
 export default GroupedSkillsUI

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss

@@ -6,4 +6,4 @@ export * from './member-skill-editor'
 export * from './skill-pill'
 export * from './expandable-list'
 export * from './grouped-skills-ui'
-export * from './collapsible-skills-list'
+export * from './skills-list'

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { IconOutline } from '~/libs/ui'
 import { UserSkill } from '~/libs/core'
 
-import { isSkillVerified } from '../../services'
+import { isSkillVerified } from '../../services/standard-skills'
 
 import styles from './SkillPill.module.scss'
 

src/libs/shared/lib/components/index.ts

@@ -25,25 +25,12 @@
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
-        cursor: pointer;
 
         .title {
             font-weight: 700;
             font-size: 14px;
         }
 
-        .btn {
-            padding-left: 0;
-            padding-right: $sp-2;
-            color: $turq-120;
-
-            svg {
-                flex: 0 0 auto;
-                color: $turq-120;
-                @include icon-size(16);
-            }
-        }
-
         .badgeCount {
             background-color: $black-10;
             border-radius: 50%;
@@ -58,11 +45,11 @@
         transition: opacity 0.3s ease-in-out;
         max-height: auto;
         opacity: 1;
-        padding-left: $sp-8;
+        padding-left: $sp-4;
         margin-top: $sp-1;
 
         @include ltemd {
-            padding-left: $sp-4;
+            padding-left: $sp-2;
         }
     }
 }