117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
import { XCircleIcon } from "@heroicons/react/20/solid";
|
|
import { type AuditoryResource } from "@prisma/client";
|
|
import { createServerSideHelpers } from "@trpc/react-query/server";
|
|
import {
|
|
type GetServerSideProps,
|
|
type InferGetServerSidePropsType,
|
|
} from "next";
|
|
import Footer from "~/components/Footer";
|
|
import Header from "~/components/Header";
|
|
import { AdminBarLayout } from "~/components/admin/ControlBar";
|
|
import { AdminActionButton, AdminActionLink } from "~/components/admin/common";
|
|
import { appRouter } from "~/server/api/root";
|
|
import { prisma } from "~/server/db";
|
|
import Image from "next/image";
|
|
import {
|
|
ResourceForm,
|
|
type ResourceUpdateInput,
|
|
} from "~/components/admin/resources/form";
|
|
import { useState } from "react";
|
|
import { useForm, type SubmitHandler } from "react-hook-form";
|
|
import { api } from "~/utils/api";
|
|
|
|
export const getServerSideProps: GetServerSideProps<{
|
|
resource: AuditoryResource;
|
|
}> = async (context) => {
|
|
const helpers = createServerSideHelpers({
|
|
router: appRouter,
|
|
ctx: {
|
|
prisma,
|
|
session: null,
|
|
},
|
|
});
|
|
|
|
const id = context.params?.id as string;
|
|
|
|
const resource = await helpers.auditoryResource.byId.fetch({ id });
|
|
|
|
return {
|
|
props: {
|
|
resource,
|
|
},
|
|
};
|
|
};
|
|
|
|
const EditResourcePage = (
|
|
props: InferGetServerSidePropsType<typeof getServerSideProps>
|
|
) => {
|
|
const { resource } = props;
|
|
const [serverError, setServerError] = useState<string | undefined>(undefined);
|
|
const formMethods = useForm<ResourceUpdateInput>({
|
|
defaultValues: resource as ResourceUpdateInput,
|
|
});
|
|
|
|
const { mutate } = api.auditoryResource.update.useMutation({
|
|
onSuccess: (_data) => {
|
|
setServerError(undefined);
|
|
},
|
|
onError: (error) => setServerError(error.message),
|
|
});
|
|
|
|
const onSubmit: SubmitHandler<ResourceUpdateInput> = (data) => {
|
|
mutate(data);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<AdminBarLayout
|
|
actions={[
|
|
<AdminActionButton
|
|
key="save"
|
|
symbol={
|
|
<span className="flex">
|
|
<Image
|
|
className="inline-block group-hover:hidden"
|
|
alt="save"
|
|
src="/save-disk-white.svg"
|
|
width={14}
|
|
height={14}
|
|
/>
|
|
<Image
|
|
className="hidden group-hover:inline-block"
|
|
alt="save"
|
|
src="/save-disk-black.svg"
|
|
width={14}
|
|
height={14}
|
|
/>
|
|
</span>
|
|
}
|
|
label="Save"
|
|
onClick={() => {
|
|
onSubmit(formMethods.getValues());
|
|
}}
|
|
/>,
|
|
<AdminActionLink
|
|
key="cancel"
|
|
symbol={<XCircleIcon className="w-4" />}
|
|
label="Cancel"
|
|
href={`/resources/${resource.id}`}
|
|
/>,
|
|
]}
|
|
>
|
|
<main className="mb-12">
|
|
<ResourceForm
|
|
methods={formMethods}
|
|
error={serverError}
|
|
resource={resource as ResourceUpdateInput}
|
|
/>
|
|
</main>
|
|
</AdminBarLayout>
|
|
<Footer />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EditResourcePage;
|