feat: add new question editor (#133)

Adds a more modular question editor where different parts can be reused.
PupoSDC · Feb 6, 2024 · 960e018 · 960e018
1 parent 544906e
commit 960e018
Show file tree

Hide file tree

Showing 29 changed files with 1,633 additions and 877 deletions.
diff --git a/apps/next-app/pages/modules/[questionBank]/questions/[questionId].page.tsx b/apps/next-app/pages/modules/[questionBank]/questions/[questionId].page.tsx
@@ -1,41 +1,52 @@
 import { useRouter } from "next/router";
+import { Box, Tab, TabList, TabPanel, Tabs, tabClasses } from "@mui/joy";
 import { getRandomId } from "@chair-flight/base/utils";
 import { AppHead } from "@chair-flight/react/components";
-import { LayoutModule, QuestionOverview } from "@chair-flight/react/containers";
+import {
+  LayoutModule,
+  QuestionExplanation,
+  QuestionMeta,
+  QuestionStandAlone,
+} from "@chair-flight/react/containers";
 import { ssrHandler } from "@chair-flight/trpc/server";
 import type { QuestionBankName } from "@chair-flight/core/question-bank";
 import type { Breadcrumbs } from "@chair-flight/react/containers";
 import type { NextPage } from "next";
 
-type PageParams = {
+type QueryParams = {
   seed?: string;
-  variantId?: string;
+  tab?: string;
+};
+
+type PageParams = QueryParams & {
   questionBank: QuestionBankName;
   questionId: string;
 };
 
 type PageProps = {
-  seed: string;
-  variantId: string | null;
   questionBank: QuestionBankName;
   questionId: string;
+  seed: string;
+  tab: string;
 };
 
 const Page: NextPage<PageProps> = ({
-  seed: initialSeed,
-  variantId: initialVariantId,
   questionBank,
   questionId,
+  tab: initialTab,
+  seed: initialSeed,
 }) => {
   const router = useRouter();
   const query = router.query as PageParams;
   const seed = query.seed ?? initialSeed;
-  const variantId = query.variantId ?? initialVariantId ?? undefined;
+  const tab = query.tab ?? initialTab;
 
-  const updateVariantAndSeed = (query: { variantId: string; seed: string }) => {
-    router.push({ pathname: router.pathname, query }, undefined, {
-      shallow: true,
-    });
+  const updateQuery = (query: QueryParams) => {
+    router.push(
+      { ...router, query: { ...router.query, ...query } },
+      undefined,
+      { shallow: true },
+    );
   };
 
   const crumbs = [
@@ -50,28 +61,80 @@ const Page: NextPage<PageProps> = ({
   // );
 
   return (
-    <LayoutModule questionBank={questionBank} breadcrumbs={crumbs} noPadding>
-      <AppHead linkTitle={`Chair Flight: ${variantId}`} linkDescription={""} />
-      <QuestionOverview
-        questionBank={questionBank}
-        questionId={questionId}
-        variantId={variantId}
-        seed={seed}
-        onQuestionChanged={updateVariantAndSeed}
+    <LayoutModule
+      questionBank={questionBank}
+      breadcrumbs={crumbs}
+      fixedHeight
+      noPadding
+    >
+      <AppHead
+        linkTitle={`Chair Flight [${questionId}]`}
+        linkDescription={""}
       />
+      <Tabs
+        value={tab}
+        onChange={(_, v) => updateQuery({ tab: v as string })}
+        sx={{ backgroundColor: "transparent", flex: 1 }}
+      >
+        <TabList
+          sx={{
+            position: "fixed",
+            bgcolor: "background.surface",
+            width: "100%",
+            height: (theme) => `calc(${theme.spacing(5)} + 2px)`,
+
+            [`& .${tabClasses.selected}`]: {
+              color: "primary.plainColor",
+            },
+          }}
+        >
+          <Tab value={"question"}>Question</Tab>
+          <Tab value={"explanation"}>Explanation</Tab>
+          <Tab value={"meta"}>Meta</Tab>
+        </TabList>
+        <Box sx={{ height: (theme) => `calc(${theme.spacing(5)} + 2px)` }} />
+        <TabPanel value={"question"}>
+          <QuestionStandAlone
+            noSsr
+            questionId={questionId}
+            questionBank={questionBank}
+            seed={seed}
+            onNavigateToNewSeed={updateQuery}
+            sx={{ maxWidth: "md", margin: "auto", width: "100%" }}
+          />
+        </TabPanel>
+        <TabPanel value={"explanation"}>
+          <QuestionExplanation
+            noSsr
+            questionId={questionId}
+            questionBank={questionBank}
+            sx={{ maxWidth: "md", margin: "auto", width: "100%" }}
+          />
+        </TabPanel>
+        <TabPanel value={"meta"}>
+          <QuestionMeta
+            noSsr
+            questionId={questionId}
+            questionBank={questionBank}
+            sx={{ maxWidth: "md", margin: "auto", width: "100%" }}
+          />
+        </TabPanel>
+      </Tabs>
     </LayoutModule>
   );
 };
 
 export const getServerSideProps = ssrHandler<PageProps, PageParams>(
   async ({ params, helper, context }) => {
     const seed = (context.query?.["seed"] ?? getRandomId()) as string;
-    const variantId = (context.query?.["variantId"] as string) ?? null;
-    const allParams = { ...params, seed, variantId };
+    const tab = (context.query?.["tab"] ?? "question") as string;
+    const allParams = { ...params, seed, tab };
 
     await Promise.all([
       LayoutModule.getData({ params: allParams, helper }),
-      QuestionOverview.getData({ params: allParams, helper }),
+      QuestionStandAlone.getData({ params: allParams, helper }),
+      QuestionExplanation.getData({ params: allParams, helper }),
+      QuestionMeta.getData({ params: allParams, helper }),
     ]);
 
     return { props: allParams };

diff --git a/libs/content/blog/posts/001-welcome-to-chair-flight-blog/page.md b/libs/content/blog/posts/001-welcome-to-chair-flight-blog/page.md
@@ -59,7 +59,8 @@ incorrect. For this simple question, it's possible to write 18 variations!
 That's 16 times more seeing this question than you really need to see it. In
 Chair Flight, these question variants are combined into a single question:
 
-```tsx eval
+```tsx
+// TODO FIXME
 <QuestionOverview
   noSsr
   questionId={"QYFPA3CY4E"}

diff --git a/libs/core/search/src/entities/question-search.ts b/libs/core/search/src/entities/question-search.ts
@@ -13,7 +13,11 @@ export type QuestionSearchResult = {
   text: string;
   href: string;
   learningObjectives: Array<{
-    name: string;
+    id: string;
+    href: string;
+  }>;
+  relatedQuestions: Array<{
+    id: string;
     href: string;
   }>;
   externalIds: string[];

diff --git a/libs/providers/search/src/question-bank/question-search.ts b/libs/providers/search/src/question-bank/question-search.ts
@@ -71,9 +71,13 @@ export class QuestionSearch extends QuestionBankSearchProvider<
         questionBank: bank.getName(),
         text: getQuestionPreview(q),
         subjects: uniqueSubjects,
-        learningObjectives: q.learningObjectives.map((name) => ({
-          name,
-          href: `/modules/${bank.getName()}/learning-objectives/${name}`,
+        learningObjectives: q.learningObjectives.map((id) => ({
+          id,
+          href: `/modules/${bank.getName()}/learning-objectives/${id}`,
+        })),
+        relatedQuestions: q.relatedQuestions.map((id) => ({
+          id,
+          href: `/modules/${bank.getName()}/questions/${id}`,
         })),
         externalIds: q.externalIds,
         href: `/modules/${bank.getName()}/questions/${q.id}`,