steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-10-16 15:07:27 +00:00
Code Activity

did not figure it out yet

Browse source
This commit is contained in:
Steffo 2022-06-09 05:05:08 +02:00
parent dafd64b4c9
commit 36044e7aae
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 29 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/editable/EditableFile.tsx → components/editable/EditableFilePicker.tsx
View file

@ -7,7 +7,7 @@ import { Editable } from "./Editable";
*
* Value is the file's [fakepath](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value), as a string.
*/
export function EditableFile(props: HTMLProps<HTMLInputElement> & { value: string }) {
export function EditableFilePicker(props: HTMLProps<HTMLInputElement> & { value: File | "" }) {
return (
<Editable
editing={

21
hooks/useFilePickerState.ts Normal file
View file

@ -0,0 +1,21 @@
import { ChangeEvent, useCallback, useState } from "react";
type FileState = {
value: string,
file: File | null,
}
export function useFilePickerState() {
const [state, setState] = useState<FileState>({ value: "", file: null })
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
setState({
value: e.target.value,
file: e.target.files![0],
})
}
return { state, onChange }
}

58
hooks/useFileState.ts
View file

@ -1,58 +0,0 @@
import { useReducer } from "react";
type FileState = {
value: string,
file: File,
url: URL,
}
type FileActionClear = { type: "clear" }
type FileActionSet = { type: "set", value: string, file: File }
type FileAction = FileActionClear | FileActionSet
function fileReducer(state, action) {
switch (action.type) {
case "clear":
case "set":
}
}
export function useFileState() {
const [value, dispatch] = useReducer(
)
/*
const [value, setValue] = useState<string>("")
const [file, setFile] = useState<File | null>(null)
const onChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value)
const file = e.target.files![0]
setFile(file ?? null)
},
[]
)
const doClear = useCallback(
() => {
setValue("")
setFile(null)
},
[]
)
return {
value,
file,
onChange,
doClear,
}
*/
}

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

@ -10,14 +10,14 @@ import { EditableText } from "../../components/editable/EditableText";
import { ToolToggleEditing } from "../../components/tools/ToolToggleEditing";
import { EditingContext } from "../../components/editable/EditingContext";
import { database } from "../../utils/prismaClient";
import { EditableFile } from "../../components/editable/EditableFile";
import { EditableFilePicker } from "../../components/editable/EditableFilePicker";
import { ViewEvent } from "../../components/view/ViewEvent";
import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
import { EditableDateRange } from "../../components/editable/EditableDateRange";
import { WorkInProgress } from "../../components/WorkInProgress";
import { FormDateRange } from "../../components/form/FormDateRange";
import { Postcard } from "../../components/postcard/Postcard";
import { useFileState } from "../../hooks/useFileState";
import { useFilePickerState } from "../../hooks/useFilePickerState";
export async function getServerSideProps(context: NextPageContext) {
@ -53,7 +53,7 @@ export default function PageEventDetail({ event }: PageEventDetailProps) {
const editState = useState<boolean>(false)
const [title, setTitle] = useState<string>(event.name)
const [description, setDescription] = useState<string>(event.description)
const postcard = useFileState()
const [postcard, setPostcard] = useState<File | "">("")
const [startingAt, setStartingAt] = useState<string>(event.startingAt?.toISOString() ?? "")
const [endingAt, setEndingAt] = useState<string>(event.endingAt?.toISOString() ?? "")
@ -62,7 +62,7 @@ export default function PageEventDetail({ event }: PageEventDetailProps) {
<title key="title">{event.name} - {t("siteTitle")}</title>
</Head>
<WorkInProgress />
<Postcard src={postcard.file ? URL.createObjectURL(postcard.file) : event.postcard ?? undefined} />
<Postcard src={postcard ? URL.createObjectURL(postcard) : event.postcard ?? undefined} />
<EditingContext.Provider value={editState}>
<ToolBar vertical="vadapt" horizontal="right">
<ToolToggleEditing />
@ -77,9 +77,9 @@ export default function PageEventDetail({ event }: PageEventDetailProps) {
/>
}
postcard={
<EditableFile
value={postcard.value}
onChange={postcard.onChange}
<EditableFilePicker
value={postcard}
onChange={(e: ChangeEvent<HTMLInputElement>) => e.target.files ? setPostcard(e.target.files[0] ?? null) : setPostcard(null)}
placeholder={t("eventDetailsPostcardPlaceholder")}
/>
}