steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 06:34:22 +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 { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head";
import { useState } from "react";
import { ChangeEvent, FormEventHandler, useCallback, useState } from "react";
import { ToolBar } from "../../components/tools/ToolBar";
import { EditableMarkdown } from "../../components/editable/EditableMarkdown";
import { EditableText } from "../../components/editable/EditableText";
@ -12,6 +12,7 @@ import { EditingContext } from "../../contexts/editing";
import { database } from "../../utils/prismaClient";
import { Postcard } from "../../components/postcard/Postcard";
import { ViewContent } from "../../components/view/ViewContent";
import { EditablePostcard } from "../../components/editable/EditablePostcard";
export async function getServerSideProps(context: NextPageContext) {
@ -45,15 +46,28 @@ type PageEventDetailProps = {
export default function PageEventDetail({event}: PageEventDetailProps) {
const {t} = useTranslation()
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 <>
<Head>
<title key="title">{event.name} - {t("siteTitle")}</title>
</Head>
<Postcard
src={event.postcard ?? undefined}
/>
<EditingContext.Provider value={editState}>
<ToolBar vertical="top" horizontal="right">
<ToolToggleEditing/>
@ -67,6 +81,10 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
value={description}
onChange={e => setDescription((e.target as HTMLTextAreaElement).value)}
/>
<EditablePostcard
value={postcard ?? undefined}
onChange={setPostcardBlob}
/>
</>}
/>
</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;
width: 100%;

4
styles/globals.css
View file

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