packageEdit: use two-phase package listing fetch

Attempt to fetch package listing data first as unauthenticated user in
hopes of hitting cache. If this results in 404, retry as authenticated
user in hopes of having permissions to view a rejected package listing.

Since we block rendering be awaiting permissions and listing, we might
as well trigger filter loading before we know whether user can access
the page or not. A little bit on overfetch is preferred to awaiting in
phases.

Author: anttimaki

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

@@ -18,15 +18,15 @@ import {
   type PackageListingUpdateRequestData,
   packageUnlist,
 } from "@thunderstore/thunderstore-api";
-import { DapperTs } from "@thunderstore/dapper-ts";
 import { type OutletContextShape } from "~/root";
-import { getSessionTools } from "cyberstorm/security/publicEnvVariables";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
 import { useReducer } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBan, faCheck } from "@fortawesome/pro-solid-svg-icons";
 import { ApiAction } from "@thunderstore/ts-api-react-actions";
+import { getDapperForRequest } from "cyberstorm/utils/dapperSingleton";
+import { getPrivateListing } from "app/p/listingUtils";
 
 export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
   return [
@@ -44,28 +44,23 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return undefined;
 }
 
-// TODO: Needs to check if package is available for the logged in user
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params, request }: LoaderFunctionArgs) {
   const { communityId, namespaceId, packageId } = params;
 
   if (!communityId || !namespaceId || !packageId) {
     throw package404;
   }
 
   try {
-    const tools = getSessionTools();
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: tools?.getConfig().apiHost,
-        sessionId: tools?.getConfig().sessionId,
-      };
-    });
+    const dapper = getDapperForRequest(request);
 
-    const permissions = await dapper.getPackagePermissions(
-      communityId,
-      namespaceId,
-      packageId
-    );
+    // Fetch everything at once for faster page load, even if we may
+    //  overfetch in case we lack authentication/authorization.
+    const [listing, permissions, filters] = await Promise.all([
+      getPrivateListing(dapper, { communityId, namespaceId, packageId }),
+      dapper.getPackagePermissions(communityId, namespaceId, packageId),
+      dapper.getCommunityFilters(communityId),
+    ]);
 
     if (!permissions) {
       throw new Response("Unauthenticated", { status: 401 });
@@ -76,15 +71,7 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
       throw new Response("Unauthorized", { status: 403 });
     }
 
-    return {
-      listing: await dapper.getPackageListingDetails(
-        communityId,
-        namespaceId,
-        packageId
-      ),
-      filters: await dapper.getCommunityFilters(communityId),
-      permissions: permissions,
-    };
+    return { listing, permissions, filters };
   } catch (error) {
     throw error instanceof ApiError ? package404 : error;
   }