Merge pull request #463 from openscript-ch/444-inconsistent-birthdate-display-in-participant-view-vs-edit-mode

fix: timezone date handling

Author: openscript

.changeset/large-eyes-strive.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/utils": patch
+---
+
+Enhance timezone handling

apps/frontend/package.json

@@ -27,7 +27,7 @@
     "@quassel/ui": "workspace:*",
     "@quassel/utils": "workspace:*",
     "@tanstack/react-query": "^5.85.3",
-    "@tanstack/react-router": "^1.131.13",
+    "@tanstack/react-router": "^1.131.14",
     "nanostores": "^1.0.1",
     "openapi-fetch": "0.14.0",
     "openapi-react-query": "0.5.0",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "@anolilab/unplugin-favicons": "^1.0.5",
     "@sinclair/typebox": "^0.34.39",
-    "@tanstack/router-devtools": "^1.131.13",
-    "@tanstack/router-plugin": "^1.131.13",
+    "@tanstack/router-devtools": "^1.131.14",
+    "@tanstack/router-plugin": "^1.131.15",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.10",

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;
@@ -58,7 +59,7 @@ function AdministrationQuestionnairesEdit() {
 
   useEffect(() => {
     const { startedAt, endedAt, title, remark } = data;
-    f.initialize({ startedAt, endedAt, title, remark });
+    f.initialize({ startedAt: toMantineUTCDate(startedAt), endedAt: toMantineUTCDate(endedAt), title, remark });
   }, [isSuccess, data]);
 
   return (
@@ -68,7 +69,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>

apps/website/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@fontsource-variable/montserrat": "^5.2.6",
     "@fontsource-variable/onest": "^5.2.9",
-    "astro": "^5.13.0",
+    "astro": "^5.13.2",
     "reveal.js": "^5.2.1"
   },
   "devDependencies": {

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";