TSJR-111 updates

Author: kkartunov

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

@@ -22,24 +22,6 @@
         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 {

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,20 +91,6 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setHowSkillsWorkVisible(false)
     }
 
-    function handleExpandAllClick(): void {
-        setSkillsCatsCollapsed(!skillsCatsCollapsed)
-    }
-
-    function toggleCollapseUIButton(collapsed: boolean): void {
-        if (collapsed === false && !!skillsCatsCollapsed) {
-            setSkillsCatsCollapsed(false)
-        }
-
-        if (collapsed === true && skillsCatsCollapsed === false) {
-            setSkillsCatsCollapsed(true)
-        }
-    }
-
     return (
         <div className={styles.container}>
             {
@@ -129,25 +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}
-                        onAllSkillsSameDisplayState={toggleCollapseUIButton}
                     />
                 )}
                 {!memberSkills.length && (

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

@@ -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%;

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

@@ -1,9 +1,6 @@
-import { Dispatch, FC, ReactNode, SetStateAction, useEffect, useState } from 'react'
+import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/outline'
-import { Button } from '~/libs/ui'
-
 import styles from './CollapsibleSkillsList.module.scss'
 
 interface CollapsibleSkillsListProps {
@@ -12,44 +9,21 @@ interface CollapsibleSkillsListProps {
     containerClass?: string
     headerClass?: string
     contentClass?: string
-    isCollapsed: boolean
-    onDisplayChnage?: (isCollapsed: boolean) => void
 }
 
-const CollapsibleSkillsList: FC<CollapsibleSkillsListProps> = (props: CollapsibleSkillsListProps) => {
-    const [isCollapsed, setIsCollapsed]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(props.isCollapsed)
-
-    useEffect(() => {
-        setIsCollapsed(props.isCollapsed)
-    }, [props.isCollapsed])
-
-    function toggleCollapse(): void {
-        const newIsCollapsed: boolean = !isCollapsed
-
-        setIsCollapsed(newIsCollapsed)
-        if (props.onDisplayChnage) props.onDisplayChnage(newIsCollapsed)
-    }
-
-    return (
-        <div className={classNames(styles.container, props.containerClass, isCollapsed ? styles.collapsed : '')}>
-            <div className={classNames(styles.header, props.headerClass)} onClick={toggleCollapse}>
-                {
-                    !isCollapsed
-                        ? <Button icon={ChevronUpIcon} size='md' className={styles.btn} />
-                        : <Button icon={ChevronDownIcon} size='md' className={styles.btn} />
-                }
-                <div className={styles.title}>{props.header}</div>
-                <div className={styles.badgeCount}>
-                    {props.children && props.children.length}
-                </div>
+const CollapsibleSkillsList: FC<CollapsibleSkillsListProps> = (props: CollapsibleSkillsListProps) => (
+    <div className={classNames(styles.container, props.containerClass)}>
+        <div className={classNames(styles.header, props.headerClass)}>
+            <div className={styles.title}>{props.header}</div>
+            <div className={styles.badgeCount}>
+                {props.children && props.children.length}
             </div>
+        </div>
 
-            <div className={classNames(styles.content, props.contentClass)}>
-                {props.children}
-            </div>
+        <div className={classNames(styles.content, props.contentClass)}>
+            {props.children}
         </div>
-    )
-}
+    </div>
+)
 
 export default CollapsibleSkillsList

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

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import { FC } from 'react'
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 
 import { UserSkill } from '~/libs/core'
@@ -10,74 +10,36 @@ import styles from './GroupedSkillsUI.module.scss'
 
 interface GroupedSkillsUIProps {
     groupedSkillsByCategory: { [key: string]: UserSkill[] }
-    skillsCatsCollapsed: boolean
-    onAllSkillsSameDisplayState: (collapsed: boolean) => void
-}
-const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps) => {
-    const [collapsedMap, setCollapsedMap]:
-        [{ [key: string]: boolean }, Dispatch<SetStateAction<{ [key: string]: boolean }>>]
-        = useState<{ [key: string]: boolean }>({})
-
-    useEffect(() => {
-        const newCollapsedMap: { [key: string]: boolean } = {}
-
-        Object.keys(props.groupedSkillsByCategory)
-            .forEach((categoryName: string) => {
-                newCollapsedMap[categoryName] = props.skillsCatsCollapsed
-            })
-
-        setCollapsedMap(newCollapsedMap)
-    }, [props.groupedSkillsByCategory, props.skillsCatsCollapsed])
-
-    useEffect(() => {
-        const arr: boolean[] = Object.values(collapsedMap)
-
-        if (arr.every(val => val === arr[0])) {
-            props.onAllSkillsSameDisplayState(arr[0])
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [collapsedMap])
-
-    function handleCollapseChange(categoryName: string, isCollapsed: boolean): void {
-        setCollapsedMap({
-            ...collapsedMap,
-            [categoryName]: isCollapsed,
-        })
-    }
-
-    return (
-        <ResponsiveMasonry
-            className={styles.skillsCategories}
-            columnsCountBreakPoints={{ 350: 1, 750: 2, 1368: 3 }}
-        >
-            <Masonry>
-                {
-                    Object.keys(props.groupedSkillsByCategory)
-                        .map((categoryName: string) => (
-
-                            <CollapsibleSkillsList
-                                key={categoryName}
-                                header={categoryName}
-                                isCollapsed={collapsedMap[categoryName]}
-                                // eslint-disable-next-line react/jsx-no-bind
-                                onDisplayChnage={handleCollapseChange.bind(this, categoryName)}
-                            >
-                                {
-                                    props.groupedSkillsByCategory[categoryName]
-                                        .map((skill: UserSkill) => (
-                                            <SkillPill
-                                                skill={skill}
-                                                key={skill.id}
-                                                theme='catList'
-                                            />
-                                        ))
-                                }
-                            </CollapsibleSkillsList>
-                        ))
-                }
-            </Masonry>
-        </ResponsiveMasonry>
-    )
 }
+const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps) => (
+    <ResponsiveMasonry
+        className={styles.skillsCategories}
+        columnsCountBreakPoints={{ 350: 1, 750: 2, 1368: 3 }}
+    >
+        <Masonry>
+            {
+                Object.keys(props.groupedSkillsByCategory)
+                    .map((categoryName: string) => (
+
+                        <CollapsibleSkillsList
+                            key={categoryName}
+                            header={categoryName}
+                        >
+                            {
+                                props.groupedSkillsByCategory[categoryName]
+                                    .map((skill: UserSkill) => (
+                                        <SkillPill
+                                            skill={skill}
+                                            key={skill.id}
+                                            theme='catList'
+                                        />
+                                    ))
+                            }
+                        </CollapsibleSkillsList>
+                    ))
+            }
+        </Masonry>
+    </ResponsiveMasonry>
+)
 
 export default GroupedSkillsUI