feat: implement period edit page

Author: stampaaaron

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

@@ -3,6 +3,7 @@ import { Button, Flex, MonthPicker, Stack, TextInput } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import dayjs from "dayjs";
+import { useEffect } from "react";
 
 export type PeriodFormValues = {
   title: string;
@@ -11,25 +12,33 @@ export type PeriodFormValues = {
 
 type PeriodFormProps = {
   onSave: (form: PeriodFormValues) => void;
+  period?: PeriodFormValues;
   actionLabel: string;
 };
 
 export const messages = i18n("periodForm", {
   labelTitle: "Title",
 });
 
-export function PeriodForm({ onSave, actionLabel }: PeriodFormProps) {
+export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
   const t = useStore(messages);
 
   const f = useForm<PeriodFormValues>({
-    mode: "uncontrolled",
+    initialValues: period,
     transformValues(values) {
       values.range[1] = dayjs(values.range[1]).utc().endOf("month").toDate();
 
       return values;
     },
   });
 
+  useEffect(() => {
+    if (period) {
+      f.setValues(period);
+      f.resetDirty();
+    }
+  }, [period]);
+
   return (
     <form onSubmit={f.onSubmit((values) => onSave(values))}>
       <Stack>

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

@@ -1,7 +1,9 @@
-import { Button } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
+import { PeriodForm, PeriodFormValues } from "../../../../../components/questionnaire/PeriodForm";
+import { $api } from "../../../../../stores/api";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 export const messages = i18n("questionnairePeriod", {
   title: "Period",
@@ -10,24 +12,54 @@ export const messages = i18n("questionnairePeriod", {
 
 function QuestionnairePeriod() {
   const n = useNavigate();
-  const p = Route.useParams();
+  const { id } = Route.useParams();
 
   const t = useStore(messages);
 
-  const handleSubmit = () => {
-    n({ to: "/questionnaire/$id/entries", params: p });
+  const { data: questionnaire } = useSuspenseQuery(
+    $api.queryOptions("get", "/questionnaires/{id}", {
+      params: { path: { id } },
+    })
+  );
+
+  const period: PeriodFormValues = {
+    title: questionnaire.title!,
+    range: [new Date(Date.parse(questionnaire.startedAt!)), new Date(Date.parse(questionnaire.endedAt!))],
+  };
+
+  const updateQuestionnaireMutation = $api.useMutation("patch", "/questionnaires/{id}");
+
+  const onSave = async (form: PeriodFormValues) => {
+    const {
+      title,
+      range: [localStartedAt, localEndedAt],
+    } = form;
+
+    const startedAt = localStartedAt.toISOString();
+    const endedAt = localEndedAt.toISOString();
+
+    await updateQuestionnaireMutation.mutateAsync({
+      params: { path: { id } },
+      body: { title, startedAt, endedAt },
+    });
+
+    n({ to: "/questionnaire/$id/entries", params: { id } });
   };
 
   return (
     <>
       <h3>{t.title}</h3>
-      <form onSubmit={handleSubmit}>
-        <Button type="submit">{t.formAction}</Button>
-      </form>
+      <PeriodForm onSave={onSave} period={period} actionLabel={t.formAction} />
     </>
   );
 }
 
 export const Route = createFileRoute("/_auth/questionnaire/_questionnaire/$id/period")({
+  loader: ({ params, context: { queryClient } }) =>
+    queryClient.ensureQueryData(
+      $api.queryOptions("get", "/questionnaires/{id}", {
+        params: { path: { id: params.id } },
+      })
+    ),
   component: QuestionnairePeriod,
 });