2022-06-03 02:54:09 +00:00
|
|
|
import { Event, User } from "@prisma/client";
|
2022-06-03 01:55:02 +00:00
|
|
|
import { NextPageContext } from "next";
|
|
|
|
|
import { useTranslation } from "next-i18next";
|
|
|
|
|
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
2022-06-08 02:52:41 +00:00
|
|
|
import { default as Head } from "next/head";
|
2022-06-09 21:55:39 +00:00
|
|
|
import { ChangeEvent, useState } from "react";
|
2022-06-04 03:13:19 +00:00
|
|
|
import { ToolBar } from "../../components/tools/ToolBar";
|
|
|
|
|
import { EditableMarkdown } from "../../components/editable/EditableMarkdown";
|
|
|
|
|
import { EditableText } from "../../components/editable/EditableText";
|
|
|
|
|
import { ToolToggleEditing } from "../../components/tools/ToolToggleEditing";
|
2022-06-08 16:00:39 +00:00
|
|
|
import { EditingContext } from "../../components/editable/EditingContext";
|
2022-06-03 01:55:02 +00:00
|
|
|
import { database } from "../../utils/prismaClient";
|
2022-06-09 03:05:08 +00:00
|
|
|
import { EditableFilePicker } from "../../components/editable/EditableFilePicker";
|
2022-06-06 00:10:04 +00:00
|
|
|
import { ViewEvent } from "../../components/view/ViewEvent";
|
2022-06-07 10:48:47 +00:00
|
|
|
import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
|
2022-06-08 00:12:03 +00:00
|
|
|
import { WorkInProgress } from "../../components/WorkInProgress";
|
2022-06-09 21:43:38 +00:00
|
|
|
import { usePostcardImage } from "../../components/postcard/usePostcardImage";
|
|
|
|
|
import defaultPostcard from "../../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
|
2022-06-10 03:21:02 +00:00
|
|
|
import { EditableEventDuration } from "../../components/editable/EditableEventDuration";
|
|
|
|
|
import { fromDatetimeLocal } from "../../utils/dateFields";
|
2022-06-03 01:55:02 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
export async function getServerSideProps(context: NextPageContext) {
|
|
|
|
|
const slug = context.query.slug as string
|
2022-06-08 17:14:00 +00:00
|
|
|
if (typeof slug === "object") {
|
|
|
|
|
return { notFound: true }
|
2022-06-03 01:55:02 +00:00
|
|
|
}
|
|
|
|
|
|
2022-06-09 21:43:38 +00:00
|
|
|
const initialEvent = await database.event.findUnique({
|
2022-06-08 17:14:00 +00:00
|
|
|
where: { slug },
|
|
|
|
|
include: { creator: true }
|
2022-06-03 02:54:09 +00:00
|
|
|
})
|
2022-06-09 21:43:38 +00:00
|
|
|
if (!initialEvent) {
|
2022-06-08 17:14:00 +00:00
|
|
|
return { notFound: true }
|
2022-06-03 01:55:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
2022-06-09 21:43:38 +00:00
|
|
|
initialEvent,
|
2022-06-03 01:55:02 +00:00
|
|
|
...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type PageEventDetailProps = {
|
2022-06-09 21:43:38 +00:00
|
|
|
initialEvent: Event & { creator: User }
|
2022-06-03 01:55:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2022-06-09 21:43:38 +00:00
|
|
|
export default function PageEventDetail({ initialEvent }: PageEventDetailProps) {
|
2022-06-08 17:14:00 +00:00
|
|
|
const { t } = useTranslation()
|
2022-06-04 03:13:19 +00:00
|
|
|
const editState = useState<boolean>(false)
|
2022-06-09 21:43:38 +00:00
|
|
|
const [event, setEvent] = useState<Event>(initialEvent)
|
|
|
|
|
|
|
|
|
|
const displayedPostcard = event.postcard || defaultPostcard.src
|
|
|
|
|
usePostcardImage(`url(${displayedPostcard})`)
|
2022-06-05 21:03:48 +00:00
|
|
|
|
2022-06-10 03:21:02 +00:00
|
|
|
console.debug("Event:", event)
|
|
|
|
|
|
2022-06-04 03:13:19 +00:00
|
|
|
return <>
|
|
|
|
|
<Head>
|
2022-06-09 21:43:38 +00:00
|
|
|
<title key="title">{initialEvent.name} - {t("siteTitle")}</title>
|
2022-06-04 03:13:19 +00:00
|
|
|
</Head>
|
2022-06-08 17:14:00 +00:00
|
|
|
<WorkInProgress />
|
2022-06-04 03:13:19 +00:00
|
|
|
<EditingContext.Provider value={editState}>
|
2022-06-07 10:34:38 +00:00
|
|
|
<ToolBar vertical="vadapt" horizontal="right">
|
2022-06-08 17:14:00 +00:00
|
|
|
<ToolToggleEditing />
|
|
|
|
|
<ToolToggleVisible />
|
2022-06-04 03:13:19 +00:00
|
|
|
</ToolBar>
|
2022-06-06 00:10:04 +00:00
|
|
|
<ViewEvent
|
2022-06-04 03:13:19 +00:00
|
|
|
title={
|
2022-06-08 17:14:00 +00:00
|
|
|
<EditableText
|
2022-06-09 21:43:38 +00:00
|
|
|
value={event.name}
|
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setEvent({ ...event, name: e.target.value })}
|
|
|
|
|
placeholder={t("eventDetailsNamePlaceholder")}
|
2022-06-04 03:13:19 +00:00
|
|
|
/>
|
2022-06-06 00:10:04 +00:00
|
|
|
}
|
|
|
|
|
postcard={
|
2022-06-09 03:05:08 +00:00
|
|
|
<EditableFilePicker
|
2022-06-09 21:43:38 +00:00
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setEvent({ ...event, postcard: URL.createObjectURL(e.target.files![0]) })}
|
2022-06-06 00:10:04 +00:00
|
|
|
placeholder={t("eventDetailsPostcardPlaceholder")}
|
2022-06-10 14:35:08 +00:00
|
|
|
accept={"image/*"}
|
2022-06-05 21:03:48 +00:00
|
|
|
/>
|
2022-06-06 00:10:04 +00:00
|
|
|
}
|
2022-06-09 21:43:38 +00:00
|
|
|
description={
|
2022-06-08 17:14:00 +00:00
|
|
|
<EditableMarkdown
|
2022-06-09 21:43:38 +00:00
|
|
|
value={event.description}
|
|
|
|
|
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setEvent({ ...event, description: e.target.value })}
|
2022-06-06 00:10:04 +00:00
|
|
|
placeholder={t("eventDetailsDescriptionPlaceholder")}
|
|
|
|
|
/>
|
2022-06-09 21:43:38 +00:00
|
|
|
}
|
2022-06-10 03:21:02 +00:00
|
|
|
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) }),
|
|
|
|
|
}
|
|
|
|
|
}} />
|
|
|
|
|
}
|
2022-06-04 03:13:19 +00:00
|
|
|
/>
|
|
|
|
|
</EditingContext.Provider>
|
|
|
|
|
</>
|
2022-06-03 01:55:02 +00:00
|
|
|
}
|
