From cc1dee675c301c1277f9d1d4ce064cde78e9378c Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 13 Aug 2022 15:49:59 +0300
Subject: [PATCH] Fix when editing event time doesn't match

---
 app/components/DateInput.tsx | 29 +++++++++++++++--------------
 app/utils/zod.ts             |  4 +++-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/app/components/DateInput.tsx b/app/components/DateInput.tsx
index f7d9d386c..dfc42a542 100644
--- a/app/components/DateInput.tsx
+++ b/app/components/DateInput.tsx
@@ -1,5 +1,6 @@
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { dateToYearMonthDayHourMinuteString } from "~/utils/dates";
+import * as React from "react";
 
 export function DateInput({
   id,
@@ -18,6 +19,7 @@ export function DateInput({
   "data-cy": string;
   required?: boolean;
 }) {
+  const [date, setDate] = React.useState(defaultValue ?? new Date());
   const isMounted = useIsMounted();
 
   if (!isMounted) {
@@ -33,19 +35,18 @@ export function DateInput({
   }
 
   return (
-    <input
-      id={id}
-      type="datetime-local"
-      name={name}
-      defaultValue={
-        defaultValue
-          ? dateToYearMonthDayHourMinuteString(defaultValue)
-          : undefined
-      }
-      min={min ? dateToYearMonthDayHourMinuteString(min) : undefined}
-      max={max ? dateToYearMonthDayHourMinuteString(max) : undefined}
-      data-cy={dataCy}
-      required={required}
-    />
+    <>
+      {date && <input name={name} type="hidden" value={date.getTime()} />}
+      <input
+        id={id}
+        type="datetime-local"
+        value={dateToYearMonthDayHourMinuteString(date)}
+        min={min ? dateToYearMonthDayHourMinuteString(min) : undefined}
+        max={max ? dateToYearMonthDayHourMinuteString(max) : undefined}
+        onChange={(e) => setDate(new Date(e.target.value))}
+        data-cy={dataCy}
+        required={required}
+      />
+    </>
   );
 }
diff --git a/app/utils/zod.ts b/app/utils/zod.ts
index 2913b0792..b0ac43bd2 100644
--- a/app/utils/zod.ts
+++ b/app/utils/zod.ts
@@ -40,7 +40,9 @@ export function actualNumber(value: unknown) {
 
 export function date(value: unknown) {
   if (typeof value === "string" || typeof value === "number") {
-    return new Date(value);
+    const valueAsNumber = Number(value);
+
+    return new Date(Number.isNaN(valueAsNumber) ? value : valueAsNumber);
   }
 
   return value;