refactor: use string dates in mantine components

Author: stampaaaron

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

@@ -1,13 +1,13 @@
 import { Button, Flex, InputError, MonthPicker, Stack, TextInput, useForm } from "@quassel/ui";
-import { formatDate } from "@quassel/utils";
+import { formatDate, getStartOf, isSame } from "@quassel/utils";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
 import { params } from "@nanostores/i18n";
 
 export type PeriodFormValues = {
   title: string;
-  range: [Date | null, Date | null];
+  range: [string | null, string | null];
 };
 
 type PeriodFormProps = {
@@ -32,7 +32,7 @@ export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
     },
     validate: {
       range([start]) {
-        if (period?.range[0] && +period.range[0] !== +start!) {
+        if (period?.range[0] && !isSame("day", new Date(period.range[0]), new Date(start!))) {
           return t.validationStartDate;
         }
       },
@@ -41,14 +41,19 @@ export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
       const [newStart, newEnd] = newValues.range ?? [];
       const [prevStart, prevEnd] = prevValues.range ?? [];
       if ((!prevStart || !prevEnd) && newStart && newEnd) {
-        f.setFieldValue("title", t.defaultTitle({ start: formatDate(newStart, "M/YY"), end: formatDate(newEnd, "M/YY") }));
+        f.setFieldValue("title", t.defaultTitle({ start: formatDate(new Date(newStart), "M/YY"), end: formatDate(new Date(newEnd), "M/YY") }));
       }
     },
   });
 
   useEffect(() => {
     if (period) {
-      f.setValues(period);
+      const [start, end] = period.range;
+
+      f.setValues({
+        ...period,
+        range: [start, end ? getStartOf("day", new Date(end)).toISOString() : null],
+      });
     }
   }, [period]);
 

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

@@ -6,7 +6,7 @@ import { useEffect } from "react";
 
 type FormValues = {
   id: string;
-  birthday: Date;
+  birthday: string;
 };
 
 function AdministrationParticipantsEdit() {
@@ -31,15 +31,15 @@ function AdministrationParticipantsEdit() {
   const f = useForm<FormValues>();
   const handleSubmit = ({ id, birthday }: FormValues) => {
     editParticipantMutation.mutate({
-      body: { id: +id, birthday: birthday.toISOString() },
+      body: { id: +id, birthday },
       params: { path: { id: p.id } },
     });
   };
 
   useEffect(() => {
     const { birthday, id } = participant.data;
 
-    f.setValues({ birthday: new Date(birthday!), id: id.toString() });
+    f.setValues({ birthday, id: id.toString() });
   }, [participant.isSuccess, participant.data]);
 
   return (

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

@@ -8,8 +8,8 @@ import { format, i18n } from "../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 
 type FormValues = {
-  startedAt: Date;
-  endedAt: Date;
+  startedAt: string;
+  endedAt: string;
   title: string;
   remark?: string;
 };
@@ -49,16 +49,15 @@ function AdministrationQuestionnairesEdit() {
   });
 
   const f = useForm<FormValues>();
-  const handleSubmit = ({ startedAt, endedAt, ...rest }: FormValues) => {
+  const handleSubmit = (values: FormValues) => {
     editQuestionnaireMutation.mutate({
-      body: { ...rest, startedAt: startedAt.toISOString(), endedAt: endedAt.toISOString() },
+      body: values,
       params: { path: { id: p.id } },
     });
   };
 
   useEffect(() => {
-    const { title, remark, startedAt, endedAt } = data;
-    f.initialize({ title, remark, startedAt: new Date(startedAt), endedAt: new Date(endedAt) });
+    f.initialize(data);
   }, [isSuccess, data]);
 
   return (

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

@@ -5,6 +5,7 @@ import { PeriodForm, PeriodFormValues } from "../../../../../components/question
 import { $api } from "../../../../../stores/api";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Title } from "@quassel/ui";
+import { getStartOf, getEndOf } from "@quassel/utils";
 
 export const messages = i18n("questionnairePeriod", {
   title: "Period",
@@ -17,27 +18,23 @@ function QuestionnairePeriod() {
 
   const t = useStore(messages);
 
-  const { data: questionnaire } = useSuspenseQuery(
+  const {
+    data: { title, startedAt, endedAt },
+  } = 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 period: PeriodFormValues = { title, range: [startedAt, endedAt] };
 
   const updateQuestionnaireMutation = $api.useMutation("patch", "/questionnaires/{id}");
 
-  const onSave = async (form: PeriodFormValues) => {
-    const {
-      title,
-      range: [localStartedAt, localEndedAt],
-    } = form;
+  const onSave = async ({ title, range: [startedAt, endedAt] }: PeriodFormValues) => {
+    if (!startedAt || !endedAt) return;
 
-    const startedAt = localStartedAt!.toISOString();
-    const endedAt = localEndedAt!.toISOString();
+    startedAt = getStartOf("day", new Date(startedAt)).toISOString();
+    endedAt = getEndOf("day", new Date(endedAt)).toISOString();
 
     await updateQuestionnaireMutation.mutateAsync({
       params: { path: { id } },

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

@@ -6,7 +6,7 @@ import { $api } from "../../../../stores/api";
 import { $questionnaire } from "../../../../stores/questionnaire";
 import { useEffect } from "react";
 import { Title } from "@quassel/ui";
-import { getNext, getStartOf } from "@quassel/utils";
+import { getEndOf, getNext, getStartOf } from "@quassel/utils";
 
 const messages = i18n("questionnaireNew", {
   title: "Create new period of life",
@@ -38,16 +38,13 @@ function QuestionnaireNew() {
   const startFromBirthday = participant?.birthday ? getStartOf("month", new Date(participant.birthday)) : undefined;
   const startFromPrevious = prevEndDate ? getNext("month", new Date(prevEndDate)) : undefined;
 
-  const startDate = startFromPrevious ?? startFromBirthday;
+  const startDate = (startFromPrevious ?? startFromBirthday)?.toISOString();
 
-  const onSave = (form: PeriodFormValues) => {
-    const {
-      title,
-      range: [localStartedAt, localEndedAt],
-    } = form;
+  const onSave = async ({ title, range: [startedAt, endedAt] }: PeriodFormValues) => {
+    if (!startedAt || !endedAt) return;
 
-    const startedAt = localStartedAt!.toISOString();
-    const endedAt = localEndedAt!.toISOString();
+    startedAt = getStartOf("day", new Date(startedAt)).toISOString();
+    endedAt = getEndOf("day", new Date(endedAt)).toISOString();
 
     createQuestionnaireMutation.mutate({
       body: { title, startedAt, endedAt, participant: questionnaire!.participant.id },

libs/ui/src/components/MonthPicker.tsx

@@ -18,7 +18,7 @@ export function MonthPicker<Type extends DatePickerType = "default">({ selectEnd
   const onChange: MonthPickerProps<Type>["onChange"] = (date) => {
     if (rest.type === "range" && isRangeValue(date) && selectEndOfMonth) {
       const [start, end] = date;
-      const newDate = [start, end ? dayjs(end).utc().endOf("month").toDate() : undefined];
+      const newDate = [start, end ? dayjs(end).endOf("month").format("YYYY-MM-DD") : undefined];
       date = newDate as typeof date;
     }
     rest.onChange!(date);

libs/utils/src/date.ts

@@ -16,6 +16,7 @@ export const getTime = (date: Date) => formatDate(date, "HH:mm");
 export const getNext = (unit: dayjs.ManipulateType, date: Date) => dayjs(date).utc().add(1, unit).startOf(unit).toDate();
 
 export const getStartOf = (unit: dayjs.ManipulateType, date: Date) => dayjs(date).utc().startOf(unit).toDate();
+export const getEndOf = (unit: dayjs.ManipulateType, date: Date) => dayjs(date).utc().endOf(unit).toDate();
 
 export const isSame = (unit: dayjs.ManipulateType, left: Date, right = new Date()) => dayjs(left).isSame(right, unit);
 export const isSameOrAfter = (left: Date, right: Date, unit: dayjs.ManipulateType) => dayjs(left).isAfter(dayjs(right).startOf(unit));

libs/utils/src/index.ts

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