Enhance error handling in ReportPackageForm by using user-facing error formatting

Author: Oksamies

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

@@ -12,6 +12,8 @@ import {
   type PackageListingReportRequestData,
   type RequestConfig,
   packageListingReport,
+  UserFacingError,
+  formatUserFacingError,
 } from "@thunderstore/thunderstore-api";
 
 const reportOptions: SelectOption<PackageListingReportRequestData["reason"]>[] =
@@ -81,7 +83,7 @@ export function ReportPackageForm(
     PackageListingReportRequestData,
     Error,
     SubmitorOutput,
-    Error,
+    UserFacingError,
     InputErrors
   >({
     inputs: formInputs,
@@ -92,11 +94,7 @@ export function ReportPackageForm(
       resetFormInputs();
     },
     onSubmitError: (error) => {
-      let message = `Error occurred: ${error.message || "Unknown error"}`;
-      if (error.message === "401: Unauthorized") {
-        message = "You must be logged in to report a package.";
-      }
-      setError(message);
+      setError(formatUserFacingError(error));
     },
   });