@thunderstore/dapper: return package listings as paginated results

In addition to the package information, extra information for
pagination purposes will be returned by the backend.

Refs TS-1875

packages/cyberstorm/src/components/Layout/HomeLayout/HomeLayout.tsx

@@ -11,6 +11,7 @@ import { usePromise } from "@thunderstore/use-promise";
 export function HomeLayout() {
   const dapper = useDapper();
   const featuredCommunities = usePromise(dapper.getCommunities, []);
+  // TODO: "featured" or "hot" packages are not supported.
   const featuredPackages = usePromise(dapper.getPackageListings, ["featured"]);
   const hotPackages = usePromise(dapper.getPackageListings, ["hot"]);
 
@@ -26,14 +27,14 @@ export function HomeLayout() {
           </div>
           <div className={styles.smallContent} />
           <div className={styles.cardContent}>
-            {featuredPackages?.slice(0, 6).map((packageData) => (
-              <PackageCard key={packageData.name} package={packageData} />
+            {featuredPackages.results.slice(0, 6).map((p) => (
+              <PackageCard key={p.name} package={p} />
             ))}
           </div>
           <div className={styles.mediumContent} />
           <div className={styles.cardContent}>
-            {hotPackages?.slice(0, 6).map((packageData) => (
-              <PackageCard key={packageData.name} package={packageData} />
+            {hotPackages.results.slice(0, 6).map((p) => (
+              <PackageCard key={p.name} package={p} />
             ))}
           </div>
           <div className={styles.mediumContent} />

packages/cyberstorm/src/components/PackageList/PackageList.tsx

@@ -59,15 +59,15 @@ export function PackageList(props: Props) {
           page={1}
           pageSize={PER_PAGE}
           searchQuery={searchQuery}
-          totalCount={327 /* TODO */}
+          totalCount={packages.count}
         />
 
         <PackageOrder order={order} setOrder={setOrder} />
       </div>
 
       <div className={styles.packages}>
-        {packages.map((packageData) => (
-          <PackageCard key={packageData.name} package={packageData} />
+        {packages.results.map((p) => (
+          <PackageCard key={p.name} package={p} />
         ))}
       </div>
 
@@ -76,7 +76,7 @@ export function PackageList(props: Props) {
         onPageChange={setPage}
         pageSize={PER_PAGE}
         siblingCount={2}
-        totalCount={327 /* TODO */}
+        totalCount={packages.count}
       />
     </div>
   );

packages/dapper-fake/src/fakers/package.ts

@@ -25,19 +25,26 @@ const getFakePackagePreview = (community?: string, namespace?: string) => {
   };
 };
 
+// TODO: this implementation will show the same results when user
+// interacts with filters or pagination. Something similar could be done
+// here that's done for community listing, but getting all the filters
+// to work properly might not be worth the effort.
 export const getFakePackageListings = async (
   communityId?: string,
   namespaceId?: string,
   // Temporary, will be refactored away when the actual implementation is done.
   _teamId?: string, // eslint-disable-line @typescript-eslint/no-unused-vars
   _userId?: string // eslint-disable-line @typescript-eslint/no-unused-vars
-) =>
-  range(20).map(() =>
+) => ({
+  count: 200,
+  hasMore: true,
+  results: range(20).map(() =>
     getFakePackagePreview(
       communityId ?? faker.word.sample(),
       namespaceId ?? faker.word.sample()
     )
-  );
+  ),
+});
 
 // TODO: the methods below this point don't yet match what the backend
 // will be actually returning.

packages/dapper/src/types/methods.ts

@@ -1,5 +1,5 @@
 import { Communities, Community, CommunityFilters } from "./community";
-import { Package, PackageDependency, PackagePreview } from "./package";
+import { Package, PackageDependency, PackagePreviews } from "./package";
 import { TeamDetails, ServiceAccount, TeamMember } from "./team";
 import { CurrentUser } from "./user";
 
@@ -41,7 +41,7 @@ export type GetPackageListings = (
       value: boolean | undefined;
     };
   }
-) => Promise<PackagePreview[]>;
+) => Promise<PackagePreviews>;
 
 export type GetTeamDetails = (teamName: string) => Promise<TeamDetails>;
 

packages/dapper/src/types/package.ts

@@ -1,4 +1,4 @@
-import { PackageCategory } from "./shared";
+import { PackageCategory, PaginatedList } from "./shared";
 import { TeamMember } from "./team";
 
 export interface PackagePreview {
@@ -17,6 +17,8 @@ export interface PackagePreview {
   size: number;
 }
 
+export type PackagePreviews = PaginatedList<PackagePreview>;
+
 export interface Package extends PackagePreview {
   community_name: string;
   shortDescription?: string;