scroll to first error + removed duplicate code in survey question com…

…ponent (#55)
infosupport · Mar 27, 2024 · 6e908f1 · 6e908f1
1 parent d82e76c
commit 6e908f1
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 81 deletions.
diff --git 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
@@ -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
@@ -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"
                     : ""
                 }
               >