From 40251062edbec5e23d22a12455c1d0d967efcff9 Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Thu, 19 Sep 2024 13:56:10 -0600
Subject: [PATCH] latex rendering slowed pc down

---
 .../[moduleName]/quiz/[quizName]/EditQuiz.tsx | 24 +++++++++++-------
 .../quiz/[quizName]/QuizPreview.tsx           | 18 +++++++------
 .../components/editor/InnerMonacoEditor.tsx   | 25 +++++++++++++++++++
 nextjs/src/services/htmlMarkdownUtils.ts      | 10 ++++----
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
index 10b7fdb..f95932a 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
@@ -8,6 +8,8 @@ import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
 import { useEffect, useState } from "react";
 import QuizPreview from "./QuizPreview";
 import { QuizButtons } from "./QuizButton";
+import ClientOnly from "@/components/ClientOnly";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 
 const helpString = `QUESTION REFERENCE
 ---
@@ -50,7 +52,6 @@ this is a matching question
 ^ left answer - right dropdown
 ^ other thing -  another option`;
 
-
 export default function EditQuiz({
   moduleName,
   quizName,
@@ -65,9 +66,10 @@ export default function EditQuiz({
   const [showHelp, setShowHelp] = useState(false);
 
   useEffect(() => {
-    const delay = 500;
+    const delay = 1000;
     const handler = setTimeout(() => {
       try {
+        console.log("checking if the same...");
         if (
           quizMarkdownUtils.toMarkdown(quiz) !==
           quizMarkdownUtils.toMarkdown(
@@ -94,7 +96,7 @@ export default function EditQuiz({
 
   return (
     <div className="h-full flex flex-col align-middle px-1">
-      <div className={"min-h-0 flex flex-row w-full"}>
+      <div className={"min-h-96 flex flex-row w-full"}>
         {showHelp && (
           <pre className=" max-w-96">
             <code>{helpString}</code>
@@ -105,14 +107,18 @@ export default function EditQuiz({
         </div>
         <div className="flex-1 h-full">
           <div className="text-red-300">{error && error}</div>
-          <QuizPreview quiz={quiz} />
+          <QuizPreview moduleName={moduleName} quizName={quizName} />
         </div>
       </div>
-      <QuizButtons
-        moduleName={moduleName}
-        quizName={quizName}
-        toggleHelp={() => setShowHelp((h) => !h)}
-      />
+      <ClientOnly>
+        <SuspenseAndErrorHandling>
+          <QuizButtons
+            moduleName={moduleName}
+            quizName={quizName}
+            toggleHelp={() => setShowHelp((h) => !h)}
+          />
+        </SuspenseAndErrorHandling>
+      </ClientOnly>
     </div>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
index 57368ca..bcbcf64 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
@@ -1,3 +1,4 @@
+import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import {
   LocalQuizQuestion,
@@ -6,7 +7,14 @@ import {
 import { quizQuestionMarkdownUtils } from "@/models/local/quiz/utils/quizQuestionMarkdownUtils";
 import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
 
-export default function QuizPreview({ quiz }: { quiz: LocalQuiz }) {
+export default function QuizPreview({
+  moduleName,
+  quizName,
+}: {
+  quizName: string;
+  moduleName: string;
+}) {
+  const { data: quiz } = useQuizQuery(moduleName, quizName);
   return (
     <div style={{ overflow: "scroll", height: "100%" }}>
       <div className="columns-2">
@@ -40,13 +48,9 @@ export default function QuizPreview({ quiz }: { quiz: LocalQuiz }) {
       <div className="p-3" style={{ whiteSpace: "pre-wrap" }}>
         {quiz.description}
       </div>
-      <hr />
       <div className="p-3 rounded-md bg-slate-950 m-5 flex flex-col gap-3">
         {quiz.questions.map((question, i) => (
-          <QuizQuestionPreview
-            key={quizQuestionMarkdownUtils.toMarkdown(question)}
-            question={question}
-          />
+          <QuizQuestionPreview key={i} question={question} />
         ))}
       </div>
       <br />
@@ -102,7 +106,7 @@ function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
           {question.answers.map((answer) => (
             <div
               key={JSON.stringify(answer)}
-              className="mx-3 mb-1 bg-dark rounded border-slate-700 flex flex-row border"
+              className="mx-3 mb-1 pt-1 border-t border-slate-700 flex flex-row"
             >
               <div className="w-8 flex flex-col justify-center">
                 {answer.correct ? (
diff --git a/nextjs/src/components/editor/InnerMonacoEditor.tsx b/nextjs/src/components/editor/InnerMonacoEditor.tsx
index 81c7ea1..35e08bd 100644
--- a/nextjs/src/components/editor/InnerMonacoEditor.tsx
+++ b/nextjs/src/components/editor/InnerMonacoEditor.tsx
@@ -3,6 +3,31 @@ import React, { useRef, useEffect } from "react";
 import loader from "@monaco-editor/loader";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import * as monaco from "monaco-editor";
+
+// import * as editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+// import * as jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+// import * as cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+// import * as htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+// import * as tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+// self.MonacoEnvironment = {
+//   getWorker(_, label) {
+//     if (label === 'json') {
+//       return new jsonWorker();
+//     }
+//     if (label === 'css' || label === 'scss' || label === 'less') {
+//       return new cssWorker();
+//     }
+//     if (label === 'html' || label === 'handlebars' || label === 'razor') {
+//       return new htmlWorker();
+//     }
+//     if (label === 'typescript' || label === 'javascript') {
+//       return new tsWorker();
+//     }
+//     return new editorWorker();
+//   },
+// };
+
 loader.config({ monaco });
 
 export default function InnerMonacoEditor({
diff --git a/nextjs/src/services/htmlMarkdownUtils.ts b/nextjs/src/services/htmlMarkdownUtils.ts
index 43c9960..7a77f5d 100644
--- a/nextjs/src/services/htmlMarkdownUtils.ts
+++ b/nextjs/src/services/htmlMarkdownUtils.ts
@@ -4,12 +4,12 @@ import markedKatex from "marked-katex-extension";
 import * as DOMPurify from "isomorphic-dompurify";
 
 export function markdownToHTMLSafe(markdownString: string) {
-  const options = {
-    throwOnError: false,
-    nonStandard: true
-  };
+  // const options = {
+  //   throwOnError: false,
+  //   nonStandard: true
+  // };
   
-  marked.use(markedKatex(options));
+  // marked.use(markedKatex(options));
 
   const clean = DOMPurify.sanitize(
     marked.parse(markdownString, { async: false, pedantic: false, gfm: true })