feat: implement modules page

Author: kantord

apps/librelingo-web/src/app/[sourceLanguageCode]/courses/[targetLanguageCode]/module-card.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button'
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card'
+import { CourseDetail, Module } from '@/data/course'
+import Link from 'next/link'
+
+type Props = {
+    course: CourseDetail
+    module: Module
+}
+
+export default function ModuleCard({ course, module }: Props) {
+    const coursePageUrl = `/${course.sourceLanguage.code}/courses/${course.targetLanguage.code}/courses/${module.slug}`
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{module.title}</CardTitle>
+                <CardDescription>Card Description</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <p>Card Content</p>
+            </CardContent>
+            <CardFooter>
+                <Button asChild>
+                    <Link href={coursePageUrl}>Learn</Link>
+                </Button>
+            </CardFooter>
+        </Card>
+    )
+}

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

@@ -1,24 +1,40 @@
-import { getCourseDetail, getCourseId, listAvailableCourses } from "@/data/course"
+import {
+    getCourseDetail,
+    getCourseId,
+    listAvailableCourses,
+} from '@/data/course'
+import ModuleCard from './module-card'
 
 export async function generateStaticParams() {
-  const courses = await listAvailableCourses()
+    const courses = await listAvailableCourses()
 
-  return courses.map((course) => ({
-    sourceLanguageCode: course.uiLanguage,
-    targetLanguageCode: course.languageCode,
-  }))
+    return courses.map((course) => ({
+        sourceLanguageCode: course.uiLanguage,
+        targetLanguageCode: course.languageCode,
+    }))
 }
 
 type Props = {
-  params: {
-    sourceLanguageCode: string
-    targetLanguageCode: string
-  }
+    params: {
+        sourceLanguageCode: string
+        targetLanguageCode: string
+    }
 }
 
-export default async function CourseHomePage({params}: Props) {
-  const courseId = await getCourseId(params)
-  const detail = await getCourseDetail(courseId)
+export default async function CourseHomePage({ params }: Props) {
+    const courseId = await getCourseId(params)
+    const detail = await getCourseDetail(courseId)
 
-  return <h1>{detail.targetLanguage.name}</h1>
+    return (
+        <>
+            <h1>{detail.targetLanguage.name}</h1>
+            <ul className="flex space-y-6 flex-col p-6">
+                {detail.modules.map((module) => (
+                    <li key={module.slug}>
+                        <ModuleCard course={detail} module={module} />
+                    </li>
+                ))}
+            </ul>
+        </>
+    )
 }

apps/librelingo-web/src/courses/test-1/courseData.json

@@ -30,6 +30,7 @@
   },
   "modules": [
     {
+      "slug": "basics",
       "title": "Basics",
       "skills": [
         {

apps/librelingo-web/src/data/course.ts

@@ -4,6 +4,7 @@ import path from 'node:path'
 import courseConfig from '@/courses/config.json'
 import fs from 'node:fs'
 import { notFound } from 'next/navigation'
+import { getAbsoluteCoursePath } from './utils'
 
 export type CourseIdentityDescription = {
     sourceLanguageCode: string
@@ -20,13 +21,7 @@ export type Course = {
 }
 
 function getFullJsonPath(jsonPath: string) {
-    return path.join(
-        process.cwd(),
-        'src',
-        'courses',
-        jsonPath,
-        'courseData.json'
-    )
+    return path.join(getAbsoluteCoursePath(jsonPath), 'courseData.json')
 }
 
 async function getCourseMetadataByJsonPath(jsonPath: string) {
@@ -86,12 +81,34 @@ export async function getCourseId(
     return course.id
 }
 
-export async function getCourseDetail(courseId: string) {
-    const { languageName } = await getCourseMetadataByJsonPath(courseId)
+export type Module = {
+    title: string
+    slug: string
+}
+
+export type CourseDetail = {
+    targetLanguage: {
+        name: string
+        code: string
+    }
+    sourceLanguage: {
+        code: string
+    }
+    modules: Module[]
+}
+
+export async function getCourseDetail(courseId: string): Promise<CourseDetail> {
+    const { languageName, modules, uiLanguage, languageCode } =
+        await getCourseMetadataByJsonPath(courseId)
 
     return {
         targetLanguage: {
             name: languageName,
+            code: languageCode,
+        },
+        sourceLanguage: {
+          code: uiLanguage
         },
+        modules,
     }
 }

apps/librelingo-web/src/data/utils.ts

@@ -0,0 +1,5 @@
+import path from 'node:path'
+
+export function getAbsoluteCoursePath(jsonPath: string) {
+    return path.join(process.cwd(), 'src', 'courses', jsonPath)
+}

e2e-tests/course.spec.ts

@@ -7,3 +7,26 @@ test('has the correct content', async ({ page }) => {
         page.getByRole('heading', { name: 'Test Language' })
     ).toBeVisible()
 })
+
+test('has cards leading to module pages', async ({ page }) => {
+    const courseHomePagePattern = new RegExp(
+        `[^/]*/courses/[^/]+/modules/[^/]+`
+    )
+    await page.goto('/en/courses/test-1')
+
+    const cards = await page.getByRole('listitem').all()
+
+    expect(cards.length).toBeGreaterThanOrEqual(1)
+    const urls = new Set()
+
+    for (const card of cards) {
+        const button = card.getByRole('link', { name: 'Learn' })
+        const url = await button.getAttribute('href')
+
+        expect(url).toMatch(courseHomePagePattern)
+        urls.add(url)
+    }
+
+    // each course has to have a unique url
+    expect(urls.size).toBeGreaterThanOrEqual(cards.length)
+})

e2e-tests/home.spec.ts

@@ -10,7 +10,9 @@ test('has the correct content', async ({ page }) => {
     await expect(firstCard.getByRole('link', { name: 'Learn' })).toBeVisible()
 })
 
-test('all card buttons lead to URLs matching the pattern', async ({ page }) => {
+test('has cards for each course leading to the course page', async ({
+    page,
+}) => {
     const courseHomePagePattern = new RegExp(`[^/]*/courses/[^/]+`)
     await page.goto('/')
 

src/librelingo_json_export/module.py

@@ -29,6 +29,7 @@ def get_levels(words, phrases):
         return calculate_number_of_levels(len(words), len(phrases))
 
     return {
+        "slug": slugify(module.title),
         "title": module.title,
         "skills": [
             {

src/librelingo_json_export/tests/test_course_get_course_data.py

@@ -39,6 +39,7 @@ def test__get_course_data_return_value():
         },
         "modules": [
             {
+                "slug": "basics",
                 "title": "Basics",
                 "skills": [
                     {
@@ -67,7 +68,7 @@ def test__get_course_data_return_value():
                     },
                 ],
             },
-            {"title": "Phrases", "skills": []},
+            {"slug": "phrases", "title": "Phrases", "skills": []},
         ],
     }
 
@@ -89,6 +90,7 @@ def test__get_course_data_return_value_2():
         },
         "modules": [
             {
+                "slug": "animals",
                 "title": "Animals",
                 "skills": [
                     {
@@ -122,6 +124,7 @@ def test__get_course_data_return_value_with_introduction():
         },
         "modules": [
             {
+                "slug": "animals",
                 "title": "Animals",
                 "skills": [
                     {