From 8665949c1208fe66c4f2eaf6b97f1886fb941901 Mon Sep 17 00:00:00 2001
From: PupoSDC <pupo163@hotmail.com>
Date: Thu, 15 Feb 2024 20:39:01 +0100
Subject: [PATCH] fix: fix question link (#171)

Fixes https://github.com/PupoSDC/chair-flight/issues/166
---
 .../learning-objective-list.tsx               | 201 +++++++++---------
 .../question-list/question-list.tsx           |  20 +-
 .../question-meta/question-meta.tsx           |  10 +-
 .../src/containers/test-study/test-study.tsx  |   7 +-
 4 files changed, 130 insertions(+), 108 deletions(-)

diff --git a/libs/next/question-bank/src/components/learning-objectives-list/learning-objective-list.tsx b/libs/next/question-bank/src/components/learning-objectives-list/learning-objective-list.tsx
index d2309675c5..e1bf62ea50 100644
--- a/libs/next/question-bank/src/components/learning-objectives-list/learning-objective-list.tsx
+++ b/libs/next/question-bank/src/components/learning-objectives-list/learning-objective-list.tsx
@@ -14,11 +14,7 @@ import type { SearchListProps } from "@cf/react/components";
 
 export type LearningObjectiveListProps = Omit<
   SearchListProps<LearningObjectiveSearchResult>,
-  | "renderThead"
-  | "renderTableRow"
-  | "renderListItemContent"
-  | "errorMessage"
-  | "noDataMessage"
+  "renderThead" | "renderTableRow" | "renderListItemContent"
 > & {
   currentCourse?: string;
 };
@@ -26,100 +22,111 @@ export type LearningObjectiveListProps = Omit<
 export const LearningObjectiveList = forwardRef<
   HTMLDivElement,
   LearningObjectiveListProps
->(({ items, currentCourse = "all", ...otherProps }, ref) => {
-  return (
-    <SearchList
-      {...otherProps}
-      ref={ref}
-      items={items}
-      errorMessage={"Error fetching Learning Objectives"}
-      noDataMessage={"No Learning Objectives found"}
-      renderThead={() => (
-        <thead>
-          <tr>
-            <th style={{ width: "8em" }}>LO</th>
-            <th>Description</th>
-            <th style={{ width: "14em" }}>Source</th>
-            <th style={{ width: "14em" }}>Courses</th>
-            <th style={{ width: "7em" }}>Questions</th>
+>(
+  (
+    {
+      items,
+      currentCourse = "all",
+      errorMessage = "Error fetching Learning Objectives",
+      noDataMessage = "No Learning Objectives found",
+      ...otherProps
+    },
+    ref,
+  ) => {
+    return (
+      <SearchList
+        {...otherProps}
+        ref={ref}
+        items={items}
+        errorMessage={errorMessage}
+        noDataMessage={noDataMessage}
+        renderThead={() => (
+          <thead>
+            <tr>
+              <th style={{ width: "8em" }}>LO</th>
+              <th>Description</th>
+              <th style={{ width: "14em" }}>Source</th>
+              <th style={{ width: "14em" }}>Courses</th>
+              <th style={{ width: "7em" }}>Questions</th>
+            </tr>
+          </thead>
+        )}
+        renderTableRow={(result) => (
+          <tr key={result.id}>
+            <td>
+              <Link href={result.href}>
+                <Typography>{result.id}</Typography>
+              </Link>
+            </td>
+            <Markdown component={"td"} compressed>
+              {result.text}
+            </Markdown>
+            <Markdown component={"td"} compressed>
+              {result.source}
+            </Markdown>
+            <td>
+              {result.courses
+                .filter((c) => {
+                  if (currentCourse === "all") return true;
+                  if (c.id === currentCourse) return true;
+                  return false;
+                })
+                .map((c) => (
+                  <Chip key={c.id} size="sm" sx={{ m: 0.5 }}>
+                    {c.text}
+                  </Chip>
+                ))}
+            </td>
+            <Box
+              component={"td"}
+              children={result.numberOfQuestions}
+              sx={{
+                textAlign: "right",
+                pr: `2em !important`,
+              }}
+            />
           </tr>
-        </thead>
-      )}
-      renderTableRow={(result) => (
-        <tr key={result.id}>
-          <td>
-            <Link href={result.href}>
+        )}
+        renderListItemContent={(result) => (
+          <ListItemContent>
+            <Link href={`/modules/atpl/learning-objectives/${result.id}`}>
               <Typography>{result.id}</Typography>
             </Link>
-          </td>
-          <Markdown component={"td"} compressed>
-            {result.text}
-          </Markdown>
-          <Markdown component={"td"} compressed>
-            {result.source}
-          </Markdown>
-          <td>
-            {result.courses
-              .filter((c) => {
-                if (currentCourse === "all") return true;
-                if (c.id === currentCourse) return true;
-                return false;
-              })
-              .map((c) => (
-                <Chip key={c.id} size="sm" sx={{ m: 0.5 }}>
-                  {c.text}
-                </Chip>
-              ))}
-          </td>
-          <Box
-            component={"td"}
-            children={result.numberOfQuestions}
-            sx={{
-              textAlign: "right",
-              pr: `2em !important`,
-            }}
-          />
-        </tr>
-      )}
-      renderListItemContent={(result) => (
-        <ListItemContent>
-          <Link href={`/modules/atpl/learning-objectives/${result.id}`}>
-            <Typography>{result.id}</Typography>
-          </Link>
-          <Typography level="body-xs" sx={{ fontSize: 10 }}>
-            {result.courses.map((c) => c.text).join(", ")}
-          </Typography>
-          <Typography level="body-xs" sx={{ fontSize: 10 }}>
-            Number of Questions {result.numberOfQuestions}
-          </Typography>
-          <Box
-            sx={{
-              mt: 1,
-              fontSize: "sm",
-              height: "7em",
-              overflow: "hidden",
-              maskImage:
-                "linear-gradient(to bottom, black 50%, transparent 100%)",
-            }}
-          >
-            <Markdown compressed>{result.text}</Markdown>
-            {result.source && (
-              <>
-                <Divider sx={{ width: "50%", my: 0.5 }} />
-                <Typography level="body-xs">source: </Typography>
-                <Markdown
-                  compressed
-                  sx={{ color: "text.tertiary", fontSize: "xs" }}
-                >
-                  {result.source}
-                </Markdown>
-              </>
-            )}
-          </Box>
-        </ListItemContent>
-      )}
-    />
-  );
-});
+            <Typography level="body-xs" sx={{ fontSize: 10 }}>
+              {result.courses.map((c) => c.text).join(", ")}
+            </Typography>
+            <Typography level="body-xs" sx={{ fontSize: 10 }}>
+              Number of Questions {result.numberOfQuestions}
+            </Typography>
+            <Box
+              sx={{
+                mt: 1,
+                fontSize: "sm",
+                height: "7em",
+                overflow: "hidden",
+                maskImage:
+                  "linear-gradient(to bottom, black 50%, transparent 100%)",
+              }}
+            >
+              <Markdown compressed>{result.text}</Markdown>
+              {result.source && (
+                <>
+                  <Divider sx={{ width: "50%", my: 0.5 }} />
+                  <Typography level="body-xs">source: </Typography>
+                  <Markdown
+                    compressed
+                    sx={{ color: "text.tertiary", fontSize: "xs" }}
+                  >
+                    {result.source}
+                  </Markdown>
+                </>
+              )}
+            </Box>
+          </ListItemContent>
+        )}
+      />
+    );
+  },
+);
 
 LearningObjectiveList.displayName = "LearningObjectiveList";
diff --git a/libs/next/question-bank/src/components/question-list/question-list.tsx b/libs/next/question-bank/src/components/question-list/question-list.tsx
index d683d26c1f..ff558808eb 100644
--- a/libs/next/question-bank/src/components/question-list/question-list.tsx
+++ b/libs/next/question-bank/src/components/question-list/question-list.tsx
@@ -7,22 +7,26 @@ import type { SearchListProps } from "@cf/react/components";
 
 export type QuestionListProps = Omit<
   SearchListProps<QuestionSearchResult>,
-  | "renderThead"
-  | "renderTableRow"
-  | "renderListItemContent"
-  | "errorMessage"
-  | "noDataMessage"
+  "renderThead" | "renderTableRow" | "renderListItemContent"
 >;
 
 export const QuestionList = forwardRef<HTMLDivElement, QuestionListProps>(
-  ({ items, ...otherProps }, ref) => {
+  (
+    {
+      items,
+      errorMessage = "Error fetching questions",
+      noDataMessage = "No questions found",
+      ...otherProps
+    },
+    ref,
+  ) => {
     return (
       <SearchList
         {...otherProps}
         ref={ref}
         items={items}
-        errorMessage={"Error fetching questions"}
-        noDataMessage={"No questions found"}
+        errorMessage={errorMessage}
+        noDataMessage={noDataMessage}
         renderThead={() => (
           <thead>
             <tr>
diff --git a/libs/next/question-bank/src/containers/question-meta/question-meta.tsx b/libs/next/question-bank/src/containers/question-meta/question-meta.tsx
index be98160a10..b1318f3dc1 100644
--- a/libs/next/question-bank/src/containers/question-meta/question-meta.tsx
+++ b/libs/next/question-bank/src/containers/question-meta/question-meta.tsx
@@ -39,11 +39,17 @@ export const QuestionMetaComponent: FunctionComponent<
       <Typography level="h3" sx={{ mt: 2 }}>
         Learning Objectives
       </Typography>
-      <LearningObjectiveList items={learningObjectives.items} />
+      <LearningObjectiveList
+        items={learningObjectives.items}
+        noDataMessage="No connected Learning Objectives"
+      />
       <Typography level="h3" sx={{ mt: 2 }}>
         Related Questions
       </Typography>
-      <QuestionList items={relatedQuestions.items} />
+      <QuestionList
+        items={relatedQuestions.items}
+        noDataMessage="No related questions"
+      />
       <Typography level="h3" sx={{ mt: 2 }}>
         External References
       </Typography>
diff --git a/libs/next/tests/src/containers/test-study/test-study.tsx b/libs/next/tests/src/containers/test-study/test-study.tsx
index 2adf2ab86b..d66b64da6a 100644
--- a/libs/next/tests/src/containers/test-study/test-study.tsx
+++ b/libs/next/tests/src/containers/test-study/test-study.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useRouter } from "next/router";
 import { default as AccessAlarmsOutlinedIcon } from "@mui/icons-material/AccessAlarmsOutlined";
 import { default as AppsOutlinedIcon } from "@mui/icons-material/AppsOutlined";
 import { default as ChevronLeftIcon } from "@mui/icons-material/ChevronLeft";
@@ -43,6 +44,7 @@ import { TestLoading } from "../../components/test-loading";
 import { useTestProgress } from "../../hooks/use-test-progress";
 import { useTestHotkeys } from "../../hooks/use-test-progress-hotkeys";
 import { useTestProgressTime } from "../../hooks/use-test-progress-time";
+import type { QuestionBankName } from "@cf/core/question-bank";
 import type { DrawingPoints } from "@cf/react/components";
 
 type DrawingPointsMap = Record<string, DrawingPoints[]>;
@@ -67,6 +69,7 @@ export const TestStudy = container<Props>(
     useTestProgressTime({ testId });
 
     const theme = useTheme();
+    const router = useRouter();
     const test = useTestProgress((state) => state.tests[testId]);
     const goToQuestion = useTestProgress((s) => s.goToTestQuestion);
     const goToPreviousQuestion = useTestProgress((s) => s.goToPreviousQuestion);
@@ -86,6 +89,8 @@ export const TestStudy = container<Props>(
     const status = test.mode === "exam" ? "in-progress" : "both";
     const currentQuestion = test.currentQuestionIndex + 1;
     const totalQuestions = test.questions.length;
+    // TODO this should not be done here.
+    const questionBank = router.query["questionBank"] as QuestionBankName;
 
     useBugReportDebugData("test-study-current-question", () => question);
     useBugReportDebugData("test-study-test", () => test);
@@ -301,7 +306,7 @@ export const TestStudy = container<Props>(
               variant="outlined"
               target="_blank"
               startDecorator={<OpenInNewIcon />}
-              href={`../../questions/${question.templateId}`}
+              href={`/modules/${questionBank}/questions/${question.templateId}`}
               children="Explore Question"
             />
             <Divider sx={{ my: 2 }}>Explanation</Divider>