From 5526a577b32e611983052d2c84a89211748eeef4 Mon Sep 17 00:00:00 2001
From: Pedro Pupo Sa da Costa <pedro.pupo@ist.utl.pt>
Date: Thu, 8 Feb 2024 00:55:45 +0000
Subject: [PATCH] feat: fix all type errors

---
 .../questions/editor/[questionId].page.tsx    |  14 +-
 .../questions/hooks/use-question-editor.tsx   |   3 +-
 .../question-editor-diff-tool.tsx             |  20 +--
 .../question-editor-explanation.tsx           |  32 +++--
 .../question-editor-related-questions.tsx     | 127 ++++++++----------
 .../question-editor-variant.tsx               |   8 +-
 6 files changed, 101 insertions(+), 103 deletions(-)

diff --git a/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx b/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
index 8d54a5676..1e56c8b26 100644
--- a/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
+++ b/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
@@ -81,14 +81,14 @@ const Page: NextPage<PageProps> = ({ questionBank, questionId }) => {
           <Tab value={"annexes"}>Annexes</Tab>
           <Tab value={"relatedQs"}>Related</Tab>
         </TabList>
-        <TabPanel value={"question"} sx={{ px: 0 }}>
+        <TabPanel value={"question"} sx={{ px: 0, borderRadius: 4 }}>
           <QuestionEditorVariant
             noSsr
             questionBank={questionBank}
             questionId={questionId}
           />
         </TabPanel>
-        <TabPanel value={"explanation"} sx={{ px: 0 }}>
+        <TabPanel value={"explanation"} sx={{ px: 0, borderRadius: 4 }}>
           <QuestionEditorExplanation
             noSsr
             questionBank={questionBank}
@@ -103,7 +103,7 @@ const Page: NextPage<PageProps> = ({ questionBank, questionId }) => {
             sx={{ height: "100%" }}
           />
         </TabPanel>
-        <TabPanel value={"los"} sx={{ flex: 1, overflow: "hidden" }}>
+        <TabPanel value={"los"} sx={{ px: 0 }}>
           <QuestionEditorLearningObjectives
             noSsr
             questionBank={questionBank}
@@ -111,6 +111,14 @@ const Page: NextPage<PageProps> = ({ questionBank, questionId }) => {
             sx={{ height: "100%" }}
           />
         </TabPanel>
+        <TabPanel value={"relatedQs"} sx={{ px: 0 }}>
+          <QuestionEditorRelatedQuestions
+            noSsr
+            questionBank={questionBank}
+            questionId={questionId}
+            sx={{ height: "100%" }}
+          />
+        </TabPanel>
       </Tabs>
       <Divider orientation="vertical">
         <RightArrow size="lg" />
diff --git a/libs/react/containers/src/questions/hooks/use-question-editor.tsx b/libs/react/containers/src/questions/hooks/use-question-editor.tsx
index 89eb59488..43d6d6fcc 100644
--- a/libs/react/containers/src/questions/hooks/use-question-editor.tsx
+++ b/libs/react/containers/src/questions/hooks/use-question-editor.tsx
@@ -263,7 +263,7 @@ export const useQuestionEditor = create<QuestionEditor>()(
             ...new Set([
               questionAid,
               questionBid,
-              ...(get()[questionBank].afterState[questionBid]
+              ...(get()[questionBank].afterState[questionAid]
                 ?.relatedQuestions ?? []),
               ...(get()[questionBank].afterState[questionBid]
                 ?.relatedQuestions ?? []),
@@ -275,6 +275,7 @@ export const useQuestionEditor = create<QuestionEditor>()(
               const question = state[questionBank].afterState[id];
               if (!question) return;
               question.relatedQuestions = questionIds.filter((i) => i !== id);
+              console.log(question.relatedQuestions);
             });
           });
         },
diff --git a/libs/react/containers/src/questions/question-editor-diff-tool/question-editor-diff-tool.tsx b/libs/react/containers/src/questions/question-editor-diff-tool/question-editor-diff-tool.tsx
index 77550eabd..891c83b57 100644
--- a/libs/react/containers/src/questions/question-editor-diff-tool/question-editor-diff-tool.tsx
+++ b/libs/react/containers/src/questions/question-editor-diff-tool/question-editor-diff-tool.tsx
@@ -31,17 +31,12 @@ const SearchListItem = memo<{
   questionId: QuestionId;
   questionBank: QuestionBankName;
 }>(({ questionId, questionBank }) => {
-  const {
-    initialState,
-    currentState,
-    markQuestionAsDeleted,
-    undoMarkQuestionAsDeleted,
-  } = useQuestionEditor((s) => ({
-    initialState: s[questionBank].beforeState[questionId],
-    currentState: s[questionBank].afterState[questionId],
-    markQuestionAsDeleted: s.markQuestionAsDeleted,
-    undoMarkQuestionAsDeleted: s.undoMarkQuestionAsDeleted,
-  }));
+  const { initialState, currentState, markQuestionAsDeleted } =
+    useQuestionEditor((s) => ({
+      initialState: s[questionBank].beforeState[questionId],
+      currentState: s[questionBank].afterState[questionId],
+      markQuestionAsDeleted: s.markQuestionAsDeleted,
+    }));
 
   const initial = {
     preview: getQuestionPreview(initialState.variant),
@@ -175,9 +170,6 @@ const SearchListItem = memo<{
               size="sm"
               variant="plain"
               color="success"
-              onClick={() =>
-                undoMarkQuestionAsDeleted({ questionBank, questionId })
-              }
               children={<UndoIcon />}
             />
           </Tooltip>
diff --git a/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx b/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx
index 1d87e457e..72a640771 100644
--- a/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx
+++ b/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx
@@ -1,5 +1,6 @@
 import { useState, useTransition } from "react";
-import { Textarea } from "@mui/joy";
+import { default as Editor } from "@monaco-editor/react";
+import { useColorScheme } from "@mui/joy";
 import { container } from "../../wraper";
 import { useQuestionEditor } from "../hooks/use-question-editor";
 import type { QuestionBankName } from "@chair-flight/core/question-bank";
@@ -20,7 +21,8 @@ type Data =
   AppRouterOutput["containers"]["questions"]["getQuestionEditorExplanation"];
 
 export const QuestionEditorExplanation = container<Props, Params, Data>(
-  ({ questionId, questionBank, sx }) => {
+  ({ questionId, questionBank }) => {
+    const { mode } = useColorScheme();
     const { explanation, setQuestionExplanation } = useQuestionEditor((s) => ({
       explanation: s[questionBank].afterState[questionId]?.explanation ?? "",
       setQuestionExplanation: s.setQuestionExplanation,
@@ -29,16 +31,26 @@ export const QuestionEditorExplanation = container<Props, Params, Data>(
     const [thisExplanation, setThisExplanation] = useState(explanation);
     const [, startTransition] = useTransition();
 
+    const updateExplanation = (mdInput: string | undefined = "") => {
+      setThisExplanation(mdInput);
+      startTransition(() =>
+        setQuestionExplanation({
+          questionBank,
+          questionId,
+          explanation: mdInput,
+        }),
+      );
+    };
+
     return (
-      <Textarea
+      <Editor
+        className="vs-code-editor"
+        defaultLanguage="markdown"
         value={thisExplanation}
-        sx={{ height: "100%", flex: 1, ...sx }}
-        onChange={(e) => {
-          const explanation = e.target.value;
-          setThisExplanation(explanation);
-          startTransition(() =>
-            setQuestionExplanation({ questionBank, questionId, explanation }),
-          );
+        onChange={updateExplanation}
+        theme={mode === "dark" ? "vs-dark" : "vs-light"}
+        options={{
+          wordWrap: "on",
         }}
       />
     );
diff --git a/libs/react/containers/src/questions/question-editor-related-questions/question-editor-related-questions.tsx b/libs/react/containers/src/questions/question-editor-related-questions/question-editor-related-questions.tsx
index 34e8bc9a2..0eaf71cb7 100644
--- a/libs/react/containers/src/questions/question-editor-related-questions/question-editor-related-questions.tsx
+++ b/libs/react/containers/src/questions/question-editor-related-questions/question-editor-related-questions.tsx
@@ -2,17 +2,10 @@ import { memo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { default as AddIcon } from "@mui/icons-material/Add";
-import { default as DeleteIcon } from "@mui/icons-material/DeleteOutlineOutlined";
+import { default as UnlinkIcon } from "@mui/icons-material/LinkOff";
+import { Box, ListItemContent, Stack, Tooltip, Typography } from "@mui/joy";
+import { makeMap } from "@chair-flight/base/utils";
 import {
-  Box,
-  Button,
-  ListItemContent,
-  Stack,
-  Tooltip,
-  Typography,
-} from "@mui/joy";
-import {
-  getQuestionPreview,
   type QuestionBankName,
   type QuestionId,
 } from "@chair-flight/core/question-bank";
@@ -46,34 +39,21 @@ const filterFormResolver = zodResolver(questionSearchFilters);
 type FilterKeys = keyof Data["filters"];
 
 const SearchListItem = memo<{
-  id: QuestionId;
-  parentId: QuestionId;
-  bank: QuestionBankName;
-}>(({ parentId, id, bank }) => {
-  const utils = trpc.useUtils();
-  const currentState = useQuestionEditor((s) => s[bank].afterState[id]);
-
-  const { connectTwoQuestions, deleteQuestion } = useQuestionEditor((s) => ({
-    connectTwoQuestions: s.connectTwoQuestions,
-    deleteQuestion: s.markQuestionAsDeleted,
+  questionId: QuestionId;
+  questionBank: QuestionBankName;
+}>(({ questionBank, questionId }) => {
+  const { unlinkQuestion, getDiffStatus } = useQuestionEditor((s) => ({
+    unlinkQuestion: s.unlinkQuestion,
+    getDiffStatus: s.getDiffStatus,
   }));
 
-  const current = currentState
-    ? {
-        preview: getQuestionPreview(currentState.variant),
-        los: currentState.learningObjectives.join(", "),
-        annexes: currentState.annexes.join(", ") || "None",
-        relatedQs: currentState.relatedQuestions.join(", "),
-      }
-    : null;
-
-  if (!current) return null;
+  const { current } = getDiffStatus({ questionBank, questionId });
 
   return (
     <ListItemContent sx={{ display: "flex" }}>
       <Box sx={{ flex: 1, px: 1 }}>
         <Typography level="h5" sx={{ fontSize: "sm" }}>
-          {id}
+          {questionId}
         </Typography>
         <MarkdownClientCompressed sx={{ fontSize: "xs" }}>
           {current.preview}
@@ -85,20 +65,8 @@ const SearchListItem = memo<{
             sx={{ px: 1 }}
             size="sm"
             variant="plain"
-            children={<DeleteIcon />}
-            onClick={() =>
-              connectTwoQuestions({ trpc: utils, bank, parentId, id })
-            }
-          />
-        </Tooltip>
-        <Tooltip title="Delete Question">
-          <LoadingButton
-            sx={{ px: 1 }}
-            size="sm"
-            variant="plain"
-            color="danger"
-            onClick={() => deleteQuestion(bank, id)}
-            children={<DeleteIcon />}
+            children={<UnlinkIcon />}
+            onClick={() => unlinkQuestion({ questionBank, questionId })}
           />
         </Tooltip>
       </Box>
@@ -108,11 +76,13 @@ const SearchListItem = memo<{
 
 export const QuestionEditorRelatedQuestions = container<Props, Params, Data>(
   ({ sx, component = "div", questionId, questionBank }) => {
+    const utils = trpc.useUtils();
     const [search, setSearch] = useState("");
 
-    const relatedQs = useQuestionEditor((s) => {
-      return s[questionBank].afterState[questionId]?.learningObjectives ?? [];
-    });
+    const { connectTwoQuestions, relatedQs } = useQuestionEditor((s) => ({
+      connectTwoQuestions: s.connectTwoQuestions,
+      relatedQs: s[questionBank].afterState[questionId]?.relatedQuestions ?? [],
+    }));
 
     const serverData = QuestionEditorRelatedQuestions.useData({
       questionBank,
@@ -129,31 +99,34 @@ export const QuestionEditorRelatedQuestions = container<Props, Params, Data>(
       { getNextPageParam: (l) => l.nextCursor, initialCursor: 0 },
     );
 
-    const { connectTwoQuestions, deleteQuestion } = useQuestionEditor((s) => ({
-      connectTwoQuestions: s.connectTwoQuestions,
-      deleteQuestion: s.markQuestionAsDeleted,
-    }));
+    const connectedQuestions = makeMap(
+      [questionId, ...relatedQs],
+      (id) => id,
+      () => true,
+    );
 
     return (
-      <Stack direction="row" component={component} sx={sx}>
-        <Stack height="100%" flex={1}>
-          <SearchHeader
-            search={search}
-            searchPlaceholder="Search Annexes..."
-            filters={serverData.filters}
-            filterValues={filterForm.watch()}
-            isLoading={searchQuestions.isLoading}
-            isError={searchQuestions.isError}
-            onSearchChange={setSearch}
-            onFilterValuesChange={(k, v) =>
-              filterForm.setValue(k as FilterKeys, v)
-            }
-          />
+      <Stack component={component} sx={sx}>
+        <SearchHeader
+          search={search}
+          searchPlaceholder="Search Annexes..."
+          filters={serverData.filters}
+          filterValues={filterForm.watch()}
+          isLoading={searchQuestions.isLoading}
+          isError={searchQuestions.isError}
+          onSearchChange={setSearch}
+          onFilterValuesChange={(k, v) =>
+            filterForm.setValue(k as FilterKeys, v)
+          }
+        />
+        <Stack flex={1} flexDirection={"row"} overflow={"hidden"}>
           <SearchList
             forceMode={"mobile"}
             loading={searchQuestions.isLoading}
             error={searchQuestions.isError}
-            items={(searchQuestions.data?.pages ?? []).flatMap((p) => p.items)}
+            items={(searchQuestions.data?.pages ?? [])
+              .flatMap((p) => p.items)
+              .filter((q) => !connectedQuestions[q.id])}
             onFetchNextPage={searchQuestions.fetchNextPage}
             sx={{ flex: 1, overflow: "hidden" }}
             renderThead={() => null}
@@ -170,27 +143,35 @@ export const QuestionEditorRelatedQuestions = container<Props, Params, Data>(
                 </Box>
                 <Box>
                   <Tooltip title="Add to Question">
-                    <Button
+                    <LoadingButton
                       sx={{ px: 1 }}
                       size="sm"
                       variant="plain"
                       children={<AddIcon />}
+                      onClick={() =>
+                        connectTwoQuestions({
+                          trpc: utils,
+                          questionBank: questionBank,
+                          questionA: questionId,
+                          questionB: result.id,
+                        })
+                      }
                     />
                   </Tooltip>
                 </Box>
               </ListItemContent>
             )}
           />
-        </Stack>
-        <VerticalDivider />
-        <Stack height="100%" flex={1}>
+
+          <VerticalDivider />
+
           <SearchList
             forceMode={"mobile"}
             noDataMessage="No Related Questions"
             items={relatedQs.map((id) => ({
               id,
-              parentId: questionId,
-              bank: questionBank,
+              questionId: id,
+              questionBank,
             }))}
             sx={{ flex: 1, overflow: "hidden", width: "100%" }}
             renderThead={() => null}
diff --git a/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx b/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx
index 6a5b0fe53..970ccd280 100644
--- a/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx
+++ b/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx
@@ -1,5 +1,6 @@
 import { useState, useTransition } from "react";
 import { default as Editor } from "@monaco-editor/react";
+import { useColorScheme } from "@mui/joy";
 import YAML from "yaml";
 import {
   type QuestionBankName,
@@ -7,7 +8,6 @@ import {
 } from "@chair-flight/core/question-bank";
 import { container } from "../../wraper";
 import { useQuestionEditor } from "../hooks/use-question-editor";
-import type { QuestionVariantType } from "@chair-flight/core/question-bank";
 import type { AppRouterOutput } from "@chair-flight/trpc/server";
 
 type Props = {
@@ -22,6 +22,7 @@ type Data =
 
 export const QuestionEditorVariant = container<Props, Params, Data>(
   ({ questionId, questionBank }) => {
+    const { mode } = useColorScheme();
     const { variant, setQuestionVariant } = useQuestionEditor((s) => ({
       variant: s[questionBank].afterState[questionId]?.variant,
       setQuestionVariant: s.setQuestionVariant,
@@ -44,7 +45,10 @@ export const QuestionEditorVariant = container<Props, Params, Data>(
         defaultLanguage="yaml"
         value={text}
         onChange={updateVariant}
-        options={{ wordWrap: "on" }}
+        theme={mode === "dark" ? "vs-dark" : "vs-light"}
+        options={{
+          wordWrap: "on",
+        }}
       />
     );
   },