Feat/552 rs app courses integration (#633)

* feat: 552 - add env with api url

* feat: 552 - implement to fetch course data

* fix: 552 - test issues

* refactor: 552 - change all courses default date to TBD

* chore: 552 - add env secret to CI build step

* chore: 552 - add env secret to CI build step

* refactor: 552 - remove unnecessary file extensions

* refactor: 552 - remove console log

* feat: 552 - add error handling for course fetching

* fix: 552 - to include all course aliases

* feat: 552 - implement to also sync with registration date

* refactor: 552 - add consistency to test cases

* chore: 552 - add warning comment

.env.example

@@ -0,0 +1 @@
+API_URL=URL

.github/workflows/main.yml

@@ -36,3 +36,5 @@ jobs:
 
       - name: Build
         run: npm run build
+        env:
+          API_URL: ${{ secrets.API_URL }}

.github/workflows/preview-create.yml

@@ -34,6 +34,8 @@ jobs:
         run: |
           npm ci
           npm run build
+        env:
+          API_URL: ${{ secrets.API_URL }}
 
       - uses: jakejarvis/s3-sync-action@master
         name: Sync to S3

.github/workflows/production.yml

@@ -29,6 +29,8 @@ jobs:
 
       - name: Build
         run: npm run build
+        env:
+          API_URL: ${{ secrets.API_URL }}
 
       # Copy the static files to the S3 bucket from _next folder (js, css, images)
       # Set the cache-control header to 30 days

.gitignore

@@ -32,3 +32,6 @@ src/shared/__tests__/test-results
 src/shared/__tests__/report
 /blob-report/
 /playwright/.cache/
+
+# env
+.env

dev-data/courses.data.ts

@@ -17,17 +17,20 @@ import nodejs from '@/shared/assets/icons/node.svg';
 import nodejsSecondary from '@/shared/assets/icons/nodejs-secondary.webp';
 import reactSecondary from '@/shared/assets/icons/react-secondary.webp';
 import react from '@/shared/assets/icons/react.svg';
+import { COURSE_ALIASES, TO_BE_DETERMINED } from '@/shared/constants';
 import { COURSE_TITLES } from 'data';
 
 export const courses: Course[] = [
   {
     id: '1',
     title: COURSE_TITLES.JS_PRESCHOOL_RU,
+    alias: COURSE_ALIASES.JS_PRESCHOOL_RU,
     altTitle: 'JavaScript / Front-end',
     iconSrc: javascript,
     iconSmall: htmlSmall,
     secondaryIcon: jsSecondary,
-    startDate: 'Jun 24, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['ru'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS_PRESCHOOL_RU}`,
@@ -40,11 +43,13 @@ export const courses: Course[] = [
   {
     id: '2',
     title: COURSE_TITLES.JS_EN,
+    alias: COURSE_ALIASES.JS_EN,
     altTitle: 'JavaScript / Front-end',
     iconSrc: javascript,
     iconSmall: jsSmall,
     secondaryIcon: jsSecondary,
-    startDate: 'Oct 28, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS}`,
@@ -57,11 +62,13 @@ export const courses: Course[] = [
   {
     id: '3',
     title: COURSE_TITLES.JS_RU,
+    alias: COURSE_ALIASES.JS_RU,
     altTitle: 'JavaScript / Front-end',
     iconSrc: javascript,
     iconSmall: jsSmall,
     secondaryIcon: jsSecondary,
-    startDate: 'Oct 27, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['ru'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS_RU}`,
@@ -74,10 +81,12 @@ export const courses: Course[] = [
   {
     id: '4',
     title: COURSE_TITLES.REACT,
+    alias: COURSE_ALIASES.REACT,
     iconSrc: react,
     iconSmall: reactSmall,
     secondaryIcon: reactSecondary,
-    startDate: 'Jul 1, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.REACT}`,
@@ -90,10 +99,12 @@ export const courses: Course[] = [
   {
     id: '5',
     title: COURSE_TITLES.ANGULAR,
+    alias: COURSE_ALIASES.ANGULAR,
     iconSrc: angular,
     iconSmall: angularSmall,
     secondaryIcon: angularSecondary,
-    startDate: 'Jul 1, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.ANGULAR}`,
@@ -106,10 +117,12 @@ export const courses: Course[] = [
   {
     id: '6',
     title: COURSE_TITLES.NODE,
+    alias: COURSE_ALIASES.NODE,
     iconSrc: nodejs,
     iconSmall: nodejsSmall,
     secondaryIcon: nodejsSecondary,
-    startDate: 'Sep 30, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.NODE_JS}`,
@@ -122,10 +135,12 @@ export const courses: Course[] = [
   {
     id: '7',
     title: COURSE_TITLES.AWS_FUNDAMENTALS,
+    alias: COURSE_ALIASES.AWS_FUNDAMENTALS,
     iconSrc: aws,
     iconSmall: awsFundSmall,
     secondaryIcon: awsSecondary,
-    startDate: 'Apr 15, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_FUNDAMENTALS}`,
@@ -139,10 +154,12 @@ export const courses: Course[] = [
   {
     id: '8',
     title: COURSE_TITLES.AWS_CLOUD_DEVELOPER,
+    alias: COURSE_ALIASES.AWS_CLOUD_DEVELOPER,
     iconSrc: aws,
     iconSmall: awsDevSmall,
     secondaryIcon: awsSecondary,
-    startDate: 'May 28, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVELOPER}`,
@@ -155,10 +172,12 @@ export const courses: Course[] = [
   {
     id: '9',
     title: COURSE_TITLES.AWS_DEVOPS,
+    alias: COURSE_ALIASES.AWS_DEVOPS,
     iconSrc: aws,
     iconSmall: awsDevSmall,
     secondaryIcon: awsSecondary,
-    startDate: 'Sep 23, 2024',
+    startDate: TO_BE_DETERMINED,
+    registrationEndDate: TO_BE_DETERMINED,
     language: ['en'],
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVOPS}`,

env.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    API_URL: string;
+  }
+}

package.json

@@ -8,9 +8,9 @@
     "build": "tsc && next build",
     "stylelint": "npx stylelint \"**/*.scss\"",
     "stylelint:fix": "npx stylelint \"**/*.scss\" --fix",
-    "lint": "npx eslint . --report-unused-disable-directives --max-warnings 400",
+    "lint": "npx eslint . --report-unused-disable-directives --max-warnings 500",
     "lint:err": "npx eslint . --quiet",
-    "lint:fix": "npx eslint . --fix --report-unused-disable-directives --max-warnings 400",
+    "lint:fix": "npx eslint . --fix --report-unused-disable-directives --max-warnings 500",
     "preview": "vite preview",
     "test": "vitest --run",
     "test:playwright": "npx playwright test",

src/app/courses/angular/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { Angular } from '@/views/angular';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.ANGULAR;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function AngularRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function AngularRoute() {
+  const course = await selectCourse(courseName);
 
   return <Angular course={course} courseName={courseName} />;
 }

src/app/courses/aws-cloud-developer/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { AwsDeveloper } from '@/views/aws-developer';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.AWS_CLOUD_DEVELOPER;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function AwsDeveloperRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function AwsDeveloperRoute() {
+  const course = await selectCourse(courseName);
 
   return <AwsDeveloper course={course} courseName={courseName} />;
 }

src/app/courses/aws-devops/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { AwsDevOps } from '@/views/aws-devops';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.AWS_DEVOPS;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function AwsDeveloperRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function AwsDeveloperRoute() {
+  const course = await selectCourse(courseName);
 
   return <AwsDevOps course={course} courseName={courseName} />;
 }

src/app/courses/aws-fundamentals/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { AwsFundamentals } from '@/views/aws-fundamentals';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.AWS_FUNDAMENTALS;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function AwsFundRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function AwsFundRoute() {
+  const course = await selectCourse(courseName);
 
   return <AwsFundamentals course={course} courseName={courseName} />;
 }

src/app/courses/javascript-preschool-ru/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { JavaScriptPreSchoolRu } from '@/views/javascript-preschool-ru';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.JS_PRESCHOOL_RU;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function JsPreRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function JsPreRoute() {
+  const course = await selectCourse(courseName);
 
   return (
     <JavaScriptPreSchoolRu lang="ru" type="pre-school-ru" course={course} courseName={courseName} />

src/app/courses/javascript-ru/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { JavaScriptRu } from '@/views/javascript-ru';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.JS_RU;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function JsRuRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function JsRuRoute() {
+  const course = await selectCourse(courseName);
 
   return <JavaScriptRu lang="ru" course={course} courseName={courseName} />;
 }

src/app/courses/javascript/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { JavaScriptEn } from '@/views/javascript-en';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.JS_EN;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function JsEnRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function JsEnRoute() {
+  const course = await selectCourse(courseName);
 
   return <JavaScriptEn course={course} courseName={courseName} />;
 }

src/app/courses/nodejs/page.tsx

@@ -2,16 +2,16 @@ import { Metadata } from 'next';
 import { getCourseTitle } from '@/shared/helpers/get-course-title';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { Nodejs } from '@/views/nodejs';
-import { COURSE_TITLES, courses } from 'data';
+import { COURSE_TITLES } from 'data';
 
 const courseName = COURSE_TITLES.NODE;
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: getCourseTitle(courseName) };
+  return { title: await getCourseTitle(courseName) };
 }
 
-export default function NodeRoute() {
-  const course = selectCourse(courses, courseName);
+export default async function NodeRoute() {
+  const course = await selectCourse(courseName);
 
   return <Nodejs course={course} courseName={courseName} />;
 }

src/app/courses/page.tsx

@@ -1,6 +1,5 @@
 import { Metadata } from 'next';
 import { Courses } from '@/views/courses';
-import { courses } from 'data';
 
 export async function generateMetadata(): Promise<Metadata> {
   const title = 'Courses · The Rolling Scopes School';
@@ -9,5 +8,5 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function CoursesRoute() {
-  return <Courses courses={courses} />;
+  return <Courses />;
 }