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

useState instead of useSWR for event pages

Browse source
This commit is contained in:
Steffo 2022-07-27 01:46:09 +02:00
parent b6c8703c45
commit 06b8bb2df5
Signed by: steffo
GPG key ID: 6965406171929D01
2 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/events/actions/edit.tsx
View file

@ -1,6 +1,6 @@
import { Event } from "@prisma/client"
import { useTranslation } from "next-i18next"
import { Dispatch, useMemo } from "react"
import { Dispatch, SetStateAction, useMemo } from "react"
import { KeyedMutator } from "swr"
import { UsePromise } from "../../generic/loading/promise"
import { ViewContent } from "../../generic/views/content"
@ -8,13 +8,13 @@ import { ViewContent } from "../../generic/views/content"
export type EventsActionViewProps = {
data: Event,
mutate: KeyedMutator<Event>,
setData: Dispatch<SetStateAction<Event>>,
save: UsePromise<void, void>,
setEditing: Dispatch<boolean>,
}
export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActionViewProps) => {
export const EventsActionEdit = ({ data, setData, save, setEditing }: EventsActionViewProps) => {
const { t } = useTranslation()
const name = data.name
@ -35,11 +35,11 @@ export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActio
<input
type="text"
value={name}
onChange={e => mutate((prev) => ({ ...prev!, name: e.target.value }), { revalidate: false })}
onChange={e => setData(prev => ({ ...prev!, name: e.target.value }))}
placeholder={t("eventNamePlaceholder")}
/>
),
[t, mutate, name]
[t, setData, name]
)}
</h1>
{useMemo(
@ -47,22 +47,22 @@ export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActio
<textarea
rows={12}
value={description}
onChange={e => mutate((prev) => ({ ...prev!, description: e.target.value }), { revalidate: false })}
onChange={e => setData(prev => ({ ...prev!, description: e.target.value }))}
placeholder={t("eventDescriptionPlaceholder")}
/>
),
[t, mutate, description]
[t, setData, description]
)}
{useMemo(
() => (
<input
type="text"
value={postcard ?? ""}
onChange={e => mutate((prev) => ({ ...prev!, postcard: e.target.value || null }), { revalidate: false })}
onChange={e => setData(prev => ({ ...prev!, postcard: e.target.value || null }))}
placeholder={t("eventPostcardPlaceholder")}
/>
),
[t, mutate, postcard]
[t, setData, postcard]
)}
</>}
/>

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

@ -26,7 +26,7 @@ export async function getServerSideProps(context: NextPageContext) {
return {
props: {
slug,
fallbackData: await database.event.findUnique({ where: { slug } }),
defaultData: await database.event.findUnique({ where: { slug } }),
...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
}
}
@ -35,24 +35,24 @@ export async function getServerSideProps(context: NextPageContext) {
type PageEventProps = {
slug: string,
fallbackData: Event,
defaultData: Event,
}
const PageEvent: NextPage<PageEventProps> = ({ slug, fallbackData }) => {
const PageEvent: NextPage<PageEventProps> = ({ slug, defaultData }) => {
const { t } = useTranslation()
const axios = useAxios()
const [eventEditing, eventSetEditing] = useState<boolean>(false)
const { data, mutate } = useSWR<Event>(`/api/events/${slug}`, { fallbackData, revalidateOnFocus: eventEditing, revalidateOnReconnect: eventEditing, refreshInterval: eventEditing ? 0 : 30000 })
const [data, setData] = useState<Event>(defaultData)
const [auth,] = useDefinedContext(AuthContext)
const save = usePromise<void, void>(useCallback(
async () => {
const response = await axios.patch<Event>(`/api/events/${slug}`, data!)
mutate(response.data, { revalidate: false })
setData(response.data)
},
[axios, data, mutate, slug]
[axios, data, setData, slug]
))
const eventName = data?.name ?? slug
@ -76,7 +76,7 @@ const PageEvent: NextPage<PageEventProps> = ({ slug, fallbackData }) => {
}
</ToolBar>
{eventEditing ?
<EventsActionEdit data={data!} mutate={mutate} save={save} setEditing={eventSetEditing} />
<EventsActionEdit data={data!} setData={setData} save={save} setEditing={eventSetEditing} />
:
<EventsActionView data={data!} />
}