From 0a42d34bb414d18095295f8e97c7fe22fe36847c Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Tue, 6 Jun 2023 00:40:50 -0500
Subject: [PATCH] update InfoInputLine to work with use-react-form

---
 src/components/admin/resources/form.tsx |  2 ++
 src/components/forms/textInput.tsx      | 25 ++++++++++++++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/admin/resources/form.tsx b/src/components/admin/resources/form.tsx
index 8aa3672..8e1d4bc 100644
--- a/src/components/admin/resources/form.tsx
+++ b/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"
diff --git a/src/components/forms/textInput.tsx b/src/components/forms/textInput.tsx
index 21a92ac..c584ede 100644
--- a/src/components/forms/textInput.tsx
+++ b/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;
-}) => {
-  const [currentValue, setCurrentValue] = useState<string>(value);
+  details: UseFormRegisterReturn<TFieldName>;
+}) {
+  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 };