steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 14:44:21 +00:00
Code Activity

Improve (?) date visualization

Browse source
This commit is contained in:
Steffo 2022-06-08 17:31:34 +02:00
parent 3bb63cc9e6
commit 24c1ba8f54
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 69 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
components/HumanDate.tsx Normal file
View file

@ -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>
)
}

25
components/editable/EditableDateRange.tsx
View file

@ -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
return editing ? (
if(editing) {
return (
<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}/>
}
/>
)

8
pages/events/[slug].tsx
View file

@ -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)
}}
/>

3
public/locales/it-IT/common.json
View file

@ -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"
}