Skip to content

Commit

Permalink
fix: fix question link (#171)
Browse files Browse the repository at this point in the history 
Fixes #166
  • Loading branch information
@PupoSDC
PupoSDC authored Feb 15, 2024
1 parent 6999855 commit 8665949
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 108 deletions.
201 changes: 104 additions & 97 deletions libs/next/question-bank/src/components/learning-objectives-list/learning-objective-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,112 +14,119 @@ import type { SearchListProps } from "@cf/react/components";

export type LearningObjectiveListProps = Omit<
SearchListProps<LearningObjectiveSearchResult>,
| "renderThead"
| "renderTableRow"
| "renderListItemContent"
| "errorMessage"
| "noDataMessage"
"renderThead" | "renderTableRow" | "renderListItemContent"
> & {
currentCourse?: string;
};

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";
20 changes: 12 additions & 8 deletions libs/next/question-bank/src/components/question-list/question-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 8 additions & 2 deletions libs/next/question-bank/src/containers/question-meta/question-meta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion libs/next/tests/src/containers/test-study/test-study.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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[]>;
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 8665949

Please sign in to comment.