The issue arises when the create form's type (id) parameter is null, which does not align with prisma's (edit info).
export function AboutForm({ id }: { id: number }) {
const router = useRouter();
const [err, setErr] = useState("");
const [isPending, startTransition] = useTransition();
const pending = useFormStatus();
const formRef = useRef<HTMLFormElement>(null);
const formRef2 = useRef<HTMLFormElement>(null);
const formInfo = useForm<InputInfo>({
resolver: zodResolver(infoSchema),
});
const formExperience = useForm<InputExperience>({
resolver: zodResolver(experienceSchema),
});
const onsubmitInfo = async (data: InputInfo) => {
startTransition(async () => {
if (id) await editInfo(id) //try to edit the form here if id exists
await createInfo(data);
router.refresh();
});
};
const onSubmitExperience = async (data: InputExperience) => {
startTransition(async () => {
const result = await createExperience(data);
if (!result.success) setErr("Unexpected error. Unable to create");
router.refresh();
});
};
return (
<section className="mx-auto px-10 md:max-w-md pt-10 md:pt-0 bg-re">
<Form {...formInfo}>
<form
onSubmit={formInfo.handleSubmit(onsubmitInfo)}
className="space-y-8"
ref={formRef}
>
<FormField
control={formInfo.control}
name="resume"
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder="resume" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
//problems arise here:
export const EditForm = async({ id }: { id: number }) => {
let [isPending, startTransition] = useTransition();
const info = await editInfo(id)
return (
<AboutForm id={info}/> //id
);
};
Type '{ info: { id: number; resume: string; description: string; createAt: Date; } | null; success: boolean; }' is not assignable to type 'number'.ts(2322)
AboutForm.tsx(38, 37): The expected type comes from property 'id' which is declared here on type 'IntrinsicAttributes & { id: number; }'
I attempted utilizing dynamic import from an online lesson but it didn't work. My ultimate objective is to consolidate all components in one place. The purpose of editing is to trigger the modal to edit the form using the same form I used for creating. Reference image of the app: https://i.stack.imgur.com/PP2sH.png