refactor: extract calendar page to component

Author: stampaaaron

apps/frontend/src/components/questionnaire/QuestionnaireEntries.tsx

@@ -0,0 +1,90 @@
+import { notifications } from "@quassel/ui";
+import { $api } from "../../stores/api";
+import { EntryCalendar } from "./calendar/EntryCalendar";
+import { useQueryClient } from "@tanstack/react-query";
+import { EntryFormValues } from "./calendar/EntryForm";
+import { components } from "../../api.gen";
+import { GapsPerDay } from "../../utils/entry";
+import { i18n } from "../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+type QuestionnaireEntriesProps = {
+  questionnaire: components["schemas"]["QuestionnaireResponseDto"];
+  gaps?: GapsPerDay;
+};
+
+const messages = i18n("questionnaireEntries", {
+  notificationSuccessCreateLanguage: "Successfully add a new language.",
+  notificationSuccessCreateCarer: "Successfully add a new carer.",
+});
+
+export function QuestionnaireEntries({ questionnaire, gaps }: QuestionnaireEntriesProps) {
+  const c = useQueryClient();
+  const t = useStore(messages);
+
+  const participantId = questionnaire.participant?.id;
+
+  const createMutation = $api.useMutation("post", "/entries");
+  const updateMutation = $api.useMutation("patch", "/entries/{id}");
+  const deleteMutation = $api.useMutation("delete", "/entries/{id}");
+
+  const { data: languages } = $api.useQuery("get", "/languages", { params: { query: { participantId } } });
+  const createLanguageMutation = $api.useMutation("post", "/languages", {
+    onSuccess() {
+      notifications.show({ message: t.notificationSuccessCreateLanguage, color: "uzhGreen" });
+      c.refetchQueries($api.queryOptions("get", "/languages", { params: { query: { participantId } } }));
+    },
+  });
+
+  const { data: carers } = $api.useQuery("get", "/carers", { params: { query: { participantId } } });
+  const createCarerMutation = $api.useMutation("post", "/carers", {
+    onSuccess() {
+      notifications.show({ message: t.notificationSuccessCreateCarer, color: "uzhGreen" });
+      c.refetchQueries($api.queryOptions("get", "/carers", { params: { query: { participantId } } }));
+    },
+  });
+
+  const reloadEntries = () => {
+    c.invalidateQueries($api.queryOptions("get", "/questionnaires/{id}", { params: { path: { id: questionnaire.id.toString() } } }));
+  };
+
+  const handleCreate = ({ carer, ...rest }: EntryFormValues, weekday: number) => {
+    const entryRequest = {
+      ...rest,
+      carer: carer!,
+      weekday,
+      questionnaire: questionnaire.id,
+    };
+
+    return createMutation.mutateAsync({ body: entryRequest }, { onSuccess: reloadEntries });
+  };
+
+  const handleUpdate = (id: number, { carer, ...rest }: Partial<EntryFormValues>, weekday: number) => {
+    const entryRequest = {
+      ...rest,
+      carer: carer!,
+      weekday,
+      questionnaire: questionnaire.id,
+    };
+
+    return updateMutation.mutateAsync({ body: entryRequest, params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
+  };
+
+  const handleDelete = (id: number) => {
+    return deleteMutation.mutateAsync({ params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
+  };
+
+  return (
+    <EntryCalendar
+      entries={questionnaire.entries ?? []}
+      gaps={gaps}
+      onAddEntry={handleCreate}
+      onUpdateEntry={handleUpdate}
+      onDeleteEntry={handleDelete}
+      carers={carers ?? []}
+      languages={languages ?? []}
+      onAddCarer={(name) => createCarerMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
+      onAddLanguage={(name) => createLanguageMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
+    />
+  );
+}

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx

@@ -1,14 +1,12 @@
-import { Button, Group, Modal, Stack, notifications, useDisclosure, useForm } from "@quassel/ui";
+import { Button, Group, Modal, Stack, useDisclosure, useForm } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { $api } from "../../../../../stores/api";
-import { EntryFormValues } from "../../../../../components/questionnaire/calendar/EntryForm";
-import { useQueryClient } from "@tanstack/react-query";
-import { EntryCalendar } from "../../../../../components/questionnaire/calendar/EntryCalendar";
 import { useEffect, useState } from "react";
 import { components } from "../../../../../api.gen";
 import { GapsPerDay, resolveGaps } from "../../../../../utils/entry";
+import { QuestionnaireEntries } from "../../../../../components/questionnaire/QuestionnaireEntries";
 
 const messages = i18n("questionnaireEntries", {
   formAction: "Continue",
@@ -21,67 +19,14 @@ const messages = i18n("questionnaireEntries", {
   gapsDialogHighlightGaps: "Highlight gaps",
 });
 
-function QuestionnaireEntries() {
+export function Entries() {
   const n = useNavigate();
   const p = Route.useParams();
 
   const t = useStore(messages);
 
-  const c = useQueryClient();
-
-  const createMutation = $api.useMutation("post", "/entries");
-  const updateMutation = $api.useMutation("patch", "/entries/{id}");
-  const deleteMutation = $api.useMutation("delete", "/entries/{id}");
   const { data: questionnaire } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: p } });
 
-  const participantId = questionnaire.participant?.id;
-
-  const { data: languages } = $api.useQuery("get", "/languages", { params: { query: { participantId } } });
-  const createLanguageMutation = $api.useMutation("post", "/languages", {
-    onSuccess() {
-      notifications.show({ message: t.notificationSuccessCreateLanguage, color: "uzhGreen" });
-      c.refetchQueries($api.queryOptions("get", "/languages", { params: { query: { participantId } } }));
-    },
-  });
-
-  const { data: carers } = $api.useQuery("get", "/carers", { params: { query: { participantId } } });
-  const createCarerMutation = $api.useMutation("post", "/carers", {
-    onSuccess() {
-      notifications.show({ message: t.notificationSuccessCreateCarer, color: "uzhGreen" });
-      c.refetchQueries($api.queryOptions("get", "/carers", { params: { query: { participantId } } }));
-    },
-  });
-
-  const reloadEntries = () => {
-    c.invalidateQueries($api.queryOptions("get", "/questionnaires/{id}", { params: { path: p } }));
-  };
-
-  const handleCreate = ({ carer, ...rest }: EntryFormValues, weekday: number) => {
-    const entryRequest = {
-      ...rest,
-      carer: carer!,
-      weekday,
-      questionnaire: questionnaire.id,
-    };
-
-    return createMutation.mutateAsync({ body: entryRequest }, { onSuccess: reloadEntries });
-  };
-
-  const handleUpdate = (id: number, { carer, ...rest }: Partial<EntryFormValues>, weekday: number) => {
-    const entryRequest = {
-      ...rest,
-      carer: carer!,
-      weekday,
-      questionnaire: questionnaire.id,
-    };
-
-    return updateMutation.mutateAsync({ body: entryRequest, params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
-  };
-
-  const handleDelete = (id: number) => {
-    return deleteMutation.mutateAsync({ params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
-  };
-
   const [gaps, setGaps] = useState<GapsPerDay>();
   const [highlightGaps, setHighlightGaps] = useState(false);
   const [gapsDialogOpened, { open, close }] = useDisclosure();
@@ -130,17 +75,8 @@ function QuestionnaireEntries() {
               </Button>
             </Group>
           </Modal>
-          <EntryCalendar
-            entries={questionnaire.entries ?? []}
-            gaps={highlightGaps ? gaps : undefined}
-            onAddEntry={handleCreate}
-            onUpdateEntry={handleUpdate}
-            onDeleteEntry={handleDelete}
-            carers={carers ?? []}
-            languages={languages ?? []}
-            onAddCarer={(name) => createCarerMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
-            onAddLanguage={(name) => createLanguageMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
-          />
+
+          <QuestionnaireEntries gaps={highlightGaps ? gaps : undefined} questionnaire={questionnaire} />
 
           <Group>
             <Link to="/questionnaire/$id/period" params={p}>
@@ -161,5 +97,5 @@ export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/en
         params: { path: { id: params.id } },
       })
     ),
-  component: QuestionnaireEntries,
+  component: Entries,
 });