From 2720b543b5c57daeb0ecbf20f6192e440240a869 Mon Sep 17 00:00:00 2001 From: KristiBo Date: Mon, 21 Oct 2024 23:21:33 +0300 Subject: [PATCH 1/4] feat: 613 - update communication section for the js-en course --- dev-data/communication.data.ts | 1 + dev-data/index.ts | 1 + dev-data/widget-communication.data.ts | 8 +++ .../ui/communication.module.scss | 51 +++++++++---------- .../communication/ui/communication.tsx | 49 ++++++++++++++---- 5 files changed, 74 insertions(+), 36 deletions(-) diff --git a/dev-data/communication.data.ts b/dev-data/communication.data.ts index 9808b7a59..1958e1fdd 100644 --- a/dev-data/communication.data.ts +++ b/dev-data/communication.data.ts @@ -1,5 +1,6 @@ export const RS_DOCS_COMMUNICATION_LINK = 'https://docs.rs.school/#/rs-school-chats'; export const RS_DOCS_TELEGRAM_CHATS_LINK = 'https://docs.rs.school/#/rs-school-chats?id=telegram'; +export const JS_EN_TELEGRAM_CHAT_LINK = 'https://t.me/RSS_EN'; export const DISCORD_LINKS = { 'js / front-end ru': 'https://discord.com/invite/QvEYg7EaQ4', diff --git a/dev-data/index.ts b/dev-data/index.ts index f3dec9916..ddd11f5d0 100644 --- a/dev-data/index.ts +++ b/dev-data/index.ts @@ -10,6 +10,7 @@ export { type CourseNames, contentMap } from './training-program.data'; export { type CourseNamesChannels, DISCORD_LINKS, + JS_EN_TELEGRAM_CHAT_LINK, RS_DOCS_COMMUNICATION_LINK, RS_DOCS_TELEGRAM_CHATS_LINK, } from './communication.data'; diff --git a/dev-data/widget-communication.data.ts b/dev-data/widget-communication.data.ts index 0f6057a8d..cf8a22246 100644 --- a/dev-data/widget-communication.data.ts +++ b/dev-data/widget-communication.data.ts @@ -2,9 +2,13 @@ export const communicationText = { en: { title: 'Communication', subTitle: 'Discord is the main communication channel in RS School', + subTitleJs: 'RS School uses two main communication channels:', firstParagraphFirstHalf: 'Here is link for the ', + firstParagraphFirstHalfJs: ': Join the Discord server to see the latest news and chat with students.', discordLink: 'course Discord server', + discordLinkJs: 'Discord', firstParagraphSecondHalf: ', where you can see latest news and chat with students.', + firstParagraphSecondHalfJs: ': You can also join the official Telegram channel for updates and discussions.', discordNote: 'Attention! In some countries, access to Discord requires the use of a VPN. If you are having trouble connecting, please try using a reliable VPN service.', secondParagraphFirstHalf: 'There are channels in ', telegramLink: 'Telegram', @@ -17,10 +21,14 @@ export const communicationText = { ru: { title: 'Общение', subTitle: 'Дискорд — основной способ общения в RS School', + subTitleJs: '', firstParagraphFirstHalf: 'Вот ссылка на ', + firstParagraphFirstHalfJs: '', discordLink: 'Дискорд сервер курса', + discordLinkJs: '', firstParagraphSecondHalf: ', где вы можете посмотреть последние новости, задать вопросы и общаться со студентами.', + firstParagraphSecondHalfJs: '', discordNote: 'Внимание! В некоторых странах для доступа к Discord требуется использование VPN. Если у вас возникают трудности с подключением, попробуйте использовать надёжный VPN-сервис.', secondParagraphFirstHalf: 'Также есть каналы в ', telegramLink: 'Телеграм', diff --git a/src/widgets/communication/ui/communication.module.scss b/src/widgets/communication/ui/communication.module.scss index 9fe032e5d..b5ab61592 100644 --- a/src/widgets/communication/ui/communication.module.scss +++ b/src/widgets/communication/ui/communication.module.scss @@ -1,39 +1,38 @@ .communication-content { display: flex; flex-direction: column; - gap: 26px; -} -.communication-wrapper { - display: flex; - flex-direction: row; - gap: 100px; - align-items: center; - justify-content: flex-start; + .communication-wrapper { + display: flex; + flex-direction: row; + gap: 100px; + align-items: center; - @include media-tablet-large { - flex-direction: column; - gap: 40px; - align-items: flex-start; + @include media-tablet-large { + flex-direction: column; + gap: 40px; + align-items: flex-start; + } } -} -.communication-paragraph { - padding-top: 5px; -} + .communication-subtitle, + .communication-paragraph { + padding-bottom: 5px; + } -.discord-logo-wrapper { - flex-shrink: 0; - align-self: center; + .discord-logo-wrapper { + flex-shrink: 0; + align-self: center; - width: 250px; - padding: 30px; + width: 250px; + padding: 30px; - background-color: hsl(234.9deg 85.6% 64.7%); - border-radius: 30px; + background-color: hsl(234.9deg 85.6% 64.7%); + border-radius: 30px; - @include media-tablet { - width: 150px; - padding: 15px; + @include media-tablet { + width: 150px; + padding: 15px; + } } } diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx index 133defc8e..f8de1bbe3 100644 --- a/src/widgets/communication/ui/communication.tsx +++ b/src/widgets/communication/ui/communication.tsx @@ -8,6 +8,7 @@ import { WidgetTitle } from '@/shared/ui/widget-title'; import { CourseNamesChannels, DISCORD_LINKS, + JS_EN_TELEGRAM_CHAT_LINK, RS_DOCS_COMMUNICATION_LINK, RS_DOCS_TELEGRAM_CHATS_LINK, communicationText, @@ -17,6 +18,8 @@ import styles from './communication.module.scss'; const cx = classNames.bind(styles); +const JS_EN_COURSE = 'js / front-end en'; + type CommunicationProps = { courseName: CourseNamesChannels; lang?: 'ru' | 'en'; @@ -26,9 +29,13 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = const { title, subTitle, + subTitleJs, firstParagraphFirstHalf, + firstParagraphFirstHalfJs, discordLink, + discordLinkJs, firstParagraphSecondHalf, + firstParagraphSecondHalfJs, secondParagraphFirstHalf, telegramLink, secondParagraphSecondHalf, @@ -47,26 +54,48 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = discord logo
- {subTitle} - - {firstParagraphFirstHalf} - - {discordLink} - - {firstParagraphSecondHalf} - + {courseName === JS_EN_COURSE + ? ( + <> + {subTitleJs} + + + {discordLinkJs} + + {firstParagraphFirstHalfJs} + + + + {telegramLink} + + {firstParagraphSecondHalfJs} + + + ) + : ( + <> + {subTitle} + + {firstParagraphFirstHalf} + + {discordLink} + + {firstParagraphSecondHalf} + + + )} ⚠️ {discordNote} - + {secondParagraphFirstHalf} {telegramLink} {secondParagraphSecondHalf} - + {thirdParagraphFirstHalf} {rsDocsLink} From a298e51beea1bf19281490803fb1b806a31ecd86 Mon Sep 17 00:00:00 2001 From: KristiBo Date: Mon, 21 Oct 2024 23:36:21 +0300 Subject: [PATCH 2/4] fix: 613 - update a broken test --- src/widgets/communication/ui/communication.test.tsx | 2 +- src/widgets/communication/ui/communication.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/widgets/communication/ui/communication.test.tsx b/src/widgets/communication/ui/communication.test.tsx index e8eaa4636..09bdd1f02 100644 --- a/src/widgets/communication/ui/communication.test.tsx +++ b/src/widgets/communication/ui/communication.test.tsx @@ -43,7 +43,7 @@ describe('Communication section', () => { 'should render correct link of %s course', (courseName, link) => { renderWithRouter(); - const linkElement = screen.getByText(/course discord server/i); + const linkElement = screen.getByTestId('discord-link'); expect(linkElement).toBeVisible(); expect(linkElement.getAttribute('href')).toMatch(link); diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx index f8de1bbe3..934c790bb 100644 --- a/src/widgets/communication/ui/communication.tsx +++ b/src/widgets/communication/ui/communication.tsx @@ -59,7 +59,7 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = <> {subTitleJs} - + {discordLinkJs} {firstParagraphFirstHalfJs} @@ -77,7 +77,7 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = {subTitle} {firstParagraphFirstHalf} - + {discordLink} {firstParagraphSecondHalf} From 993144488a56a01e32421e3e383da57d6fc2a90d Mon Sep 17 00:00:00 2001 From: KristiBo Date: Thu, 24 Oct 2024 16:55:03 +0300 Subject: [PATCH 3/4] refactor: 613 - after review --- .../communication/ui/communication.tsx | 52 +++++++------------ 1 file changed, 20 insertions(+), 32 deletions(-) diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx index 934c790bb..2234e0595 100644 --- a/src/widgets/communication/ui/communication.tsx +++ b/src/widgets/communication/ui/communication.tsx @@ -18,8 +18,6 @@ import styles from './communication.module.scss'; const cx = classNames.bind(styles); -const JS_EN_COURSE = 'js / front-end en'; - type CommunicationProps = { courseName: CourseNamesChannels; lang?: 'ru' | 'en'; @@ -45,6 +43,8 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = discordNote, } = communicationText[lang]; + const isJsEnCourse = courseName === 'js / front-end en'; + return (
@@ -54,36 +54,24 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = discord logo
- {courseName === JS_EN_COURSE - ? ( - <> - {subTitleJs} - - - {discordLinkJs} - - {firstParagraphFirstHalfJs} - - - - {telegramLink} - - {firstParagraphSecondHalfJs} - - - ) - : ( - <> - {subTitle} - - {firstParagraphFirstHalf} - - {discordLink} - - {firstParagraphSecondHalf} - - - )} + + {isJsEnCourse ? subTitleJs : subTitle} + + + {!isJsEnCourse && firstParagraphFirstHalf} + + {isJsEnCourse ? discordLinkJs : discordLink} + + {isJsEnCourse ? firstParagraphFirstHalfJs : firstParagraphSecondHalf} + + {isJsEnCourse && ( + + + {telegramLink} + + {firstParagraphSecondHalfJs} + + )} ⚠️ {discordNote} From 3b6f5dac9ea0fa5b7fd868c9290c19cdb6858fa2 Mon Sep 17 00:00:00 2001 From: KristiBo Date: Fri, 25 Oct 2024 11:42:25 +0300 Subject: [PATCH 4/4] refactor: 613 - after review --- dev-data/widget-communication.data.ts | 8 +++---- .../communication/ui/communication.tsx | 21 ++++++++++++------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/dev-data/widget-communication.data.ts b/dev-data/widget-communication.data.ts index cf8a22246..7d88a40f8 100644 --- a/dev-data/widget-communication.data.ts +++ b/dev-data/widget-communication.data.ts @@ -4,11 +4,11 @@ export const communicationText = { subTitle: 'Discord is the main communication channel in RS School', subTitleJs: 'RS School uses two main communication channels:', firstParagraphFirstHalf: 'Here is link for the ', - firstParagraphFirstHalfJs: ': Join the Discord server to see the latest news and chat with students.', + discordParagraphTextJs: ': Join the Discord server to see the latest news and chat with students.', discordLink: 'course Discord server', discordLinkJs: 'Discord', firstParagraphSecondHalf: ', where you can see latest news and chat with students.', - firstParagraphSecondHalfJs: ': You can also join the official Telegram channel for updates and discussions.', + telegramParagraphTextJs: ': You can also join the official Telegram channel for updates and discussions.', discordNote: 'Attention! In some countries, access to Discord requires the use of a VPN. If you are having trouble connecting, please try using a reliable VPN service.', secondParagraphFirstHalf: 'There are channels in ', telegramLink: 'Telegram', @@ -23,12 +23,12 @@ export const communicationText = { subTitle: 'Дискорд — основной способ общения в RS School', subTitleJs: '', firstParagraphFirstHalf: 'Вот ссылка на ', - firstParagraphFirstHalfJs: '', + discordParagraphTextJs: '', discordLink: 'Дискорд сервер курса', discordLinkJs: '', firstParagraphSecondHalf: ', где вы можете посмотреть последние новости, задать вопросы и общаться со студентами.', - firstParagraphSecondHalfJs: '', + telegramParagraphTextJs: '', discordNote: 'Внимание! В некоторых странах для доступа к Discord требуется использование VPN. Если у вас возникают трудности с подключением, попробуйте использовать надёжный VPN-сервис.', secondParagraphFirstHalf: 'Также есть каналы в ', telegramLink: 'Телеграм', diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx index 2234e0595..98529dc24 100644 --- a/src/widgets/communication/ui/communication.tsx +++ b/src/widgets/communication/ui/communication.tsx @@ -29,11 +29,11 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = subTitle, subTitleJs, firstParagraphFirstHalf, - firstParagraphFirstHalfJs, + discordParagraphTextJs, discordLink, discordLinkJs, firstParagraphSecondHalf, - firstParagraphSecondHalfJs, + telegramParagraphTextJs, secondParagraphFirstHalf, telegramLink, secondParagraphSecondHalf, @@ -44,6 +44,11 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = } = communicationText[lang]; const isJsEnCourse = courseName === 'js / front-end en'; + const courseSubTitle = isJsEnCourse ? subTitleJs : subTitle; + const paragraphClassName = isJsEnCourse ? cx('communication-paragraph') : undefined; + const courseDiscordLink = isJsEnCourse ? discordLinkJs : discordLink; + const discordFirstHalfText = !isJsEnCourse ? firstParagraphFirstHalf : null; + const discordSecondHalfText = isJsEnCourse ? discordParagraphTextJs : firstParagraphSecondHalf; return (
@@ -55,21 +60,21 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
- {isJsEnCourse ? subTitleJs : subTitle} + {courseSubTitle} - - {!isJsEnCourse && firstParagraphFirstHalf} + + {discordFirstHalfText} - {isJsEnCourse ? discordLinkJs : discordLink} + {courseDiscordLink} - {isJsEnCourse ? firstParagraphFirstHalfJs : firstParagraphSecondHalf} + {discordSecondHalfText} {isJsEnCourse && ( {telegramLink} - {firstParagraphSecondHalfJs} + {telegramParagraphTextJs} )}