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

Allow changing the postcard

Browse source
This commit is contained in:
Steffo 2022-06-05 23:03:48 +02:00
parent 546fd6a193
commit 9e19f4623e
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/editable/EditablePostcard.tsx Normal file
View file

@ -0,0 +1,16 @@
import { HTMLProps } from "react";
import { EditingContext } from "../../contexts/editing";
import { useDefinedContext } from "../../utils/definedContext";
import { Postcard } from "../postcard/Postcard";
export function EditablePostcard({value, ...props}: HTMLProps<HTMLInputElement>) {
const [editing,] = useDefinedContext(EditingContext)
return <>
{editing ?
<input type="file" value={undefined} {...props}/>
: null}
<Postcard src={value}/>
</>
}

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

@ -3,7 +3,7 @@ import { NextPageContext } from "next";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head"; import Head from "next/head";
import { useState } from "react"; import { ChangeEvent, FormEventHandler, useCallback, useState } from "react";
import { ToolBar } from "../../components/tools/ToolBar"; import { ToolBar } from "../../components/tools/ToolBar";
import { EditableMarkdown } from "../../components/editable/EditableMarkdown"; import { EditableMarkdown } from "../../components/editable/EditableMarkdown";
import { EditableText } from "../../components/editable/EditableText"; import { EditableText } from "../../components/editable/EditableText";
@ -12,6 +12,7 @@ import { EditingContext } from "../../contexts/editing";
import { database } from "../../utils/prismaClient"; import { database } from "../../utils/prismaClient";
import { Postcard } from "../../components/postcard/Postcard"; import { Postcard } from "../../components/postcard/Postcard";
import { ViewContent } from "../../components/view/ViewContent"; import { ViewContent } from "../../components/view/ViewContent";
import { EditablePostcard } from "../../components/editable/EditablePostcard";
export async function getServerSideProps(context: NextPageContext) { export async function getServerSideProps(context: NextPageContext) {
@ -45,15 +46,28 @@ type PageEventDetailProps = {
export default function PageEventDetail({event}: PageEventDetailProps) { export default function PageEventDetail({event}: PageEventDetailProps) {
const {t} = useTranslation() const {t} = useTranslation()
const editState = useState<boolean>(false) const editState = useState<boolean>(false)
const [description, setDescription] = useState<string>("") const [description, setDescription] = useState<string>(event.description)
const [postcard, setPostcard] = useState<string | null>(event.postcard)
const setPostcardBlob = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files![0]
if(!file) {
setPostcard(null)
return
}
const blobUrl = URL.createObjectURL(file)
setPostcard(blobUrl)
},
[]
)
return <> return <>
<Head> <Head>
<title key="title">{event.name} - {t("siteTitle")}</title> <title key="title">{event.name} - {t("siteTitle")}</title>
</Head> </Head>
<Postcard
src={event.postcard ?? undefined}
/>
<EditingContext.Provider value={editState}> <EditingContext.Provider value={editState}>
<ToolBar vertical="top" horizontal="right"> <ToolBar vertical="top" horizontal="right">
<ToolToggleEditing/> <ToolToggleEditing/>
@ -67,6 +81,10 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
value={description} value={description}
onChange={e => setDescription((e.target as HTMLTextAreaElement).value)} onChange={e => setDescription((e.target as HTMLTextAreaElement).value)}
/> />
<EditablePostcard
value={postcard ?? undefined}
onChange={setPostcardBlob}
/>
</>} </>}
/> />
</EditingContext.Provider> </EditingContext.Provider>

2
styles/elements.css
View file

@ -43,7 +43,7 @@ input, button, textarea {
} }
input[type="text"] { input[type="text"], input[type="file"] {
border-style: inset; border-style: inset;
width: 100%; width: 100%;

4
styles/globals.css
View file

@ -29,9 +29,9 @@
cursor: not-allowed; cursor: not-allowed;
} }
.page { main {
min-height: 100vh; min-height: 100vh;
padding: 12px; padding: 8px;
} }