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

Improve event view

This commit is contained in:
Steffo 2022-06-06 02:10:04 +02:00
parent b92c123c38
commit e1f3b83ce9
Signed by: steffo
GPG key ID: 6965406171929D01
3 changed files with 49 additions and 11 deletions

View file

@ -0,0 +1,24 @@
import { ReactNode } from "react"
type ViewEventProps = {
title: ReactNode
postcard: ReactNode
description: ReactNode
}
export function ViewEvent(props: ViewEventProps) {
return (
<main className="view-event">
<h1 className="view-event-title">
{props.title}
</h1>
<div className="view-event-postcard">
{props.postcard}
</div>
<div className="view-event-description">
{props.description}
</div>
</main>
)
}

View file

@ -13,6 +13,7 @@ import { database } from "../../utils/prismaClient";
import { Postcard } from "../../components/postcard/Postcard";
import { ViewContent } from "../../components/view/ViewContent";
import { EditablePostcard } from "../../components/editable/EditablePostcard";
import { ViewEvent } from "../../components/view/ViewEvent";
export async function getServerSideProps(context: NextPageContext) {
@ -46,6 +47,7 @@ type PageEventDetailProps = {
export default function PageEventDetail({event}: PageEventDetailProps) {
const {t} = useTranslation()
const editState = useState<boolean>(false)
const [title, setTitle] = useState<string>(event.name)
const [description, setDescription] = useState<string>(event.description)
const [postcard, setPostcard] = useState<string | null>(event.postcard)
@ -69,23 +71,32 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
<title key="title">{event.name} - {t("siteTitle")}</title>
</Head>
<EditingContext.Provider value={editState}>
<ToolBar vertical="top" horizontal="right">
<ToolBar vertical="bottom" horizontal="right">
<ToolToggleEditing/>
</ToolBar>
<ViewContent
<ViewEvent
title={
<EditableText value={event.name}/>
}
content={<>
<EditableMarkdown
value={description}
onChange={e => setDescription((e.target as HTMLTextAreaElement).value)}
<EditableText
value={title}
onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
placeholder={t("eventDetailsTitlePlaceholder")}
/>
}
postcard={
<EditablePostcard
value={postcard ?? undefined}
onChange={setPostcardBlob}
placeholder={t("eventDetailsPostcardPlaceholder")}
/>
</>}
}
description={
<EditableMarkdown
value={description}
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
rows={3}
placeholder={t("eventDetailsDescriptionPlaceholder")}
/>
}
/>
</EditingContext.Provider>
</>

View file

@ -26,6 +26,9 @@
"eventListCreateRunning": "Creazione in corso...",
"eventListCreateRedirecting": "Caricamento dell'evento in corso...",
"eventListCreateError": "Si è verificato il seguente errore nella creazione del tuo evento:",
"toggleEditingEdit": "Modifica pagina",
"toggleEditingView": "Visualizza anteprima"
"eventDetailsToggleEditingEdit": "Modifica pagina",
"eventDetailsToggleEditingView": "Visualizza anteprima",
"eventDetailsTitlePlaceholder": "Titolo",
"eventDetailsDescriptionPlaceholder": "Descrizione evento",
"eventDetailsPostcardPlaceholder": "Cartolina"
}