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 { Event } from "@prisma/client"
import { useTranslation } from "next-i18next" import { useTranslation } from "next-i18next"
import { Dispatch, useMemo } from "react" import { Dispatch, SetStateAction, useMemo } from "react"
import { KeyedMutator } from "swr" import { KeyedMutator } from "swr"
import { UsePromise } from "../../generic/loading/promise" import { UsePromise } from "../../generic/loading/promise"
import { ViewContent } from "../../generic/views/content" import { ViewContent } from "../../generic/views/content"
@ -8,13 +8,13 @@ import { ViewContent } from "../../generic/views/content"
export type EventsActionViewProps = { export type EventsActionViewProps = {
data: Event, data: Event,
mutate: KeyedMutator<Event>, setData: Dispatch<SetStateAction<Event>>,
save: UsePromise<void, void>, save: UsePromise<void, void>,
setEditing: Dispatch<boolean>, setEditing: Dispatch<boolean>,
} }
export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActionViewProps) => { export const EventsActionEdit = ({ data, setData, save, setEditing }: EventsActionViewProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const name = data.name const name = data.name
@ -35,11 +35,11 @@ export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActio
<input <input
type="text" type="text"
value={name} 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")} placeholder={t("eventNamePlaceholder")}
/> />
), ),
[t, mutate, name] [t, setData, name]
)} )}
</h1> </h1>
{useMemo( {useMemo(
@ -47,22 +47,22 @@ export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActio
<textarea <textarea
rows={12} rows={12}
value={description} 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")} placeholder={t("eventDescriptionPlaceholder")}
/> />
), ),
[t, mutate, description] [t, setData, description]
)} )}
{useMemo( {useMemo(
() => ( () => (
<input <input
type="text" type="text"
value={postcard ?? ""} 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")} 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 { return {
props: { props: {
slug, slug,
fallbackData: await database.event.findUnique({ where: { slug } }), defaultData: await database.event.findUnique({ where: { slug } }),
...(await serverSideTranslations(context.locale ?? "it-IT", ["common"])) ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
} }
} }
@ -35,24 +35,24 @@ export async function getServerSideProps(context: NextPageContext) {
type PageEventProps = { type PageEventProps = {
slug: string, slug: string,
fallbackData: Event, defaultData: Event,
} }
const PageEvent: NextPage<PageEventProps> = ({ slug, fallbackData }) => { const PageEvent: NextPage<PageEventProps> = ({ slug, defaultData }) => {
const { t } = useTranslation() const { t } = useTranslation()
const axios = useAxios() const axios = useAxios()
const [eventEditing, eventSetEditing] = useState<boolean>(false) 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 [auth,] = useDefinedContext(AuthContext)
const save = usePromise<void, void>(useCallback( const save = usePromise<void, void>(useCallback(
async () => { async () => {
const response = await axios.patch<Event>(`/api/events/${slug}`, data!) 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 const eventName = data?.name ?? slug
@ -76,7 +76,7 @@ const PageEvent: NextPage<PageEventProps> = ({ slug, fallbackData }) => {
} }
</ToolBar> </ToolBar>
{eventEditing ? {eventEditing ?
<EventsActionEdit data={data!} mutate={mutate} save={save} setEditing={eventSetEditing} /> <EventsActionEdit data={data!} setData={setData} save={save} setEditing={eventSetEditing} />
: :
<EventsActionView data={data!} /> <EventsActionView data={data!} />
} }