Merge pull request eduardconstantin#139 from eduardconstantin/feat/replace-formik

Feat/replace formik

Author: eduardconstantin

app/exam/page.tsx

@@ -5,7 +5,7 @@ import type { NextPage } from "next";
 import { gql, useQuery } from "@apollo/client";
 import useTimer from "@azure-fundamentals/hooks/useTimer";
 import { Button } from "@azure-fundamentals/components/Button";
-import QuizExamForm from "@azure-fundamentals/components/QuizExamForm";
+import QuizExamForm from "@azure-fundamentals/components/QuizExamFormUF";
 import { Question } from "@azure-fundamentals/components/types";
 import ExamResult from "@azure-fundamentals/components/ExamResult";
 
@@ -128,7 +128,7 @@ const Exam: NextPage<{ searchParams: { url: string; name: string } }> = ({
               totalQuestions={data.randomQuestions?.length}
               currentQuestionIndex={currentQuestionIndex}
               question={currentQuestion?.question ?? ""}
-              options={currentQuestion?.options}
+              options={currentQuestion?.options ?? []}
               images={currentQuestion?.images}
               stopTimer={stopTimer}
               revealExam={revealExam}

components/QuizExamForm.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type FC } from "react";
 import Image from "next/image";
 import { Question } from "./types";
 import { FieldArray, FormikProvider, Field, useFormik } from "formik";
+import { useForm } from "react-hook-form";
 import { Button } from "./Button";
 import useResults from "@azure-fundamentals/hooks/useResults";
 
@@ -24,7 +25,7 @@ type Props = {
   images?: { url: string; alt: string }[];
 };
 
-const QuizExamForm: React.FC<Props> = ({
+const QuizExamForm: FC<Props> = ({
   isLoading,
   handleNextQuestion,
   handleSkipQuestion,
@@ -44,7 +45,7 @@ const QuizExamForm: React.FC<Props> = ({
 }) => {
   const [showCorrectAnswer, setShowCorrectAnswer] = useState<boolean>(false);
   const [savedAnswers, setSavedAnswers] = useState<any>([]);
-  const { points, reCount } = useResults(savedAnswers);
+  const { points, reCount } = useResults();
   const [selectedImage, setSelectedImage] = useState<{
     url: string;
     alt: string;
@@ -301,7 +302,9 @@ const QuizExamForm: React.FC<Props> = ({
                       }`}
                     >
                       <svg
-                        className={`border ${noOfAnswers>1?"rounded":"rounded-full"} absolute h-5 w-5 p-0.5 ${
+                        className={`border ${
+                          noOfAnswers > 1 ? "rounded" : "rounded-full"
+                        } absolute h-5 w-5 p-0.5 ${
                           showCorrectAnswer &&
                           formik.values.options[index]?.isAnswer
                             ? "text-emerald-500 border-emerald-600"