From 6e908f1e5b0ca0c2f8cee200b3f337044d82e621 Mon Sep 17 00:00:00 2001
From: JurreBrandsenInfoSupport
 <149962077+JurreBrandsenInfoSupport@users.noreply.github.com>
Date: Wed, 27 Mar 2024 15:07:43 +0100
Subject: [PATCH] scroll to first error + removed duplicate code in survey
 question component (#55)

---
 src/components/mobile/survey-questions.tsx |   1 +
 src/components/survey-questionnaire.tsx    | 130 ++++++++-------------
 src/components/survey-questions.tsx        |   3 +-
 3 files changed, 53 insertions(+), 81 deletions(-)

diff --git a/src/components/mobile/survey-questions.tsx b/src/components/mobile/survey-questions.tsx
index 27fb7bf..d859b23 100644
--- a/src/components/mobile/survey-questions.tsx
+++ b/src/components/mobile/survey-questions.tsx
@@ -55,6 +55,7 @@ export function MobileSurveyQuestionnaire({
             key={`${question.id}`}
             render={({ field }) => (
               <Card
+                id={question.id}
                 className={`border-2 ${form.formState.errors[question.id] ? "border-red-500" : "border-gray-200 dark:border-slate-900"}`}
               >
                 <CardHeader>
diff --git a/src/components/survey-questionnaire.tsx b/src/components/survey-questionnaire.tsx
index 839177d..ca06952 100644
--- a/src/components/survey-questionnaire.tsx
+++ b/src/components/survey-questionnaire.tsx
@@ -213,88 +213,58 @@ export function SurveyQuestionnaire({
       ),
     }));
 
+  const ProgressionBarComponent =
+    screenSize.width < 768 ? MobileProgressionBar : ProgressionBar;
+  const QuestionsComponent =
+    screenSize.width < 768 ? MobileSurveyQuestionnaire : SurveyQuestions;
+
   return (
     <div>
-      {screenSize.width < 768 && (
-        <div>
-          <div className="mb-4">
-            <MobileProgressionBar roles={selectedRolesForProgressBar} />
-          </div>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(async () => {
-                setIsSubmitting(true);
-                onSubmit(
-                  form.getValues(),
-                  session,
-                  selectedRolesForProgressBar,
-                  submitResponse,
-                ).catch((error) => {
-                  console.error("Error in form submission:", error);
-                });
-              })}
-              className="grid gap-4 md:grid-cols-1 lg:grid-cols-1"
-            >
-              <MobileSurveyQuestionnaire
-                session={session}
-                filteredQuestions={filteredQuestions}
-                answerOptions={answerOptions}
-                form={form}
-                responses={responses}
-                setResponses={setResponses}
-                submitResponse={submitResponse}
-              />
-              <SpinnerButton
-                type="submit"
-                state={isSubmitting || submitResponse.isLoading}
-                disabled={isSubmitting || submitResponse.isLoading}
-                name={
-                  getNextHref(selectedRolesForProgressBar) ? "Next" : "Submit"
-                }
-              />
-            </form>
-          </Form>
-        </div>
-      )}
-      {screenSize.width >= 768 && (
-        <div>
-          <ProgressionBar roles={selectedRolesForProgressBar} />
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(async () => {
-                setIsSubmitting(true);
-                onSubmit(
-                  form.getValues(),
-                  session,
-                  selectedRolesForProgressBar,
-                  submitResponse,
-                ).catch((error) => {
-                  console.error("Error in form submission:", error);
-                });
-              })}
-              className="grid gap-4 md:grid-cols-1 lg:grid-cols-1"
-            >
-              <SurveyQuestions
-                session={session}
-                filteredQuestions={filteredQuestions}
-                answerOptions={answerOptions}
-                form={form}
-                responses={responses}
-                setResponses={setResponses}
-                submitResponse={submitResponse}
-              />
-              <SpinnerButton
-                type="submit"
-                state={isSubmitting || submitResponse.isLoading}
-                disabled={isSubmitting || submitResponse.isLoading}
-                name={
-                  getNextHref(selectedRolesForProgressBar) ? "Next" : "Submit"
-                }
-              />
-            </form>
-          </Form>
-        </div>
-      )}
+      <ProgressionBarComponent roles={selectedRolesForProgressBar} />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(
+            async () => {
+              setIsSubmitting(true);
+              onSubmit(
+                form.getValues(),
+                session,
+                selectedRolesForProgressBar,
+                submitResponse,
+              ).catch((error) => {
+                console.error("Error in form submission:", error);
+              });
+            },
+            (errors) => {
+              // scroll to the first error
+              const firstError = Object.keys(errors)[0];
+              const element = document.getElementById(firstError ?? "");
+              element?.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+              });
+            },
+          )}
+          className="grid gap-4 md:grid-cols-1 lg:grid-cols-1"
+        >
+          <QuestionsComponent
+            session={session}
+            filteredQuestions={filteredQuestions}
+            answerOptions={answerOptions}
+            form={form}
+            responses={responses}
+            setResponses={setResponses}
+            submitResponse={submitResponse}
+          />
+          <SpinnerButton
+            type="submit"
+            state={isSubmitting || submitResponse.isLoading}
+            disabled={isSubmitting || submitResponse.isLoading}
+            name={getNextHref(selectedRolesForProgressBar) ? "Next" : "Submit"}
+          />
+        </form>
+      </Form>
     </div>
   );
 }
diff --git a/src/components/survey-questions.tsx b/src/components/survey-questions.tsx
index c7491a8..9a44bf7 100644
--- a/src/components/survey-questions.tsx
+++ b/src/components/survey-questions.tsx
@@ -89,9 +89,10 @@ export function SurveyQuestions({
             render={({ field }) => (
               <TableRow
                 key={question.id}
+                id={question.id}
                 className={
                   form.formState.errors[question.id]
-                    ? "!border-2 !border-dashed !border-red-500"
+                    ? "error !border-2 !border-dashed !border-red-500"
                     : ""
                 }
               >