diff --git a/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackageForm.tsx b/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackageForm.tsx index d232591e3..5dbf88aa6 100644 --- a/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackageForm.tsx +++ b/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: ( + 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>; async function submitor(data: typeof formInputs): Promise { @@ -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" diff --git a/apps/cyberstorm-remix/app/p/components/ReportPackage/useReportPackage.tsx b/apps/cyberstorm-remix/app/p/components/ReportPackage/useReportPackage.tsx index 6d9530778..ce9a5d413 100644 --- a/apps/cyberstorm-remix/app/p/components/ReportPackage/useReportPackage.tsx +++ b/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; @@ -16,6 +24,9 @@ export function useReportPackage(formProps: { const [isOpen, setIsOpen] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const [error, setError] = useState(null); + const [formInputs, setFormInputs] = useState( + createInitialFormInputs + ); const onOpenChange = (isOpen: boolean) => { setIsOpen(isOpen); @@ -23,6 +34,22 @@ export function useReportPackage(formProps: { setError(null); }; + type UpdateFormInput = ( + field: K, + value: PackageListingReportRequestData[K] + ) => void; + + const updateFormInput = useCallback((field, value) => { + setFormInputs((prev) => ({ + ...prev, + [field]: value, + })); + }, []); + + const resetFormInputs = useCallback(() => { + setFormInputs(createInitialFormInputs()); + }, []); + const [props, setProps] = useState(null); async function awaitAndSetProps() { @@ -37,7 +64,15 @@ export function useReportPackage(formProps: { const button = onOpenChange(true)} />; - const extraProps = { error, onOpenChange, setError, setIsSubmitted }; + const extraProps = { + error, + onOpenChange, + setError, + setIsSubmitted, + formInputs, + updateFormInput, + resetFormInputs, + }; const form = props && ( );