Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

613-feat: Update communication section #616

Merged
merged 5 commits into from
Oct 25, 2024
Merged

613-feat: Update communication section #616

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2720b54
feat: 613 - update communication section for the js-en course
KristiBo Oct 21, 2024
a298e51
fix: 613 - update a broken test
KristiBo Oct 21, 2024
c242ef5
fix: 613 - merge branch 'main'
KristiBo Oct 21, 2024
9931444
refactor: 613 - after review
KristiBo Oct 24, 2024
3b6f5da
refactor: 613 - after review
KristiBo Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dev-data/communication.data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
1 change: 1 addition & 0 deletions dev-data/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
8 changes: 8 additions & 0 deletions dev-data/widget-communication.data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -17,10 +21,14 @@ export const communicationText = {
ru: {
title: 'ΠžΠ±Ρ‰Π΅Π½ΠΈΠ΅',
subTitle: 'Дискорд β€” основной способ общСния Π² RS School',
subTitleJs: '',
firstParagraphFirstHalf: 'Π’ΠΎΡ‚ ссылка Π½Π° ',
firstParagraphFirstHalfJs: '',
discordLink: 'Дискорд сСрвСр курса',
discordLinkJs: '',
firstParagraphSecondHalf:
', Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ послСдниС новости, Π·Π°Π΄Π°Ρ‚ΡŒ вопросы ΠΈ ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ со студСнтами.',
firstParagraphSecondHalfJs: '',
KristiBo marked this conversation as resolved.
Show resolved Hide resolved
discordNote: 'Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… странах для доступа ΠΊ Discord трСбуСтся использованиС VPN. Если Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ трудности с ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π΄Ρ‘ΠΆΠ½Ρ‹ΠΉ VPN-сСрвис.',
secondParagraphFirstHalf: 'Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΊΠ°Π½Π°Π»Ρ‹ Π² ',
telegramLink: 'Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ',
Expand Down
51 changes: 25 additions & 26 deletions src/widgets/communication/ui/communication.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
KristiBo marked this conversation as resolved.
Show resolved Hide resolved
.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;
}
}
}
2 changes: 1 addition & 1 deletion src/widgets/communication/ui/communication.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('Communication section', () => {
'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);
const linkElement = screen.getByTestId('discord-link');

expect(linkElement).toBeVisible();
expect(linkElement.getAttribute('href')).toMatch(link);
Expand Down
33 changes: 25 additions & 8 deletions src/widgets/communication/ui/communication.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -26,9 +27,13 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
const {
title,
subTitle,
subTitleJs,
firstParagraphFirstHalf,
firstParagraphFirstHalfJs,
discordLink,
discordLinkJs,
firstParagraphSecondHalf,
firstParagraphSecondHalfJs,
secondParagraphFirstHalf,
telegramLink,
secondParagraphSecondHalf,
Expand All @@ -38,6 +43,8 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
discordNote,
} = communicationText[lang];

const isJsEnCourse = courseName === 'js / front-end en';

return (
<section className={cx('container')}>
<article className={cx('content', 'communication-content')}>
Expand All @@ -47,26 +54,36 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
<Image src={discordLogo} alt="discord logo" />
</figure>
<div>
<Subtitle>{subTitle}</Subtitle>
<Paragraph className={cx('communication-paragraph')}>
{firstParagraphFirstHalf}
<LinkCustom href={DISCORD_LINKS[courseName]} external>
{discordLink}
<Subtitle className={cx('communication-subtitle')}>
{isJsEnCourse ? subTitleJs : subTitle}
Copy link
Member

@Quiddlee Quiddlee Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please, move all the conditions above the return statement

const courseSubTitle = isJsEnCourse ? subTitleJs : subTitle;
Suggested change
{isJsEnCourse ? subTitleJs : subTitle}
{courseSubTitle}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

</Subtitle>
<Paragraph className={isJsEnCourse ? cx('communication-paragraph') : undefined}>
{!isJsEnCourse && firstParagraphFirstHalf}
<LinkCustom href={DISCORD_LINKS[courseName]} external data-testid="discord-link">
{isJsEnCourse ? discordLinkJs : discordLink}
</LinkCustom>
{firstParagraphSecondHalf}
{isJsEnCourse ? firstParagraphFirstHalfJs : firstParagraphSecondHalf}
</Paragraph>
{isJsEnCourse && (
<Paragraph>
<LinkCustom href={JS_EN_TELEGRAM_CHAT_LINK} external>
{telegramLink}
</LinkCustom>
{firstParagraphSecondHalfJs}
</Paragraph>
)}
<Paragraph>
&#9888;&#65039;
{discordNote}
</Paragraph>
<Paragraph className={cx('communication-paragraph')}>
<Paragraph>
{secondParagraphFirstHalf}
<LinkCustom href={RS_DOCS_TELEGRAM_CHATS_LINK} external>
{telegramLink}
</LinkCustom>
{secondParagraphSecondHalf}
</Paragraph>
<Paragraph className={cx('communication-paragraph')}>
<Paragraph>
KristiBo marked this conversation as resolved.
Show resolved Hide resolved
{thirdParagraphFirstHalf}
<LinkCustom href={RS_DOCS_COMMUNICATION_LINK} external>
{rsDocsLink}
Expand Down
Loading