1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-23 15:14:23 +00:00
festa/pages/events/[slug].tsx

92 lines
3.6 KiB
TypeScript
Raw Normal View History

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:43:38 +00:00
import { ChangeEvent, useMemo, 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";
import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
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-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-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}>
<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-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-08 17:14:00 +00:00
daterange={<></>}
2022-06-04 03:13:19 +00:00
/>
</EditingContext.Provider>
</>
2022-06-03 01:55:02 +00:00
}