Merge pull request #25 from cbvora/feature/update_url_to_current_q

Few issues/enhancement

Author: danieldanielecki

app/exam/page.tsx

@@ -8,6 +8,7 @@ import { Button } from "@azure-fundamentals/components/Button";
 import QuizExamForm from "@azure-fundamentals/components/QuizExamForm";
 import { Question } from "@azure-fundamentals/components/types";
 import ExamResult from "@azure-fundamentals/components/ExamResult";
+import LoadingIndicator from "@azure-fundamentals/components/LoadingIndicator";
 
 const questionsQuery = gql`
   query RandomQuestions($range: Int!, $link: String) {
@@ -86,7 +87,7 @@ const Exam: NextPage<{ searchParams: { url: string; name: string } }> = ({
     setCurrentQuestion(data?.randomQuestions[0]);
   }, [data]);
 
-  if (loading) return <p>Loading</p>;
+  if (loading) return <LoadingIndicator />;
   if (error) return <p>Oh no... {error.message}</p>;
 
   const numberOfQuestions = data.randomQuestions.length || 0;

app/modes/page.tsx

@@ -23,6 +23,7 @@ const Modes: NextPage<{ searchParams: { url: string; name: string } }> = ({
           }}
           heading="Practice mode"
           paragraph="Learn and familiarize yourself with the questions and answers without any time constraint."
+          subparagraph="You can copy URL to comeback to the same question later."
           wrapperClassNames="from-[#0284C7] to-[#2DD48F]"
           headingClassNames="group-hover:from-[#0284C7] group-hover:to-[#2DD48F]"
         />

app/page.tsx

@@ -1,32 +1,50 @@
+"use client";
+
+import { useState } from "react";
 import type { NextPage } from "next";
 import NameLink from "@azure-fundamentals/components/NameLink";
 import exams from "@azure-fundamentals/lib/exams.json";
+import useDebounce from "@azure-fundamentals/hooks/useDebounce";
 
 const Home: NextPage = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms debounce delay
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const filteredExams = exams.filter((exam) =>
+    exam.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()),
+  );
+
   return (
     <div className="mx-auto mb-6 w-full lg:w-[70vw] 2xl:w-[45%] text-center">
-      <h2 className="text-white text-5xl text-leading font-bold uppercase md:mt-14">
-        Welcome!
-      </h2>
-      <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
-        Select an exam from the list bellow.
+      <h2 className="text-white text-5xl font-bold uppercase">Welcome!</h2>
+      <p className="text-white text-lg mt-4 mb-6 px-5 leading-6">
+        Select an exam from the list below.
       </p>
+      <input
+        type="text"
+        value={searchTerm}
+        onChange={handleSearchChange}
+        placeholder="Search exams"
+        className="mb-6 px-4 py-2 border border-gray-300 rounded-md w-3/4 lg:w-1/2"
+      />
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5 mx-5 lg:mx-0">
-        {exams.map((exam) => {
-          return (
-            <NameLink
-              key={exam.name}
-              href={{
-                pathname: "/modes",
-                query: { url: exam.url, name: exam.name },
-              }}
-              heading={exam.name}
-              paragraph={exam.subtitle}
-              wrapperClassNames="hover:bg-[#C7D2E2]"
-              headingClassNames="group-hover:from-[#fff] group-hover:to-[#fff]"
-            />
-          );
-        })}
+        {filteredExams.map((exam) => (
+          <NameLink
+            key={exam.name}
+            href={{
+              pathname: "/modes",
+              query: { url: exam.url, name: exam.name },
+            }}
+            heading={exam.name}
+            paragraph={exam.subtitle}
+            wrapperClassNames="hover:bg-[#C7D2E2]"
+            headingClassNames="group-hover:from-[#fff] group-hover:to-[#fff]"
+          />
+        ))}
       </div>
     </div>
   );

app/practice/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { gql, useQuery } from "@apollo/client";
 import type { NextPage } from "next";
 import QuizForm from "@azure-fundamentals/components/QuizForm";
@@ -29,11 +30,15 @@ const questionsQuery = gql`
   }
 `;
 
-const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
-  searchParams,
-}) => {
-  const { url } = searchParams;
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(1);
+const Practice: NextPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const url = searchParams.get("url") || "";
+  const seqParam = searchParams.get("seq");
+  const seq = seqParam ? parseInt(seqParam) : 1;
+
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(seq);
   const editedUrl = url.substring(0, url.lastIndexOf("/") + 1);
 
   const { loading, error, data } = useQuery(questionQuery, {
@@ -48,9 +53,26 @@ const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
     variables: { link: url },
   });
 
+  const setThisSeqIntoURL = useCallback(
+    (seq: number) => {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      newSearchParams.set("seq", seq.toString());
+      const newUrl = `${
+        window.location.pathname
+      }?${newSearchParams.toString()}`;
+      router.push(newUrl, { shallow: true });
+    },
+    [router, searchParams],
+  );
+
+  useEffect(() => {
+    setCurrentQuestionIndex(seq);
+  }, [seq]);
+
   const handleNextQuestion = (questionNo: number) => {
     if (questionNo > 0 && questionNo - 1 < questionsData?.questions?.count) {
       setCurrentQuestionIndex(questionNo);
+      setThisSeqIntoURL(questionNo);
     }
   };
 

components/ExamLink.tsx

@@ -7,6 +7,7 @@ interface ExamLinkProps
     LinkProps {
   heading: string;
   paragraph: string;
+  subparagraph?: string;
   wrapperClassNames?: string;
   headingClassNames?: string;
 }
@@ -16,6 +17,7 @@ const ExamLink = ({
   paragraph,
   wrapperClassNames,
   headingClassNames,
+  subparagraph = "",
   ...linkProps
 }: ExamLinkProps) => {
   return (
@@ -36,6 +38,9 @@ const ExamLink = ({
           {heading}
         </h2>
         <p className="text-sm text-slate-400 mt-7">{paragraph}</p>
+        {subparagraph !== "" && (
+          <p className="text-sm text-slate-400 mt-2">{subparagraph}</p>
+        )}
       </div>
     </Link>
   );

components/ExamQuizForm.tsx

@@ -3,6 +3,7 @@ import { Button } from "@azure-fundamentals/components/Button";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Question } from "@azure-fundamentals/components/types";
+import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   isLoading: boolean;
@@ -35,7 +36,7 @@ const ExamQuizForm: FC<Props> = ({
     handleNextQuestion(currentQuestionIndex + 1);
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
   const { question, options } = questionSet;
 
   const noOfAnswers = options.filter((el) => el.isAnswer).length;

components/LoadingIndicator.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const LoadingIndicator: React.FC = () => {
+  return (
+    <div className="loading-container">
+      <div className="spinner"></div>
+    </div>
+  );
+};
+
+export default LoadingIndicator;

components/NumberInputComponent.tsx

@@ -0,0 +1,40 @@
+import useDebounce from "@azure-fundamentals/hooks/useDebounce";
+import { useState, useEffect } from "react";
+
+interface Props {
+  totalQuestions: number;
+  currentQuestionIndex: number;
+  handleNextQuestion: (index: number) => void;
+}
+
+const NumberInputComponent: React.FC<Props> = ({
+  totalQuestions,
+  currentQuestionIndex,
+  handleNextQuestion,
+}) => {
+  const [inputValue, setInputValue] = useState(currentQuestionIndex);
+  const debouncedInputValue = useDebounce(inputValue, 1000);
+
+  useEffect(() => {
+    if (debouncedInputValue !== currentQuestionIndex) {
+      handleNextQuestion(debouncedInputValue);
+    }
+  }, [debouncedInputValue, currentQuestionIndex, handleNextQuestion]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(Number(e.target.value));
+  };
+
+  return (
+    <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={inputValue}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default NumberInputComponent;

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;
@@ -192,7 +193,7 @@ const QuizExamForm: React.FC<Props> = ({
     setSavedAnswers(saved);
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
 
   return (
     <FormikProvider value={formik}>