feat(frontend): add redirects when questionnaire data is missing

stampaaaron · stampaaaron · commit 6dec088b73d2 · 2024-11-19T12:03:59.000Z
diff --git a/apps/frontend/src/routeTree.gen.ts b/apps/frontend/src/routeTree.gen.ts
diff --git a/apps/frontend/src/routes/_auth/questionnaire.tsx b/apps/frontend/src/routes/_auth/questionnaire.tsx
@@ -1,3 +1,4 @@
+import { Container } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_auth/questionnaire")({
@@ -6,8 +7,8 @@ export const Route = createFileRoute("/_auth/questionnaire")({
 
 function QuestionnaireLayout() {
   return (
-    <>
+    <Container size="md" mt="xl">
       <Outlet />
-    </>
+    </Container>
   );
 }
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_form.tsx b/apps/frontend/src/routes/_auth/questionnaire/_form.tsx
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { $questionnaire } from "../../../stores/questionnaire";
+
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire")({
+  beforeLoad: ({ location }) => {
+    if (!$questionnaire.get()) {
+      throw redirect({ to: "/questionnaire", search: { redirect: location.href } });
+    }
+  },
+  component: () => <Outlet />,
+});
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx
@@ -1,6 +1,6 @@
 import { Button, Group } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
-import { i18n } from "../../../../stores/i18n";
+import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 
 export const messages = i18n("questionnaireEntries", {
@@ -30,6 +30,6 @@ function QuestionnaireEntries() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/$id/entries")({
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/entries")({
   component: QuestionnaireEntries,
 });
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/overview.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/overview.tsx
@@ -32,6 +32,6 @@ function QuestionnaireOverview() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/_form/$id/overview")({
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/overview")({
   component: QuestionnaireOverview,
 });
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/period.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/period.tsx
@@ -28,6 +28,6 @@ function QuestionnairePeriod() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/_form/$id/period")({
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/period")({
   component: QuestionnairePeriod,
 });
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/remarks.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/remarks.tsx
@@ -34,6 +34,6 @@ function QuestionnaireRemarks() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/_form/$id/remarks")({
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/remarks")({
   component: QuestionnaireRemarks,
 });
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx
@@ -29,6 +29,6 @@ function QuestionnaireNew() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/_form/new")({
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/new")({
   component: QuestionnaireNew,
 });
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/participant.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/participant.tsx
@@ -26,6 +26,6 @@ function QuestionnaireParticipant() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/_form/participant")({
+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/participant")({
   component: QuestionnaireParticipant,
 });
diff --git a/apps/frontend/src/routes/_auth/questionnaire/index.tsx b/apps/frontend/src/routes/_auth/questionnaire/index.tsx
@@ -1,10 +1,10 @@
 import { Button, Stack, TextInput } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { i18n } from "../../../../stores/i18n";
+import { i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useForm } from "@mantine/form";
-import { $api } from "../../../../stores/api";
-import { $questionnaire } from "../../../../stores/questionnaire";
+import { $api } from "../../../stores/api";
+import { $questionnaire } from "../../../stores/questionnaire";
 
 type FormValues = {
   participantId: string;
@@ -41,8 +41,12 @@ function Questionnaire() {
   });
 
   const handleSubmit = async (values: FormValues) => {
-    const participantCheck = validateParticipantMutation.mutateAsync({ params: { path: { id: values.participantId } } });
-    const studyCheck = validateStudyMutation.mutateAsync({ params: { path: { id: values.studyId } } });
+    const participantCheck = validateParticipantMutation.mutateAsync({
+      params: { path: { id: values.participantId } },
+    });
+    const studyCheck = validateStudyMutation.mutateAsync({
+      params: { path: { id: values.studyId } },
+    });
 
     Promise.all([participantCheck, studyCheck]).then(([participant, study]) => {
       $questionnaire.set({ participant, study });
@@ -64,6 +68,6 @@ function Questionnaire() {
   );
 }
 
-export const Route = createFileRoute("/_auth/questionnaire/_form/")({
+export const Route = createFileRoute("/_auth/questionnaire/")({
   component: Questionnaire,
 });
diff --git a/apps/frontend/src/stores/questionnaire.ts b/apps/frontend/src/stores/questionnaire.ts
@@ -1,9 +1,12 @@
+import { persistentAtom } from "@nanostores/persistent";
 import { components } from "../api.gen";
-import { map } from "nanostores";
 
 type Questionnaire = {
   participant: components["schemas"]["ParticipantResponseDto"];
   study: components["schemas"]["StudyResponseDto"];
 };
 
-export const $questionnaire = map<Questionnaire>();
+export const $questionnaire = persistentAtom<Questionnaire | undefined>("questionnaire", undefined, {
+  encode: JSON.stringify,
+  decode: JSON.parse,
+});

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,6 @@ function QuestionnaireOverview() {`
`32`	`32`	`);`
`33`	`33`	`}`
`34`	`34`
`35`		`-export const Route = createFileRoute("/_auth/questionnaire/_form/$id/overview")({`
	`35`	`+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/overview")({`
`36`	`36`	`component: QuestionnaireOverview,`
`37`	`37`	`});`
Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,6 @@ function QuestionnairePeriod() {`
`28`	`28`	`);`
`29`	`29`	`}`
`30`	`30`
`31`		`-export const Route = createFileRoute("/_auth/questionnaire/_form/$id/period")({`
	`31`	`+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/period")({`
`32`	`32`	`component: QuestionnairePeriod,`
`33`	`33`	`});`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,6 @@ function QuestionnaireRemarks() {`
`34`	`34`	`);`
`35`	`35`	`}`
`36`	`36`
`37`		`-export const Route = createFileRoute("/_auth/questionnaire/_form/$id/remarks")({`
	`37`	`+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/remarks")({`
`38`	`38`	`component: QuestionnaireRemarks,`
`39`	`39`	`});`
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,6 @@ function QuestionnaireNew() {`
`29`	`29`	`);`
`30`	`30`	`}`
`31`	`31`
`32`		`-export const Route = createFileRoute("/_auth/questionnaire/_form/new")({`
	`32`	`+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/new")({`
`33`	`33`	`component: QuestionnaireNew,`
`34`	`34`	`});`
Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,6 @@ function QuestionnaireParticipant() {`
`26`	`26`	`);`
`27`	`27`	`}`
`28`	`28`
`29`		`-export const Route = createFileRoute("/_auth/questionnaire/_form/participant")({`
	`29`	`+export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/participant")({`
`30`	`30`	`component: QuestionnaireParticipant,`
`31`	`31`	`});`