Merge pull request #891 from thunderstore-io/dapper-package-preview

@thunderstore/dapper: make PackagePreview match the data from backend

apps/cyberstorm-nextjs/app/c/[community]/p/[namespace]/[package]/dependants/page.tsx

@@ -9,7 +9,7 @@ export default function Page({
   // TODO: dummy data for now, the component shouldn't consume Package
   // object anyway.
   const packageData = {
-    community: params.community,
+    community_identifier: params.community,
     namespace: params.namespace,
     name: params.package,
   } as Package;

apps/cyberstorm-storybook/stories/components/PackageCard.stories.tsx

@@ -38,18 +38,17 @@ ReferencePackageCard.args = {
   package: {
     name: "WaveTimer",
     namespace: "otDan",
-    community: "brotato",
+    community_identifier: "brotato",
     description: "Modifies the in game timer to have a new look ",
-    imageSource:
+    icon_url:
       "https://gcdn.thunderstore.io/live/repository/icons/otDan-WaveTimer-1.1.0.png.256x256_q95_crop.jpg",
-    downloadCount: 2707,
-    likes: 1,
+    download_count: 2707,
+    rating_count: 1,
     size: 106299,
-    author: "otDan",
-    lastUpdated: "Tue Feb 28 2023",
-    isPinned: false,
-    isNsfw: false,
-    isDeprecated: false,
+    last_updated: "2023-02-28T11:23:42.000000Z",
+    is_pinned: false,
+    is_nsfw: false,
+    is_deprecated: false,
     categories: [
       { id: 1, name: "Misc", slug: "misc" },
       { id: 2, name: "Mods", slug: "mods" },

apps/cyberstorm-storybook/stories/layouts/PackageDependantsLayout.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
 } as Meta<typeof PackageDependantsLayout>;
 
 const packageData = {
-  community: "brotato",
+  community_identifier: "brotato",
   namespace: "otDan",
   name: "WaveTimer",
 } as Package;

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

@@ -27,8 +27,10 @@ export function PackageDependantsLayout(props: PackageDependantsLayoutProps) {
   const { package: pkg } = props;
 
   const dapper = useDapper();
-  const community = usePromise(dapper.getCommunity, [pkg.community]);
-  const filters = usePromise(dapper.getCommunityFilters, [pkg.community]);
+  const community = usePromise(dapper.getCommunity, [pkg.community_identifier]);
+  const filters = usePromise(dapper.getCommunityFilters, [
+    pkg.community_identifier,
+  ]);
 
   return (
     <BaseLayout
@@ -42,11 +44,11 @@ export function PackageDependantsLayout(props: PackageDependantsLayoutProps) {
             {community.name}
           </CommunityLink>
           Packages
-          <TeamLink community={pkg.community} team={pkg.namespace}>
+          <TeamLink community={pkg.community_identifier} team={pkg.namespace}>
             {pkg.namespace}
           </TeamLink>
           <PackageLink
-            community={pkg.community}
+            community={pkg.community_identifier}
             namespace={pkg.namespace}
             package={pkg.name}
           >
@@ -59,21 +61,21 @@ export function PackageDependantsLayout(props: PackageDependantsLayoutProps) {
         <div className={styles.header}>
           Mods that depend on{" "}
           <PackageLink
-            community={pkg.community}
+            community={pkg.community_identifier}
             namespace={pkg.namespace}
             package={pkg.name}
           >
             {pkg.name}
           </PackageLink>
           {" by "}
-          <TeamLink community={pkg.community} team={pkg.namespace}>
+          <TeamLink community={pkg.community_identifier} team={pkg.namespace}>
             {pkg.namespace}
           </TeamLink>
         </div>
       }
       mainContent={
         <PackageSearch
-          communityId={pkg.community}
+          communityId={pkg.community_identifier}
           packageCategories={filters.package_categories}
           sections={filters.sections}
         />

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

@@ -56,6 +56,11 @@ export interface PackageDetailLayoutProps {
 
 /**
  * Cyberstorm PackageDetail Layout
+ *
+ * TODO: Use community.background_image_url as the background
+ * TODO: Change BaseLayout.backGroundImageSource to accept null rather
+ *       than undefined if image URLs are not available, as this is what
+ *       backend returns. (Unless we have a default image.)
  */
 export function PackageDetailLayout(props: PackageDetailLayoutProps) {
   const {
@@ -88,7 +93,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
   const packageDetailsMeta = [
     <TeamLink
       key="team"
-      community={packageData.community}
+      community={packageData.community_identifier}
       team={packageData.namespace}
     >
       <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
@@ -133,16 +138,16 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
 
   return (
     <BaseLayout
-      backGroundImageSource={packageData.imageSource}
+      backGroundImageSource={packageData.icon_url || undefined}
       breadCrumb={
         <BreadCrumbs>
           <CommunitiesLink>Communities</CommunitiesLink>
-          <CommunityLink community={packageData.community}>
-            {packageData.community}
+          <CommunityLink community={packageData.community_identifier}>
+            {packageData.community_name}
           </CommunityLink>
           Packages
           <TeamLink
-            community={packageData.community}
+            community={packageData.community_identifier}
             team={packageData.namespace}
           >
             {packageData.namespace}
@@ -155,11 +160,13 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
           <PageHeader
             title={packageData.name}
             image={
-              <img
-                className={styles.modImage}
-                alt={packageData.name}
-                src={packageData.imageSource}
-              />
+              packageData.icon_url ? (
+                <img
+                  className={styles.modImage}
+                  alt=""
+                  src={packageData.icon_url}
+                />
+              ) : undefined
             }
             description={packageData.shortDescription}
             meta={packageDetailsMeta}
@@ -176,7 +183,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
                 </Button.Root>
               }
               additionalFooterContent={
-                packageData.isDeprecated ? (
+                packageData.is_deprecated ? (
                   <Button.Root paddingSize="large" colorScheme="default">
                     <Button.ButtonLabel>Undeprecate</Button.ButtonLabel>
                   </Button.Root>
@@ -268,7 +275,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
           <PackageTagList packageData={packageData} />
           <PackageDependencyList namespace={namespace} community={community} />
           <PackageTeamMemberList
-            community={packageData.community}
+            community={packageData.community_identifier}
             teamName={packageData.namespace}
             teamMembers={packageData.team.members}
           />
@@ -285,7 +292,7 @@ function getMetaInfoData(packageData: Package) {
     {
       key: "1",
       label: "Last Updated",
-      content: <>{packageData.lastUpdated}</>,
+      content: <>{packageData.last_updated}</>,
     },
     {
       key: "2",
@@ -295,12 +302,12 @@ function getMetaInfoData(packageData: Package) {
     {
       key: "3",
       label: "Downloads",
-      content: <>{formatInteger(packageData.downloadCount)}</>,
+      content: <>{formatInteger(packageData.download_count)}</>,
     },
     {
       key: "4",
       label: "Likes",
-      content: <>{formatInteger(packageData.likes)}</>,
+      content: <>{formatInteger(packageData.rating_count)}</>,
     },
     {
       key: "5",
@@ -327,7 +334,7 @@ function getMetaInfoData(packageData: Package) {
       label: "Dependants",
       content: (
         <PackageDependantsLink
-          community={packageData.community}
+          community={packageData.community_identifier}
           namespace={packageData.namespace}
           package={packageData.name}
         >

packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTagList/PackageTagList.tsx

@@ -36,19 +36,19 @@ PackageTagList.displayName = "PackageTagList";
 
 function getPackageFlags(packageData: Package) {
   const updateTimeDelta = Math.round(
-    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000
+    (Date.now() - Date.parse(packageData.last_updated)) / 86400000
   );
   const isNew = updateTimeDelta < 3;
   if (
-    !packageData.isPinned &&
-    !packageData.isNsfw &&
-    !packageData.isDeprecated &&
+    !packageData.is_pinned &&
+    !packageData.is_nsfw &&
+    !packageData.is_deprecated &&
     !isNew
   ) {
     return null;
   }
   const flagList: ReactNode[] = [];
-  if (packageData.isPinned) {
+  if (packageData.is_pinned) {
     flagList.push(
       <Tag
         key="flag_pinned"
@@ -59,7 +59,7 @@ function getPackageFlags(packageData: Package) {
       />
     );
   }
-  if (packageData.isDeprecated) {
+  if (packageData.is_deprecated) {
     flagList.push(
       <Tag
         key="flag_deprecated"
@@ -70,7 +70,7 @@ function getPackageFlags(packageData: Package) {
       />
     );
   }
-  if (packageData.isNsfw) {
+  if (packageData.is_nsfw) {
     flagList.push(
       <Tag
         key="flag_nsfw"

packages/cyberstorm/src/components/PackageCard/PackageCard.tsx

@@ -29,20 +29,20 @@ export function PackageCard(props: Props) {
     <div className={classnames(styles.root, styles.packageCard__default)}>
       <div className={styles.imageWrapper}>
         <PackageLink
-          community={p.community}
+          community={p.community_identifier}
           namespace={p.namespace}
           package={p.name}
         >
-          {p.imageSource ? (
-            <img className={styles.image} src={p.imageSource} alt={p.name} />
+          {p.icon_url ? (
+            <img className={styles.image} src={p.icon_url} alt={p.name} />
           ) : null}
           {getPackageFlags(p)}
         </PackageLink>
       </div>
 
       <div className={styles.content}>
         <PackageLink
-          community={p.community}
+          community={p.community_identifier}
           namespace={p.namespace}
           package={p.name}
         >
@@ -51,7 +51,7 @@ export function PackageCard(props: Props) {
 
         <div className={styles.author}>
           <span className={styles.author_prefix}>by</span>
-          <TeamLink community={p.community} team={p.namespace}>
+          <TeamLink community={p.community_identifier} team={p.namespace}>
             <div className={styles.author_label}>{p.namespace}</div>
           </TeamLink>
         </div>
@@ -80,19 +80,19 @@ PackageCard.displayName = "PackageCard";
 
 function getPackageFlags(packageData: PackagePreview) {
   const updateTimeDelta = Math.round(
-    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000
+    (Date.now() - Date.parse(packageData.last_updated)) / 86400000
   );
   const isNew = updateTimeDelta < 3;
   if (
-    !packageData.isPinned &&
-    !packageData.isNsfw &&
-    !packageData.isDeprecated &&
+    !packageData.is_pinned &&
+    !packageData.is_nsfw &&
+    !packageData.is_deprecated &&
     !isNew
   ) {
     return null;
   }
   const flagList: ReactNode[] = [];
-  if (packageData.isPinned) {
+  if (packageData.is_pinned) {
     flagList.push(
       <Tag
         key="flag_pinned"
@@ -102,7 +102,7 @@ function getPackageFlags(packageData: PackagePreview) {
       />
     );
   }
-  if (packageData.isDeprecated) {
+  if (packageData.is_deprecated) {
     flagList.push(
       <Tag
         key="flag_deprecated"
@@ -112,7 +112,7 @@ function getPackageFlags(packageData: PackagePreview) {
       />
     );
   }
-  if (packageData.isNsfw) {
+  if (packageData.is_nsfw) {
     flagList.push(
       <Tag
         key="flag_nsfw"
@@ -137,7 +137,7 @@ function getPackageFlags(packageData: PackagePreview) {
 
 function getMetaItemList(packageData: PackagePreview) {
   const updateTimeDelta = Math.round(
-    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000
+    (Date.now() - Date.parse(packageData.last_updated)) / 86400000
   );
   return (
     <div className={styles.metaItemWrapper}>
@@ -148,12 +148,12 @@ function getMetaItemList(packageData: PackagePreview) {
       />
       <MetaItem
         icon={<FontAwesomeIcon icon={faDownload} />}
-        label={formatInteger(packageData.downloadCount)}
+        label={formatInteger(packageData.download_count)}
         colorScheme="tertiary"
       />
       <MetaItem
         icon={<FontAwesomeIcon icon={faThumbsUp} />}
-        label={formatInteger(packageData.likes)}
+        label={formatInteger(packageData.rating_count)}
         colorScheme="tertiary"
       />
     </div>