From bc11f31a99ef43e79e06d8c2caf2412b1ae4eccb Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 18 Oct 2023 19:24:43 +0300 Subject: [PATCH 1/5] TSJR-159rbetter mobile responsive --- .../shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx | 2 +- src/libs/shared/lib/components/skill-pill/SkillPill.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx index e9a6d87bf..8b1d5f069 100644 --- a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx +++ b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx @@ -15,7 +15,7 @@ interface GroupedSkillsUIProps { const GroupedSkillsUI: FC = (props: GroupedSkillsUIProps) => ( { diff --git a/src/libs/shared/lib/components/skill-pill/SkillPill.tsx b/src/libs/shared/lib/components/skill-pill/SkillPill.tsx index 725b06373..2800850f9 100644 --- a/src/libs/shared/lib/components/skill-pill/SkillPill.tsx +++ b/src/libs/shared/lib/components/skill-pill/SkillPill.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' From 126d369a72501eb2a35a283af1bfca5fd42bc82c Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 18 Oct 2023 22:59:46 +0300 Subject: [PATCH 2/5] TSJR-158 better collapse skills UI --- .../skills/MemberSkillsInfo.tsx | 11 ++ .../CollapsibleSkillsList.tsx | 6 +- .../grouped-skills-ui/GroupedSkillsUI.tsx | 100 ++++++++++++------ 3 files changed, 84 insertions(+), 33 deletions(-) diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx index 10bd07516..618ac252c 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx @@ -91,6 +91,16 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp setSkillsCatsCollapsed(!skillsCatsCollapsed) } + function toggleCollapseUIButton(collapsed: boolean): void { + if (collapsed === false && !!skillsCatsCollapsed) { + setSkillsCatsCollapsed(false) + } + + if (collapsed === true && skillsCatsCollapsed === false) { + setSkillsCatsCollapsed(true) + } + } + return (
{ @@ -137,6 +147,7 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp )} {!memberSkills.length && ( diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx b/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx index e51149905..7a4de9f40 100644 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx +++ b/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 = (props: CollapsibleSkillsListProps) => { @@ -24,7 +25,10 @@ const CollapsibleSkillsList: FC = (props: Collapsibl }, [props.isCollapsed]) function toggleCollapse(): void { - setIsCollapsed(!isCollapsed) + const newIsCollapsed: boolean = !isCollapsed + + setIsCollapsed(newIsCollapsed) + if (props.onDisplayChnage) props.onDisplayChnage(newIsCollapsed) } return ( diff --git a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx index 8b1d5f069..bf908097c 100644 --- a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx +++ b/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 = (props: GroupedSkillsUIProps) => { + const [collapsedMap, setCollapsedMap]: + [{ [key: string]: boolean }, Dispatch>] + = 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 ( + + + { + Object.keys(props.groupedSkillsByCategory) + .map((categoryName: string) => ( + + + { + props.groupedSkillsByCategory[categoryName] + .map((skill: UserSkill) => ( + + )) + } + + )) + } + + + ) } -const GroupedSkillsUI: FC = (props: GroupedSkillsUIProps) => ( - - - { - Object.keys(props.groupedSkillsByCategory) - .map((categoryName: string) => ( - - - { - props.groupedSkillsByCategory[categoryName] - .map((skill: UserSkill) => ( - - )) - } - - )) - } - - -) export default GroupedSkillsUI From 4b72b46669c9413e4afce857cc85efde6c36b892 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 19 Oct 2023 19:52:44 +0300 Subject: [PATCH 3/5] TSJR-111 updates --- .../skills/MemberSkillsInfo.module.scss | 18 ---- .../skills/MemberSkillsInfo.tsx | 38 ++----- .../CollapsibleSkillsList.module.scss | 13 --- .../CollapsibleSkillsList.tsx | 50 +++------ .../grouped-skills-ui/GroupedSkillsUI.tsx | 100 ++++++------------ 5 files changed, 51 insertions(+), 168 deletions(-) diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss index 32162ff66..30f8c665e 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss +++ b/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 { diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx index 618ac252c..622574f0d 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx @@ -35,6 +35,7 @@ const MemberSkillsInfo: FC = (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 = (props: MemberSkillsInfoProp } }) - return grouped - }, [memberSkills]) + Object.keys(grouped) + .sort() + .forEach(key => { + sortedGroupedSkillsByCategory[key] = grouped[key] + }) - const [skillsCatsCollapsed, setSkillsCatsCollapsed]: [boolean, Dispatch>] - = useState(true) + return sortedGroupedSkillsByCategory + }, [memberSkills]) const [isEditMode, setIsEditMode]: [boolean, Dispatch>] = useState(false) @@ -87,20 +91,6 @@ const MemberSkillsInfo: FC = (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 (
{ @@ -129,16 +119,6 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp onClick={handleHowSkillsWorkClick} variant='linkblue' /> - { - memberSkills.length > 0 && ( -
@@ -146,8 +126,6 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp {memberSkills.length > 0 && ( )} {!memberSkills.length && ( diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss b/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss index b5bacf1c0..13e2ab221 100644 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss +++ b/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%; diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx b/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx index 7a4de9f40..8d2942145 100644 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx +++ b/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 = (props: CollapsibleSkillsListProps) => { - const [isCollapsed, setIsCollapsed]: [boolean, Dispatch>] - = useState(props.isCollapsed) - - useEffect(() => { - setIsCollapsed(props.isCollapsed) - }, [props.isCollapsed]) - - function toggleCollapse(): void { - const newIsCollapsed: boolean = !isCollapsed - - setIsCollapsed(newIsCollapsed) - if (props.onDisplayChnage) props.onDisplayChnage(newIsCollapsed) - } - - return ( -
-
- { - !isCollapsed - ?
) export default GroupedSkillsUI diff --git a/src/libs/shared/lib/components/index.ts b/src/libs/shared/lib/components/index.ts index 016d36443..ac827849a 100644 --- a/src/libs/shared/lib/components/index.ts +++ b/src/libs/shared/lib/components/index.ts @@ -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' diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss b/src/libs/shared/lib/components/skills-list/SkillsList.module.scss similarity index 94% rename from src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss rename to src/libs/shared/lib/components/skills-list/SkillsList.module.scss index 13e2ab221..251cafd2e 100644 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss +++ b/src/libs/shared/lib/components/skills-list/SkillsList.module.scss @@ -45,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; } } } \ No newline at end of file diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx b/src/libs/shared/lib/components/skills-list/SkillsList.tsx similarity index 74% rename from src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx rename to src/libs/shared/lib/components/skills-list/SkillsList.tsx index 8d2942145..2a2f13971 100644 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx +++ b/src/libs/shared/lib/components/skills-list/SkillsList.tsx @@ -1,9 +1,9 @@ import { FC, ReactNode } from 'react' import classNames from 'classnames' -import styles from './CollapsibleSkillsList.module.scss' +import styles from './SkillsList.module.scss' -interface CollapsibleSkillsListProps { +interface SkillsListProps { children?: ReactNode[] header?: ReactNode containerClass?: string @@ -11,7 +11,7 @@ interface CollapsibleSkillsListProps { contentClass?: string } -const CollapsibleSkillsList: FC = (props: CollapsibleSkillsListProps) => ( +const SkillsList: FC = (props: SkillsListProps) => (
{props.header}
@@ -26,4 +26,4 @@ const CollapsibleSkillsList: FC = (props: Collapsibl
) -export default CollapsibleSkillsList +export default SkillsList diff --git a/src/libs/shared/lib/components/skills-list/index.ts b/src/libs/shared/lib/components/skills-list/index.ts new file mode 100644 index 000000000..ee1dfc41d --- /dev/null +++ b/src/libs/shared/lib/components/skills-list/index.ts @@ -0,0 +1 @@ +export { default as SkillsList } from './SkillsList' From c9a8d4a0b586ae77a96d31dfc8c6ea48752ad1cc Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 20 Oct 2023 11:16:54 +0300 Subject: [PATCH 5/5] remove react-responsive-masonry lib as not used --- package.json | 2 -- yarn.lock | 12 ------------ 2 files changed, 14 deletions(-) diff --git a/package.json b/package.json index 32742bd9b..2ef92fbc4 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 6a6a6f881..8954e2c9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5402,13 +5402,6 @@ "@types/react" "*" redux "^3.6.0 || ^4.0.0" -"@types/react-responsive-masonry@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.1.tgz#694fc86964f37b991c3b85ac99a253a04ecb8f6b" - integrity sha512-sFzNsxYugWO8G4d3ObhpcJCiqiYthWp9Udr9phDzy5BYxW78uMF8yK2IJ8+7bQLbmQz2xaIey1ZogbW3ATIo+A== - dependencies: - "@types/react" "*" - "@types/react-router-dom@^5.3.3": version "5.3.3" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" @@ -16335,11 +16328,6 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-responsive-masonry@^2.1.7: - version "2.1.7" - resolved "https://registry.yarnpkg.com/react-responsive-masonry/-/react-responsive-masonry-2.1.7.tgz#9b4a8d63b296a6265bea720c9d7da89754548346" - integrity sha512-/jOqnTVNtO8zRJMTl6ZXBex7EFYEIFBLVlkIFjiCT7omfm0CgNF2z4ST8RIr0v2ut15NWAQs7Q3kJJPhMoe3Ew== - react-responsive-modal@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-6.2.0.tgz#339226b911d8ffaba4e0afce83387a65221b8e29"