fix: differences between original fork after merge conflicts differences

Ditectrev · Dec 11, 2024 · 863e341 · 863e341
1 parent 1da4f64
commit 863e341
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 92 deletions.
diff --git a/components/NumberInputComponent.tsx b/components/NumberInputComponent.tsx
@@ -1,5 +1,6 @@
 import useDebounce from "@azure-fundamentals/hooks/useDebounce";
 import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
 
 interface Props {
   totalQuestions: number;
@@ -14,6 +15,7 @@ const NumberInputComponent: React.FC<Props> = ({
 }) => {
   const [inputValue, setInputValue] = useState(currentQuestionIndex);
   const debouncedInputValue = useDebounce(inputValue, 1000);
+  const { reset } = useForm();
 
   useEffect(() => {
     if (debouncedInputValue !== currentQuestionIndex) {
@@ -23,6 +25,7 @@ const NumberInputComponent: React.FC<Props> = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(Number(e.target.value));
+    reset();
   };
 
   return (

diff --git a/components/QuizExamForm.tsx b/components/QuizExamForm.tsx
@@ -4,6 +4,7 @@ import { Question } from "./types";
 import { FieldArray, FormikProvider, Field, useFormik } from "formik";
 import { Button } from "./Button";
 import useResults from "@azure-fundamentals/hooks/useResults";
+import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   isLoading: boolean;
@@ -188,7 +189,7 @@ const QuizExamForm: FC<Props> = ({
     setSavedAnswers(saved);
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
 
   return (
     <FormikProvider value={formik}>

diff --git a/components/QuizExamFormUF.tsx b/components/QuizExamFormUF.tsx
@@ -4,6 +4,7 @@ import { useForm, useFieldArray, Controller } from "react-hook-form";
 import { Button } from "./Button";
 import useResults from "@azure-fundamentals/hooks/useResults";
 import { Question, Option } from "@azure-fundamentals/components/types";
+import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   isLoading: boolean;
@@ -169,7 +170,7 @@ const QuizExamForm: FC<Props> = ({
     setSavedAnswers(saved);
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>

diff --git a/components/QuizForm.tsx b/components/QuizForm.tsx
@@ -4,7 +4,7 @@ import { Props } from "./types";
 import Image from "next/image";
 import SelectionInput from "./SelectionInput";
 import { Button } from "./Button";
-// import NumberInputComponent from "./NumberInputComponent";
+import NumberInputComponent from "./NumberInputComponent";
 import LoadingIndicator from "./LoadingIndicator";
 
 const QuizForm: FC<Props> = ({
@@ -15,10 +15,7 @@ const QuizForm: FC<Props> = ({
   totalQuestions,
   link,
 }) => {
-  const { register, handleSubmit, watch } = useForm();
-  const [isThinking, setIsThinking] = useState<boolean>(false);
-  const [ollamaAvailable, setOllamaAvailable] = useState<boolean>(false);
-  const [explanation, setExplanation] = useState<string | null>(null);
+  const { register, handleSubmit, reset, watch } = useForm();
 
   const [showCorrectAnswer, setShowCorrectAnswer] = useState<boolean>(false);
   const [lastIndex, setLastIndex] = useState<number>(1);
@@ -36,6 +33,10 @@ const QuizForm: FC<Props> = ({
     alt: string;
   } | null>(null);
 
+  const [isThinking, setIsThinking] = useState<boolean>(false);
+  const [ollamaAvailable, setOllamaAvailable] = useState<boolean>(false);
+  const [explanation, setExplanation] = useState<string | null>(null);
+
   useEffect(() => {
     const handleEsc = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
@@ -71,13 +72,6 @@ const QuizForm: FC<Props> = ({
     checkOllamaStatus();
   }, []);
 
-  const recordShowCorrectAnswer = () => {
-    setShowCorrectAnswer((prev) => ({
-      ...prev,
-      [currentQuestionIndex]: true,
-    }));
-  };
-
   const isOptionChecked = (optionText: string): boolean | undefined => {
     const savedAnswer = savedAnswers[currentQuestionIndex];
     if (savedAnswer === null) {
@@ -128,10 +122,11 @@ const QuizForm: FC<Props> = ({
   };
 
   if (isLoading) return <LoadingIndicator />;
+
   //Error Handling for loading issues
   if (!questionSet) {
     handleNextQuestion(1);
-    return <p>Loading questions failed</p>;
+    return <p>Loading questions failed.</p>;
   }
 
   const { question, options, images } = questionSet!;
@@ -148,54 +143,22 @@ const QuizForm: FC<Props> = ({
   };
 
   const noOfAnswers = options.filter((el) => el.isAnswer === true).length;
-
-  const handleNextQueClick = () => {
-    setExplanation(null);
-    setSavedAnswers((prev) => ({
-      ...prev,
-      [currentQuestionIndex]: watchInput,
-    }));
-    handleNextQuestion(currentQuestionIndex + 1);
-  };
-
-  const isOptionCheckedWithoutReveal = (
-    optionText: string,
-  ): boolean | undefined => {
-    const savedAnswer = checkedAnswers[currentQuestionIndex];
-    if (savedAnswer?.length) {
-      return savedAnswer.includes(optionText);
-    } else {
-      return false;
-    }
-  };
-
-  const handleRadioCheckboxClick = (event: any, isItMulti: boolean = false) => {
-    const valueToManage = event.target.value;
-    let finalData = [valueToManage];
-    if (isItMulti) {
-      const savedData = checkedAnswers[currentQuestionIndex] || [];
-      if (savedData.includes(valueToManage)) {
-        finalData = savedData.filter((item) => item !== valueToManage);
-      } else {
-        finalData = [...savedData, valueToManage];
-      }
-    }
-    setCheckedAnswers((prev) => ({
-      ...prev,
-      [currentQuestionIndex]: finalData,
-    }));
-  };
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="relative min-h-40">
         <div className="flex justify-center ">
           <button
             type="button"
             onClick={() => {
+              if (currentQuestionIndex < lastIndex + 2) {
+                setShowCorrectAnswer(true);
+              } else {
+                setShowCorrectAnswer(false);
+              }
+              reset();
               handleNextQuestion(currentQuestionIndex - 1);
             }}
-            disabled={currentQuestionIndex == 1}
+            disabled={!(currentQuestionIndex > 1) || !canGoBack}
             className="group"
           >
             <svg
@@ -217,31 +180,27 @@ const QuizForm: FC<Props> = ({
             <span className="absolute text-white opacity-10 font-bold text-6xl bottom-0 -z-[1] select-none">
               Q&A
             </span>
-            {/*  Debounce rerendering issue on prev next click
-              <NumberInputComponent
+            <NumberInputComponent
               totalQuestions={totalQuestions}
               currentQuestionIndex={currentQuestionIndex}
               handleNextQuestion={handleNextQuestion}
-            /> */}
-
-            <input
-              className="w-[40px] text-white rounded-l-md border outline-0 border-slate-700 bg-slate-900 text-center text-md [-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
-              type="number"
-              min={0}
-              max={totalQuestions}
-              value={currentQuestionIndex}
-              onChange={(e) => {
-                handleNextQuestion(Number(e.target.value));
-              }}
             />
             <p className="text-white text-md font-semibold text-center w-[40px] rounded-r-md border bg-slate-800 border-slate-700">
               {totalQuestions}
             </p>
           </div>
           <button
             type="button"
-            onClick={handleNextQueClick}
-            disabled={currentQuestionIndex == totalQuestions}
+            onClick={() => {
+              if (currentQuestionIndex < lastIndex) {
+                setShowCorrectAnswer(true);
+              } else {
+                setShowCorrectAnswer(false);
+              }
+              reset();
+              handleNextQuestion(currentQuestionIndex + 1);
+            }}
+            disabled={!(currentQuestionIndex < lastIndex)}
             className="group"
           >
             <svg
@@ -309,17 +268,9 @@ const QuizForm: FC<Props> = ({
               type={noOfAnswers > 1 ? "checkbox" : "radio"}
               label={option.text}
               isAnswer={option.isAnswer}
-              showCorrectAnswer={
-                showCorrectAnswer[currentQuestionIndex] || false
-              }
-              disabled={showCorrectAnswer[currentQuestionIndex] || false}
-              checked={
-                isOptionChecked(option.text) ||
-                isOptionCheckedWithoutReveal(option.text)
-              }
-              handleChange={(e: any) => {
-                handleRadioCheckboxClick(e, noOfAnswers > 1);
-              }}
+              showCorrectAnswer={showCorrectAnswer}
+              disabled={showCorrectAnswer}
+              defaultChecked={isOptionChecked(option.text)}
             />
           </li>
         ))}
@@ -332,7 +283,7 @@ const QuizForm: FC<Props> = ({
           type="submit"
           intent="secondary"
           size="medium"
-          disabled={showCorrectAnswer[currentQuestionIndex] || false}
+          disabled={showCorrectAnswer}
         >
           Reveal Answer
         </Button>
@@ -343,9 +294,10 @@ const QuizForm: FC<Props> = ({
             size="medium"
             disabled={isThinking}
             onClick={() => {
-              recordShowCorrectAnswer();
+              setShowCorrectAnswer(true);
               setIsThinking(true);
               explainCorrectAnswer();
+              reset();
             }}
           >
             {isThinking ? "Thinking..." : "Explain"}
@@ -364,6 +316,7 @@ const QuizForm: FC<Props> = ({
               }));
             }
             setShowCorrectAnswer(false);
+            setExplanation(null);
             if (currentQuestionIndex === totalQuestions) {
               handleNextQuestion(1);
               setLastIndex(1);

diff --git a/components/SelectionInput.tsx b/components/SelectionInput.tsx
@@ -8,7 +8,6 @@ type Props = {
   showCorrectAnswer?: boolean;
   disabled?: boolean;
   checked?: boolean;
-  handleChange?: (e: React.MouseEvent<HTMLInputElement>) => void;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 const SelectionInput = forwardRef<HTMLInputElement, Props>(
@@ -23,8 +22,6 @@ const SelectionInput = forwardRef<HTMLInputElement, Props>(
       showCorrectAnswer,
       disabled = false,
       defaultChecked,
-      checked,
-      handleChange = () => {},
       ...rest
     },
     ref,
@@ -39,8 +36,6 @@ const SelectionInput = forwardRef<HTMLInputElement, Props>(
           id={id}
           className={`peer hidden [&:checked_+_label_svg_path]:block `}
           defaultChecked={defaultChecked}
-          checked={checked}
-          onClick={handleChange}
           {...rest}
         />
         <label