Refactor ReportPackageForm to use controlled form inputs and update logic

apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackageForm.tsx

@@ -1,5 +1,3 @@
-import { useReducer } from "react";
-
 import {
   Modal,
   NewAlert,
@@ -38,6 +36,12 @@ interface ReportPackageFormFullProps extends ReportPackageFormProps {
   onOpenChange: (isOpen: boolean) => void;
   setError: (error: string | null) => void;
   setIsSubmitted: (isSubmitted: boolean) => void;
+  formInputs: PackageListingReportRequestData;
+  updateFormInput: <K extends keyof PackageListingReportRequestData>(
+    field: K,
+    value: PackageListingReportRequestData[K]
+  ) => void;
+  resetFormInputs: () => void;
 }
 
 export function ReportPackageForm(
@@ -51,27 +55,12 @@ export function ReportPackageForm(
     setIsSubmitted,
     error,
     setError,
+    formInputs,
+    updateFormInput,
+    resetFormInputs,
     ...requestParams
   } = props;
 
-  function formFieldUpdateAction(
-    state: PackageListingReportRequestData,
-    action: {
-      field: keyof PackageListingReportRequestData;
-      value: PackageListingReportRequestData[keyof PackageListingReportRequestData];
-    }
-  ) {
-    return {
-      ...state,
-      [action.field]: action.value,
-    };
-  }
-
-  const [formInputs, updateFormFieldState] = useReducer(formFieldUpdateAction, {
-    reason: "Other",
-    description: "",
-  });
-
   type SubmitorOutput = Awaited<ReturnType<typeof packageListingReport>>;
 
   async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
@@ -100,6 +89,7 @@ export function ReportPackageForm(
     onSubmitSuccess: () => {
       setIsSubmitted(true);
       setError(null);
+      resetFormInputs();
     },
     onSubmitError: (error) => {
       let message = `Error occurred: ${error.message || "Unknown error"}`;
@@ -127,7 +117,7 @@ export function ReportPackageForm(
             // placeholder="Please select..."
             value={formInputs.reason}
             onChange={(value) => {
-              updateFormFieldState({ field: "reason", value: value });
+              updateFormInput("reason", value);
             }}
             csSize="small"
           />
@@ -140,10 +130,7 @@ export function ReportPackageForm(
             id="description"
             value={formInputs.description || ""}
             onChange={(e) => {
-              updateFormFieldState({
-                field: "description",
-                value: e.target.value,
-              });
+              updateFormInput("description", e.target.value);
             }}
             placeholder="Invalid submission"
             csSize="textarea"

apps/cyberstorm-remix/app/p/components/ReportPackage/useReportPackage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import {
   ReportPackageForm,
@@ -7,7 +7,15 @@ import {
 import { ReportPackageButton } from "./ReportPackageButton";
 import { ReportPackageModal } from "./ReportPackageModal";
 import { ReportPackageSubmitted } from "./ReportPackageSubmitted";
-import { type RequestConfig } from "@thunderstore/thunderstore-api";
+import {
+  type PackageListingReportRequestData,
+  type RequestConfig,
+} from "@thunderstore/thunderstore-api";
+
+const createInitialFormInputs = (): PackageListingReportRequestData => ({
+  reason: "Other",
+  description: "",
+});
 
 export function useReportPackage(formProps: {
   formPropsPromise: Promise<ReportPackageFormProps>;
@@ -16,13 +24,32 @@ export function useReportPackage(formProps: {
   const [isOpen, setIsOpen] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [formInputs, setFormInputs] = useState<PackageListingReportRequestData>(
+    createInitialFormInputs
+  );
 
   const onOpenChange = (isOpen: boolean) => {
     setIsOpen(isOpen);
     setIsSubmitted(false);
     setError(null);
   };
 
+  type UpdateFormInput = <K extends keyof PackageListingReportRequestData>(
+    field: K,
+    value: PackageListingReportRequestData[K]
+  ) => void;
+
+  const updateFormInput = useCallback<UpdateFormInput>((field, value) => {
+    setFormInputs((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  }, []);
+
+  const resetFormInputs = useCallback(() => {
+    setFormInputs(createInitialFormInputs());
+  }, []);
+
   const [props, setProps] = useState<ReportPackageFormProps | null>(null);
 
   async function awaitAndSetProps() {
@@ -37,7 +64,15 @@ export function useReportPackage(formProps: {
 
   const button = <ReportPackageButton onClick={() => onOpenChange(true)} />;
 
-  const extraProps = { error, onOpenChange, setError, setIsSubmitted };
+  const extraProps = {
+    error,
+    onOpenChange,
+    setError,
+    setIsSubmitted,
+    formInputs,
+    updateFormInput,
+    resetFormInputs,
+  };
   const form = props && (
     <ReportPackageForm {...props} {...extraProps} config={formProps.config} />
   );