feat: add remaining main components for editor flow

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

@@ -1,10 +1,8 @@
 import * as fs from "node:fs/promises";
-import { Box, Tab, TabList, TabPanel, Tabs, tabClasses } from "@mui/joy";
 import { AppHead } from "@chair-flight/react/components";
 import {
   LayoutModule,
-  QuestionEditorDiffTool,
-  QuestionManager,
+  QuestionEditorManager,
 } from "@chair-flight/react/containers";
 import { staticHandler } from "@chair-flight/trpc/server";
 import type { QuestionBankName } from "@chair-flight/core/question-bank";
@@ -27,62 +25,21 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
   ] as Breadcrumbs;
 
   return (
-    <LayoutModule
-      questionBank={questionBank}
-      breadcrumbs={crumbs}
-      fixedHeight
-      noPadding
-    >
+    <LayoutModule questionBank={questionBank} breadcrumbs={crumbs} fixedHeight>
       <AppHead />
-      <Tabs
-        sx={{
-          backgroundColor: "transparent",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        <TabList
-          sx={{
-            position: "fixed",
-            bgcolor: "background.surface",
-            width: "100%",
-            height: (theme) => `calc(${theme.spacing(5)} + 2px)`,
-
-            [`& .${tabClasses.selected}`]: {
-              color: "primary.plainColor",
-            },
-          }}
-        >
-          <Tab value={"Intro"}>Intro</Tab>
-          <Tab value={"Pick"}>Pick Questions</Tab>
-          <Tab value={"Edit"}>Edit Questions</Tab>
-          <Tab value={"Submit"}>Submit Changes</Tab>
-        </TabList>
-        <Box sx={{ height: (theme) => `calc(${theme.spacing(5)} + 2px)` }} />
-        <TabPanel value={"Pick"} sx={{ flex: 1, overflow: "hidden" }}>
-          <QuestionManager
-            noSsr
-            questionBank={questionBank}
-            sx={{ height: "100%" }}
-          />
-        </TabPanel>
-        <TabPanel value={"Edit"} sx={{ flex: 1, overflow: "hidden" }}>
-          <QuestionEditorDiffTool
-            noSsr
-            questionBank={questionBank}
-            sx={{ height: "100%" }}
-          />
-        </TabPanel>
-      </Tabs>
+      <QuestionEditorManager
+        noSsr
+        questionBank={questionBank}
+        sx={{ height: "100%" }}
+      />
     </LayoutModule>
   );
 };
 
 export const getStaticProps = staticHandler<PageProps, PageParams>(
   async ({ params, helper }) => {
     await LayoutModule.getData({ helper, params });
-    await QuestionManager.getData({ helper, params });
+    await QuestionEditorManager.getData({ helper, params });
     return { props: params };
   },
   fs,

apps/next-app/pages/modules/[questionBank]/questions/editor/submit.page.tsx

@@ -0,0 +1,86 @@
+import * as fs from "node:fs/promises";
+import { Box, Divider, Stack, Typography } from "@mui/joy";
+import { AppHead } from "@chair-flight/react/components";
+import {
+  LayoutModule,
+  QuestionEditorDiff,
+  QuestionEditorManager,
+  QuestionEditorSubmitForm,
+} from "@chair-flight/react/containers";
+import { staticHandler } from "@chair-flight/trpc/server";
+import type { QuestionBankName } from "@chair-flight/core/question-bank";
+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}`],
+    ["Questions", `/modules/${questionBank}/questions`],
+    ["Editor", `/modules/${questionBank}/questions/editor`],
+    "Submit",
+  ] as Breadcrumbs;
+
+  return (
+    <LayoutModule
+      questionBank={questionBank}
+      breadcrumbs={crumbs}
+      fixedHeight
+      sx={{ flexDirection: "row", gap: 2 }}
+    >
+      <AppHead />
+      <Stack sx={{ flex: 1 }}>
+        <Typography level="h2">Submit a Change to Chair Flight</Typography>
+        <Box sx={{ height: "100%", overflow: "auto" }}>
+          <Typography level="body-sm">
+            By completing the following steps you will open a Pull Request on
+            GitHub. The Pull Request will be reviewed by a member of the Chair
+            Flight team and if approved, the changes will be merged into the
+            application and be available for all our users.
+            <br />
+            <br />
+            To make this process a bit easier please supply a short title and
+            description of the changes you made. You can optionally provide your
+            e-mail so that the changes are properly credited to yourself!
+          </Typography>
+
+          <Divider sx={{ my: 2 }} />
+
+          <QuestionEditorSubmitForm noSsr />
+        </Box>
+      </Stack>
+      <Stack sx={{ flex: 1 }}>
+        <Typography level="h2">Changes</Typography>
+        <QuestionEditorDiff
+          noSsr
+          questionBank={questionBank}
+          sx={{ height: "100%", overflow: "auto" }}
+        />
+      </Stack>
+    </LayoutModule>
+  );
+};
+
+export const getStaticProps = staticHandler<PageProps, PageParams>(
+  async ({ params, helper }) => {
+    await LayoutModule.getData({ helper, params });
+    await QuestionEditorManager.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;

libs/react/containers/src/index.ts

@@ -15,8 +15,8 @@ export * from "./learning-objectives/learning-objectives-search";
 export * from "./overviews/overview-modules";
 export * from "./overviews/overview-welcome";
 export * from "./questions/question-explanation";
-export * from "./questions/question-editor-diff-tool";
-export * from "./questions/question-manager";
+export * from "./questions/question-editor-diff";
+export * from "./questions/question-editor-manager";
 export * from "./questions/question-meta";
 export * from "./questions/question-search";
 export * from "./questions/question-stand-alone";
@@ -32,3 +32,4 @@ export * from "./tests/test-search";
 export * from "./tests/test-study";
 export * from "./user/user-settings";
 export * from "./questions/question-editor-preview";
+export * from "./questions/question-editor-submit-form";

libs/react/containers/src/questions/hooks/use-question-editor.tsx

@@ -116,6 +116,10 @@ type QuestionEditor = z.infer<typeof editorSchema> & {
       relatedQs: string;
     };
   };
+
+  getQuestionsWithADiff: (args: {
+    questionBank: QuestionBankName;
+  }) => QuestionId[];
 };
 
 const persistenceKey: PersistenceKey = "cf-question-editor";
@@ -323,6 +327,12 @@ export const useQuestionEditor = create<QuestionEditor>()(
             initial,
           };
         },
+        getQuestionsWithADiff: ({ questionBank }) => {
+          return Object.keys(get()[questionBank].afterState).filter((id) => {
+            const diff = get().getDiffStatus({ questionBank, questionId: id });
+            return diff.isEdited || diff.isDeleted;
+          });
+        },
       })),
     ),
     { name: persistenceKey },