Merge pull request rolling-scopes#536 from rolling-scopes/refactor/52…

…1-fsd-widget-communication 521-refactor: Fsd widget communication
ansivgit · Sep 25, 2024 · 2b4883f · 2b4883f
2 parents 9321381 + 22eeaf0
commit 2b4883f
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 140 deletions.
diff --git a/dev-data/index.ts b/dev-data/index.ts
@@ -13,6 +13,7 @@ export { awsDev } from './awsDev.data';
 export { awsDevPath } from './aws-dev-path.data';
 export { awsDevops } from './aws-devops.data';
 export { awsFundamentals } from './awsFundamentals.data';
+export { communicationText } from './widget-communication.data';
 export { contentMapAbout } from './about.data';
 export { courseDataMap } from './required.data';
 export { courses } from './courses.data';

diff --git a/dev-data/widget-communication.data.ts b/dev-data/widget-communication.data.ts
@@ -0,0 +1,31 @@
+export const communicationText = {
+  en: {
+    title: 'Communication',
+    subTitle: 'Discord is the main communication channel in RS School',
+    firstParagraphFirstHalf: 'Here is link for the ',
+    discordLink: 'course Discord server',
+    firstParagraphSecondHalf: ', where you can see latest news and chat with students.',
+    secondParagraphFirstHalf: 'There are channels in ',
+    telegramLink: 'Telegram',
+    secondParagraphSecondHalf:
+      ' for discussing events related to your location. For example, offline lectures or just informal chats among students from the same location.',
+    thirdParagraphFirstHalf: 'Please read the information about communication in RS School in the ',
+    rsDocsLink: 'RS Docs',
+    thirdParagraphSecondHalf: ', where you can find rules, descriptions of channels, FAQ.',
+  },
+  ru: {
+    title: 'Общение',
+    subTitle: 'Дискорд — основной способ общения в RS School',
+    firstParagraphFirstHalf: 'Вот ссылка на ',
+    discordLink: 'Дискорд сервер курса',
+    firstParagraphSecondHalf:
+      ', где вы можете посмотреть последние новости, задать вопросы и общаться со студентами.',
+    secondParagraphFirstHalf: 'Также есть каналы в ',
+    telegramLink: 'Телеграм',
+    secondParagraphSecondHalf:
+      ' для обсуждения мероприятий, относящихся к вашему городу. Например, офлайн лекции или просто для общения студентов из одной локации.',
+    thirdParagraphFirstHalf: 'Обязательно прочитайте информацию об общении в RS School в ',
+    rsDocsLink: 'RS Docs',
+    thirdParagraphSecondHalf: ', где вы можете найти правила, описание каналов, FAQ.',
+  },
+};
diff --git a/src/widgets/communication/communication.test.tsx b/src/widgets/communication/communication.test.tsx
diff --git a/src/widgets/communication/ui/communication.module.scss b/src/widgets/communication/ui/communication.module.scss
@@ -0,0 +1,39 @@
+.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;
+
+  @include media-tablet-large {
+    flex-direction: column;
+    gap: 40px;
+    align-items: flex-start;
+  }
+}
+
+.communication-paragraph {
+  padding-top: 5px;
+}
+
+.discord-logo-wrapper {
+  flex-shrink: 0;
+  align-self: center;
+
+  width: 250px;
+  padding: 30px;
+
+  background-color: hsl(234.9deg 85.6% 64.7%);
+  border-radius: 30px;
+
+  @include media-tablet {
+    width: 150px;
+    padding: 15px;
+  }
+}
diff --git a/src/widgets/communication/ui/communication.scss b/src/widgets/communication/ui/communication.scss
diff --git a/src/widgets/communication/ui/communication.test.tsx b/src/widgets/communication/ui/communication.test.tsx
@@ -0,0 +1,53 @@
+import { cleanup, screen } from '@testing-library/react';
+import { Communication } from './communication';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+import { DISCORD_LINKS, communicationText } from 'data';
+
+describe('Communication section', () => {
+  it.each([
+    {
+      languageProp: undefined,
+      texts: communicationText.en,
+    },
+    {
+      languageProp: 'en',
+      texts: communicationText.en,
+    },
+    {
+      languageProp: 'ru',
+      texts: communicationText.ru,
+    },
+  ])(
+    'should render component correctly with $languageProp language prop',
+    ({ languageProp, texts }) => {
+      const firstCourse = Object.keys(DISCORD_LINKS)[0] as keyof typeof DISCORD_LINKS;
+
+      const { title, subTitle, firstParagraphFirstHalf, discordLink } = texts;
+
+      renderWithRouter(<Communication courseName={firstCourse} lang={languageProp as 'en' | 'ru' | undefined} />);
+      const titleElement = screen.getByText(title);
+      const subtitleElement = screen.getByText(subTitle);
+      const firstParagraphElement = screen.getByText(`${firstParagraphFirstHalf}`, { exact: false });
+      const linkElement = screen.getByText(discordLink);
+
+      expect(titleElement).toBeVisible();
+      expect(subtitleElement).toBeVisible();
+      expect(firstParagraphElement).toBeVisible();
+      expect(linkElement).toBeVisible();
+      expect(linkElement.getAttribute('href')).toMatch(DISCORD_LINKS[firstCourse]);
+      cleanup();
+    },
+  );
+
+  it.each(Object.entries(DISCORD_LINKS))(
+    'should render correct link of %s course',
+    (courseName, link) => {
+      renderWithRouter(<Communication courseName={courseName as keyof typeof DISCORD_LINKS} />);
+      const linkElement = screen.getByText(/course discord server/i);
+
+      expect(linkElement).toBeVisible();
+      expect(linkElement.getAttribute('href')).toMatch(link);
+      cleanup();
+    },
+  );
+});
diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx
@@ -1,5 +1,6 @@
-/* eslint-disable @stylistic/jsx-one-expression-per-line */
-import { DiscordLogo } from '@/shared/icons/discord-logo';
+import classNames from 'classnames/bind';
+import discordLogo from '@/shared/assets/svg/discord-logo.svg';
+import { Image } from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
@@ -9,81 +10,63 @@ import {
   DISCORD_LINKS,
   RS_DOCS_COMMUNICATION_LINK,
   RS_DOCS_TELEGRAM_CHATS_LINK,
+  communicationText,
 } from 'data';
 
-import './communication.scss';
+import styles from './communication.module.scss';
 
-interface RequiredProps {
+const cx = classNames.bind(styles);
+
+type CommunicationProps = {
   courseName: CourseNamesChannels;
   lang?: 'ru' | 'en';
-}
-
-const localizedContent = {
-  en: {
-    title: 'Communication',
-    subTitle: 'Discord is the main communication channel in RS School',
-    firstParagraphFirstHalf: 'Here is link for the',
-    discordLink: 'course Discord server',
-    firstParagraphSecondHalf: ', where you can see latest news and chat with students.',
-    secondParagraphFirstHalf: 'There are channels in',
-    telegramLink: 'Telegram',
-    secondParagraphSecondHalf:
-      ' for discussing events related to your location. For example, offline lectures or just informal chats among students from the same location.',
-    thirdParagraphFirstHalf: 'Please read the information about communication in RS School in the',
-    rsDocsLink: 'RS Docs',
-    thirdParagraphSecondHalf: ', where you can find rules, descriptions of channels, FAQ.',
-  },
-  ru: {
-    title: 'Общение',
-    subTitle: 'Дискорд — основной способ общения в RS School',
-    firstParagraphFirstHalf: 'Вот ссылка на',
-    discordLink: 'Дискорд сервер курса',
-    firstParagraphSecondHalf:
-      ', где вы можете посмотреть последние новости, задать вопросы и общаться со студентами.',
-    secondParagraphFirstHalf: 'Также есть каналы в',
-    telegramLink: 'Телеграм',
-    secondParagraphSecondHalf:
-      ' для обсуждения мероприятий, относящихся к вашему городу. Например, офлайн лекции или просто для общения студентов из одной локации.',
-    thirdParagraphFirstHalf: 'Обязательно прочитайте информацию об общении в RS School в',
-    rsDocsLink: 'RS Docs',
-    thirdParagraphSecondHalf: ', где вы можете найти правила, описание каналов, FAQ.',
-  },
 };
 
-export const Communication = ({ courseName, lang = 'en' }: RequiredProps) => {
+export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) => {
+  const {
+    title,
+    subTitle,
+    firstParagraphFirstHalf,
+    discordLink,
+    firstParagraphSecondHalf,
+    secondParagraphFirstHalf,
+    telegramLink,
+    secondParagraphSecondHalf,
+    thirdParagraphFirstHalf,
+    rsDocsLink,
+    thirdParagraphSecondHalf,
+  } = communicationText[lang];
+
   return (
-    <section className="communication container">
-      <article className="communication content info-wrapper">
-        <WidgetTitle mods="asterisk">{localizedContent[lang].title}</WidgetTitle>
-        <div className="column-2">
-          <figure className="disclogo-wrapper">
-            <DiscordLogo />
+    <section className={cx('container')}>
+      <article className={cx('content', 'communication-content')}>
+        <WidgetTitle mods="asterisk">{title}</WidgetTitle>
+        <div className={cx('communication-wrapper')}>
+          <figure className={cx('discord-logo-wrapper')}>
+            <Image src={discordLogo} alt="discord logo" />
           </figure>
           <div>
-            <Subtitle>{localizedContent[lang].subTitle}</Subtitle>
-            <Paragraph className="communication-paragraph">
-              {localizedContent[lang].firstParagraphFirstHalf}{' '}
+            <Subtitle>{subTitle}</Subtitle>
+            <Paragraph className={cx('communication-paragraph')}>
+              {firstParagraphFirstHalf}
               <LinkCustom href={DISCORD_LINKS[courseName]} external>
-                {localizedContent[lang].discordLink}
+                {discordLink}
               </LinkCustom>
-              {localizedContent[lang].firstParagraphSecondHalf}
+              {firstParagraphSecondHalf}
             </Paragraph>
-            <Paragraph className="communication-paragraph">
-              {localizedContent[lang].secondParagraphFirstHalf}{' '}
-              <LinkCustom
-                href={RS_DOCS_TELEGRAM_CHATS_LINK}
-                external
-              >
-                {localizedContent[lang].telegramLink}
+            <Paragraph className={cx('communication-paragraph')}>
+              {secondParagraphFirstHalf}
+              <LinkCustom href={RS_DOCS_TELEGRAM_CHATS_LINK} external>
+                {telegramLink}
               </LinkCustom>
-              {localizedContent[lang].secondParagraphSecondHalf}
+              {secondParagraphSecondHalf}
             </Paragraph>
-            <Paragraph className="communication-paragraph">
-              {localizedContent[lang].thirdParagraphFirstHalf}{' '}
+            <Paragraph className={cx('communication-paragraph')}>
+              {thirdParagraphFirstHalf}
               <LinkCustom href={RS_DOCS_COMMUNICATION_LINK} external>
-                {localizedContent[lang].rsDocsLink}
+                {rsDocsLink}
               </LinkCustom>
-              {localizedContent[lang].thirdParagraphSecondHalf}
+              {thirdParagraphSecondHalf}
             </Paragraph>
           </div>
         </div>