diff --git a/package-lock.json b/package-lock.json index 88b713e..dd93bbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "next-auth": "^4.19.0", "react": "18.2.0", "react-dom": "18.2.0", - "react-hook-form": "^7.43.9", + "react-hook-form": "^7.44.3", "superjson": "1.9.1", "zod": "^3.20.6" }, @@ -4624,9 +4624,9 @@ } }, "node_modules/react-hook-form": { - "version": "7.43.9", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz", - "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==", + "version": "7.44.3", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.44.3.tgz", + "integrity": "sha512-/tHId6p2ViAka1wECMw8FEPn/oz/w226zehHrJyQ1oIzCBNMIJCaj6ZkQcv+MjDxYh9MWR7RQic7Qqwe4a5nkw==", "engines": { "node": ">=12.22.0" }, @@ -8890,9 +8890,9 @@ } }, "react-hook-form": { - "version": "7.43.9", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz", - "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==", + "version": "7.44.3", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.44.3.tgz", + "integrity": "sha512-/tHId6p2ViAka1wECMw8FEPn/oz/w226zehHrJyQ1oIzCBNMIJCaj6ZkQcv+MjDxYh9MWR7RQic7Qqwe4a5nkw==", "requires": {} }, "react-is": { diff --git a/package.json b/package.json index 91cefb8..957f0b2 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "next-auth": "^4.19.0", "react": "18.2.0", "react-dom": "18.2.0", - "react-hook-form": "^7.43.9", + "react-hook-form": "^7.44.3", "superjson": "1.9.1", "zod": "^3.20.6" }, diff --git a/src/components/admin/common.tsx b/src/components/admin/common.tsx index e66d97a..ce1ae95 100644 --- a/src/components/admin/common.tsx +++ b/src/components/admin/common.tsx @@ -1,5 +1,24 @@ import Link from "next/link"; +const AdminActionBody = ({ + label, + symbol, +}: { + label: string; + symbol: JSX.Element | undefined; +}) => { + return ( + <> + + {label} + + + {symbol} + + + ); +}; + const AdminActionLink = ({ label, href, @@ -13,6 +32,25 @@ const AdminActionLink = ({ + + + ); +}; + +const AdminActionButton = ({ + label, + onClick, + symbol, +}: { + label: string; + onClick: () => void; + symbol: JSX.Element | undefined; +}) => { + return ( + ); }; -export { AdminActionLink }; +export { AdminActionLink, AdminActionButton }; diff --git a/src/components/admin/resources/form.tsx b/src/components/admin/resources/form.tsx index 3f809f9..8aa3672 100644 --- a/src/components/admin/resources/form.tsx +++ b/src/components/admin/resources/form.tsx @@ -1,9 +1,4 @@ -import { - PaymentType, - type AuditoryResource, - SkillLevel, - Skill, -} from "@prisma/client"; +import { PaymentType, SkillLevel, Skill } from "@prisma/client"; import Image from "next/image"; import { PencilSquareIcon } from "@heroicons/react/24/solid"; import { ChevronDownIcon } from "@heroicons/react/24/outline"; @@ -17,6 +12,10 @@ import { import { InfoInputLine } from "~/components/forms/textInput"; import { PriceIcon } from "~/prices/Icons"; import { useState } from "react"; +import { type UseFormRegister } from "react-hook-form"; +import { type RouterInputs } from "~/utils/api"; + +export type ResourceUpdateInput = RouterInputs["auditoryResource"]["update"]; /** * Renders the image selector for resource form. @@ -109,11 +108,13 @@ const PaymentTypeOption = ({ /** * Resource summary inputs - ie description, manufacturer, etc. */ -const ResourceSummarySubForm = ({ +function ResourceSummarySubForm({ + register, resource, }: { - resource?: AuditoryResource; -}) => { + register: UseFormRegister; + resource?: ResourceUpdateInput; +}) { return (
@@ -144,7 +145,7 @@ const ResourceSummarySubForm = ({ @@ -189,12 +190,14 @@ const ResourceSummarySubForm = ({
); -}; +} const ResourceDescriptionSubForm = ({ + register, resource, }: { - resource?: AuditoryResource; + register: UseFormRegister; + resource?: ResourceUpdateInput; }) => { const [dropdownOpen, toggleDropdown] = useState(false); @@ -203,6 +206,7 @@ const ResourceDescriptionSubForm = ({
+ /> + />
); }; -const ResourceForm = ({ resource }: { resource?: AuditoryResource }) => { +const ResourceForm = ({ + resource, + register, + error, +}: { + resource?: ResourceUpdateInput; + register: UseFormRegister; + error?: string; +}) => { return ( -
+
{/** //resource={resource} /> */}
@@ -247,11 +257,11 @@ const ResourceForm = ({ resource }: { resource?: AuditoryResource }) => { General
- - + +
- + ); }; diff --git a/src/pages/resources/[id]/edit.tsx b/src/pages/resources/[id]/edit.tsx index a3b286c..dd51c77 100644 --- a/src/pages/resources/[id]/edit.tsx +++ b/src/pages/resources/[id]/edit.tsx @@ -8,11 +8,17 @@ import { import Footer from "~/components/Footer"; import Header from "~/components/Header"; import { AdminBarLayout } from "~/components/admin/ControlBar"; -import { AdminActionLink } from "~/components/admin/common"; +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 } from "~/components/admin/resources/form"; +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; @@ -40,13 +46,29 @@ const EditResourcePage = ( props: InferGetServerSidePropsType ) => { const { resource } = props; + const [serverError, setServerError] = useState(undefined); + const { register, getValues } = useForm({ + defaultValues: resource as ResourceUpdateInput, + }); + + const { mutate } = api.auditoryResource.update.useMutation({ + onSuccess: async (data) => { + // todo: + }, + onError: (error) => setServerError(error.message), + }); + + const onSubmit: SubmitHandler = (data) => { + console.log("mutating"); + mutate(data); + }; return ( <>
@@ -67,7 +89,9 @@ const EditResourcePage = ( } label="Save" - href={`/resources/${resource.id}`} + onClick={() => { + onSubmit(getValues()); + }} />,
- +