mirror of
https://github.com/Steffo99/festa.git
synced 2024-12-22 14:44:21 +00:00
Use usePromise hook for saving
This commit is contained in:
parent
32a4e7d075
commit
2d63ebeaaf
1 changed files with 30 additions and 6 deletions
|
@ -8,7 +8,7 @@ import useSWR from 'swr'
|
||||||
import { Event } from '@prisma/client'
|
import { Event } from '@prisma/client'
|
||||||
import { EditableMarkdown, EditableText } from '../../components/generic/editable/inputs'
|
import { EditableMarkdown, EditableText } from '../../components/generic/editable/inputs'
|
||||||
import { EditingContext, EditingMode } from '../../components/generic/editable/base'
|
import { EditingContext, EditingMode } from '../../components/generic/editable/base'
|
||||||
import { useCallback, useContext, useState } from 'react'
|
import { useCallback, useState } from 'react'
|
||||||
import { ToolBar } from '../../components/generic/toolbar/bar'
|
import { ToolBar } from '../../components/generic/toolbar/bar'
|
||||||
import { ToolToggleEditing } from '../../components/events/toolbar/toolToggleEditing'
|
import { ToolToggleEditing } from '../../components/events/toolbar/toolToggleEditing'
|
||||||
import { ToolToggleVisibility } from '../../components/postcard/toolbar/toolToggleVisibility'
|
import { ToolToggleVisibility } from '../../components/postcard/toolbar/toolToggleVisibility'
|
||||||
|
@ -17,6 +17,9 @@ import { AuthContext } from '../../components/auth/base'
|
||||||
import { useDefinedContext } from '../../utils/definedContext'
|
import { useDefinedContext } from '../../utils/definedContext'
|
||||||
import { ViewContent } from '../../components/generic/views/content'
|
import { ViewContent } from '../../components/generic/views/content'
|
||||||
import { useAxios } from '../../components/auth/requests'
|
import { useAxios } from '../../components/auth/requests'
|
||||||
|
import { faAsterisk } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FestaIcon } from '../../components/generic/renderers/fontawesome'
|
||||||
|
import { usePromise, UsePromiseStatus } from '../../components/generic/loading/promise'
|
||||||
|
|
||||||
|
|
||||||
export async function getServerSideProps(context: NextPageContext) {
|
export async function getServerSideProps(context: NextPageContext) {
|
||||||
|
@ -35,15 +38,35 @@ type PageEventProps = {
|
||||||
|
|
||||||
|
|
||||||
const PageEvent: NextPage<PageEventProps> = ({ slug }) => {
|
const PageEvent: NextPage<PageEventProps> = ({ slug }) => {
|
||||||
const { t } = useTranslation()
|
const { t } =
|
||||||
const { data, mutate } = useSWR<Event>(`/api/events/${slug}`)
|
useTranslation()
|
||||||
const [auth, _setAuth] = useDefinedContext(AuthContext)
|
|
||||||
const axios = useAxios()
|
const { data, isValidating, mutate } =
|
||||||
|
useSWR<Event>(`/api/events/${slug}`)
|
||||||
|
|
||||||
|
const [auth, _setAuth] =
|
||||||
|
useDefinedContext(AuthContext)
|
||||||
|
|
||||||
|
const axios =
|
||||||
|
useAxios()
|
||||||
|
|
||||||
|
const { run: patchEditsToAPI, status: patchStatus } =
|
||||||
|
usePromise<Event, Event>((d) => axios.patch(`/api/events/${slug}`, d))
|
||||||
|
|
||||||
|
const isLoading = isValidating || patchStatus === UsePromiseStatus.PENDING
|
||||||
|
|
||||||
const save = useCallback(
|
const save = useCallback(
|
||||||
async () => {
|
async () => {
|
||||||
await axios.patch(`/api/events/${slug}`, data)
|
|
||||||
|
if (data === undefined) {
|
||||||
|
console.warn("[PageEvent] Tried to save while no data was available.")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
patchEditsToAPI(data)
|
||||||
mutate(data)
|
mutate(data)
|
||||||
|
|
||||||
|
console.info("[PageEvent] Saved successfully!")
|
||||||
},
|
},
|
||||||
[axios, data]
|
[axios, data]
|
||||||
)
|
)
|
||||||
|
@ -62,6 +85,7 @@ const PageEvent: NextPage<PageEventProps> = ({ slug }) => {
|
||||||
<EditableText
|
<EditableText
|
||||||
value={data?.name ?? slug}
|
value={data?.name ?? slug}
|
||||||
onChange={e => mutate(async state => state ? { ...state, name: e.target.value } : undefined, { revalidate: false })}
|
onChange={e => mutate(async state => state ? { ...state, name: e.target.value } : undefined, { revalidate: false })}
|
||||||
|
viewPrefix={isLoading ? <><FestaIcon icon={faAsterisk} spin /> </> : undefined}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
content={
|
content={
|
||||||
|
|
Loading…
Reference in a new issue