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-04 03:13:19 +00:00
|
|
|
import Head from "next/head";
|
2022-06-08 00:12:03 +00:00
|
|
|
import { ChangeEvent, useCallback, 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";
|
|
|
|
|
import { EditingContext } from "../../contexts/editing";
|
2022-06-03 01:55:02 +00:00
|
|
|
import { database } from "../../utils/prismaClient";
|
2022-06-05 21:03:48 +00:00
|
|
|
import { EditablePostcard } from "../../components/editable/EditablePostcard";
|
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-07 11:41:26 +00:00
|
|
|
import { EditableDateRange } from "../../components/editable/EditableDateRange";
|
2022-06-08 00:12:03 +00:00
|
|
|
import { WorkInProgress } from "../../components/WorkInProgress";
|
2022-06-03 01:55:02 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
export async function getServerSideProps(context: NextPageContext) {
|
|
|
|
|
const slug = context.query.slug as string
|
|
|
|
|
if(typeof slug === "object") {
|
|
|
|
|
return {notFound: true}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-03 02:54:09 +00:00
|
|
|
const event = await database.event.findUnique({
|
|
|
|
|
where: {slug},
|
|
|
|
|
include: {creator: true}
|
|
|
|
|
})
|
2022-06-03 01:55:02 +00:00
|
|
|
if(!event) {
|
|
|
|
|
return {notFound: true}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
event,
|
|
|
|
|
...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type PageEventDetailProps = {
|
2022-06-03 02:54:09 +00:00
|
|
|
event: Event & {creator: User}
|
2022-06-03 01:55:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function PageEventDetail({event}: PageEventDetailProps) {
|
|
|
|
|
const {t} = useTranslation()
|
2022-06-04 03:13:19 +00:00
|
|
|
const editState = useState<boolean>(false)
|
2022-06-06 00:10:04 +00:00
|
|
|
const [title, setTitle] = useState<string>(event.name)
|
2022-06-05 21:03:48 +00:00
|
|
|
const [description, setDescription] = useState<string>(event.description)
|
|
|
|
|
const [postcard, setPostcard] = useState<string | null>(event.postcard)
|
2022-06-06 01:15:44 +00:00
|
|
|
const [startingAt, setStartingAt] = useState<string | null>(event.startingAt?.toISOString() ?? null)
|
|
|
|
|
const [endingAt, setEndingAt] = useState<string | null>(event.endingAt?.toISOString() ?? null)
|
2022-06-05 21:03:48 +00:00
|
|
|
|
|
|
|
|
const setPostcardBlob = useCallback(
|
|
|
|
|
(e: ChangeEvent<HTMLInputElement>) => {
|
|
|
|
|
const file = e.target.files![0]
|
|
|
|
|
|
|
|
|
|
if(!file) {
|
|
|
|
|
setPostcard(null)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const blobUrl = URL.createObjectURL(file)
|
|
|
|
|
setPostcard(blobUrl)
|
|
|
|
|
},
|
|
|
|
|
[]
|
|
|
|
|
)
|
2022-06-04 03:13:19 +00:00
|
|
|
|
|
|
|
|
return <>
|
|
|
|
|
<Head>
|
|
|
|
|
<title key="title">{event.name} - {t("siteTitle")}</title>
|
|
|
|
|
</Head>
|
2022-06-08 00:12:03 +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-04 03:13:19 +00:00
|
|
|
<ToolToggleEditing/>
|
2022-06-07 10:48:47 +00:00
|
|
|
<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-06 00:10:04 +00:00
|
|
|
<EditableText
|
|
|
|
|
value={title}
|
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
|
|
|
|
|
placeholder={t("eventDetailsTitlePlaceholder")}
|
2022-06-04 03:13:19 +00:00
|
|
|
/>
|
2022-06-06 00:10:04 +00:00
|
|
|
}
|
|
|
|
|
postcard={
|
2022-06-05 21:03:48 +00:00
|
|
|
<EditablePostcard
|
|
|
|
|
value={postcard ?? undefined}
|
|
|
|
|
onChange={setPostcardBlob}
|
2022-06-06 00:10:04 +00:00
|
|
|
placeholder={t("eventDetailsPostcardPlaceholder")}
|
2022-06-05 21:03:48 +00:00
|
|
|
/>
|
2022-06-06 00:10:04 +00:00
|
|
|
}
|
2022-06-08 00:12:03 +00:00
|
|
|
description={<>
|
2022-06-06 00:10:04 +00:00
|
|
|
<EditableMarkdown
|
|
|
|
|
value={description}
|
|
|
|
|
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
|
|
|
|
|
rows={3}
|
|
|
|
|
placeholder={t("eventDetailsDescriptionPlaceholder")}
|
|
|
|
|
/>
|
2022-06-08 00:12:03 +00:00
|
|
|
</>}
|
2022-06-07 11:41:26 +00:00
|
|
|
daterange={
|
|
|
|
|
<EditableDateRange
|
2022-06-06 01:15:44 +00:00
|
|
|
startProps={{
|
2022-06-08 00:43:46 +00:00
|
|
|
value: startingAt ?? undefined,
|
2022-06-07 11:41:26 +00:00
|
|
|
onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value)
|
2022-06-06 01:15:44 +00:00
|
|
|
}}
|
|
|
|
|
endProps={{
|
2022-06-08 00:43:46 +00:00
|
|
|
value: endingAt ?? undefined,
|
2022-06-07 11:41:26 +00:00
|
|
|
onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value)
|
2022-06-06 01:15:44 +00:00
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
}
|
2022-06-04 03:13:19 +00:00
|
|
|
/>
|
|
|
|
|
</EditingContext.Provider>
|
|
|
|
|
</>
|
2022-06-03 01:55:02 +00:00
|
|
|
}
|
