From 3c15bdb80fd5406f3cfa078bf10f5e1a24287cff Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 10 Jun 2022 05:21:02 +0200
Subject: [PATCH] Fix datetime inputs

---
 components/ActionEventList.tsx                |  6 ++-
 components/editable/EditableDateTimeLocal.tsx | 15 ++++++-
 components/editable/EditableEventDuration.tsx | 43 +++++++++++++++++++
 components/extensions/FestaMoment.tsx         | 21 +++++++--
 pages/events/[slug].tsx                       | 17 +++++++-
 utils/dateFields.ts                           | 20 +++++++++
 6 files changed, 114 insertions(+), 8 deletions(-)
 create mode 100644 components/editable/EditableEventDuration.tsx
 create mode 100644 utils/dateFields.ts

diff --git a/components/ActionEventList.tsx b/components/ActionEventList.tsx
index cc9720d..cc5d663 100644
--- a/components/ActionEventList.tsx
+++ b/components/ActionEventList.tsx
@@ -28,7 +28,11 @@ export function ActionEventList(props: HTMLProps<HTMLFormElement>) {
         </>
     }
     else if (!data) {
-        contents = <Loading text={t("eventListLoading")} />
+        contents = <>
+            <p>
+                <Loading text={t("eventListLoading")} />
+            </p>
+        </>
     }
     else {
         if (data.length === 0) {
diff --git a/components/editable/EditableDateTimeLocal.tsx b/components/editable/EditableDateTimeLocal.tsx
index 50412ec..fc117a8 100644
--- a/components/editable/EditableDateTimeLocal.tsx
+++ b/components/editable/EditableDateTimeLocal.tsx
@@ -1,12 +1,23 @@
 import { HTMLProps } from "react";
+import { toDatetimeLocal } from "../../utils/dateFields";
 import { FestaMoment } from "../extensions/FestaMoment";
 import { Editable } from "./Editable";
 
-export function EditableDateTimeLocal(props: HTMLProps<HTMLInputElement> & { value: Date }) {
+
+export type EditableDateTimeLocalProps = Omit<HTMLProps<HTMLInputElement>, "value" | "max" | "min"> & { value: Date | null, max?: Date, min?: Date }
+
+
+export function EditableDateTimeLocal(props: EditableDateTimeLocalProps) {
     return (
         <Editable
             editing={
-                <input type="datetime-local" {...props} value={props.value.toISOString()} />
+                <input
+                    type="datetime-local"
+                    {...props}
+                    value={props.value ? toDatetimeLocal(props.value) : undefined}
+                    min={props.min ? toDatetimeLocal(props.min) : undefined}
+                    max={props.max ? toDatetimeLocal(props.max) : undefined}
+                />
             }
             preview={
                 <FestaMoment date={props.value} />
diff --git a/components/editable/EditableEventDuration.tsx b/components/editable/EditableEventDuration.tsx
new file mode 100644
index 0000000..ee1a7c1
--- /dev/null
+++ b/components/editable/EditableEventDuration.tsx
@@ -0,0 +1,43 @@
+import { faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { useDefinedContext } from "../../utils/definedContext";
+import { FestaIcon } from "../extensions/FestaIcon";
+import { FormFromTo } from "../form/FormFromTo";
+import { EditableDateTimeLocal, EditableDateTimeLocalProps } from "./EditableDateTimeLocal";
+import { EditingContext } from "./EditingContext";
+
+
+type EditableEventDurationProps = {
+    startProps: EditableDateTimeLocalProps,
+    endProps: EditableDateTimeLocalProps,
+}
+
+
+export function EditableEventDuration({ startProps, endProps }: EditableEventDurationProps) {
+    const [editing,] = useDefinedContext(EditingContext)
+
+    return (
+        <FormFromTo
+            preview={!editing}
+            icon={
+                <FestaIcon icon={faCalendar} />
+            }
+            start={
+                <EditableDateTimeLocal
+                    max={endProps.value ?? undefined}
+                    {...startProps}
+                />
+            }
+            connector={
+                <FestaIcon
+                    icon={faChevronRight}
+                />
+            }
+            end={
+                <EditableDateTimeLocal
+                    min={startProps.value ?? undefined}
+                    {...endProps}
+                />
+            }
+        />
+    )
+}
\ No newline at end of file
diff --git a/components/extensions/FestaMoment.tsx b/components/extensions/FestaMoment.tsx
index 83559ac..ccf1366 100644
--- a/components/extensions/FestaMoment.tsx
+++ b/components/extensions/FestaMoment.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from "next-i18next"
 
 type FestaMomentProps = {
-    date: Date,
+    date: Date | null,
 }
 
 /**
@@ -10,7 +10,7 @@ type FestaMomentProps = {
 export function FestaMoment({ date }: FestaMomentProps) {
     const { t } = useTranslation()
 
-    if (Number.isNaN(date.getTime())) {
+    if (!date || Number.isNaN(date.getTime())) {
         return (
             <span className="disabled">
                 {t("dateNaN")}
@@ -18,9 +18,22 @@ export function FestaMoment({ date }: FestaMomentProps) {
         )
     }
 
+    const now = new Date()
+    const machine = date.toISOString()
+
+    let human
+    // If the date is less than 24 hours away, display just the time
+    if (date.getTime() - now.getTime() < 86_400_000) {
+        human = date.toLocaleTimeString()
+    }
+    // Otherwise, display the full date
+    else {
+        human = date.toLocaleString()
+    }
+
     return (
-        <time dateTime={date.toISOString()}>
-            {date.toLocaleString()}
+        <time dateTime={machine}>
+            {human}
         </time>
     )
 }
\ No newline at end of file
diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
index c158360..d0e9df6 100644
--- a/pages/events/[slug].tsx
+++ b/pages/events/[slug].tsx
@@ -16,6 +16,8 @@ import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
 import { WorkInProgress } from "../../components/WorkInProgress";
 import { usePostcardImage } from "../../components/postcard/usePostcardImage";
 import defaultPostcard from "../../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
+import { EditableEventDuration } from "../../components/editable/EditableEventDuration";
+import { fromDatetimeLocal } from "../../utils/dateFields";
 
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -54,6 +56,8 @@ export default function PageEventDetail({ initialEvent }: PageEventDetailProps)
     const displayedPostcard = event.postcard || defaultPostcard.src
     usePostcardImage(`url(${displayedPostcard})`)
 
+    console.debug("Event:", event)
+
     return <>
         <Head>
             <title key="title">{initialEvent.name} - {t("siteTitle")}</title>
@@ -85,7 +89,18 @@ export default function PageEventDetail({ initialEvent }: PageEventDetailProps)
                         placeholder={t("eventDetailsDescriptionPlaceholder")}
                     />
                 }
-                daterange={<></>}
+                daterange={
+                    <EditableEventDuration {...{
+                        startProps: {
+                            value: event.startingAt,
+                            onChange: (e: ChangeEvent<HTMLInputElement>) => setEvent({ ...event, startingAt: fromDatetimeLocal(e.target.value) }),
+                        },
+                        endProps: {
+                            value: event.endingAt,
+                            onChange: (e: ChangeEvent<HTMLInputElement>) => setEvent({ ...event, endingAt: fromDatetimeLocal(e.target.value) }),
+                        }
+                    }} />
+                }
             />
         </EditingContext.Provider>
     </>
diff --git a/utils/dateFields.ts b/utils/dateFields.ts
new file mode 100644
index 0000000..1c93351
--- /dev/null
+++ b/utils/dateFields.ts
@@ -0,0 +1,20 @@
+export function toDatetimeLocal(date: Date | null | undefined): string | undefined {
+    if (date === undefined) {
+        return undefined
+    }
+    else if (date === null) {
+        return ""
+    }
+    else {
+        return date.toISOString().match(/(.+)[Z]$/)![1]
+    }
+}
+
+export function fromDatetimeLocal(str: string): Date | null {
+    if (str === "") {
+        return null
+    }
+    else {
+        return new Date(`${str}Z`)
+    }
+}
\ No newline at end of file