From fe40b43026b7919c88f7df9ab874f52b8af8847f Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sat, 9 Nov 2024 22:15:39 +0200 Subject: [PATCH 01/29] refactor: 634 - resolve sass deprecation warning --- next.config.ts | 9 ++++++--- src/core/styles/_mixins.scss | 2 ++ src/core/styles/index.scss | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/next.config.ts b/next.config.ts index cf9a397ad..5988fca98 100644 --- a/next.config.ts +++ b/next.config.ts @@ -10,11 +10,14 @@ const nextConfig: NextConfig = { distDir: './build', images: { unoptimized: true }, sassOptions: { + // TODO: remove silenceDeprecations below, when the issue will be fixed + // https://github.com/vercel/next.js/issues/71638#issuecomment-2454463904 + silenceDeprecations: ['legacy-js-api'], includePaths: [path.join(__dirname, 'src')], prependData: ` - @import "@/core/styles/_constants.scss"; - @import "@/core/styles/_mixins.scss"; - @import "@/core/styles/_placeholders.scss"; + @use '@/core/styles/constants' as *; + @use '@/core/styles/mixins' as *; + @use '@/core/styles/placeholders' as *; `, }, devIndicators: { appIsrStatus: false }, diff --git a/src/core/styles/_mixins.scss b/src/core/styles/_mixins.scss index 46f20ae1d..0420e083e 100644 --- a/src/core/styles/_mixins.scss +++ b/src/core/styles/_mixins.scss @@ -1,3 +1,5 @@ +@use 'constants' as *; + @mixin media-laptop { @media (max-width: $content-width) { @content; diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss index f2eb06795..50b3becab 100644 --- a/src/core/styles/index.scss +++ b/src/core/styles/index.scss @@ -1,4 +1,4 @@ -@import './normalize'; +@use 'normalize'; html { scroll-behavior: smooth; From 54531c5d430c34ab47630d2a8d50de600419fe58 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sun, 10 Nov 2024 22:20:45 +0200 Subject: [PATCH 02/29] refactor: 563 - move school menu to dedicated folder --- src/widgets/school-menu/index.ts | 2 +- src/widgets/school-menu/ui/{ => school-menu}/school-menu.scss | 0 .../school-menu/{ => ui/school-menu}/school-menu.test.tsx | 2 +- src/widgets/school-menu/ui/{ => school-menu}/school-menu.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/widgets/school-menu/ui/{ => school-menu}/school-menu.scss (100%) rename src/widgets/school-menu/{ => ui/school-menu}/school-menu.test.tsx (98%) rename src/widgets/school-menu/ui/{ => school-menu}/school-menu.tsx (96%) diff --git a/src/widgets/school-menu/index.ts b/src/widgets/school-menu/index.ts index d88ff088d..5a81493ba 100644 --- a/src/widgets/school-menu/index.ts +++ b/src/widgets/school-menu/index.ts @@ -1 +1 @@ -export { SchoolMenu } from './ui/school-menu'; +export { SchoolMenu } from './ui/school-menu/school-menu'; diff --git a/src/widgets/school-menu/ui/school-menu.scss b/src/widgets/school-menu/ui/school-menu/school-menu.scss similarity index 100% rename from src/widgets/school-menu/ui/school-menu.scss rename to src/widgets/school-menu/ui/school-menu/school-menu.scss diff --git a/src/widgets/school-menu/school-menu.test.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx similarity index 98% rename from src/widgets/school-menu/school-menu.test.tsx rename to src/widgets/school-menu/ui/school-menu/school-menu.test.tsx index a0b0bcbc4..7c8cdb38b 100644 --- a/src/widgets/school-menu/school-menu.test.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx @@ -1,6 +1,6 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { SchoolMenu } from './ui/school-menu'; +import { SchoolMenu } from '../school-menu/school-menu'; import { Course } from '@/entities/course'; import { MOCKED_IMAGE_PATH } from '@/shared/__tests__/constants'; import { renderWithRouter } from '@/shared/__tests__/utils'; diff --git a/src/widgets/school-menu/ui/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx similarity index 96% rename from src/widgets/school-menu/ui/school-menu.tsx rename to src/widgets/school-menu/ui/school-menu/school-menu.tsx index 7a577127d..d111fd2f5 100644 --- a/src/widgets/school-menu/ui/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -1,4 +1,4 @@ -import { GenericItemProps, SchoolList } from './school-list/school-list'; +import { GenericItemProps, SchoolList } from '../school-list/school-list'; import { ANCHORS } from '@/core/const'; import type { Course } from '@/entities/course'; import { MentorshipCourse, MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; From 7f26f38ad01aa0da7561d48aa705946015e7c51d Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sun, 10 Nov 2024 22:43:12 +0200 Subject: [PATCH 03/29] refactor: 563 - break down styles to their own files --- .../ui/school-item/school-item.module.scss | 48 +++++++++ .../ui/school-item/school-item.tsx | 36 ++++--- .../ui/school-list/school-list.module.scss | 24 +++++ .../ui/school-list/school-list.tsx | 12 ++- .../ui/school-menu/school-menu.module.scss | 24 +++++ .../ui/school-menu/school-menu.scss | 98 ------------------- .../ui/school-menu/school-menu.tsx | 9 +- 7 files changed, 129 insertions(+), 122 deletions(-) create mode 100644 src/widgets/school-menu/ui/school-item/school-item.module.scss create mode 100644 src/widgets/school-menu/ui/school-list/school-list.module.scss create mode 100644 src/widgets/school-menu/ui/school-menu/school-menu.module.scss delete mode 100644 src/widgets/school-menu/ui/school-menu/school-menu.scss diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss new file mode 100644 index 000000000..cf0bda05e --- /dev/null +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -0,0 +1,48 @@ +.school-item { + display: flex; + flex-direction: column; + gap: 5px; + align-items: baseline; + justify-content: flex-start; + + &.with-icon { + display: flex; + flex-direction: row; + gap: 15px; + align-items: center; + justify-content: flex-start; + + .details { + display: flex; + flex-direction: column; + gap: 5px; + align-items: flex-start; + justify-content: flex-start; + } + } + + span { + @extend %transition-all; + + font-weight: $font-weight-medium; + line-height: 20px; + text-align: start; + + &.dark { + color: $color-gray-600; + } + + &.light { + color: $color-gray-200; + } + + &:hover { + color: $color-gray-400; + } + } + + small { + font-size: 12px; + color: $color-gray-500; + } +} diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index abd0ea153..f77b9505e 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames/bind'; import Image from 'next/image'; import Link from 'next/link'; import { GenericItemProps } from '../school-list/school-list'; @@ -6,6 +7,10 @@ import type { Course } from '@/entities/course'; import { getCourseDate } from '@/shared/helpers/getCourseDate'; import { MentorshipCourse } from 'data'; +import styles from './school-item.module.scss'; + +const cx = classNames.bind(styles); + interface SchoolItemProps { item: MentorshipCourse | Course | GenericItemProps; color: 'dark' | 'light'; @@ -14,32 +19,31 @@ interface SchoolItemProps { export const SchoolItem = ({ item, color }: SchoolItemProps) => { const courseDate = 'startDate' in item && getCourseDate(item.startDate, COURSE_STALE_AFTER_DAYS); const descriptionText = 'description' in item ? item.description : courseDate; + const isIdExist = 'id' in item; + const isIconSmallExist = 'iconSmall' in item; + const isDescriptionExist = 'description' in item; const descriptionContent = ( <> - {item.title} + {item.title} {descriptionText} ); - const descriptionBlock = - 'description' in item - ? ( - descriptionContent - ) - : ( -
{descriptionContent}
- ); + const descriptionBlock = isDescriptionExist + ? ( + descriptionContent + ) + : ( +
{descriptionContent}
+ ); return ( -
  • - - {'iconSmall' in item && ( +
  • + + {isIconSmallExist && ( {item.title} { - const className = - !!list && !!list[0] && 'description' in list[0] - ? 'school-list' - : 'school-list school-list_width'; + const isSchoolListFixed = !('description' in list[0]); return ( -
      +
        {list?.map((item) => )}
      ); diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss new file mode 100644 index 000000000..751a6a257 --- /dev/null +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -0,0 +1,24 @@ +.school-menu { + display: flex; + flex-direction: column; + gap: 16px; + align-items: baseline; + justify-content: flex-start; + + color: $color-gray-100; + + .heading { + margin: 0; + font-size: 12px; + font-weight: $font-weight-medium; + text-transform: uppercase; + + &.dark { + color: $color-black; + } + + &.light { + color: $color-gray-400; + } + } +} diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.scss b/src/widgets/school-menu/ui/school-menu/school-menu.scss deleted file mode 100644 index da2af6a98..000000000 --- a/src/widgets/school-menu/ui/school-menu/school-menu.scss +++ /dev/null @@ -1,98 +0,0 @@ -.school-menu { - display: flex; - flex-direction: column; - gap: 16px; - align-items: baseline; - justify-content: flex-start; - - color: $color-gray-100; - - & .heading { - margin: 0; - font-size: 12px; - font-weight: $font-weight-medium; - text-transform: uppercase; - - &.dark { - color: $color-black; - } - - &.light { - color: $color-gray-400; - } - } - - .school-list { - display: flex; - flex-flow: column wrap; - gap: 19px; - column-gap: 40px; - align-items: baseline; - - max-height: 280px; - - list-style-type: none; - - &_width { - width: 512px; - - @media (width <= 795px) { - width: auto; - } - } - - & .school-item { - display: flex; - flex-direction: column; - gap: 5px; - align-items: baseline; - justify-content: flex-start; - - &.with-icon { - display: flex; - flex-direction: row; - gap: 15px; - align-items: center; - justify-content: flex-start; - - .details { - display: flex; - flex-direction: column; - gap: 5px; - align-items: flex-start; - justify-content: flex-start; - } - } - - span { - @extend %transition-all; - - font-weight: $font-weight-medium; - line-height: 20px; - text-align: start; - - &.dark { - color: $color-gray-600; - } - - &.light { - color: $color-gray-200; - } - - &:hover { - color: $color-gray-400; - } - } - - small { - font-size: 12px; - color: $color-gray-500; - } - } - - @include media-mobile-landscape { - column-gap: 10px; - max-height: 600px; - } - } -} diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx index d111fd2f5..8120f7a0a 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -1,9 +1,12 @@ +import classNames from 'classnames/bind'; import { GenericItemProps, SchoolList } from '../school-list/school-list'; import { ANCHORS } from '@/core/const'; import type { Course } from '@/entities/course'; import { MentorshipCourse, MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; -import './school-menu.scss'; +import styles from './school-menu.module.scss'; + +const cx = classNames.bind(styles); const schoolMenuStaticLinks = [ { @@ -70,8 +73,8 @@ export const SchoolMenu = ({ heading, hasTitle = true, color = 'light' }: School const menuItems = getMenuItems(heading, courses, mentorshipCourses); return ( -
      - {hasTitle &&

      {heading}

      } +
      + {hasTitle &&

      {heading}

      }
      ); From b42f8b2df994580977fafb64c139b913dfeb2230 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sun, 10 Nov 2024 23:00:43 +0200 Subject: [PATCH 04/29] refactor: 563 - school menu scss --- src/widgets/school-menu/ui/school-menu/school-menu.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 751a6a257..0dad08444 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -2,9 +2,6 @@ display: flex; flex-direction: column; gap: 16px; - align-items: baseline; - justify-content: flex-start; - color: $color-gray-100; .heading { From 1fbb70f64a58504a536718c3381b80a35b85db34 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 11 Nov 2024 22:32:56 +0200 Subject: [PATCH 05/29] refactor: 563 - move all anchor links to constant --- src/core/const/index.ts | 4 ++++ .../school-menu/ui/school-menu/school-menu.tsx | 12 ++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/core/const/index.ts b/src/core/const/index.ts index abd1b986c..09f5f1474 100644 --- a/src/core/const/index.ts +++ b/src/core/const/index.ts @@ -2,6 +2,10 @@ export const ANCHORS = { ABOUT_COMMUNITY: 'about-community', ABOUT_SCHOOL: 'about-school', MENTORS_WANTED: 'mentors-wanted', + UPCOMING_COURSES: 'upcoming-courses', + EVENTS: 'events', + MERCH: 'merch', + CONTRIBUTE: 'contribute', }; export const COURSE_STALE_AFTER_DAYS = 14; diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx index 8120f7a0a..2e8e9df91 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames/bind'; import { GenericItemProps, SchoolList } from '../school-list/school-list'; -import { ANCHORS } from '@/core/const'; +import { ANCHORS, ROUTES } from '@/core/const'; import type { Course } from '@/entities/course'; import { MentorshipCourse, MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; @@ -16,7 +16,7 @@ const schoolMenuStaticLinks = [ }, { title: 'Upcoming courses', - detailsUrl: '/#upcoming-courses', + detailsUrl: `/#${ANCHORS.UPCOMING_COURSES}`, description: 'Schedule your study', }, ]; @@ -24,22 +24,22 @@ const schoolMenuStaticLinks = [ const communityMenuStaticLinks = [ { title: 'About', - detailsUrl: `/community/#${ANCHORS.ABOUT_COMMUNITY}`, + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.ABOUT_COMMUNITY}`, description: 'Who we are', }, { title: 'Events', - detailsUrl: '/community/#events', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.EVENTS}`, description: 'Meet us at events', }, { title: 'Merch', - detailsUrl: '/community/#merch', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.MERCH}`, description: 'Sloths for your daily life', }, { title: 'Contribute', - detailsUrl: '/community/#contribute', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.CONTRIBUTE}`, description: 'Assist us and improve yourself', }, ]; From a221a9938b4319f12f6f1422e9860e70dcdeae68 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 11 Nov 2024 22:58:09 +0200 Subject: [PATCH 06/29] refactor: 563 - move get menu items to separate file --- .../school-menu/helpers/get-menu-item.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/widgets/school-menu/helpers/get-menu-item.ts diff --git a/src/widgets/school-menu/helpers/get-menu-item.ts b/src/widgets/school-menu/helpers/get-menu-item.ts new file mode 100644 index 000000000..fe68198b9 --- /dev/null +++ b/src/widgets/school-menu/helpers/get-menu-item.ts @@ -0,0 +1,23 @@ +import type { Course } from '@/entities/course'; +import { GenericItemProps } from '@/widgets/school-menu/ui/school-list/school-list'; +import { SchoolMenuProps } from '@/widgets/school-menu/ui/school-menu/school-menu'; +import { MentorshipCourse, communityMenuStaticLinks, schoolMenuStaticLinks } from 'data'; + +export const getMenuItems = ( + heading: SchoolMenuProps['heading'], + courses: Course[], + mentorshipCourses: MentorshipCourse[], +): GenericItemProps[] | Course[] | MentorshipCourse[] => { + switch (heading) { + case 'all courses': + return courses; + case 'rs school': + return schoolMenuStaticLinks; + case 'community': + return communityMenuStaticLinks; + case 'mentorship': + return mentorshipCourses; + default: + return []; + } +}; From 611557ad711429342c09ef0312bd5b2c57a014c5 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 11 Nov 2024 22:59:41 +0200 Subject: [PATCH 07/29] refactor: 563 - move links to dev-data --- dev-data/index.ts | 1 + dev-data/school-menu-links.ts | 37 +++++++++++ .../ui/school-menu/school-menu.tsx | 66 ++----------------- 3 files changed, 43 insertions(+), 61 deletions(-) create mode 100644 dev-data/school-menu-links.ts diff --git a/dev-data/index.ts b/dev-data/index.ts index 3b0fc03f1..c45850371 100644 --- a/dev-data/index.ts +++ b/dev-data/index.ts @@ -33,6 +33,7 @@ export { awsFundamentals } from './awsFundamentals.data'; export { benefitMentorshipHome, benefitMentorshipMentors } from './benefit-mentorship.data'; export { communicationText } from './widget-communication.data'; export { communityGroups } from './community-media.data'; +export { communityMenuStaticLinks, schoolMenuStaticLinks } from './school-menu-links'; export { contentMap } from './training-program.data'; export { contentMapAbout, introLocalizedContent } from './about-course.data'; export { contributeOptions } from './contribute-options.data'; diff --git a/dev-data/school-menu-links.ts b/dev-data/school-menu-links.ts new file mode 100644 index 000000000..7f8801f97 --- /dev/null +++ b/dev-data/school-menu-links.ts @@ -0,0 +1,37 @@ +import { ANCHORS, ROUTES } from '@/core/const'; + +export const schoolMenuStaticLinks = [ + { + title: 'About RS School', + detailsUrl: `/#${ANCHORS.ABOUT_SCHOOL}`, + description: 'Free online education', + }, + { + title: 'Upcoming courses', + detailsUrl: `/#${ANCHORS.UPCOMING_COURSES}`, + description: 'Schedule your study', + }, +]; + +export const communityMenuStaticLinks = [ + { + title: 'About', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.ABOUT_COMMUNITY}`, + description: 'Who we are', + }, + { + title: 'Events', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.EVENTS}`, + description: 'Meet us at events', + }, + { + title: 'Merch', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.MERCH}`, + description: 'Sloths for your daily life', + }, + { + title: 'Contribute', + detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.CONTRIBUTE}`, + description: 'Assist us and improve yourself', + }, +]; diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx index 2e8e9df91..2b29bb9b2 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -1,73 +1,17 @@ import classNames from 'classnames/bind'; -import { GenericItemProps, SchoolList } from '../school-list/school-list'; -import { ANCHORS, ROUTES } from '@/core/const'; -import type { Course } from '@/entities/course'; -import { MentorshipCourse, MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; +import { SchoolList } from '../school-list/school-list'; +import { getMenuItems } from '@/widgets/school-menu/helpers/get-menu-item'; +import { MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; import styles from './school-menu.module.scss'; const cx = classNames.bind(styles); -const schoolMenuStaticLinks = [ - { - title: 'About RS School', - detailsUrl: `/#${ANCHORS.ABOUT_SCHOOL}`, - description: 'Free online education', - }, - { - title: 'Upcoming courses', - detailsUrl: `/#${ANCHORS.UPCOMING_COURSES}`, - description: 'Schedule your study', - }, -]; - -const communityMenuStaticLinks = [ - { - title: 'About', - detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.ABOUT_COMMUNITY}`, - description: 'Who we are', - }, - { - title: 'Events', - detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.EVENTS}`, - description: 'Meet us at events', - }, - { - title: 'Merch', - detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.MERCH}`, - description: 'Sloths for your daily life', - }, - { - title: 'Contribute', - detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.CONTRIBUTE}`, - description: 'Assist us and improve yourself', - }, -]; - -interface SchoolMenuProps { +export type SchoolMenuProps = { heading: 'rs school' | 'all courses' | 'community' | MentorshipDefaultRouteKeys; hasTitle?: boolean; color?: 'dark' | 'light'; -} - -function getMenuItems( - heading: SchoolMenuProps['heading'], - courses: Course[], - mentorshipCourses: MentorshipCourse[], -): GenericItemProps[] | Course[] | MentorshipCourse[] { - switch (heading) { - case 'all courses': - return courses; - case 'rs school': - return schoolMenuStaticLinks; - case 'community': - return communityMenuStaticLinks; - case 'mentorship': - return mentorshipCourses; - default: - return []; - } -} +}; export const SchoolMenu = ({ heading, hasTitle = true, color = 'light' }: SchoolMenuProps) => { const menuItems = getMenuItems(heading, courses, mentorshipCourses); From 59212552505c55dc6cd4d0380a90bdb2f8256700 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 11 Nov 2024 23:05:07 +0200 Subject: [PATCH 08/29] refactor: 563 - create color type --- src/widgets/school-menu/types.ts | 1 + src/widgets/school-menu/ui/school-item/school-item.tsx | 3 ++- src/widgets/school-menu/ui/school-list/school-list.tsx | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 src/widgets/school-menu/types.ts diff --git a/src/widgets/school-menu/types.ts b/src/widgets/school-menu/types.ts new file mode 100644 index 000000000..f00162b20 --- /dev/null +++ b/src/widgets/school-menu/types.ts @@ -0,0 +1 @@ +export type Color = 'dark' | 'light'; diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index f77b9505e..787d30548 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -5,6 +5,7 @@ import { GenericItemProps } from '../school-list/school-list'; import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; import type { Course } from '@/entities/course'; import { getCourseDate } from '@/shared/helpers/getCourseDate'; +import { Color } from '@/widgets/school-menu/types.ts'; import { MentorshipCourse } from 'data'; import styles from './school-item.module.scss'; @@ -13,7 +14,7 @@ const cx = classNames.bind(styles); interface SchoolItemProps { item: MentorshipCourse | Course | GenericItemProps; - color: 'dark' | 'light'; + color: Color; } export const SchoolItem = ({ item, color }: SchoolItemProps) => { diff --git a/src/widgets/school-menu/ui/school-list/school-list.tsx b/src/widgets/school-menu/ui/school-list/school-list.tsx index b1704046b..a509bfbce 100644 --- a/src/widgets/school-menu/ui/school-list/school-list.tsx +++ b/src/widgets/school-menu/ui/school-list/school-list.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames/bind'; import { SchoolItem } from '../school-item/school-item'; import type { Course } from '@/entities/course'; +import { Color } from '@/widgets/school-menu/types.ts'; import { MentorshipCourse } from 'data'; import styles from './school-list.module.scss'; @@ -15,7 +16,7 @@ export interface GenericItemProps { interface SchoolListProps { list: MentorshipCourse[] | Course[] | GenericItemProps[]; - color: 'dark' | 'light'; + color: Color; } export const SchoolList = ({ list, color }: SchoolListProps) => { From 1aaeb2287f89e5f13cf11f698ea4a0726737266b Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 11 Nov 2024 23:16:37 +0200 Subject: [PATCH 09/29] refactor: 563 - merge school list with school menu component --- .../school-menu/helpers/get-menu-item.ts | 4 +-- src/widgets/school-menu/types.ts | 6 ++++ .../ui/school-item/school-item.tsx | 5 ++-- .../ui/school-list/school-list.module.scss | 24 --------------- .../ui/school-list/school-list.tsx | 30 ------------------- .../ui/school-menu/school-menu.module.scss | 25 ++++++++++++++++ .../ui/school-menu/school-menu.tsx | 10 +++++-- 7 files changed, 42 insertions(+), 62 deletions(-) delete mode 100644 src/widgets/school-menu/ui/school-list/school-list.module.scss delete mode 100644 src/widgets/school-menu/ui/school-list/school-list.tsx diff --git a/src/widgets/school-menu/helpers/get-menu-item.ts b/src/widgets/school-menu/helpers/get-menu-item.ts index fe68198b9..a68ea7f6b 100644 --- a/src/widgets/school-menu/helpers/get-menu-item.ts +++ b/src/widgets/school-menu/helpers/get-menu-item.ts @@ -1,5 +1,5 @@ import type { Course } from '@/entities/course'; -import { GenericItemProps } from '@/widgets/school-menu/ui/school-list/school-list'; +import { StaticLink } from '@/widgets/school-menu/types'; import { SchoolMenuProps } from '@/widgets/school-menu/ui/school-menu/school-menu'; import { MentorshipCourse, communityMenuStaticLinks, schoolMenuStaticLinks } from 'data'; @@ -7,7 +7,7 @@ export const getMenuItems = ( heading: SchoolMenuProps['heading'], courses: Course[], mentorshipCourses: MentorshipCourse[], -): GenericItemProps[] | Course[] | MentorshipCourse[] => { +): StaticLink[] | Course[] | MentorshipCourse[] => { switch (heading) { case 'all courses': return courses; diff --git a/src/widgets/school-menu/types.ts b/src/widgets/school-menu/types.ts index f00162b20..1a4c2e5d6 100644 --- a/src/widgets/school-menu/types.ts +++ b/src/widgets/school-menu/types.ts @@ -1 +1,7 @@ export type Color = 'dark' | 'light'; + +export type StaticLink = { + title: string; + detailsUrl: string; + description: string; +}; diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index 787d30548..96719a42e 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -1,11 +1,10 @@ import classNames from 'classnames/bind'; import Image from 'next/image'; import Link from 'next/link'; -import { GenericItemProps } from '../school-list/school-list'; import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; import type { Course } from '@/entities/course'; import { getCourseDate } from '@/shared/helpers/getCourseDate'; -import { Color } from '@/widgets/school-menu/types.ts'; +import { Color, StaticLink } from '@/widgets/school-menu/types'; import { MentorshipCourse } from 'data'; import styles from './school-item.module.scss'; @@ -13,7 +12,7 @@ import styles from './school-item.module.scss'; const cx = classNames.bind(styles); interface SchoolItemProps { - item: MentorshipCourse | Course | GenericItemProps; + item: MentorshipCourse | Course | StaticLink; color: Color; } diff --git a/src/widgets/school-menu/ui/school-list/school-list.module.scss b/src/widgets/school-menu/ui/school-list/school-list.module.scss deleted file mode 100644 index c974d0fd8..000000000 --- a/src/widgets/school-menu/ui/school-list/school-list.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.school-list { - display: flex; - flex-flow: column wrap; - gap: 19px; - column-gap: 40px; - align-items: baseline; - - max-height: 280px; - - list-style-type: none; - - &-fixed { - width: 512px; - - @include media-tablet { - width: auto; - } - } - - @include media-mobile-landscape { - column-gap: 10px; - max-height: 600px; - } -} diff --git a/src/widgets/school-menu/ui/school-list/school-list.tsx b/src/widgets/school-menu/ui/school-list/school-list.tsx deleted file mode 100644 index a509bfbce..000000000 --- a/src/widgets/school-menu/ui/school-list/school-list.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import classNames from 'classnames/bind'; -import { SchoolItem } from '../school-item/school-item'; -import type { Course } from '@/entities/course'; -import { Color } from '@/widgets/school-menu/types.ts'; -import { MentorshipCourse } from 'data'; - -import styles from './school-list.module.scss'; - -const cx = classNames.bind(styles); - -export interface GenericItemProps { - title: string; - detailsUrl: string; - description: string; -} - -interface SchoolListProps { - list: MentorshipCourse[] | Course[] | GenericItemProps[]; - color: Color; -} - -export const SchoolList = ({ list, color }: SchoolListProps) => { - const isSchoolListFixed = !('description' in list[0]); - - return ( -
        - {list?.map((item) => )} -
      - ); -}; diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 0dad08444..4cdb2f190 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -18,4 +18,29 @@ color: $color-gray-400; } } + + .school-list { + display: flex; + flex-flow: column wrap; + gap: 19px; + column-gap: 40px; + align-items: baseline; + + max-height: 280px; + + list-style-type: none; + + &-fixed { + width: 512px; + + @include media-tablet { + width: auto; + } + } + + @include media-mobile-landscape { + column-gap: 10px; + max-height: 600px; + } + } } diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx index 2b29bb9b2..8b295711d 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames/bind'; -import { SchoolList } from '../school-list/school-list'; import { getMenuItems } from '@/widgets/school-menu/helpers/get-menu-item'; +import { Color } from '@/widgets/school-menu/types.ts'; +import { SchoolItem } from '@/widgets/school-menu/ui/school-item/school-item'; import { MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; import styles from './school-menu.module.scss'; @@ -10,16 +11,19 @@ const cx = classNames.bind(styles); export type SchoolMenuProps = { heading: 'rs school' | 'all courses' | 'community' | MentorshipDefaultRouteKeys; hasTitle?: boolean; - color?: 'dark' | 'light'; + color?: Color; }; export const SchoolMenu = ({ heading, hasTitle = true, color = 'light' }: SchoolMenuProps) => { const menuItems = getMenuItems(heading, courses, mentorshipCourses); + const isSchoolListFixed = !('description' in menuItems[0]); return (
      {hasTitle &&

      {heading}

      } - +
        + {menuItems?.map((item) => )} +
      ); }; From a474ac927c4eb0f6ab5faadf9500897715a8f8a3 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 22 Nov 2024 22:52:30 +0200 Subject: [PATCH 10/29] refactor: 563 - menu as compound component --- .../components/footer/desktop-view.tsx | 28 +++++- .../base-layout/components/header/header.tsx | 86 +++++++++++-------- .../components/header/nav-item/nav-item.tsx | 17 ++-- src/widgets/mobile-view/ui/mobile-view.tsx | 61 +++++++++++-- .../school-menu/helpers/get-menu-item.ts | 23 ----- src/widgets/school-menu/types.ts | 6 -- .../ui/school-item/school-item.module.scss | 24 +++++- .../ui/school-item/school-item.tsx | 64 +++++--------- .../ui/school-menu/school-menu.module.scss | 8 -- .../ui/school-menu/school-menu.tsx | 28 +++--- 10 files changed, 193 insertions(+), 152 deletions(-) delete mode 100644 src/widgets/school-menu/helpers/get-menu-item.ts diff --git a/src/core/base-layout/components/footer/desktop-view.tsx b/src/core/base-layout/components/footer/desktop-view.tsx index f706e4ef5..0e406f0f1 100644 --- a/src/core/base-layout/components/footer/desktop-view.tsx +++ b/src/core/base-layout/components/footer/desktop-view.tsx @@ -1,16 +1,40 @@ import { AboutList } from './about-list'; +import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; +import { getCourseDate } from '@/shared/helpers/getCourseDate.ts'; import { SchoolMenu } from '@/widgets/school-menu'; +import { courses, schoolMenuStaticLinks } from 'data'; export const DesktopView = () => { return (
      - + + {schoolMenuStaticLinks.map((link, i) => ( + + ))} +
      - + + {courses.map((course) => ( + + ))} +
      ); diff --git a/src/core/base-layout/components/header/header.tsx b/src/core/base-layout/components/header/header.tsx index 849054dba..65ecc6066 100644 --- a/src/core/base-layout/components/header/header.tsx +++ b/src/core/base-layout/components/header/header.tsx @@ -5,38 +5,17 @@ import classNames from 'classnames/bind'; import { usePathname } from 'next/navigation'; import { BurgerMenu } from './burger/burger'; import { NavItem } from './nav-item/nav-item'; -import { ROUTES } from '@/core/const'; +import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/core/const'; +import { getCourseDate } from '@/shared/helpers/getCourseDate'; import { Logo } from '@/shared/ui/logo'; import { MobileView } from '@/widgets/mobile-view'; import { SchoolMenu } from '@/widgets/school-menu'; +import { communityMenuStaticLinks, courses, mentorshipCourses, schoolMenuStaticLinks } from 'data'; import styles from './header.module.scss'; const cx = classNames.bind(styles); -const navLinks = [ - { - label: 'RS School', - href: ROUTES.HOME, - dropdownInner: , - }, - { - label: 'Courses', - href: `/${ROUTES.COURSES}`, - dropdownInner: , - }, - { - label: 'Community', - href: `/${ROUTES.COMMUNITY}`, - dropdownInner: , - }, - { - label: 'Mentorship', - href: `/${ROUTES.MENTORSHIP}`, - dropdownInner: , - }, -]; - export const Header = () => { const [isMenuOpen, setMenuOpen] = useState(false); const [color, setColor] = useState('gray'); @@ -100,16 +79,55 @@ export const Header = () => { - {navLinks.map((link) => { - return ( - - ); - })} + + + {schoolMenuStaticLinks.map((link, i) => ( + + ))} + + + + + {courses.map((course) => ( + + ))} + + + + + {communityMenuStaticLinks.map((link, i) => ( + + ))} + + + + + {mentorshipCourses.map((course) => ( + + ))} + + diff --git a/src/core/base-layout/components/header/nav-item/nav-item.tsx b/src/core/base-layout/components/header/nav-item/nav-item.tsx index 599e5019a..fe32ff029 100644 --- a/src/core/base-layout/components/header/nav-item/nav-item.tsx +++ b/src/core/base-layout/components/header/nav-item/nav-item.tsx @@ -1,7 +1,7 @@ import { FocusEvent, KeyboardEvent, - ReactNode, + PropsWithChildren, useEffect, useRef, useState, @@ -16,13 +16,12 @@ import styles from './nav-item.module.scss'; const cx = classNames.bind(styles); -type NavItemProps = { +type NavItemProps = PropsWithChildren & { label: string; href: string; - dropdownInner?: ReactNode; }; -export const NavItem = ({ label, href, dropdownInner }: NavItemProps) => { +export const NavItem = ({ label, href, children }: NavItemProps) => { const [isDropdownOpen, setDropdownOpen] = useState(false); const dropdownToggleRef = useRef(null); @@ -60,18 +59,18 @@ export const NavItem = ({ label, href, dropdownInner }: NavItemProps) => { return (
      {label} - {dropdownInner && ( + {children && ( )} - {dropdownInner && ( + {children && ( - {dropdownInner} + {children} )}
      diff --git a/src/widgets/mobile-view/ui/mobile-view.tsx b/src/widgets/mobile-view/ui/mobile-view.tsx index 05681fce1..cf645ceb4 100644 --- a/src/widgets/mobile-view/ui/mobile-view.tsx +++ b/src/widgets/mobile-view/ui/mobile-view.tsx @@ -1,8 +1,10 @@ import classNames from 'classnames/bind'; import Link from 'next/link'; -import { ROUTES } from '@/core/const'; +import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/core/const'; +import { getCourseDate } from '@/shared/helpers/getCourseDate.ts'; import { Logo } from '@/shared/ui/logo'; import { SchoolMenu } from '@/widgets/school-menu'; +import { communityMenuStaticLinks, courses, mentorshipCourses, schoolMenuStaticLinks } from 'data'; import styles from './mobile-view.module.scss'; @@ -28,35 +30,76 @@ export const MobileView = ({ type }: MobileViewProps) => { - + RS School - + + {schoolMenuStaticLinks.map((link, i) => ( + + ))} + - + Courses - + + {courses.map((course) => ( + + ))} + - + Community - + + {communityMenuStaticLinks.map((link, i) => ( + + ))} + - + Mentorship - + + {mentorshipCourses.map((course) => ( + + ))} + ); }; diff --git a/src/widgets/school-menu/helpers/get-menu-item.ts b/src/widgets/school-menu/helpers/get-menu-item.ts deleted file mode 100644 index a68ea7f6b..000000000 --- a/src/widgets/school-menu/helpers/get-menu-item.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { Course } from '@/entities/course'; -import { StaticLink } from '@/widgets/school-menu/types'; -import { SchoolMenuProps } from '@/widgets/school-menu/ui/school-menu/school-menu'; -import { MentorshipCourse, communityMenuStaticLinks, schoolMenuStaticLinks } from 'data'; - -export const getMenuItems = ( - heading: SchoolMenuProps['heading'], - courses: Course[], - mentorshipCourses: MentorshipCourse[], -): StaticLink[] | Course[] | MentorshipCourse[] => { - switch (heading) { - case 'all courses': - return courses; - case 'rs school': - return schoolMenuStaticLinks; - case 'community': - return communityMenuStaticLinks; - case 'mentorship': - return mentorshipCourses; - default: - return []; - } -}; diff --git a/src/widgets/school-menu/types.ts b/src/widgets/school-menu/types.ts index 1a4c2e5d6..f00162b20 100644 --- a/src/widgets/school-menu/types.ts +++ b/src/widgets/school-menu/types.ts @@ -1,7 +1 @@ export type Color = 'dark' | 'light'; - -export type StaticLink = { - title: string; - detailsUrl: string; - description: string; -}; diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index cf0bda05e..75da7a4cd 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -1,9 +1,10 @@ .school-item { display: flex; - flex-direction: column; gap: 5px; - align-items: baseline; - justify-content: flex-start; + column-gap: 15px; + align-items: center; + + opacity: 1 !important; &.with-icon { display: flex; @@ -21,6 +22,22 @@ } } + .icon-wrapper { + grid-row: span 2; + } + + .description-wrapper { + display: flex; + flex-direction: column; + gap: 5px; + align-items: flex-start; + + .description { + grid-column: 2 /3; + grid-row: 2 / 3; + } + } + span { @extend %transition-all; @@ -42,6 +59,7 @@ } small { + justify-self: flex-start; font-size: 12px; color: $color-gray-500; } diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index 96719a42e..c024c6273 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -1,56 +1,36 @@ +/* eslint-disable @stylistic/indent */ import classNames from 'classnames/bind'; -import Image from 'next/image'; +import Image, { StaticImageData } from 'next/image'; import Link from 'next/link'; -import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; -import type { Course } from '@/entities/course'; -import { getCourseDate } from '@/shared/helpers/getCourseDate'; -import { Color, StaticLink } from '@/widgets/school-menu/types'; -import { MentorshipCourse } from 'data'; +import { Color } from '@/widgets/school-menu/types'; import styles from './school-item.module.scss'; const cx = classNames.bind(styles); interface SchoolItemProps { - item: MentorshipCourse | Course | StaticLink; - color: Color; + title: string; + url: string; + description?: string; + icon?: StaticImageData; + color?: Color; } -export const SchoolItem = ({ item, color }: SchoolItemProps) => { - const courseDate = 'startDate' in item && getCourseDate(item.startDate, COURSE_STALE_AFTER_DAYS); - const descriptionText = 'description' in item ? item.description : courseDate; - const isIdExist = 'id' in item; - const isIconSmallExist = 'iconSmall' in item; - const isDescriptionExist = 'description' in item; - - const descriptionContent = ( - <> - {item.title} - {descriptionText} - - ); - - const descriptionBlock = isDescriptionExist - ? ( - descriptionContent - ) - : ( -
      {descriptionContent}
      - ); - +export const SchoolItem = ({ icon, description, title, color = 'dark', url }: SchoolItemProps) => { return ( -
    • - - {isIconSmallExist && ( - {item.title} - )} - {descriptionBlock} +
    • + + {icon && } +
      + {title} + {description && {description}} +
      • ); diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 4cdb2f190..a89423dd0 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -30,14 +30,6 @@ list-style-type: none; - &-fixed { - width: 512px; - - @include media-tablet { - width: auto; - } - } - @include media-mobile-landscape { column-gap: 10px; max-height: 600px; diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx index 8b295711d..b464f7788 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -1,29 +1,25 @@ +import { HTMLProps, PropsWithChildren } from 'react'; import classNames from 'classnames/bind'; -import { getMenuItems } from '@/widgets/school-menu/helpers/get-menu-item'; -import { Color } from '@/widgets/school-menu/types.ts'; +import { Color } from '@/widgets/school-menu/types'; import { SchoolItem } from '@/widgets/school-menu/ui/school-item/school-item'; -import { MentorshipDefaultRouteKeys, courses, mentorshipCourses } from 'data'; import styles from './school-menu.module.scss'; const cx = classNames.bind(styles); -export type SchoolMenuProps = { - heading: 'rs school' | 'all courses' | 'community' | MentorshipDefaultRouteKeys; - hasTitle?: boolean; - color?: Color; -}; - -export const SchoolMenu = ({ heading, hasTitle = true, color = 'light' }: SchoolMenuProps) => { - const menuItems = getMenuItems(heading, courses, mentorshipCourses); - const isSchoolListFixed = !('description' in menuItems[0]); +export type SchoolMenuProps = PropsWithChildren & + HTMLProps & { + heading?: string; + color?: Color; + }; +export const SchoolMenu = ({ heading, color = 'light', children, className }: SchoolMenuProps) => { return (
      - {hasTitle &&

      {heading}

      } -
        - {menuItems?.map((item) => )} -
      + {heading &&

      {heading}

      } +
        {children}
      ); }; + +SchoolMenu.Item = SchoolItem; From 00334b5c91cd3b4dda8d2d395483f1d646a2ffff Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 22 Nov 2024 23:11:40 +0200 Subject: [PATCH 11/29] fix: 563 - test issues --- .../ui/school-item/school-item.tsx | 18 +-- .../ui/school-menu/school-menu.test.tsx | 103 ++++++++++++++---- 2 files changed, 90 insertions(+), 31 deletions(-) diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index c024c6273..af200db04 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @stylistic/indent */ import classNames from 'classnames/bind'; import Image, { StaticImageData } from 'next/image'; import Link from 'next/link'; @@ -20,13 +19,16 @@ export const SchoolItem = ({ icon, description, title, color = 'dark', url }: Sc return (
    • - {icon && } + {icon && ( + + )}
      {title} {description && {description}} diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx index 7c8cdb38b..a33874b54 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx @@ -1,9 +1,11 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; import { SchoolMenu } from '../school-menu/school-menu'; +import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; import { Course } from '@/entities/course'; -import { MOCKED_IMAGE_PATH } from '@/shared/__tests__/constants'; import { renderWithRouter } from '@/shared/__tests__/utils'; +import { getCourseDate } from '@/shared/helpers/getCourseDate.ts'; +import { schoolMenuStaticLinks } from 'data'; const { mockedCourse } = await vi.hoisted(async () => { const { MOCKED_IMAGE_PATH } = await import('@/shared/__tests__/constants'); @@ -46,20 +48,22 @@ const { mockedCourse } = await vi.hoisted(async () => { return { mockedCourse }; }); -vi.mock(import('data'), async (importOriginal) => { - const actual = await importOriginal(); - - return { - ...actual, - courses: mockedCourse, - }; -}); - describe('SchoolMenu', () => { const [aws, react] = mockedCourse; it('renders without crashing and displays "rs school" heading', () => { - renderWithRouter(); + renderWithRouter( + + {schoolMenuStaticLinks.map((link) => ( + + ))} + , + ); const headingElement = screen.getByRole('heading', { name: /rs school/i }); @@ -67,7 +71,18 @@ describe('SchoolMenu', () => { }); it('displays correct links and descriptions with "rs school" props', () => { - const { container } = renderWithRouter(); + const { container } = renderWithRouter( + + {schoolMenuStaticLinks.map((link) => ( + + ))} + , + ); expect(screen.getAllByRole('link')).toHaveLength(2); @@ -85,7 +100,18 @@ describe('SchoolMenu', () => { }); it('renders without crashing and displays "all courses" heading', () => { - renderWithRouter(); + renderWithRouter( + + {mockedCourse.map((course) => ( + + ))} + , + ); const headingElement = screen.getByRole('heading', { name: /all courses/i }); @@ -93,18 +119,38 @@ describe('SchoolMenu', () => { }); it('renders [mentorshipId] correct when "all courses" heading is passed', () => { - renderWithRouter(); - - const imageAWS = screen.getByRole('img', { name: aws.title }); - - expect(imageAWS).toHaveAttribute('src', MOCKED_IMAGE_PATH.src); - const imageReact = screen.getByRole('img', { name: react.title }); - - expect(imageReact).toHaveAttribute('src', MOCKED_IMAGE_PATH.src); + renderWithRouter( + + {mockedCourse.map((course) => ( + + ))} + , + ); + + const images = screen.getAllByTestId('school-item-icon'); + + expect(images).toHaveLength(2); }); it('renders correct link description when date is passed', () => { - const { container } = renderWithRouter(); + const { container } = renderWithRouter( + + {mockedCourse.map((course) => ( + + ))} + , + ); const descriptions = container.getElementsByTagName('small'); @@ -114,7 +160,18 @@ describe('SchoolMenu', () => { }); it('renders correct link for "AWS Fundamentals" and "React JS [mentorshipId]"', () => { - renderWithRouter(); + renderWithRouter( + + {mockedCourse.map((course) => ( + + ))} + , + ); const [linkAWS, linkReact] = screen.getAllByRole('link'); From b3f16aa6302c421a213683749eb89cba5601954e Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 22 Nov 2024 23:14:02 +0200 Subject: [PATCH 12/29] refactor: 563 - remove type re-export --- src/widgets/school-menu/ui/school-menu/school-menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.tsx index b464f7788..5bfedefcc 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.tsx @@ -7,7 +7,7 @@ import styles from './school-menu.module.scss'; const cx = classNames.bind(styles); -export type SchoolMenuProps = PropsWithChildren & +type SchoolMenuProps = PropsWithChildren & HTMLProps & { heading?: string; color?: Color; From c50edcd6c6e61c3d98b631b65802c3217cd9a98c Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 22 Nov 2024 23:15:00 +0200 Subject: [PATCH 13/29] refactor: 563 - replace interface with type --- src/widgets/school-menu/ui/school-item/school-item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index af200db04..313226a9c 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -7,13 +7,13 @@ import styles from './school-item.module.scss'; const cx = classNames.bind(styles); -interface SchoolItemProps { +type SchoolItemProps = { title: string; url: string; description?: string; icon?: StaticImageData; color?: Color; -} +}; export const SchoolItem = ({ icon, description, title, color = 'dark', url }: SchoolItemProps) => { return ( From 7660258d46d8d33faf6dd8b871ad8d7eba4ca1a7 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 22 Nov 2024 23:16:54 +0200 Subject: [PATCH 14/29] refactor: 563 - replace tag selectors with classes --- .../ui/school-item/school-item.module.scss | 12 +++++------- .../school-menu/ui/school-item/school-item.tsx | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index 75da7a4cd..4cdae1a11 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -35,10 +35,14 @@ .description { grid-column: 2 /3; grid-row: 2 / 3; + justify-self: flex-start; + + font-size: 12px; + color: $color-gray-500; } } - span { + .title { @extend %transition-all; font-weight: $font-weight-medium; @@ -57,10 +61,4 @@ color: $color-gray-400; } } - - small { - justify-self: flex-start; - font-size: 12px; - color: $color-gray-500; - } } diff --git a/src/widgets/school-menu/ui/school-item/school-item.tsx b/src/widgets/school-menu/ui/school-item/school-item.tsx index 313226a9c..bf2a7bddc 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.tsx +++ b/src/widgets/school-menu/ui/school-item/school-item.tsx @@ -30,7 +30,7 @@ export const SchoolItem = ({ icon, description, title, color = 'dark', url }: Sc /> )}
      - {title} + {title} {description && {description}}
      From b17067911f4742da71049c49f167ea9de22f0db3 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 22 Nov 2024 23:31:45 +0200 Subject: [PATCH 15/29] fix: 563 - stylelint issue --- .../ui/school-item/school-item.module.scss | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index 4cdae1a11..ed8352a51 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -6,6 +6,32 @@ opacity: 1 !important; + .title { + font-weight: $font-weight-medium; + line-height: 20px; + text-align: start; + + &.dark { + color: $color-gray-600; + } + + &.light { + color: $color-gray-200; + } + } + + &:hover { + .title { + &.dark { + color: $color-black; + } + + &.light { + color: $color-gray-400; + } + } + } + &.with-icon { display: flex; flex-direction: row; @@ -41,24 +67,4 @@ color: $color-gray-500; } } - - .title { - @extend %transition-all; - - font-weight: $font-weight-medium; - line-height: 20px; - text-align: start; - - &.dark { - color: $color-gray-600; - } - - &.light { - color: $color-gray-200; - } - - &:hover { - color: $color-gray-400; - } - } } From 0af268121deed430b84920e2b7ecb9e0ae5567f8 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sat, 23 Nov 2024 00:05:33 +0200 Subject: [PATCH 16/29] fix: 563 - incorrect course dates --- .../base-layout/components/footer/desktop-view.tsx | 4 +--- src/core/base-layout/components/header/header.tsx | 5 ++--- src/widgets/mobile-view/ui/mobile-view.tsx | 5 ++--- .../ui/school-menu/school-menu.test.tsx | 14 ++++++-------- 4 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/core/base-layout/components/footer/desktop-view.tsx b/src/core/base-layout/components/footer/desktop-view.tsx index 8cb1ba6b0..38b7cea05 100644 --- a/src/core/base-layout/components/footer/desktop-view.tsx +++ b/src/core/base-layout/components/footer/desktop-view.tsx @@ -1,7 +1,5 @@ import { AboutList } from './about-list'; -import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; import { getCourses } from '@/entities/course/api/course-api'; -import { getCourseDate } from '@/shared/helpers/getCourseDate'; import { SchoolMenu } from '@/widgets/school-menu'; import { schoolMenuStaticLinks } from 'data'; @@ -32,7 +30,7 @@ export const DesktopView = async () => { key={course.id} icon={course.iconSmall} title={course.title} - description={getCourseDate(course.startDate, COURSE_STALE_AFTER_DAYS)} + description={course.startDate} url={course.detailsUrl} color="light" /> diff --git a/src/core/base-layout/components/header/header.tsx b/src/core/base-layout/components/header/header.tsx index 9a538051c..9b8879a8a 100644 --- a/src/core/base-layout/components/header/header.tsx +++ b/src/core/base-layout/components/header/header.tsx @@ -5,9 +5,8 @@ import classNames from 'classnames/bind'; import { usePathname } from 'next/navigation'; import { BurgerMenu } from './burger/burger'; import { NavItem } from './nav-item/nav-item'; -import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/core/const'; +import { ROUTES } from '@/core/const'; import { Course } from '@/entities/course'; -import { getCourseDate } from '@/shared/helpers/getCourseDate'; import { Logo } from '@/shared/ui/logo'; import { MobileView } from '@/widgets/mobile-view'; import { SchoolMenu } from '@/widgets/school-menu'; @@ -103,7 +102,7 @@ export const Header = ({ courses }: HeaderProps) => { key={course.id} icon={course.iconSmall} title={course.title} - description={getCourseDate(course.startDate, COURSE_STALE_AFTER_DAYS)} + description={course.startDate} url={course.detailsUrl} /> ))} diff --git a/src/widgets/mobile-view/ui/mobile-view.tsx b/src/widgets/mobile-view/ui/mobile-view.tsx index 3d87de923..7270f19c5 100644 --- a/src/widgets/mobile-view/ui/mobile-view.tsx +++ b/src/widgets/mobile-view/ui/mobile-view.tsx @@ -1,8 +1,7 @@ import classNames from 'classnames/bind'; import Link from 'next/link'; -import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/core/const'; +import { ROUTES } from '@/core/const'; import { Course } from '@/entities/course'; -import { getCourseDate } from '@/shared/helpers/getCourseDate'; import { Logo } from '@/shared/ui/logo'; import { SchoolMenu } from '@/widgets/school-menu'; import { communityMenuStaticLinks, mentorshipCourses, schoolMenuStaticLinks } from 'data'; @@ -60,7 +59,7 @@ export const MobileView = ({ type, courses }: MobileViewProps) => { key={course.id} icon={course.iconSmall} title={course.title} - description={getCourseDate(course.startDate, COURSE_STALE_AFTER_DAYS)} + description={course.startDate} url={course.detailsUrl} color={color} /> diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx index 5a5dd5d84..cde463564 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx @@ -1,10 +1,8 @@ import { screen } from '@testing-library/react'; import { SchoolMenu } from '../school-menu/school-menu'; -import { COURSE_STALE_AFTER_DAYS } from '@/core/const'; import { Course } from '@/entities/course'; import { mockedCourses } from '@/shared/__tests__/constants'; import { renderWithRouter } from '@/shared/__tests__/utils'; -import { getCourseDate } from '@/shared/helpers/getCourseDate'; import { COURSE_TITLES, schoolMenuStaticLinks } from 'data'; describe('SchoolMenu', () => { @@ -68,7 +66,7 @@ describe('SchoolMenu', () => { ))} @@ -87,7 +85,7 @@ describe('SchoolMenu', () => { @@ -107,7 +105,7 @@ describe('SchoolMenu', () => { ))} @@ -117,8 +115,8 @@ describe('SchoolMenu', () => { const descriptions = screen.getAllByTestId('school-item-description'); expect(descriptions).toHaveLength(6); - expect(descriptions[0]).toHaveTextContent(/tbd/i); - expect(descriptions[3]).toHaveTextContent(/tbd/i); + expect(descriptions[0]).toHaveTextContent(/Jun 24, 2024/i); + expect(descriptions[3]).toHaveTextContent(/Jul 1, 2024/i); }); it('renders correct link for "AWS Fundamentals" and "React JS [mentorshipId]"', () => { @@ -128,7 +126,7 @@ describe('SchoolMenu', () => { ))} From 3f6b668ef53dd09872e6858510ce2691f7f3957e Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sat, 23 Nov 2024 00:09:37 +0200 Subject: [PATCH 17/29] fix: 563 - css property alignment --- src/widgets/school-menu/ui/school-item/school-item.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index ed8352a51..712f749d0 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -59,7 +59,7 @@ align-items: flex-start; .description { - grid-column: 2 /3; + grid-column: 2 / 3; grid-row: 2 / 3; justify-self: flex-start; From fed9d173758e918bb285e409c1a9e5a7d6805b5d Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 12:53:36 +0200 Subject: [PATCH 18/29] fix: 563 - remove important --- src/widgets/school-menu/ui/school-item/school-item.module.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index 712f749d0..72d161d39 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -4,8 +4,6 @@ column-gap: 15px; align-items: center; - opacity: 1 !important; - .title { font-weight: $font-weight-medium; line-height: 20px; From 1938b8212a0de5b2e8a077ee97e8aeaa0c3b04e1 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 12:58:18 +0200 Subject: [PATCH 19/29] refactor: 563 - remove redundant test case --- .../school-menu/ui/school-menu/school-menu.test.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx index cde463564..16bef07a2 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx +++ b/src/widgets/school-menu/ui/school-menu/school-menu.test.tsx @@ -46,17 +46,7 @@ describe('SchoolMenu', () => { expect(screen.getAllByRole('link')).toHaveLength(2); - const links = screen.getAllByRole('link'); - - links.forEach((link) => { - expect(link).toBeInTheDocument(); - }); - - const descriptions = container.getElementsByTagName('small'); - - for (const description of descriptions) { - expect(description).toBeInTheDocument(); - } + expect(container.getElementsByTagName('small')).toHaveLength(2); }); it('renders without crashing and displays "all courses" heading', () => { From 48df3e2352f170b1ed1384095c6c28b8878a455a Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 14:29:50 +0200 Subject: [PATCH 20/29] feat: add desktop menu playwright test --- .../components/header/nav-item/nav-item.tsx | 7 ++++++- src/shared/__tests__/visual/main.spec.ts | 11 +++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/core/base-layout/components/header/nav-item/nav-item.tsx b/src/core/base-layout/components/header/nav-item/nav-item.tsx index fe32ff029..c6de06c85 100644 --- a/src/core/base-layout/components/header/nav-item/nav-item.tsx +++ b/src/core/base-layout/components/header/nav-item/nav-item.tsx @@ -57,7 +57,12 @@ export const NavItem = ({ label, href, children }: NavItemProps) => { }, [pathname]); return ( -
      +
      { await page.getByTestId('burger').click(); await expect(mobileMenu).not.toBeInViewport(); }); + +test('Main page desktop menu', async ({ page }) => { + await page.goto(ROUTES.HOME); + + const elements = await page.getByTestId('menu-item').all(); + + for await (const el of elements) { + await el.hover(); + await takeScreenshot(page, 'Main page desktop - menu open'); + } +}); From 314e8a39bf6e6b9b7b6aca1d5a77384517b226f0 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 14:45:55 +0200 Subject: [PATCH 21/29] feat: update desktop menu test --- src/shared/__tests__/visual/main.spec.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/shared/__tests__/visual/main.spec.ts b/src/shared/__tests__/visual/main.spec.ts index 9f73dbd51..fa94641b9 100644 --- a/src/shared/__tests__/visual/main.spec.ts +++ b/src/shared/__tests__/visual/main.spec.ts @@ -31,10 +31,11 @@ test('Main page mobile', async ({ page }) => { test('Main page desktop menu', async ({ page }) => { await page.goto(ROUTES.HOME); - const elements = await page.getByTestId('menu-item').all(); + const elements = page.getByTestId('menu-item'); + const elementsCount = await elements.count(); - for await (const el of elements) { - await el.hover(); - await takeScreenshot(page, 'Main page desktop - menu open'); + for (let i = 0; i < elementsCount; i++) { + await elements.nth(i).hover(); + await takeScreenshot(page, `Main page desktop - menu open ${i}`); } }); From f4e1ec64e2cf73c75a3317dff45f9282d2d1439c Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 15:02:53 +0200 Subject: [PATCH 22/29] fix: desktop menu test issue --- src/shared/__tests__/visual/main.spec.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/shared/__tests__/visual/main.spec.ts b/src/shared/__tests__/visual/main.spec.ts index fa94641b9..8a1d44a06 100644 --- a/src/shared/__tests__/visual/main.spec.ts +++ b/src/shared/__tests__/visual/main.spec.ts @@ -35,7 +35,8 @@ test('Main page desktop menu', async ({ page }) => { const elementsCount = await elements.count(); for (let i = 0; i < elementsCount; i++) { - await elements.nth(i).hover(); - await takeScreenshot(page, `Main page desktop - menu open ${i}`); + await elements.nth(i).hover({ trial: true }); + await page.waitForTimeout(500); + await takeScreenshot(page, `Main page desktop - menu open ${i + 1}`); } }); From c1f66c24ae83cec3fbfa938e2dd6315d20d14677 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 22:57:02 +0200 Subject: [PATCH 23/29] fix: menu incorrect width on safari issue --- src/shared/__tests__/visual/main.spec.ts | 3 +-- .../school-menu/ui/school-menu/school-menu.module.scss | 9 ++++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/shared/__tests__/visual/main.spec.ts b/src/shared/__tests__/visual/main.spec.ts index 8a1d44a06..a98a197ac 100644 --- a/src/shared/__tests__/visual/main.spec.ts +++ b/src/shared/__tests__/visual/main.spec.ts @@ -35,8 +35,7 @@ test('Main page desktop menu', async ({ page }) => { const elementsCount = await elements.count(); for (let i = 0; i < elementsCount; i++) { - await elements.nth(i).hover({ trial: true }); - await page.waitForTimeout(500); + await elements.nth(i).hover(); await takeScreenshot(page, `Main page desktop - menu open ${i + 1}`); } }); diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index a89423dd0..a95455a10 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -22,14 +22,17 @@ .school-list { display: flex; flex-flow: column wrap; - gap: 19px; - column-gap: 40px; - align-items: baseline; + gap: 19px 40px; + width: max-content; max-height: 280px; list-style-type: none; + &:has(:nth-child(5)) { + width: 512px; + } + @include media-mobile-landscape { column-gap: 10px; max-height: 600px; From c9aa2951166b9395f8c5456d225eeb7c362bdf60 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 2 Dec 2024 23:31:43 +0200 Subject: [PATCH 24/29] refactor: remove redundant style --- src/widgets/school-menu/ui/school-menu/school-menu.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index a95455a10..2835573ac 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -24,7 +24,6 @@ flex-flow: column wrap; gap: 19px 40px; - width: max-content; max-height: 280px; list-style-type: none; From 648830b795c8a934c028ff47ec913d44048bd44d Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sat, 7 Dec 2024 19:03:52 +0200 Subject: [PATCH 25/29] fix: overflow issue --- .../school-menu/ui/school-menu/school-menu.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 2835573ac..1bd26433e 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -30,6 +30,10 @@ &:has(:nth-child(5)) { width: 512px; + + @include media-tablet { + width: unset; + } } @include media-mobile-landscape { From 3090685895387f997e87ec77363dd28bafbf7eb4 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sat, 7 Dec 2024 19:11:36 +0200 Subject: [PATCH 26/29] fix: mobile menu height issue --- src/core/base-layout/components/header/header.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/base-layout/components/header/header.module.scss b/src/core/base-layout/components/header/header.module.scss index 0033401ca..d0d608f8c 100644 --- a/src/core/base-layout/components/header/header.module.scss +++ b/src/core/base-layout/components/header/header.module.scss @@ -92,8 +92,8 @@ width: 100%; height: min-content; - min-height: 100vh; - max-height: 100vh; + min-height: 100dvh; + max-height: 100dvh; margin-top: 0; padding: 4px 24px 28px 16px; From eee1a00d14753c2cceac3617094f138d4739ebb1 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Sat, 14 Dec 2024 00:49:37 +0200 Subject: [PATCH 27/29] fix: 563 - to close menu on nav item click --- .../base-layout/components/header/header.tsx | 22 ++++++------------- src/widgets/mobile-view/ui/mobile-view.tsx | 15 ++++++++----- .../ui/school-item/school-item.tsx | 14 +++++++++--- 3 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/core/base-layout/components/header/header.tsx b/src/core/base-layout/components/header/header.tsx index 9b8879a8a..6ce4881e0 100644 --- a/src/core/base-layout/components/header/header.tsx +++ b/src/core/base-layout/components/header/header.tsx @@ -23,8 +23,6 @@ type HeaderProps = { export const Header = ({ courses }: HeaderProps) => { const [isMenuOpen, setMenuOpen] = useState(false); const [color, setColor] = useState('gray'); - const [hash, setHash] = useState(''); - const [key, setKey] = useState(''); const pathname = usePathname(); // const headerAccentColor = pathname.includes(ROUTES.MENTORSHIP) ? 'blue' : 'gray'; @@ -38,6 +36,10 @@ export const Header = ({ courses }: HeaderProps) => { setMenuOpen((prev) => !prev); }; + const handleMenuClose = () => { + setMenuOpen(false); + }; + useEffect(() => { const listenScrollEvent = () => { const scrollY = window.scrollY; @@ -59,18 +61,8 @@ export const Header = ({ courses }: HeaderProps) => { }, [headerAccentColor]); useEffect(() => { - if (typeof window !== 'undefined') { - setHash(window.location.hash); - setKey(window.location.href); - } - }, [pathname]); - - useEffect(() => { - if (location.pathname) { - setMenuOpen(false); - setColor(headerAccentColor); - } - }, [key, hash, pathname, headerAccentColor]); + setColor(headerAccentColor); + }, [pathname, headerAccentColor]); return (