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,9 +16,8 @@ type EditableDateRangeProps = {
 export function EditableDateRange(props: EditableDateRangeProps) {
     const [editing,] = useDefinedContext(EditingContext)
 
-    const startDate = props.startProps
+    if(editing) {
-
+        return (
-    return editing ? (
             <FormDateRange
                 preview={false}
                 icon={
@@ -39,20 +39,33 @@ export function EditableDateRange(props: EditableDateRangeProps) {
                     />
                 }
             />
-    ) : (
+        )
+    }
+
+    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 [startingAt, setStartingAt] = useState<string>(event.startingAt?.toISOString() ?? "")
-    const [endingAt, setEndingAt] = useState<string | null>(event.endingAt?.toISOString() ?? null)
+    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"
 }