DRAFT 484-fix: Course pages info duplication

dev-data/about-course.data.tsx

@@ -5,14 +5,16 @@ import paperIcon from '@/shared/assets/icons/paper-icon.webp';
 import personIcon from '@/shared/assets/icons/person-icon.webp';
 import planetIcon from '@/shared/assets/icons/planet.webp';
 import {
+  GITHUB_LINK,
   REGISTRATION_WILL_OPEN_SOON,
   REGISTRATION_WILL_OPEN_SOON_RU,
   ROUTES,
 } from '@/shared/constants';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { List } from '@/shared/ui/list';
+import { Paragraph } from '@/shared/ui/paragraph';
 import type { AboutCourseInfo } from 'data';
-import { COURSE_TITLES, CourseNamesChannels, DISCORD_LINKS } from 'data';
+import { COURSE_TITLES, CourseNamesChannels, DISCORD_LINKS, communityGroups } from 'data';
 
 type ContentMap = {
   [key in CourseNamesChannels]: AboutCourseInfo[];
@@ -38,6 +40,31 @@ const preSchoolIntro = {
     'Подготовительный этап поможет тем, кто мало знаком или совсем не знаком с программированием и хотел бы впоследствии учиться на основном курсе «JavaScript/Front-end».',
 };
 
+const youtubeHref = communityGroups.find((sosial) => sosial.title === 'YouTube EN')?.href;
+const infoMaterialsEn = (
+  <Paragraph>
+    All materials are publicly available on the
+    {' '}
+    {youtubeHref && (
+      <>
+        <LinkCustom
+          href={youtubeHref}
+          external
+        >
+          YouTube
+        </LinkCustom>
+        {' '}
+        channel and
+        {' '}
+      </>
+    )}
+    <LinkCustom href={GITHUB_LINK} external>
+      GitHub
+    </LinkCustom>
+    .
+  </Paragraph>
+);
+
 export const introLocalizedContent = {
   [COURSE_TITLES.JS_PRESCHOOL_RU]: preSchoolIntro,
   [COURSE_TITLES.JS_EN]: enIntro,
@@ -72,28 +99,6 @@ const listData = {
       },
     ],
   ],
-  reactEn: [
-    [
-      {
-        id: 1,
-        text: 'School ',
-        title: 'documentation',
-        link: 'https://docs.rs.school',
-      },
-    ],
-    'All materials are publicly available on the YouTube channel and GitHub',
-  ],
-  reactRu: [
-    [
-      {
-        id: 1,
-        text: '',
-        title: 'Документация школы',
-        link: 'https://docs.rs.school',
-      },
-    ],
-    'Все материалы находятся в открытом доступе на YouTube и GitHub.Также предлагаем ознакомиться с конспектом первого этапа обучения.',
-  ],
 };
 
 const angularNodejsAwsFundamentals: (course: string) => AboutCourseInfo[] = () => [
@@ -106,7 +111,7 @@ const angularNodejsAwsFundamentals: (course: string) => AboutCourseInfo[] = () =
   {
     id: 2,
     title: 'Materials',
-    info: 'All materials are publicly available on the YouTube channel and GitHub',
+    info: infoMaterialsEn,
     icon: paperIcon,
   },
   {
@@ -220,8 +225,7 @@ const reactEn: AboutCourseInfo[] = javaScriptEN().map((item) => {
     return {
       ...item,
       title: 'Materials',
-      info: <List data={listData.reactEn} size="compact" />,
-      icon: paperIcon,
+      info: infoMaterialsEn,
     };
   }
   if (item.id === 5) {

dev-data/index.ts

@@ -59,6 +59,7 @@ export { preschoolFaqData } from './faq.data';
 export { principleCards } from './principle-cards.data';
 export { requirementsData } from './requirements.data';
 export { rsInNumbers } from './rs-in-numbers.data';
+export { scheduleDocumentationLinks } from './schedule-and-documentation.data';
 export { sliderPhotos } from './slider-photos.data';
 export { studyPath } from './study-path.data';
 export { videoTitleLocalized } from './about-video.data';

dev-data/schedule-and-documentation.data.tsx

@@ -0,0 +1,57 @@
+import { ReactElement } from 'react';
+
+import { DOCUMENTATION_LINKS } from '@/shared/constants';
+import { Language } from '@/shared/types';
+import { LinkCustom } from '@/shared/ui/link-custom';
+import { Paragraph } from '@/shared/ui/paragraph';
+
+interface ScheduleText {
+  schedule: string;
+  documentation: string;
+  and: string;
+  link: string;
+}
+const TEXT: Record<Language, ScheduleText> = {
+  ru: {
+    schedule: 'Расписание курса доступно - ',
+    documentation: ', а документацию школы можно найти - ',
+    link: 'здесь',
+    and: 'и',
+  },
+  en: {
+    schedule: 'The course schedule is available - ',
+    documentation: ', and the school documentation can be found - ',
+    link: 'here',
+    and: 'and',
+  },
+};
+
+export const scheduleDocumentationLinks = (
+  language: Language, scheduleUrl: string[] | null,
+): ReactElement => {
+  const text = TEXT[language];
+  const docLink = DOCUMENTATION_LINKS[language];
+
+  const renderScheduleLinks = () => {
+    return scheduleUrl?.map((link, index) => (
+      <>
+        <LinkCustom key={link} href={link} variant="textLink" external>
+          {`${text.link}`}
+        </LinkCustom>
+        {index < scheduleUrl.length - 1 && ` ${text.and} `}
+      </>
+    ));
+  };
+
+  return (
+    <Paragraph>
+      {text.schedule}
+      {' '}
+      {renderScheduleLinks()}
+      {text.documentation}
+      <LinkCustom href={docLink} variant="textLink" external>
+        {text.link}
+      </LinkCustom>
+    </Paragraph>
+  );
+};

src/entities/course/helpers/transform-courses.ts

@@ -13,6 +13,7 @@ export function transformCourses(coursesResponse: CoursesResponse): Course[] {
     const descriptionUrl = course.fields.url;
     const courseAssets = coursesResponse.includes?.Asset;
     const startDate = TO_BE_DETERMINED;
+    const scheduleUrl = course.fields.scheduleUrl;
     const registrationEndDate = TO_BE_DETERMINED;
     const language = course.fields.language;
     const mode = course.fields.mode;
@@ -48,6 +49,7 @@ export function transformCourses(coursesResponse: CoursesResponse): Course[] {
       secondaryIcon,
       startDate,
       registrationEndDate,
+      scheduleUrl,
       language,
       mode,
       detailsUrl,

src/entities/course/types.ts

@@ -48,6 +48,7 @@ export type Course = {
   iconSmall: StaticImageData;
   iconFooter: StaticImageData;
   startDate: string;
+  scheduleUrl: string[] | null;
   registrationEndDate: string;
   language: Language;
   mode: 'online' | 'offline';

src/shared/__tests__/constants.ts

@@ -31,6 +31,7 @@ export const mockedCourses: Course[] = [
     subTitle: 'Pre-school RU',
     descriptionUrl: COURSE_LINKS.JS_PRESCHOOL_RU,
     startDate: 'Jun 24, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2024',
     language: 'ru',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS_PRESCHOOL_RU}`,
@@ -54,6 +55,7 @@ export const mockedCourses: Course[] = [
     subTitle: undefined,
     descriptionUrl: COURSE_LINKS.JS_EN,
     startDate: 'Oct, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2025',
     language: 'en',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS}`,
@@ -77,6 +79,7 @@ export const mockedCourses: Course[] = [
     subTitle: undefined,
     descriptionUrl: COURSE_LINKS.JS_RU,
     startDate: 'Oct, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2025',
     language: 'ru',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS_RU}`,
@@ -100,6 +103,7 @@ export const mockedCourses: Course[] = [
     subTitle: undefined,
     descriptionUrl: COURSE_LINKS.REACT,
     startDate: 'Jul 1, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2024',
     language: 'en',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.REACT}`,
@@ -122,6 +126,7 @@ export const mockedCourses: Course[] = [
     subTitle: undefined,
     descriptionUrl: COURSE_LINKS.ANGULAR,
     startDate: 'Jul 1, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2025',
     language: 'en',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.ANGULAR}`,
@@ -144,6 +149,7 @@ export const mockedCourses: Course[] = [
     subTitle: undefined,
     descriptionUrl: COURSE_LINKS.AWS_FUNDAMENTALS,
     startDate: 'Jul 1, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2025',
     language: 'en',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_FUNDAMENTALS}`,
@@ -170,6 +176,7 @@ export const mockedCourses: Course[] = [
     iconFooter: MOCKED_IMAGE_PATH,
     secondaryIcon: MOCKED_IMAGE_PATH,
     startDate: 'Jul 1, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2025',
     language: 'en',
     mode: 'online',
@@ -192,6 +199,7 @@ export const mockedCourses: Course[] = [
     iconFooter: MOCKED_IMAGE_PATH,
     secondaryIcon: MOCKED_IMAGE_PATH,
     startDate: 'Jul 1, 2024',
+    scheduleUrl: ['link'],
     registrationEndDate: 'Jun 24, 2025',
     language: 'en',
     mode: 'online',

src/shared/constants.ts

@@ -45,6 +45,12 @@ export const COURSE_LINKS = {
 
 export const KEY_CODES = { ESCAPE: 'Escape' } as const;
 
+export const GITHUB_LINK = 'https://github.com/rolling-scopes-school/';
+export const DOCUMENTATION_LINKS = {
+  ru: 'https://rs.school/docs/ru',
+  en: 'https://docs.rs.school',
+};
+
 export const HTTP_METHOD = {
   GET: 'GET',
   POST: 'POST',

src/shared/helpers/get-actual-data.test.ts

@@ -40,6 +40,7 @@ const coursesMock: Course[] = [
       width: 100,
     },
     startDate: staleDayInPast,
+    scheduleUrl: ['link'],
     registrationEndDate: staleDayInPast,
     language: 'ru',
     mode: 'online',
@@ -75,6 +76,7 @@ const coursesMock: Course[] = [
       width: 100,
     },
     startDate: dayInFuture,
+    scheduleUrl: ['link'],
     registrationEndDate: staleDayInPast,
     language: 'ru',
     mode: 'online',
@@ -110,6 +112,7 @@ const coursesMock: Course[] = [
       width: 100,
     },
     startDate: nonStaleDayInPast,
+    scheduleUrl: ['link'],
     registrationEndDate: staleDayInPast,
     language: 'ru',
     mode: 'online',

src/shared/types/contentful/type-course.ts

@@ -83,6 +83,7 @@ export interface TypeCourseFields {
    * @summary Should contain valid Hex color value.
    */
   accentColor: EntryFieldTypes.Symbol;
+  scheduleUrl: EntryFieldTypes.Array<EntryFieldTypes.Symbol>;
 }
 
 /**

src/widgets/training-program/ui/training-program.tsx

@@ -6,7 +6,7 @@ import { isTrainingProgramType } from '@/shared/helpers/is-training-program';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { WidgetTitle } from '@/shared/ui/widget-title';
-import { CourseNamesKeys, contentMap, trainingProgramLink } from 'data';
+import { CourseNamesKeys, contentMap, scheduleDocumentationLinks, trainingProgramLink } from 'data';
 
 import styles from './training-program.module.scss';
 
@@ -19,7 +19,7 @@ type TrainingProgramProps = {
 
 export const TrainingProgram = async ({ courseName, specify = '' }: TrainingProgramProps) => {
   const course = await selectCourse(courseName);
-  const { language } = course;
+  const { language, scheduleUrl } = course;
   const programName = specify ? `${courseName} ${specify}` : courseName;
   const contentName = isTrainingProgramType(programName) ? programName : courseName;
   const isCourseWithBadge = courseName.includes('badge');
@@ -38,6 +38,8 @@ export const TrainingProgram = async ({ courseName, specify = '' }: TrainingProg
 
           {content.map((component, index) => cloneElement(component, { key: index }))}
 
+          {scheduleDocumentationLinks(language, scheduleUrl)}
+
           {course && (
             <LinkCustom href={enrollHref} variant="primary" external disabled={!course.enroll}>
               {registrationLinkText}