Merge pull request #1589 from thunderstore-io/10-21-nimbus_packagelisting_make_report_button_hidden_when_no_currentuser

Nimbus packageListing useReportPackage fix

Author: Oksamies

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

@@ -1,4 +1,4 @@
-import { useReducer, useState } from "react";
+import { useReducer } from "react";
 
 import {
   Modal,
@@ -31,7 +31,6 @@ export interface ReportPackageFormProps {
   community: string;
   namespace: string;
   package: string;
-  config: () => RequestConfig;
 }
 
 interface ReportPackageFormFullProps extends ReportPackageFormProps {
@@ -41,7 +40,11 @@ interface ReportPackageFormFullProps extends ReportPackageFormProps {
   setIsSubmitted: (isSubmitted: boolean) => void;
 }
 
-export function ReportPackageForm(props: ReportPackageFormFullProps) {
+export function ReportPackageForm(
+  props: ReportPackageFormFullProps & {
+    config: () => RequestConfig;
+  }
+) {
   const {
     config,
     onOpenChange,

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

@@ -7,8 +7,12 @@ import {
 import { ReportPackageButton } from "./ReportPackageButton";
 import { ReportPackageModal } from "./ReportPackageModal";
 import { ReportPackageSubmitted } from "./ReportPackageSubmitted";
+import { type RequestConfig } from "@thunderstore/thunderstore-api";
 
-export function useReportPackage(formProps: Promise<ReportPackageFormProps>) {
+export function useReportPackage(formProps: {
+  formPropsPromise: Promise<ReportPackageFormProps>;
+  config: () => RequestConfig;
+}) {
   const [isOpen, setIsOpen] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -23,7 +27,7 @@ export function useReportPackage(formProps: Promise<ReportPackageFormProps>) {
 
   async function awaitAndSetProps() {
     if (!props) {
-      setProps(await formProps);
+      setProps(await formProps.formPropsPromise);
     }
   }
 
@@ -34,7 +38,9 @@ export function useReportPackage(formProps: Promise<ReportPackageFormProps>) {
   const button = <ReportPackageButton onClick={() => onOpenChange(true)} />;
 
   const extraProps = { error, onOpenChange, setError, setIsSubmitted };
-  const form = props && <ReportPackageForm {...props} {...extraProps} />;
+  const form = props && (
+    <ReportPackageForm {...props} {...extraProps} config={formProps.config} />
+  );
 
   const done = (
     <ReportPackageSubmitted closeModal={() => onOpenChange(false)} />

apps/cyberstorm-remix/app/p/packageListing.tsx

@@ -181,14 +181,14 @@ export default function PackageListing() {
   const [isLiked, setIsLiked] = useState(false);
   const toast = useToast();
 
-  const { ReportPackageButton, ReportPackageModal } = useReportPackage(
-    Promise.resolve(listing).then((listingData) => ({
+  const { ReportPackageButton, ReportPackageModal } = useReportPackage({
+    formPropsPromise: Promise.resolve(listing).then((listingData) => ({
       community: listingData.community_identifier,
       namespace: listingData.namespace,
       package: listingData.name,
-      config,
-    }))
-  );
+    })),
+    config: config,
+  });
 
   const fetchAndSetRatedPackages = async () => {
     const rp = await dapper.getRatedPackages();