sortlog: Resolve course and lecture names for error log entries, Closes #10

src/pages/internal/sort/log.tsx

@@ -6,12 +6,14 @@ import { useEffect, useState } from "react";
 import { showError, ErrorPage } from "@/misc/ErrorHandlers";
 import { ReloadBoundary } from "@/components/ReloadBoundary";
 
-import type { GetSorterLogResponse } from "@/api/api_v1_types";
+import type { GetCoursesResponse, GetSorterLogResponse } from "@/api/api_v1_types";
 
 function SortLogImpl() {
     const api = useBackendContext();
     const [sortlog, setSortlog] = useState<GetSorterLogResponse>();
     const [error, setError] = useState<any>();
+    const [cachedCourses, setCachedCourses] = useState<GetCoursesResponse>();
+    const [cachedLectures, setCachedLectures] = useState<Record<string, string>>({});
 
     const refreshData = () => {
         api.getSorterLog()
@@ -24,6 +26,54 @@ function SortLogImpl() {
             });
     };
 
+    useEffect(() => {
+        if (!sortlog) return;
+
+        if (cachedCourses === undefined) {
+            api.getCourses()
+                .then((data) => {
+                    setCachedCourses(data);
+                })
+                .catch((e) => {
+                    showError(e, "Exception while fetching courses");
+                });
+        }
+
+        const lectureIds = new Set<number>();
+
+        sortlog.error_log.forEach((i) => {
+            i.matched_lectures_ids?.forEach((j) => lectureIds.add(j));
+        });
+
+        for (const i of Object.keys(cachedLectures)) {
+            if (lectureIds.has(parseInt(i))) lectureIds.delete(parseInt(i));
+        }
+
+        let iter = lectureIds.values();
+        let first = iter.next();
+        if (first.done) return;
+
+        const fetchLecture = (id: number) => {
+            return api
+                .getCourseLecture(id)
+                .then((data) => {
+                    setCachedLectures((prev) => {
+                        return { ...prev, [id]: data.lecture.title };
+                    });
+                })
+                .catch((e) => {
+                    showError(e, "Exception while fetching lecture");
+                });
+        };
+        let promise = fetchLecture(first.value);
+        while (true) {
+            const next = iter.next();
+            if (next.done) break;
+            promise = promise.then(() => fetchLecture(next.value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, sortlog]);
+
     useEffect(refreshData, [api]);
 
     const removeAllErrors = () => {
@@ -40,6 +90,16 @@ function SortLogImpl() {
             .then(refreshData);
     };
 
+    const getCourseName = (id: number) => {
+        if (cachedCourses === undefined) return "...";
+        const course = Object.values(cachedCourses.courses).find((v) => v.id === id);
+        return course ? course.full_name : "???";
+    };
+
+    const getLectureName = (id: number) => {
+        return cachedLectures[id.toString()] || "???";
+    };
+
     if (error) {
         return (
             <ReloadBoundary reloadFunc={refreshData}>
@@ -112,7 +172,7 @@ function SortLogImpl() {
                                         </td>
                                         <td>
                                             <Link href={`/${i.matched_course_id}`}>
-                                                {i.matched_course_id}
+                                                {`${getCourseName(i.matched_course_id!)} (${i.matched_course_id})`}
                                             </Link>
                                         </td>
                                         <td>
@@ -122,7 +182,7 @@ function SortLogImpl() {
                                                         href={`/${i.matched_course_id}#lecture-${j}`}
                                                     >
                                                         {ind === 0 ? "" : ", "}
-                                                        {j}
+                                                        {`${getLectureName(j)} (${j})`}
                                                     </Link>
                                                 </span>
                                             ))}