Feature/collections qa 2 (#282)

* fix: show fetching indicator correctly

* fix: show blueprints overview

* fix: revalidate profile when minting from blueprint

* fix: revalidate profile when creating  blueprint

* fix: add invalidation when minting from blueprints

* fix: revalidate specificy page to handle dynamic routes

* fix: various qa issues

* fix: various qa issues

Author: Jipperism

app/actions.ts

@@ -7,12 +7,12 @@ export default async function revalidatePathServerAction(
 ) {
   if (typeof path === "string") {
     console.log("revalidating path", path);
-    revalidatePath(path);
+    revalidatePath(path, "page");
     return;
   }
 
   for (const p of path) {
     console.log("revalidating path", p);
-    revalidatePath(p);
+    revalidatePath(p, "page");
   }
 }

app/profile/[address]/blueprint-tab-content.tsx

@@ -1,22 +1,40 @@
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
 import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
 import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
 import { getBlueprints } from "@/blueprints/getBlueprints";
 import BlueprintsList from "@/components/blueprints/blueprints-list";
+import { CreateBlueprintButton } from "@/components/blueprints/buttons";
+import { OwnAccountOnly } from "@/components/own-account-only";
+import { BlueprintsTable } from "@/components/blueprints/blueprints-table";
+import { BLUEPRINTS_PER_PAGE } from "@/configs/ui";
+import Pagination from "@/components/pagination";
 
 const BlueprintTabContentInner = async ({
   address,
   activeTab,
+  searchParams,
 }: {
   address: string;
   activeTab: ProfileSubTabKey;
+  searchParams: Record<string, string>;
 }) => {
+  const currentPage = Number(searchParams?.p) || 1;
+
   const availableBlueprints = await getBlueprints({
     filters: { minterAddress: address as `0x${string}`, minted: false },
+    first: BLUEPRINTS_PER_PAGE,
+    offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
   });
   const mintedBlueprints = await getBlueprints({
     filters: { minterAddress: address as `0x${string}`, minted: true },
+    first: BLUEPRINTS_PER_PAGE,
+    offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+  });
+  const blueprintsCreated = await getBlueprints({
+    filters: { adminAddress: address as `0x${string}` },
+    first: BLUEPRINTS_PER_PAGE,
+    offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
   });
 
   const marketplaceSubTabs = subTabs.filter(
@@ -28,8 +46,10 @@ const BlueprintTabContentInner = async ({
   > = {
     "blueprints-claimable": availableBlueprints?.count ?? 0,
     "blueprints-claimed": mintedBlueprints?.count ?? 0,
-    "blueprints-created": availableBlueprints?.count ?? 0,
+    "blueprints-created": blueprintsCreated?.count ?? 0,
   };
+  const currentCount =
+    tabBadgeCounts[activeTab as (typeof subTabs)[number]["key"]];
   return (
     <section>
       <SubTabsWithCount
@@ -38,6 +58,12 @@ const BlueprintTabContentInner = async ({
         tabBadgeCounts={tabBadgeCounts}
         tabs={marketplaceSubTabs}
       />
+
+      <OwnAccountOnly addressToMatch={address}>
+        <div className="flex justify-end mb-2">
+          <CreateBlueprintButton />
+        </div>
+      </OwnAccountOnly>
       {activeTab === "blueprints-claimable" && (
         <BlueprintsList blueprints={availableBlueprints?.blueprints || []} />
       )}
@@ -47,22 +73,34 @@ const BlueprintTabContentInner = async ({
       )}
 
       {activeTab === "blueprints-created" && (
-        <BlueprintsList blueprints={availableBlueprints?.blueprints || []} />
+        <BlueprintsTable
+          blueprints={blueprintsCreated?.blueprints || []}
+          count={blueprintsCreated?.count}
+        />
       )}
+      <div className="mt-5">
+        <Pagination count={currentCount || 0} pageSize={BLUEPRINTS_PER_PAGE} />
+      </div>
     </section>
   );
 };
 
 const BlueprintsTabContent = ({
   address,
   activeTab,
+  searchParams,
 }: {
   address: string;
   activeTab: ProfileSubTabKey;
+  searchParams: Record<string, string>;
 }) => {
   return (
     <Suspense fallback={<ExploreListSkeleton length={9} />}>
-      <BlueprintTabContentInner address={address} activeTab={activeTab} />
+      <BlueprintTabContentInner
+        address={address}
+        activeTab={activeTab}
+        searchParams={searchParams}
+      />
     </Suspense>
   );
 };

app/profile/[address]/collections-tab-content.tsx

@@ -1,7 +1,7 @@
 import { getCollectionsByAdminAddress } from "@/collections/getCollectionsByAdminAddress";
 import { Suspense } from "react";
 import { COLLECTIONS_PER_PAGE } from "@/configs/ui";
-import CollectionPagination from "@/components/collections/collection-pagination";
+import Pagination from "@/components/pagination";
 import { HyperboardsOverview } from "@/app/profile/[address]/collections-tab-content-inner";
 
 const CollectionsTabContentInner = async ({
@@ -29,7 +29,7 @@ const CollectionsTabContentInner = async ({
       <HyperboardsOverview profileAddress={address} hyperboards={hyperboards} />
 
       <div className="mt-5">
-        <CollectionPagination collectionsCount={count || 0} />
+        <Pagination count={count || 0} />
       </div>
     </div>
   );

app/profile/[address]/page.tsx

@@ -52,6 +52,7 @@ export default function ProfilePage({
           <BlueprintsTabContent
             address={address}
             activeTab={tab as ProfileSubTabKey}
+            searchParams={searchParams}
           />
         )}
       </section>

app/profile/[address]/tabs.tsx

@@ -9,9 +9,9 @@ export const subTabs = [
   { key: "marketplace-listings", triggerLabel: "Listings" },
   { key: "marketplace-bought", triggerLabel: "Bought" },
   { key: "marketplace-sold", triggerLabel: "Sold" },
-  { key: "blueprints-claimable", triggerLabel: "Claimable" },
-  { key: "blueprints-claimed", triggerLabel: "Claimed" },
-  { key: "blueprints-created", triggerLabel: "Created" },
+  { key: "blueprints-claimable", triggerLabel: "To be minted" },
+  { key: "blueprints-claimed", triggerLabel: "Minted" },
+  { key: "blueprints-created", triggerLabel: "Sent" },
 ] as const;
 
 export type ProfileSubTabKey =

blueprints/getBlueprints.ts

@@ -10,20 +10,8 @@ import { HypercertFormValues } from "@/components/hypercert/hypercert-minting-fo
 
 const query = graphql(
   `
-    query Blueprint(
-      $minter_address: String
-      $minted: Boolean
-      $first: Int
-      $offset: Int
-    ) {
-      blueprints(
-        where: {
-          minter_address: { eq: $minter_address }
-          minted: { eq: $minted }
-        }
-        first: $first
-        offset: $offset
-      ) {
+    query Blueprint($where: BlueprintWhereInput, $first: Int, $offset: Int) {
+      blueprints(where: $where, first: $first, offset: $offset) {
         count
         data {
           ...BlueprintFragment
@@ -34,23 +22,43 @@ const query = graphql(
   [BlueprintFragment],
 );
 
+const buildFilters = (filters: {
+  minterAddress?: string;
+  adminAddress?: string;
+  minted?: boolean;
+}) => {
+  const where: Record<string, unknown> = {};
+  if (filters.minterAddress) {
+    where["minter_address"] = { eq: filters.minterAddress };
+  }
+  if (filters.adminAddress) {
+    where["admin_address"] = { eq: filters.adminAddress };
+  }
+  if (filters.minted !== undefined) {
+    where["minted"] = { eq: filters.minted };
+  }
+  if (Object.keys(where).length === 0) {
+    return undefined;
+  }
+  return where;
+};
+
 export async function getBlueprints({
   filters,
   first = COLLECTIONS_PER_PAGE,
   offset = 0,
 }: {
   filters: {
     minterAddress?: string;
+    adminAddress?: string;
     minted?: boolean;
     ids?: number[];
   };
   first?: number;
   offset?: number;
 }) {
   const res = await request(HYPERCERTS_API_URL_GRAPH, query, {
-    minter_address: filters.minterAddress,
-    minted: filters.minted,
-    ids: filters.ids,
+    where: buildFilters(filters) as any,
     first,
     offset,
   });

blueprints/hooks/createBlueprint.ts

@@ -77,7 +77,7 @@ export const useCreateBlueprint = () => {
         return null;
       }
 
-      await setStep("Updating blueprint");
+      await setStep("Creating blueprint");
 
       try {
         const { acceptTerms, confirmContributorsPermission, ...form_values } =
@@ -97,19 +97,22 @@ export const useCreateBlueprint = () => {
           },
         }).then((res) => {
           if (!res.ok) {
-            throw new Error("Error updating blueprint");
+            throw new Error("Error creating blueprint");
           }
         });
         await setStep("Updating blueprint", "completed");
-        await revalidatePathServerAction("/blueprints");
+        await revalidatePathServerAction([
+          "/blueprints",
+          `/profile/${address}`,
+        ]);
         setTimeout(() => {
           setOpen(false);
         }, 2000);
       } catch (error) {
         await setStep(
-          "Updating blueprint",
+          "Creating blueprint",
           "error",
-          error instanceof Error ? error.message : "Error updating blueprint",
+          error instanceof Error ? error.message : "Error creating blueprint",
         );
       }
     },

components/blueprints/blueprints-list.tsx

@@ -5,12 +5,16 @@ import { HypercertFormValues } from "@/components/hypercert/hypercert-minting-fo
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { getUnixTime } from "date-fns";
+import { EmptySection } from "@/app/profile/[address]/sections";
 
 export const BlueprintsList = ({
   blueprints,
 }: {
   blueprints: readonly BlueprintFragment[];
 }) => {
+  if (!blueprints.length) {
+    return <EmptySection />;
+  }
   return (
     <div className="grid grid-cols-[repeat(auto-fit,_minmax(270px,_1fr))] gap-4">
       {blueprints.map((blueprint, i) => (