TSJR-158 better collapse skills UI

Author: kkartunov

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

@@ -91,6 +91,16 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         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}>
             {
@@ -137,6 +147,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     <GroupedSkillsUI
                         groupedSkillsByCategory={groupedSkillsByCategory}
                         skillsCatsCollapsed={skillsCatsCollapsed}
+                        onAllSkillsSameDisplayState={toggleCollapseUIButton}
                     />
                 )}
                 {!memberSkills.length && (

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

@@ -13,6 +13,7 @@ interface CollapsibleSkillsListProps {
     headerClass?: string
     contentClass?: string
     isCollapsed: boolean
+    onDisplayChnage?: (isCollapsed: boolean) => void
 }
 
 const CollapsibleSkillsList: FC<CollapsibleSkillsListProps> = (props: CollapsibleSkillsListProps) => {
@@ -24,7 +25,10 @@ const CollapsibleSkillsList: FC<CollapsibleSkillsListProps> = (props: Collapsibl
     }, [props.isCollapsed])
 
     function toggleCollapse(): void {
-        setIsCollapsed(!isCollapsed)
+        const newIsCollapsed: boolean = !isCollapsed
+
+        setIsCollapsed(newIsCollapsed)
+        if (props.onDisplayChnage) props.onDisplayChnage(newIsCollapsed)
     }
 
     return (

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

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 
 import { UserSkill } from '~/libs/core'
@@ -11,37 +11,73 @@ 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}
-                            isCollapsed={props.skillsCatsCollapsed}
-                        >
-                            {
-                                props.groupedSkillsByCategory[categoryName]
-                                    .map((skill: UserSkill) => (
-                                        <SkillPill
-                                            skill={skill}
-                                            key={skill.id}
-                                            theme='catList'
-                                        />
-                                    ))
-                            }
-                        </CollapsibleSkillsList>
-                    ))
-            }
-        </Masonry>
-    </ResponsiveMasonry>
-)
 
 export default GroupedSkillsUI