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 3 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
49 changes: 39 additions & 10 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 @@ -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';
Expand All @@ -26,9 +29,13 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
const {
title,
subTitle,
subTitleJs,
firstParagraphFirstHalf,
firstParagraphFirstHalfJs,
discordLink,
discordLinkJs,
firstParagraphSecondHalf,
firstParagraphSecondHalfJs,
secondParagraphFirstHalf,
telegramLink,
secondParagraphSecondHalf,
Expand All @@ -47,26 +54,48 @@ 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}
</LinkCustom>
{firstParagraphSecondHalf}
</Paragraph>
{courseName === JS_EN_COURSE
KristiBo marked this conversation as resolved.
Show resolved Hide resolved
? (
<>
<Subtitle className={cx('communication-subtitle')}>{subTitleJs}</Subtitle>
<Paragraph className={cx('communication-paragraph')}>
<LinkCustom href={DISCORD_LINKS[courseName]} external data-testid="discord-link">
{discordLinkJs}
</LinkCustom>
{firstParagraphFirstHalfJs}
</Paragraph>
<Paragraph>
<LinkCustom href={JS_EN_TELEGRAM_CHAT_LINK} external>
{telegramLink}
</LinkCustom>
{firstParagraphSecondHalfJs}
</Paragraph>
</>
)
: (
<>
<Subtitle className={cx('communication-subtitle')}>{subTitle}</Subtitle>
<Paragraph>
{firstParagraphFirstHalf}
<LinkCustom href={DISCORD_LINKS[courseName]} external data-testid="discord-link">
{discordLink}
</LinkCustom>
{firstParagraphSecondHalf}
</Paragraph>
</>
)}
KristiBo marked this conversation as resolved.
Show resolved Hide resolved
<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