Improve (?) date visualization

components/HumanDate.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from "next-i18next"
+
+type HumanDateProps = {
+    date: Date
+}
+
+
+export function HumanDate({date}: HumanDateProps) {
+    const {t} = useTranslation()
+
+    if(Number.isNaN(date.getTime())) {
+        return (
+            <span className="disabled">
+                {t("dateNaN")}
+            </span>
+        )
+    }
+
+    return (
+        <time dateTime={date.toISOString()}>
+            {date.toLocaleString()}
+        </time>
+    )
+}

components/editable/EditableDateRange.tsx

@@ -4,6 +4,7 @@ import { EditingContext } from "../../contexts/editing"
 import { useDefinedContext } from "../../utils/definedContext"
 import { FestaIcon } from "../extensions/FestaIcon"
 import { FormDateRange } from "../form/FormDateRange"
+import { HumanDate } from "../HumanDate"
 
 
 type EditableDateRangeProps = {
@@ -15,44 +16,56 @@ type EditableDateRangeProps = {
 export function EditableDateRange(props: EditableDateRangeProps) {
     const [editing,] = useDefinedContext(EditingContext)
 
-    const startDate = props.startProps
+    if(editing) {
+        return (
+            <FormDateRange
+                preview={false}
+                icon={
+                    <FestaIcon icon={faClock}/>
+                }
+                start={
+                    <input 
+                        type="datetime-local" 
+                        {...props.startProps}
+                    />
+                }
+                connector={
+                    <FestaIcon icon={faChevronRight}/>
+                }
+                end={
+                    <input 
+                        type="datetime-local" 
+                        {...props.endProps}
+                    />
+                }
+            />
+        )
+    }
 
-    return editing ? (
-        <FormDateRange
-            preview={false}
-            icon={
-                <FestaIcon icon={faClock}/>
-            }
-            start={
-                <input 
-                    type="datetime-local" 
-                    {...props.startProps}
-                />
-            }
-            connector={
-                <FestaIcon icon={faChevronRight}/>
-            }
-            end={
-                <input 
-                    type="datetime-local" 
-                    {...props.endProps}
-                />
-            }
-        />
-    ) : (
+    const startTime = Date.parse(props.startProps.value!)
+    const endTime = Date.parse(props.endProps.value!)
+
+    if(Number.isNaN(startTime) && Number.isNaN(endTime)) {
+        return null
+    }
+
+    const startDate = new Date(startTime)
+    const endDate = new Date(endTime)
+
+    return (
         <FormDateRange
             preview={true}
             icon={
                 <FestaIcon icon={faClock}/>
             }
             start={
-                new Date(Date.parse(props.startProps.value!)).toLocaleString()
+                <HumanDate date={startDate}/>
             }
             connector={
                 <FestaIcon icon={faChevronRight}/>
             }
             end={
-                new Date(Date.parse(props.endProps.value!)).toLocaleString()
+                <HumanDate date={endDate}/>
             }
         />
     )

pages/events/[slug].tsx

@@ -51,8 +51,8 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
     const [title, setTitle] = useState<string>(event.name)
     const [description, setDescription] = useState<string>(event.description)
     const [postcard, setPostcard] = useState<string | null>(event.postcard)
-    const [startingAt, setStartingAt] = useState<string | null>(event.startingAt?.toISOString() ?? null)
-    const [endingAt, setEndingAt] = useState<string | null>(event.endingAt?.toISOString() ?? null)
+    const [startingAt, setStartingAt] = useState<string>(event.startingAt?.toISOString() ?? "")
+    const [endingAt, setEndingAt] = useState<string>(event.endingAt?.toISOString() ?? "")
 
     const setPostcardBlob = useCallback(
         (e: ChangeEvent<HTMLInputElement>) => {
@@ -105,11 +105,11 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
                 daterange={
                     <EditableDateRange
                         startProps={{
-                            value: startingAt ?? undefined,
+                            value: startingAt ?? "",
                             onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value)
                         }}
                         endProps={{
-                            value: endingAt ?? undefined,
+                            value: endingAt ?? "",
                             onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value)
                         }}
                     />

public/locales/it-IT/common.json

@@ -31,5 +31,6 @@
     "eventDetailsTitlePlaceholder": "Titolo",
     "eventDetailsDescriptionPlaceholder": "Descrizione evento",
     "eventDetailsPostcardPlaceholder": "Cartolina",
-    "workInProgress": "Questa pagina è ancora in sviluppo e potrebbe contenere errori o testo inaspettato."
+    "workInProgress": "Questa pagina è ancora in sviluppo e potrebbe contenere errori o testo inaspettato.",
+    "dateNaN": "Non specificata"
 }