chore: use utc in month picker

Author: openscript

apps/frontend/package.json

@@ -23,7 +23,7 @@
     "@quassel/ui": "workspace:*",
     "@tanstack/react-query": "^5.62.0",
     "@tanstack/react-router": "^1.85.0",
-    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
     "nanostores": "^0.11.3",
     "openapi-fetch": "^0.13.1",
     "openapi-react-query": "^0.2.6",

apps/frontend/src/api.gen.ts

@@ -599,7 +599,7 @@ export interface components {
              * @example Series 1
              */
             title: string;
-            questionnaires: number[];
+            questionnaires?: number[];
         };
         QuestionnaireDto: {
             /**
@@ -905,7 +905,7 @@ export interface components {
              * @example Series 1
              */
             title: string;
-            questionnaires: number[];
+            questionnaires?: number[];
         };
         StudyResponseDto: {
             /**
@@ -918,7 +918,7 @@ export interface components {
              * @example Series 1
              */
             title: string;
-            questionnaires: number[];
+            questionnaires?: number[];
         };
         StudyMutationDto: {
             /**

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

@@ -2,45 +2,37 @@ import { useForm } from "@mantine/form";
 import { Button, Flex, MonthPicker, Stack, TextInput } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
-import { components } from "../../api.gen";
-import { endOfMonth } from "date-fns";
+import dayjs from "dayjs";
 
-type FormValues = {
+export type PeriodFormValues = {
   title: string;
   range: [Date, Date];
 };
 
-type ResultType = Pick<components["schemas"]["QuestionnaireMutationDto"], "startedAt" | "endedAt" | "title">;
-
 type PeriodFormProps = {
-  onSave: (questionnaire: ResultType) => void;
+  onSave: (form: PeriodFormValues) => void;
   actionLabel: string;
 };
 
-const mapValues = ({ range: [startedAt, endedAt], ...rest }: FormValues): ResultType => ({
-  ...rest,
-  startedAt: startedAt.toISOString(),
-  endedAt: endedAt.toISOString(),
-});
-
 export const messages = i18n("periodForm", {
   labelTitle: "Title",
 });
 
 export function PeriodForm({ onSave, actionLabel }: PeriodFormProps) {
   const t = useStore(messages);
 
-  const f = useForm<FormValues>({
+  const f = useForm<PeriodFormValues>({
     mode: "uncontrolled",
     transformValues(values) {
-      values.range[1] = endOfMonth(values.range[1]);
+      values.range[0] = dayjs(values.range[0]).utc().toDate();
+      values.range[1] = dayjs(values.range[1]).utc().endOf("month").toDate();
 
       return values;
     },
   });
 
   return (
-    <form onSubmit={f.onSubmit((values) => onSave(mapValues(values)))}>
+    <form onSubmit={f.onSubmit((values) => onSave(values))}>
       <Stack>
         <Flex justify="center">
           <MonthPicker {...f.getInputProps("range")} size="md" type="range" numberOfColumns={2} />

apps/frontend/src/main.tsx

@@ -5,6 +5,8 @@ import { ThemeProvider } from "@quassel/ui";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 
 const queryClient = new QueryClient();
 const router = createRouter({ routeTree, context: { queryClient }, defaultPreload: "intent", defaultPreloadStaleTime: 0 });
@@ -15,6 +17,8 @@ declare module "@tanstack/react-router" {
   }
 }
 
+dayjs.extend(utc);
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
-import { PeriodForm } from "../../../../components/questionnaire/PeriodForm";
+import { PeriodForm, PeriodFormValues } from "../../../../components/questionnaire/PeriodForm";
 import { $api } from "../../../../stores/api";
 import { $questionnaire } from "../../../../stores/questionnaire";
 
@@ -22,17 +22,24 @@ function QuestionnaireNew() {
     },
   });
 
+  const onSave = (form: PeriodFormValues) => {
+    const {
+      title,
+      range: [localStartedAt, localEndedAt],
+    } = form;
+
+    const startedAt = localStartedAt.toISOString();
+    const endedAt = localEndedAt.toISOString();
+
+    createQuestionnaireMutation.mutate({
+      body: { title, startedAt, endedAt, study: questionnaire!.study.id, participant: questionnaire!.participant.id },
+    });
+  };
+
   return (
     <>
       <h3>{t.title}</h3>
-      <PeriodForm
-        onSave={(period) =>
-          createQuestionnaireMutation.mutate({
-            body: { ...period, study: questionnaire!.study.id, participant: questionnaire!.participant.id },
-          })
-        }
-        actionLabel={t.formAction}
-      />
+      <PeriodForm onSave={onSave} actionLabel={t.formAction} />
     </>
   );
 }

libs/ui/src/components/MonthPicker.tsx

@@ -0,0 +1,7 @@
+import { MonthPicker as MantineMonthPicker, MonthPickerProps as MantineMonthPickerProps } from "@mantine/dates";
+
+type MonthPickerProps = MantineMonthPickerProps;
+
+export function MonthPicker(props: MonthPickerProps) {
+  return <MantineMonthPicker {...props} />;
+}

libs/ui/src/theme/ThemeProvider.tsx

@@ -1,5 +1,6 @@
 import { MantineProvider, MantineThemeOverride, MantineProviderProps } from "@mantine/core";
 import "./Theme.css";
+import { DatesProvider } from "@mantine/dates";
 
 type ThemeProviderProps = MantineProviderProps;
 
@@ -26,5 +27,9 @@ export const theme: MantineThemeOverride = {
 };
 
 export function ThemeProvider(args: ThemeProviderProps) {
-  return <MantineProvider {...args} theme={theme} />;
+  return (
+    <DatesProvider settings={{ timezone: "UTC" }}>
+      <MantineProvider {...args} theme={theme} />
+    </DatesProvider>
+  );
 }