update InfoInputLine to work with use-react-form

src/components/admin/resources/form.tsx

@@ -127,12 +127,14 @@ function ResourceSummarySubForm({
           </h2>
           <span className="text-md">
             <InfoInputLine
+              details={register("manufacturer.name", { required: true })}
               placeholder="manufacturer"
               value={resource?.manufacturer?.name ?? ""}
               hint="manufacturer"
             />
           </span>
           <InfoInputLine
+            details={register("name", { required: true })}
             placeholder="name"
             value={resource?.name ?? ""}
             hint="name"

src/components/forms/textInput.tsx

@@ -1,38 +1,49 @@
 import { useState } from "react";
+import {
+  type UseFormRegisterReturn,
+  type InternalFieldName,
+} from "react-hook-form";
 
 /**
  * Single line input for the fields found to the right of the
  * resource logo.
  */
-const InfoInputLine = ({
+function InfoInputLine<
+  TFieldName extends InternalFieldName = InternalFieldName
+>({
   value,
   placeholder,
   hint,
+  details,
 }: {
   value: string;
   placeholder: string;
   hint?: string;
-}) => {
+  details: UseFormRegisterReturn<TFieldName>;
-  const [currentValue, setCurrentValue] = useState<string>(value);
+}) {
+  const [curValue, setCurValue] = useState(value);
 
   return (
     <div className="relative">
       <input
+        {...details}
         onChange={(event) => {
-          setCurrentValue(event.target.value);
+          setCurValue(event.target.value);
+          details.onChange(event).catch((e) => {
+            console.error(e);
+          });
         }}
         placeholder={placeholder}
-        value={currentValue}
         type="text"
         className="w-full border-b border-neutral-300 px-2"
       />
       <label className="absolute bottom-0 right-2 top-0 text-right text-sm">
-        {currentValue !== "" ? (
+        {curValue !== "" ? (
           <span className="italic text-neutral-400">{hint}</span>
         ) : undefined}
       </label>
     </div>
   );
-};
+}
 
 export { InfoInputLine };