fix: quiz designer snags (#113)

oaknational · Sep 16, 2024 · db1b0d8 · db1b0d8
1 parent 36b26ba
commit db1b0d8
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 25 deletions.
diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx
@@ -129,9 +129,14 @@ const Hero = ({
                     trackEvent("quiz_designer:begin");
                     dispatch({ type: QuizAppActions.Begin });
                   }
-                  questionsWrapperRef.current?.scrollIntoView({
-                    behavior: "smooth",
-                  });
+                  const questionsWrapper = questionsWrapperRef.current;
+                  if (questionsWrapper) {
+                    const { top } = questionsWrapper.getBoundingClientRect();
+                    window.scrollTo({
+                      top: top + window.pageYOffset - 200,
+                      behavior: "smooth",
+                    });
+                  }
                 }
               }}
             >

diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx
@@ -24,6 +24,8 @@ const QuizContent = ({
   toggleExportMenu,
 }: Readonly<QuizContentProps>) => {
   const questionsWrapperRef = useRef<HTMLDivElement>(null);
+  const questionRefs = useRef<(HTMLDivElement | null)[]>([]);
+
   const { shareContent, shareId, shareLoading } = useShareContent({
     state,
   });
@@ -63,6 +65,7 @@ const QuizContent = ({
             return (
               <QuizQuestionRow
                 key={`QuizContent-QuestionRow-${questionIdx}`}
+                ref={(el) => (questionRefs.current[questionIdx] = el)}
                 questionRow={questionRow}
                 questionIdx={questionIdx}
                 state={state}
@@ -81,6 +84,8 @@ const QuizContent = ({
           dispatch={dispatch}
           suggestedQuestionsGeneration={suggestedQuestionsGeneration}
           setPotentialNewQuestions={setPotentialNewQuestion}
+          questionsWrapperRef={questionsWrapperRef}
+          questionRefs={questionRefs}
         />
 
         {state.questions[0]?.answers !== undefined &&

diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx
@@ -1,4 +1,4 @@
-import { Dispatch } from "react";
+import { Dispatch, useRef } from "react";
 
 import { Box, Container } from "@radix-ui/themes";
 import useSuggestedQuestions from "hooks/useSuggestedQuestions";
@@ -53,6 +53,8 @@ const QuizDesignerPageContent = ({
     state,
     dispatch,
   });
+
+  const questionRefs = useRef<(HTMLDivElement | null)[]>([]);
   return (
     <>
       <ExportMenu
@@ -85,6 +87,9 @@ const QuizDesignerPageContent = ({
                     questionIdx={questionIdx}
                     state={state}
                     dispatch={dispatch}
+                    ref={(el) => {
+                      questionRefs.current[questionIdx] = el;
+                    }}
                     suggestedQuestionsGeneration={suggestedQuestionsGeneration}
                   />
                 );
@@ -99,6 +104,8 @@ const QuizDesignerPageContent = ({
               dispatch={dispatch}
               setPotentialNewQuestions={setPotentialNewQuestion}
               suggestedQuestionsGeneration={suggestedQuestionsGeneration}
+              questionRefs={questionRefs}
+              questionsWrapperRef={questionsWrapperRef}
             />
 
             {state.questions[0]?.answers !== undefined &&

diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx
@@ -30,6 +30,7 @@ type QuizQuestionRowProps = {
   dispatch: Dispatch<QuizAppAction>;
   isLessonPlan?: boolean;
   suggestedQuestionsGeneration: () => void;
+  ref: React.RefCallback<HTMLDivElement>;
 };
 
 function isOddOrEven(i: number) {
@@ -69,6 +70,7 @@ export function QuizQuestionRow({
   dispatch,
   isLessonPlan,
   suggestedQuestionsGeneration,
+  ref,
 }: Readonly<QuizQuestionRowProps>) {
   const { trackEvent } = useAnalytics();
 
@@ -111,6 +113,7 @@ export function QuizQuestionRow({
 
   return (
     <div
+      ref={ref}
       key={questionIdx}
       className={quizQuestionRows({ oddOrEven: isRowOddOrEvenOrLessonPlan })}
     >

diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx
@@ -35,14 +35,13 @@ export default function Choose({
   useEffect(() => {
     setTopic(debouncedTopic);
   }, [debouncedTopic, setTopic]);
+
+  useEffect(() => {
+    if (topic === "") {
+      setTempTopic("");
+    }
+  }, [topic, setTempTopic]);
   return (
-    // TODO reintroduce form submission
-    // <form
-    //   onSubmit={(e) => {
-    //     e.preventDefault();
-    //     setTopic(tempTopic);
-    //   }}
-    // >
     <Flex gap="0" direction="column" mt="9" className="w-full">
       <p className="font-bold">
         Choose your subject and key stage to get started.
@@ -70,6 +69,5 @@ export default function Choose({
         />
       </Box>
     </Flex>
-    // </form>
   );
 }
diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx
@@ -15,7 +15,6 @@ interface SubjectKeyStageInputProps {
   setTopic: (topic: string) => void;
   hasStartedApp: boolean;
   direction?: "row" | "column";
-  app?: "lesson-planner" | "quiz-designer";
 }
 
 const SubjectKeyStageSection = ({
@@ -27,14 +26,11 @@ const SubjectKeyStageSection = ({
   setTopic,
   hasStartedApp,
   direction,
-  app,
 }: Readonly<SubjectKeyStageInputProps>) => {
   return (
     <div className="w-full">
       {hasStartedApp ? (
-        app !== "lesson-planner" && (
-          <Confirmed subject={subject} keyStage={keyStage} topic={topic} />
-        )
+        <Confirmed subject={subject} keyStage={keyStage} topic={topic} />
       ) : (
         <Choose
           keyStage={keyStage}

diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/SuggestedQuestionCard.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/SuggestedQuestionCard.tsx
@@ -12,15 +12,17 @@ import { Icon } from "@/components/Icon";
 const SuggestedLessonCard = ({
   answer: question,
   dispatch,
-
+  questionsWrapperRef,
   potentialNewQuestions,
   setPotentialNewQuestions,
+  questionRefs,
 }: {
   answer: PotentialQuestionsType[0];
   dispatch: Dispatch<QuizAppAction>;
-
+  questionsWrapperRef: React.RefObject<HTMLDivElement>;
   potentialNewQuestions: PotentialQuestionsType;
   setPotentialNewQuestions: React.Dispatch<PotentialQuestionsType>;
+  questionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
 }) => {
   const [showAnswers, setShowAnswers] = useState(false);
   return (
@@ -58,16 +60,30 @@ const SuggestedLessonCard = ({
           </Flex>
         </button>
         <button
-          onClick={() => {
+          onClick={async () => {
             dispatch({
               type: QuizAppActions.AddPopulatedQuestion,
               question: question,
             });
-            removeQuestionFromArray(
+            await removeQuestionFromArray(
               question,
               potentialNewQuestions,
               setPotentialNewQuestions,
-            );
+            ).then(() => {
+              const questionsWrapper = questionsWrapperRef.current;
+              if (questionsWrapper) {
+                const questionRef = questionRefs.current.find(
+                  (q) => q?.id === question.question,
+                );
+                if (questionRef) {
+                  const { top } = questionRef.getBoundingClientRect();
+                  window.scrollTo({
+                    top: top + window.pageYOffset - 200,
+                    behavior: "smooth",
+                  });
+                }
+              }
+            });
           }}
           className="font-bold"
         >
@@ -102,7 +118,7 @@ const SuggestedLessonCard = ({
   );
 };
 
-function removeQuestionFromArray(
+async function removeQuestionFromArray(
   question: PotentialQuestionsType[0],
   potentialNewQuestions: PotentialQuestionsType,
   setPotentialNewQuestions: React.Dispatch<PotentialQuestionsType>,

diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/SuggestedQuestions.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/SuggestedQuestions.tsx
@@ -19,6 +19,8 @@ type SuggestedQuestionsProps = {
   dispatch: Dispatch<QuizAppAction>;
   suggestedQuestionsGeneration: () => void;
   setPotentialNewQuestions: React.Dispatch<PotentialQuestionsType>;
+  questionsWrapperRef: React.RefObject<HTMLDivElement>;
+  questionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
 };
 
 const SuggestedQuestions = ({
@@ -29,6 +31,8 @@ const SuggestedQuestions = ({
   potentialNewQuestions,
   setPotentialNewQuestions,
   dispatch,
+  questionsWrapperRef,
+  questionRefs,
 }: SuggestedQuestionsProps) => {
   return (
     <>
@@ -62,6 +66,8 @@ const SuggestedQuestions = ({
                           key={answer.question}
                           potentialNewQuestions={potentialNewQuestions}
                           setPotentialNewQuestions={setPotentialNewQuestions}
+                          questionsWrapperRef={questionsWrapperRef}
+                          questionRefs={questionRefs}
                         />
                       );
                   })}

diff --git a/apps/nextjs/src/hooks/useSuggestedQuestions.ts b/apps/nextjs/src/hooks/useSuggestedQuestions.ts
@@ -1,11 +1,11 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { extraQuizPromptInfo } from "ai-apps/quiz-designer/extraQuizPromptInfo";
 import {
   QuizAppAction,
   QuizAppActions,
 } from "ai-apps/quiz-designer/state/actions";
-import { QuizAppState } from "ai-apps/quiz-designer/state/types";
+import { QuizAppState, QuizAppStatus } from "ai-apps/quiz-designer/state/types";
 import { z } from "zod";
 
 import { answersAndDistractorOutputSchema } from "@/components/AppComponents/QuizDesigner/QuizQuestionRow";
@@ -35,6 +35,15 @@ const useSuggestedQuestions = ({
   const [potentialNewQuestions, setPotentialNewQuestion] =
     useState<PotentialQuestionsType>([]);
 
+  useEffect(() => {
+    if (
+      state.status === QuizAppStatus.EditingSubjectAndKS ||
+      state.status === QuizAppStatus.Initial
+    ) {
+      setPotentialNewQuestion([]);
+    }
+  }, [state]);
+
   const {
     requestGeneration: requestSuggestedQuestionsGeneration,
     status,
@@ -81,6 +90,7 @@ const useSuggestedQuestions = ({
         otherQuestions,
         subject: state.subject,
         keyStage: state.keyStage,
+        numberOfDistractors: 2,
         ageRange: getAgesFromKeyStage(state.keyStage),
         topic: state.topic,
       },