diff --git a/src/components/admin/resources/form.tsx b/src/components/admin/resources/form.tsx index 8e1d4bc..01979cc 100644 --- a/src/components/admin/resources/form.tsx +++ b/src/components/admin/resources/form.tsx @@ -3,16 +3,19 @@ import Image from "next/image"; import { PencilSquareIcon } from "@heroicons/react/24/solid"; import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { - MultiSelector, MultiSelectorMany, MultiSelectorOption, - SelectedUniqueContext, + SelectedManyContext, SimpleSelectorManyOption, } from "../../forms/selectors"; import { InfoInputLine } from "~/components/forms/textInput"; import { PriceIcon } from "~/prices/Icons"; import { useState } from "react"; -import { type UseFormRegister } from "react-hook-form"; +import { + type UseFormReturn, + FormProvider, + useFormContext, +} from "react-hook-form"; import { type RouterInputs } from "~/utils/api"; export type ResourceUpdateInput = RouterInputs["auditoryResource"]["update"]; @@ -79,11 +82,11 @@ const PaymentTypeOption = ({ }) => { return ( - + {(selected) => (
@@ -92,7 +95,7 @@ const PaymentTypeOption = ({ @@ -100,7 +103,7 @@ const PaymentTypeOption = ({
)} -
+
); }; @@ -109,12 +112,12 @@ const PaymentTypeOption = ({ * Resource summary inputs - ie description, manufacturer, etc. */ function ResourceSummarySubForm({ - register, resource, }: { - register: UseFormRegister; resource?: ResourceUpdateInput; }) { + const { register } = useFormContext(); + return (
@@ -144,10 +147,11 @@ function ResourceSummarySubForm({
- @@ -159,9 +163,10 @@ function ResourceSummarySubForm({ type={PaymentType.SUBSCRIPTION_WEEKLY} label="Weekly Subscription" /> - + @@ -177,6 +182,7 @@ function ResourceSummarySubForm({ @@ -194,14 +200,9 @@ function ResourceSummarySubForm({ ); } -const ResourceDescriptionSubForm = ({ - register, - resource, -}: { - register: UseFormRegister; - resource?: ResourceUpdateInput; -}) => { +const ResourceDescriptionSubForm = () => { const [dropdownOpen, toggleDropdown] = useState(false); + const { register } = useFormContext(); return (
@@ -241,29 +242,31 @@ const ResourceDescriptionSubForm = ({ }; const ResourceForm = ({ + methods, resource, - register, error, }: { resource?: ResourceUpdateInput; - register: UseFormRegister; + methods: UseFormReturn; error?: string; }) => { return ( -
-
- {/** //resource={resource} /> */} -
-
-

- General -

-
- - + + +
+ {/** //resource={resource} /> */}
-
- +
+

+ General +

+
+ + +
+
+ + ); }; diff --git a/src/components/forms/selectors.tsx b/src/components/forms/selectors.tsx index 232878b..f669f62 100644 --- a/src/components/forms/selectors.tsx +++ b/src/components/forms/selectors.tsx @@ -1,4 +1,5 @@ import { createContext, useContext, useState } from "react"; +import { useFormContext, type UseFormRegisterReturn } from "react-hook-form"; // generics interface ToStringable { @@ -22,11 +23,14 @@ function MultiSelectorMany({ label, defaultValues, children, + details, }: { label: string; defaultValues: T[]; children: undefined | JSX.Element | JSX.Element[]; + details: UseFormRegisterReturn; }) { + const { setValue } = useFormContext(); const [selected, setSelected] = useState( defaultValues.map((value) => { return value.toString(); @@ -35,14 +39,16 @@ function MultiSelectorMany({ const updateCallback = (value: string) => { if (selected.includes(value)) { - setSelected( - selected.filter((selectedValue) => { - return selectedValue !== value; - }) - ); + const filteredSelected = selected.filter((selectedValue) => { + return selectedValue !== value; + }); + + setValue(details.name, filteredSelected); + setSelected(filteredSelected); return; } + setValue(details.name, [value, ...selected]); setSelected([value, ...selected]); }; @@ -54,12 +60,7 @@ function MultiSelectorMany({ Select all that apply - +
{children}
@@ -73,16 +74,25 @@ function MultiSelector({ label, defaultValue, children, + details, }: { label: string; defaultValue: T; children: undefined | JSX.Element | JSX.Element[]; + details: UseFormRegisterReturn; }) { const [selected, setSelected] = useState(defaultValue.toString()); + const { setValue } = useFormContext(); return ( { + setSelected(value); + setValue(details.name, value); + }, + }} >
@@ -90,12 +100,7 @@ function MultiSelector({ Select one from below - +
{children}
diff --git a/src/pages/resources/[id]/edit.tsx b/src/pages/resources/[id]/edit.tsx index dd51c77..d1d09e7 100644 --- a/src/pages/resources/[id]/edit.tsx +++ b/src/pages/resources/[id]/edit.tsx @@ -47,7 +47,7 @@ const EditResourcePage = ( ) => { const { resource } = props; const [serverError, setServerError] = useState(undefined); - const { register, getValues } = useForm({ + const formMethods = useForm({ defaultValues: resource as ResourceUpdateInput, }); @@ -90,7 +90,7 @@ const EditResourcePage = ( } label="Save" onClick={() => { - onSubmit(getValues()); + onSubmit(formMethods.getValues()); }} />,
diff --git a/src/server/api/routers/auditoryResources.ts b/src/server/api/routers/auditoryResources.ts index 120e8ae..293bd76 100644 --- a/src/server/api/routers/auditoryResources.ts +++ b/src/server/api/routers/auditoryResources.ts @@ -34,14 +34,14 @@ export const auditoryResourceRouter = createTRPCRouter({ .input( z.object({ id: z.string(), - icon: z.string().optional(), - name: z.string().optional(), - description: z.string().optional(), + icon: z.string().min(1).optional(), + name: z.string().min(1).optional(), + description: z.string().min(1).optional(), manufacturer: z .object({ - name: z.string(), + name: z.string().min(1), required: z.boolean(), - notice: z.string().optional().nullable(), + notice: z.string().min(1).optional().nullable(), }) .optional(), ages: z @@ -52,7 +52,10 @@ export const auditoryResourceRouter = createTRPCRouter({ payment_options: z.array(z.nativeEnum(PaymentType)).optional(), platform_links: z .array( - z.object({ platform: z.nativeEnum(Platform), link: z.string() }) + z.object({ + platform: z.nativeEnum(Platform), + link: z.string().min(1), + }) ) .optional(), })