feat: implement page heading on modules page

Author: kantord

Diff for: apps/librelingo-web/src/app/[sourceLanguageCode]/courses/[targetLanguageCode]/page.tsx

@@ -1,4 +1,4 @@
-import { listAvailableCourses } from "@/data/course"
+import { getCourseDetail, getCourseId, listAvailableCourses } from "@/data/course"
 
 export async function generateStaticParams() {
   const courses = await listAvailableCourses()
@@ -9,6 +9,16 @@ export async function generateStaticParams() {
   }))
 }
 
-export default function CourseHomePage() {
-  return <h1>Hello world</h1>
+type Props = {
+  params: {
+    sourceLanguageCode: string
+    targetLanguageCode: string
+  }
+}
+
+export default async function CourseHomePage({params}: Props) {
+  const courseId = await getCourseId(params)
+  const detail = await getCourseDetail(courseId)
+
+  return <h1>{detail.targetLanguage.name}</h1>
 }

Diff for: apps/librelingo-web/src/data/course.ts

@@ -1,6 +1,14 @@
+'use server'
+
 import path from 'node:path'
 import courseConfig from '@/courses/config.json'
 import fs from 'node:fs'
+import { notFound } from 'next/navigation'
+
+export type CourseIdentityDescription = {
+    sourceLanguageCode: string
+    targetLanguageCode: string
+}
 
 export type Course = {
     id: string
@@ -59,3 +67,31 @@ export async function listAvailableCourses(): Promise<Course[]> {
             })
     )
 }
+
+export async function getCourseId(
+    parameters: CourseIdentityDescription
+): Promise<string> {
+    const availableCourses = await listAvailableCourses()
+
+    const course = availableCourses.find(
+        (item) =>
+            item.uiLanguage === parameters.sourceLanguageCode &&
+            item.languageCode === parameters.targetLanguageCode
+    )
+
+    if (course === undefined) {
+        notFound()
+    }
+
+    return course.id
+}
+
+export async function getCourseDetail(courseId: string) {
+    const { languageName } = await getCourseMetadataByJsonPath(courseId)
+
+    return {
+        targetLanguage: {
+            name: languageName,
+        },
+    }
+}

Diff for: e2e-tests/course.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('has the correct content', async ({ page }) => {
+    await page.goto('/en/courses/test-1')
+
+    await expect(
+        page.getByRole('heading', { name: 'Test Language' })
+    ).toBeVisible()
+})

Diff for: e2e-tests/home.spec.ts

@@ -1,9 +1,7 @@
 import { test, expect } from '@playwright/test'
 
-const baseURL = 'http://localhost:3000/'
-
 test('has the correct content', async ({ page }) => {
-    await page.goto(baseURL)
+    await page.goto('/')
 
     const firstCard = page.getByRole('listitem').first()
 
@@ -14,7 +12,7 @@ test('has the correct content', async ({ page }) => {
 
 test('all card buttons lead to URLs matching the pattern', async ({ page }) => {
     const courseHomePagePattern = new RegExp(`[^/]*/courses/[^/]+`)
-    await page.goto(baseURL)
+    await page.goto('/')
 
     const cards = await page.getByRole('listitem').all()
 

Diff for: playwright.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
-        // baseURL: 'http://127.0.0.1:3000',
+        baseURL: 'http://127.0.0.1:3000',
 
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry',