fix: timezone date handling

Author: openscript

apps/frontend/src/routes/_auth/administration/participants/edit.$id.tsx

@@ -3,6 +3,7 @@ import { $api } from "../../../../stores/api";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { Button, DateInput, Stack, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
+import { toMantineUTCDate } from "@quassel/utils";
 
 type FormValues = {
   id: string;
@@ -39,7 +40,7 @@ function AdministrationParticipantsEdit() {
   useEffect(() => {
     const { birthday, id } = participant.data;
 
-    f.setValues({ birthday, id: id.toString() });
+    f.setValues({ birthday: birthday && toMantineUTCDate(birthday), id: id.toString() });
   }, [participant.isSuccess, participant.data]);
 
   return (

apps/frontend/src/routes/_auth/administration/participants/index.tsx

@@ -43,7 +43,7 @@ function AdministrationParticipantsIndex() {
         {participants.data?.map((p) => (
           <Table.Tr key={p.id}>
             <Table.Td>{p.id}</Table.Td>
-            <Table.Td>{p.birthday && time(new Date(p.birthday))}</Table.Td>
+            <Table.Td>{p.birthday && time(new Date(p.birthday), { timeZone: "UTC" })}</Table.Td>
             <Table.Td>
               <Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${p.id}`} {...props} />}>
                 Edit

apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { QuestionnaireEntries } from "../../../../components/questionnaire/QuestionnaireEntries";
 import { format, i18n } from "../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
+import { toMantineUTCDate } from "@quassel/utils";
 
 type FormValues = {
   startedAt: string;
@@ -57,7 +58,7 @@ function AdministrationQuestionnairesEdit() {
   };
 
   useEffect(() => {
-    f.initialize(data);
+    f.initialize({ ...data, startedAt: toMantineUTCDate(data.startedAt), endedAt: toMantineUTCDate(data.endedAt) });
   }, [isSuccess, data]);
 
   return (
@@ -67,7 +68,7 @@ function AdministrationQuestionnairesEdit() {
           <Table.Tr>
             <Table.Th>{t.labelParticipant}</Table.Th>
             <Table.Td>{data.participant.id}</Table.Td>
-            <Table.Td>{data.participant.birthday && time(new Date(data.participant.birthday))}</Table.Td>
+            <Table.Td>{data.participant.birthday && time(new Date(data.participant.birthday), { timeZone: "UTC" })}</Table.Td>
           </Table.Tr>
         </Table.Tbody>
       </Table>

apps/frontend/src/routes/_auth/administration/studies/$id.tsx

@@ -4,8 +4,10 @@ import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { Stack, Table, Title, Button } from "@quassel/ui";
 import { useStore } from "@nanostores/react";
 import { $session } from "../../../../stores/session";
+import { format } from "../../../../stores/i18n";
 
 function AdministrationStudiesEdit() {
+  const { time } = useStore(format);
   const sessionStore = useStore($session);
   const p = Route.useParams();
   const q = useQueryClient();
@@ -46,7 +48,7 @@ function AdministrationStudiesEdit() {
         {study.data?.participants.map((p) => (
           <Table.Tr key={p.id}>
             <Table.Td>{p.id}</Table.Td>
-            <Table.Td>{p.birthday}</Table.Td>
+            <Table.Td>{p.birthday && time(new Date(p.birthday), { timeZone: "UTC" })}</Table.Td>
             <Table.Td>
               {sessionStore.role === "ADMIN" && (
                 <Button

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

@@ -57,7 +57,7 @@ function QuestionnaireParticipant() {
             <Table.Tr>
               <Table.Th>{t.participantLabel}</Table.Th>
               <Table.Td>{questionnaire?.participant.id}</Table.Td>
-              <Table.Td>{birthday ? time(new Date(birthday)) : <i>{t.birthdateMissing}</i>}</Table.Td>
+              <Table.Td>{birthday ? time(new Date(birthday), { timeZone: "UTC" }) : <i>{t.birthdateMissing}</i>}</Table.Td>
             </Table.Tr>
             <Table.Tr>
               <Table.Th>{t.studyLabel}</Table.Th>

libs/utils/src/date.ts

@@ -12,6 +12,7 @@ export function formatDate(date: Date, dayjsFormatTemplate: string) {
 }
 
 export const getTime = (date: Date) => formatDate(date, "HH:mm");
+export const toMantineUTCDate = (date: string) => dayjs(date).utc().format("YYYY-MM-DD");
 
 export const getNext = (unit: dayjs.ManipulateType, date: Date) => dayjs(date).utc().add(1, unit).startOf(unit).toDate();
 

libs/utils/src/index.ts

@@ -1,3 +1,2 @@
-export { formatDate, getTime, getDateFromTimeAndWeekday, getNext, isSameOrAfter, isSame, getStartOf, getEndOf } from "./date";
-
-export { type Gap, type GapsPerDay, groupByWeekday, resolveGaps, entriesByInterval } from "./entry";
+export * from "./date";
+export * from "./entry";