1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-10-16 23:17:26 +00:00
festa/pages/events/[slug].tsx

112 lines
4 KiB
TypeScript
Raw Normal View History

2022-06-11 03:08:49 +00:00
import { NextPage, NextPageContext } from 'next'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { default as Head } from 'next/head'
2022-06-09 21:43:38 +00:00
import defaultPostcard from "../../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
2022-06-11 03:08:49 +00:00
import { Postcard } from '../../components/postcard/changer'
import useSWR from 'swr'
import { Event } from '@prisma/client'
2022-07-17 04:20:52 +00:00
import { EditableMarkdown, EditableText } from '../../components/generic/editable/inputs'
2022-07-16 16:18:41 +00:00
import { EditingContext, EditingMode } from '../../components/generic/editable/base'
2022-07-18 02:47:02 +00:00
import { useCallback, useState } from 'react'
2022-07-16 16:18:41 +00:00
import { ToolBar } from '../../components/generic/toolbar/bar'
import { ToolToggleEditing } from '../../components/events/toolbar/toolToggleEditing'
import { ToolToggleVisibility } from '../../components/postcard/toolbar/toolToggleVisibility'
import { WIPBanner } from '../../components/generic/wip/banner'
2022-07-16 18:02:03 +00:00
import { AuthContext } from '../../components/auth/base'
import { useDefinedContext } from '../../utils/definedContext'
import { ViewContent } from '../../components/generic/views/content'
import { useAxios } from '../../components/auth/requests'
2022-07-18 02:47:02 +00:00
import { faAsterisk } from '@fortawesome/free-solid-svg-icons'
import { FestaIcon } from '../../components/generic/renderers/fontawesome'
import { usePromise, UsePromiseStatus } from '../../components/generic/loading/promise'
2022-06-03 01:55:02 +00:00
export async function getServerSideProps(context: NextPageContext) {
return {
props: {
2022-06-11 03:08:49 +00:00
slug: context.query.slug,
2022-06-03 01:55:02 +00:00
...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
}
}
}
2022-06-11 03:08:49 +00:00
type PageEventProps = {
slug: string
2022-06-03 01:55:02 +00:00
}
2022-06-11 03:08:49 +00:00
const PageEvent: NextPage<PageEventProps> = ({ slug }) => {
2022-07-18 02:47:02 +00:00
const { t } =
useTranslation()
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
2022-06-10 03:21:02 +00:00
const save = useCallback(
2022-07-17 00:31:04 +00:00
async () => {
2022-07-18 02:47:02 +00:00
if (data === undefined) {
console.warn("[PageEvent] Tried to save while no data was available.")
return
}
patchEditsToAPI(data)
mutate(data)
2022-07-18 02:47:02 +00:00
console.info("[PageEvent] Saved successfully!")
2022-07-16 18:02:03 +00:00
},
[axios, data]
2022-07-16 18:02:03 +00:00
)
2022-06-04 03:13:19 +00:00
return <>
<Head>
2022-07-17 04:20:52 +00:00
<title key="title">{data?.name ?? slug} - {t("siteTitle")}</title>
2022-06-04 03:13:19 +00:00
</Head>
2022-06-11 03:08:49 +00:00
<Postcard
2022-07-17 04:20:52 +00:00
src={data?.postcard || defaultPostcard}
2022-06-11 03:08:49 +00:00
/>
2022-07-16 16:18:41 +00:00
<WIPBanner />
<EditingContext.Provider value={useState<EditingMode>(EditingMode.VIEW)}>
<ViewContent
title={
2022-07-16 16:18:41 +00:00
<EditableText
2022-07-17 04:20:52 +00:00
value={data?.name ?? slug}
2022-07-16 18:02:03 +00:00
onChange={e => mutate(async state => state ? { ...state, name: e.target.value } : undefined, { revalidate: false })}
2022-07-18 02:47:02 +00:00
viewPrefix={isLoading ? <><FestaIcon icon={faAsterisk} spin /> &nbsp;</> : undefined}
2022-07-16 16:18:41 +00:00
/>
}
2022-07-17 04:20:52 +00:00
content={
<EditableMarkdown
value={data?.description ?? ""}
2022-07-16 18:02:03 +00:00
onChange={e => mutate(async state => state ? { ...state, description: e.target.value } : undefined, { revalidate: false })}
2022-07-16 16:18:41 +00:00
/>
2022-07-17 04:20:52 +00:00
}
2022-07-16 16:18:41 +00:00
/>
<ToolBar vertical="vadapt" horizontal="right">
<ToolToggleVisibility />
2022-07-16 18:02:03 +00:00
{data && auth?.userId === data?.creatorId &&
<ToolToggleEditing
save={save}
2022-07-16 18:02:03 +00:00
/>
}
2022-07-16 16:18:41 +00:00
</ToolBar>
</EditingContext.Provider>
2022-06-04 03:13:19 +00:00
</>
2022-06-11 03:08:49 +00:00
}
export default PageEvent