render human language hierarchy in admin page

Integrate the admin Human Language page with the new hierarchy API and present subcategory/course/level/module/sub-module tree including videos and practices.

Made-with: Cursor

src/api/courses.api.ts

@@ -48,6 +48,7 @@ import type {
   AddSubCoursePrerequisiteRequest,
   GetLearningPathResponse,
   GetHumanLanguageLessonsResponse,
+  GetHumanLanguageHierarchyResponse,
   GetSubCourseEntryAssessmentResponse,
   ReorderItem,
   GetRatingsResponse,
@@ -292,6 +293,9 @@ export const getHumanLanguageLessonsByCourse = (courseId: number, cefr_level: st
     params: { cefr_level },
   })
 
+export const getHumanLanguageHierarchy = () =>
+  http.get<GetHumanLanguageHierarchyResponse>("/course-management/human-language/hierarchy")
+
 export const getSubCourseEntryAssessment = (subCourseId: number) =>
   http.get<GetSubCourseEntryAssessmentResponse>(
     `/question-sets/sub-courses/${subCourseId}/entry-assessment`,

src/pages/content-management/HumanLanguagePage.tsx

@@ -4,99 +4,55 @@ import { BookOpen, ChevronDown, ChevronRight, Languages } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
 import { SpinnerIcon } from "../../components/ui/spinner-icon"
-import { getCourseCategories, getCoursesByCategory, getHumanLanguageLessonsByCourse } from "../../api/courses.api"
+import { getHumanLanguageHierarchy } from "../../api/courses.api"
-import type { Course, HumanLanguageLesson } from "../../types/course.types"
+import type { HumanLanguageCourseTree, HumanLanguageSubCategoryTree } from "../../types/course.types"
 
 const CEFR_LEVELS = ["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"] as const
 type CefrLevel = (typeof CEFR_LEVELS)[number]
 
 export function HumanLanguagePage() {
   const [loading, setLoading] = useState(false)
-  const [courses, setCourses] = useState<Course[]>([])
+  const [categoryId, setCategoryId] = useState<number | null>(null)
-  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null)
+  const [subCategories, setSubCategories] = useState<HumanLanguageSubCategoryTree[]>([])
-  const [selectedCourseId, setSelectedCourseId] = useState<number | null>(null)
+  const [selectedSubCategoryId, setSelectedSubCategoryId] = useState<number | "ALL">("ALL")
-  const [selectedLessonId, setSelectedLessonId] = useState<number | "ALL">("ALL")
+  const [selectedCourseId, setSelectedCourseId] = useState<number | "ALL">("ALL")
   const [selectedLevel, setSelectedLevel] = useState<CefrLevel | "ALL">("ALL")
   const [collapsedLevels, setCollapsedLevels] = useState<CefrLevel[]>([])
-  const [lessonsByLevel, setLessonsByLevel] = useState<Record<CefrLevel, HumanLanguageLesson[]>>(
-    Object.fromEntries(CEFR_LEVELS.map((level) => [level, []])) as Record<CefrLevel, HumanLanguageLesson[]>,
-  )
 
   useEffect(() => {
-    const loadCategories = async () => {
+    const loadHierarchy = async () => {
       setLoading(true)
       try {
-        const res = await getCourseCategories()
+        const res = await getHumanLanguageHierarchy()
-        const items = res.data?.data?.categories ?? []
+        const data = res.data?.data
-        const humanLanguageCategory =
+        setCategoryId(data?.category_id ?? null)
-          items.find((c) => c.name.toLowerCase().includes("human language")) ??
+        setSubCategories(data?.sub_categories ?? [])
-          items.find((c) => c.name.toLowerCase().includes("language")) ??
-          null
-        setSelectedCategoryId(humanLanguageCategory?.id ?? (items[0]?.id ?? null))
       } finally {
         setLoading(false)
       }
     }
-    loadCategories().catch(() => undefined)
+    loadHierarchy().catch(() => undefined)
   }, [])
 
-  useEffect(() => {
+  const filteredSubCategories = useMemo(
-    if (!selectedCategoryId) return
+    () =>
-    const loadCourses = async () => {
+      selectedSubCategoryId === "ALL"
-      setLoading(true)
+        ? subCategories
-      try {
+        : subCategories.filter((s) => s.sub_category_id === selectedSubCategoryId),
-        const res = await getCoursesByCategory(selectedCategoryId)
+    [subCategories, selectedSubCategoryId],
-        const items = res.data?.data?.courses ?? []
+  )
-        setCourses(items)
+
-        setSelectedCourseId(items[0]?.id ?? null)
+  const availableCourses = useMemo(() => {
-        setSelectedLessonId("ALL")
+    return filteredSubCategories.flatMap((s) => s.courses)
-      } finally {
+  }, [filteredSubCategories])
-        setLoading(false)
+
-      }
+  const selectedCourses = useMemo(
-    }
+    () =>
-    loadCourses().catch(() => undefined)
+      selectedCourseId === "ALL"
-  }, [selectedCategoryId])
+        ? availableCourses
-
+        : availableCourses.filter((c) => c.course_id === selectedCourseId),
-  useEffect(() => {
+    [availableCourses, selectedCourseId],
-    if (!selectedCourseId) return
-    const loadByLevels = async () => {
-      setLoading(true)
-      try {
-        if (selectedLevel === "ALL") {
-          const entries = await Promise.all(
-            CEFR_LEVELS.map(async (level) => {
-              const res = await getHumanLanguageLessonsByCourse(selectedCourseId, level)
-              return [level, res.data?.data?.lessons ?? []] as const
-            }),
-          )
-          setLessonsByLevel(Object.fromEntries(entries) as Record<CefrLevel, HumanLanguageLesson[]>)
-        } else {
-          const res = await getHumanLanguageLessonsByCourse(selectedCourseId, selectedLevel)
-          setLessonsByLevel((prev) => ({ ...prev, [selectedLevel]: res.data?.data?.lessons ?? [] }))
-        }
-      } finally {
-        setLoading(false)
-      }
-    }
-    loadByLevels().catch(() => undefined)
-  }, [selectedCourseId, selectedLevel])
-
-  const levelRows = useMemo(
-    () => (selectedLevel === "ALL" ? CEFR_LEVELS : [selectedLevel]).map((level) => ({ level, rows: lessonsByLevel[level] })),
-    [lessonsByLevel, selectedLevel],
   )
-  const lessonOptions = useMemo(() => {
-    const seen = new Set<number>()
-    const options: { id: number; title: string }[] = []
-    for (const rows of Object.values(lessonsByLevel)) {
-      for (const lesson of rows) {
-        if (seen.has(lesson.id)) continue
-        seen.add(lesson.id)
-        options.push({ id: lesson.id, title: lesson.title })
-      }
-    }
-    return options.sort((a, b) => a.title.localeCompare(b.title))
-  }, [lessonsByLevel])
 
   const toggleLevel = (level: CefrLevel) => {
     setCollapsedLevels((prev) => (prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]))
@@ -127,12 +83,15 @@ export function HumanLanguagePage() {
             <label className="text-xs font-medium uppercase tracking-wide text-grayScale-500">Subcategory</label>
             <select
               className="h-10 w-full rounded-md border border-grayScale-200 bg-white px-3 text-sm"
-              value={selectedCourseId ?? ""}
+              value={selectedSubCategoryId}
-              onChange={(e) => setSelectedCourseId(Number(e.target.value))}
+              onChange={(e) =>
+                setSelectedSubCategoryId(e.target.value === "ALL" ? "ALL" : Number(e.target.value))
+              }
             >
-              {courses.map((course) => (
+              <option value="ALL">All subcategories</option>
-                <option key={course.id} value={course.id}>
+              {subCategories.map((subCategory) => (
-                  {course.title}
+                <option key={subCategory.sub_category_id} value={subCategory.sub_category_id}>
+                  {subCategory.sub_category_name}
                 </option>
               ))}
             </select>
@@ -141,15 +100,15 @@ export function HumanLanguagePage() {
             <label className="text-xs font-medium uppercase tracking-wide text-grayScale-500">Course</label>
             <select
               className="h-10 w-full rounded-md border border-grayScale-200 bg-white px-3 text-sm"
-              value={selectedLessonId}
+              value={selectedCourseId}
               onChange={(e) =>
-                setSelectedLessonId(e.target.value === "ALL" ? "ALL" : Number(e.target.value))
+                setSelectedCourseId(e.target.value === "ALL" ? "ALL" : Number(e.target.value))
               }
             >
               <option value="ALL">All courses</option>
-              {lessonOptions.map((lesson) => (
+              {availableCourses.map((course) => (
-                <option key={lesson.id} value={lesson.id}>
+                <option key={course.course_id} value={course.course_id}>
-                  {lesson.title}
+                  {course.course_name}
                 </option>
               ))}
             </select>
@@ -172,9 +131,9 @@ export function HumanLanguagePage() {
         </CardContent>
       </Card>
 
-      {selectedCategoryId && selectedCourseId ? (
+      {categoryId && selectedCourseId !== "ALL" ? (
         <div className="flex justify-end">
-          <Link to={`/content/category/${selectedCategoryId}/courses/${selectedCourseId}/sub-courses`}>
+          <Link to={`/content/category/${categoryId}/courses/${selectedCourseId}/sub-courses`}>
             <Button variant="outline">Open detailed management</Button>
           </Link>
         </div>
@@ -187,9 +146,16 @@ export function HumanLanguagePage() {
         </div>
       ) : (
         <div className="space-y-3">
-          {levelRows.map(({ level, rows }) => {
+          {CEFR_LEVELS.filter((l) => selectedLevel === "ALL" || l === selectedLevel).map((level) => {
-            const filteredRows =
+            const modulesByCourse = selectedCourses
-              selectedLessonId === "ALL" ? rows : rows.filter((lesson) => lesson.id === selectedLessonId)
+              .map((course: HumanLanguageCourseTree) => {
+                const levelNode = course.levels.find((item) => item.level.toUpperCase() === level)
+                return {
+                  course,
+                  modules: levelNode?.modules ?? [],
+                }
+              })
+              .filter((entry) => entry.modules.length > 0)
             return (
             <Card key={level} className="overflow-hidden border-grayScale-200/80 shadow-sm">
               <button
@@ -201,26 +167,40 @@ export function HumanLanguagePage() {
                   {collapsedLevels.includes(level) ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                   <span className="text-sm font-semibold text-grayScale-900">{level}</span>
                   <span className="rounded-md bg-brand-100 px-2 py-0.5 text-xs font-medium text-brand-700">
-                    {filteredRows.length} unit(s)
+                    {modulesByCourse.reduce((sum, entry) => sum + entry.modules.length, 0)} module(s)
                   </span>
                 </div>
               </button>
               {!collapsedLevels.includes(level) ? (
                 <CardContent className="space-y-3 p-4">
-                  {filteredRows.length === 0 ? (
+                  {modulesByCourse.length === 0 ? (
                     <p className="text-sm text-grayScale-500">No lessons found for this level.</p>
                   ) : (
-                    filteredRows.map((lesson) => (
+                    modulesByCourse.map((entry) => (
-                      <div key={lesson.id} className="rounded-xl border border-grayScale-200 bg-white p-3">
+                      <div key={entry.course.course_id} className="space-y-2 rounded-xl border border-grayScale-200 bg-white p-3">
-                        <p className="text-sm font-semibold text-grayScale-900">{lesson.title}</p>
+                        <p className="text-sm font-semibold text-brand-700">{entry.course.course_name}</p>
-                        <p className="mt-1 text-xs text-grayScale-500">
+                        <div className="space-y-2">
-                          {lesson.video_count} lesson video(s) • {lesson.practice_count} practice(s)
+                          {entry.modules.map((module) => (
-                        </p>
+                            <div key={module.id} className="rounded-lg border border-grayScale-100 bg-grayScale-50/60 p-3">
-                        <div className="mt-2 space-y-1">
+                              <p className="text-sm font-semibold text-grayScale-900">Module: {module.title}</p>
-                          {lesson.videos.map((video) => (
+                              {module.sub_modules.map((subModule) => (
-                            <div key={video.id} className="inline-flex items-center gap-2 rounded-md bg-grayScale-50 px-2 py-1 text-xs text-grayScale-700">
+                                <div key={subModule.id} className="mt-2 rounded-md border border-grayScale-100 bg-white p-2">
-                              <BookOpen className="h-3.5 w-3.5" />
+                                  <p className="text-xs font-semibold text-grayScale-700">Sub-module: {subModule.title}</p>
-                              {video.title}
+                                  <div className="mt-2 flex flex-wrap gap-2">
+                                    {subModule.videos.map((video) => (
+                                      <div key={video.id} className="inline-flex items-center gap-2 rounded-md bg-grayScale-50 px-2 py-1 text-xs text-grayScale-700">
+                                        <BookOpen className="h-3.5 w-3.5" />
+                                        {video.title}
+                                      </div>
+                                    ))}
+                                    {subModule.practices.map((practice) => (
+                                      <div key={practice.id} className="rounded-md bg-brand-50 px-2 py-1 text-xs text-brand-700">
+                                        Practice: {practice.title} ({practice.question_count} audio question(s))
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              ))}
                             </div>
                           ))}
                         </div>

src/types/course.types.ts

@@ -700,6 +700,48 @@ export interface GetHumanLanguageLessonsResponse {
   metadata: unknown
 }
 
+export interface HumanLanguageSubModule {
+  id: number
+  title: string
+  videos: LearningPathVideo[]
+  practices: LearningPathPractice[]
+}
+
+export interface HumanLanguageModule {
+  id: number
+  title: string
+  sub_modules: HumanLanguageSubModule[]
+}
+
+export interface HumanLanguageLevelTree {
+  level: string
+  modules: HumanLanguageModule[]
+}
+
+export interface HumanLanguageCourseTree {
+  course_id: number
+  course_name: string
+  levels: HumanLanguageLevelTree[]
+}
+
+export interface HumanLanguageSubCategoryTree {
+  sub_category_id: number
+  sub_category_name: string
+  courses: HumanLanguageCourseTree[]
+}
+
+export interface GetHumanLanguageHierarchyResponse {
+  message: string
+  data: {
+    category_id: number
+    category_name: string
+    sub_categories: HumanLanguageSubCategoryTree[]
+  }
+  success: boolean
+  status_code: number
+  metadata: unknown
+}
+
 export interface GetSubCourseEntryAssessmentResponse {
   message: string
   data: QuestionSet | null