Feat annex gallery (#95)

Closes #66

Adds Annex gallery. Closes
#66

- Adds Annex gallery. 
- Polishes annexes a bit using the gallery
- Refactors lists related verticals to avoid duplicate code

apps/docs/.storybook/preview.tsx

@@ -15,21 +15,9 @@ import "@fontsource/public-sans";
 window.React = React;
 
 const api = initialize({
-  onUnhandledRequest: ({ method, url }) => {
+  onUnhandledRequest: ({ method, url }, print) => {
     if (url.includes("/trpc")) {
-      console.log(api.listHandlers());
-      console.error(
-        [
-          `Unhandled ${method} request to ${url}.`,
-          "",
-          "This exception has been only logged in the console, however, it's strongly ",
-          "recommended to resolve this error as you don't want unmocked data in ",
-          "Storybook stories.",
-          "",
-          "If you wish to mock an error response, please refer to this guide: ",
-          "https://mswjs.io/docs/recipes/mocking-error-responses",
-        ].join(""),
-      );
+      print.error();
     }
   },
 });

apps/next-app/pages/articles/blog/007-annex-search.page.mdx

@@ -0,0 +1,57 @@
+import { Link } from "@mui/joy";
+import { AnnexSearch } from "@chair-flight/react/containers";
+import { BlogPageLayout } from "./_blog-page.layout";
+
+export const meta = {
+  title: "Introducing Annex Search",
+  linkTitle: "Introducing Annex Search",
+  file: "007-annex-search",
+  description: [
+    "Annexes are a center piece in all EASA exams. Finding them however, is not ",
+    "always easy. We are introducing annex search to Chair flight as an alternative ",
+    "way for you to find questions based on what annexes they included. ",
+  ].join(""),
+  tags: ["Feature"],
+  author: "PupoSDC",
+  isoDate: "2024-01-23T20:00:00.000Z",
+};
+
+# Introducing Annex Search
+
+Annexes are a center piece in all EASA exams. Finding them however, is not
+always easy. We are introducing annex search to Chair flight as an alternative
+way for you to find questions based on what annexes they included.
+
+<br />
+
+<AnnexSearch
+  noSsr
+  questionBank="atpl"
+  forceMode="mobile"
+  sx={{ height: 500 }}
+/>
+
+<br />
+
+Unfortuantely, to make this work we had to change how we managed annexes
+internally which will result in all your previously started and finished tests
+no longer being available. Chair-flight is still in relatively early development,
+and altough we prefer to avoid such breaking changes, they will sometimes are
+necessary.
+
+<br />
+
+<Link
+  href="/modules/atpl/annexes"
+  display="block"
+  color="primary"
+  children="Search ATPL Annexes"
+/>
+
+<br />
+
+**See you in the skies!**
+
+export default ({ children }) => (
+  <BlogPageLayout meta={meta}>{children}</BlogPageLayout>
+);

apps/next-app/pages/modules/[questionBank]/annexes/index.page.tsx

@@ -0,0 +1,46 @@
+import * as fs from "node:fs/promises";
+import { AppHead } from "@chair-flight/react/components";
+import { LayoutModule, AnnexSearch } from "@chair-flight/react/containers";
+import { staticHandler } from "@chair-flight/trpc/server";
+import type { QuestionBankName } from "@chair-flight/base/types";
+import type { Breadcrumbs } from "@chair-flight/react/containers";
+import type { GetStaticPaths, NextPage } from "next";
+
+type PageProps = {
+  questionBank: QuestionBankName;
+};
+
+type PageParams = {
+  questionBank: QuestionBankName;
+};
+
+const Page: NextPage<PageProps> = ({ questionBank }) => {
+  const crumbs = [
+    [questionBank.toUpperCase(), `/modules/${questionBank}`],
+    "Annexes",
+  ] as Breadcrumbs;
+
+  return (
+    <LayoutModule fixedHeight questionBank={questionBank} breadcrumbs={crumbs}>
+      <AppHead />
+      <AnnexSearch questionBank={questionBank} sx={{ height: "100%" }} />
+    </LayoutModule>
+  );
+};
+
+export const getStaticProps = staticHandler<PageProps, PageParams>(
+  async ({ params, helper }) => {
+    await LayoutModule.getData({ helper, params });
+    await AnnexSearch.getData({ helper, params });
+    return { props: params };
+  },
+  fs,
+);
+
+export const getStaticPaths: GetStaticPaths<PageParams> = async () => {
+  const banks: QuestionBankName[] = ["type", "atpl"];
+  const paths = banks.map((questionBank) => ({ params: { questionBank } }));
+  return { fallback: false, paths };
+};
+
+export default Page;

apps/next-app/pages/modules/[questionBank]/learning-objectives/index.page.tsx

@@ -26,7 +26,10 @@ export const Page: NextPage<PageProps, PageParams> = ({ questionBank }) => {
   return (
     <LayoutModule fixedHeight questionBank={questionBank} breadcrumbs={crumbs}>
       <AppHead />
-      <LearningObjectivesSearch questionBank={questionBank} />
+      <LearningObjectivesSearch
+        questionBank={questionBank}
+        sx={{ height: "100%" }}
+      />
     </LayoutModule>
   );
 };

apps/next-app/pages/modules/[questionBank]/tests/create.page.tsx

@@ -1,5 +1,4 @@
 import * as fs from "node:fs/promises";
-import { useRouter } from "next/router";
 import { AppHead } from "@chair-flight/react/components";
 import { LayoutModule, TestMaker } from "@chair-flight/react/containers";
 import { staticHandler } from "@chair-flight/trpc/server";
@@ -16,8 +15,6 @@ type PageParams = {
 };
 
 const Page: NextPage<PageProps> = ({ questionBank }) => {
-  const router = useRouter();
-
   const crumbs = [
     [questionBank.toUpperCase(), `/modules/${questionBank}`],
     ["Tests", `/modules/${questionBank}/tests`],
@@ -31,9 +28,6 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
         noSsr
         questionBank={questionBank}
         sx={{ height: "100%", maxWidth: "md", mx: "auto" }}
-        onSuccessfulTestCreation={async (test) =>
-          router.push(`/modules/${questionBank}/tests/${test.id}/${test.mode}`)
-        }
       />
     </LayoutModule>
   );

libs/base/types/src/index.ts

@@ -4,8 +4,8 @@ export * from "./lib/analytics";
 export * from "./lib/ids";
 export * from "./lib/question";
 export * from "./lib/question-bank";
+export * from "./lib/question-bank-annexes";
 export * from "./lib/question-bank-flashcards";
-export * from "./lib/question-bank-media";
 export * from "./lib/question-bank-question-templates";
 export * from "./lib/question-bank-subjects";
 export * from "./lib/test";

libs/base/types/src/lib/ids.ts

@@ -6,6 +6,6 @@ export type QuestionId = string;
 export type ContentId = string;
 export type LearningObjectiveId = string;
 export type CourseId = string;
-export type MediaId = string;
+export type AnnexId = string;
 export type FlashcardId = string;
 export type SubjectId = string;

libs/base/types/src/lib/question-bank-annexes.ts

@@ -0,0 +1,23 @@
+import type {
+  LearningObjectiveId,
+  AnnexId,
+  QuestionId,
+  QuestionVariantId,
+  SubjectId,
+} from "./ids";
+
+export type QuestionBankAnnexes = {
+  id: AnnexId;
+  format: string;
+  href: string;
+  description: string;
+  questions: QuestionId[];
+  subjects: SubjectId[];
+  variants: QuestionVariantId[];
+  learningObjectives: LearningObjectiveId[];
+};
+
+export type QuestionBankAnnexesJson = Pick<
+  QuestionBankAnnexes,
+  "id" | "description" | "format"
+>;

libs/base/types/src/lib/question.ts

@@ -1,4 +1,4 @@
-import type { QuestionOptionId, QuestionVariantId } from "./ids";
+import type { AnnexId, QuestionOptionId, QuestionVariantId } from "./ids";
 
 export type QuestionVariantType =
   | "simple"
@@ -9,7 +9,7 @@ export type QuestionVariantType =
 export type QuestionVariantGeneric<T extends QuestionVariantType> = {
   type: T;
   id: QuestionVariantId;
-  annexes: string[];
+  annexes: AnnexId[];
   externalIds: string[];
 };
 

libs/base/utils/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"]
+}

libs/base/utils/project.json

@@ -0,0 +1,22 @@
+{
+  "name": "base-utils",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/base/utils/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/base/utils/**/*.ts"]
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["tsc -p libs/base/utils/tsconfig.json"]
+      }
+    }
+  },
+  "tags": []
+}

libs/base/utils/src/index.ts

@@ -0,0 +1,12 @@
+export const makeMap = <T>(
+  array: T[],
+  getId: (t: T) => string,
+): Record<string, T> => {
+  return array.reduce(
+    (sum, v) => {
+      sum[getId(v)] = v;
+      return sum;
+    },
+    {} as Record<string, T>,
+  );
+};

libs/base/utils/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src/**/*.ts"],
+}