Fix/profile page rendering

app/hypercerts/[hypercertId]/page.tsx

@@ -1,4 +1,3 @@
-import { Metadata, ResolvingMetadata } from "next";
 import { Fragment, Suspense } from "react";
 
 import { CurrencyButtons } from "@/components/currency-buttons";
@@ -20,34 +19,6 @@ import { getOrders } from "@/marketplace/getOpenOrders";
 import Image from "next/image";
 import MutationButtons from "@/components/hypercert/mutation-buttons";
 
-type Props = {
-  params: { hypercertId: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-};
-
-export async function generateMetadata(
-  { params }: Props,
-  parent: ResolvingMetadata,
-): Promise<Metadata> {
-  const { hypercertId } = params;
-
-  const hypercert = await getHypercert(hypercertId);
-
-  // optionally access and extend (rather than replace) parent metadata
-  const previousImages = (await parent).openGraph?.images || [];
-  return {
-    title: hypercert?.metadata?.name || "Untitled Hypercert",
-    description: hypercert?.metadata?.description || "",
-    openGraph: {
-      images: [
-        `/api/hypercerts/${hypercertId}/image`,
-        "/hypercerts-opengraph.jpg",
-        ...previousImages,
-      ],
-    },
-  };
-}
-
 async function HypercertPageInner({
   params,
 }: {

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

@@ -1,55 +1,39 @@
-import React, { Suspense } from "react";
+"use client";
+
 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";
+import { BLUEPRINTS_PER_PAGE } from "@/configs/ui";
 
-const BlueprintTabContentInner = async ({
+export default function BlueprintsTabContentInner({
   address,
   activeTab,
   searchParams,
+  availableBlueprints,
+  mintedBlueprints,
+  blueprintsCreated,
 }: {
   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),
-  });
-
+  availableBlueprints: any;
+  mintedBlueprints: any;
+  blueprintsCreated: any;
+}) {
   const marketplaceSubTabs = subTabs.filter(
     (tab) => tab.key.split("-")[0] === "blueprints",
   );
 
-  const tabBadgeCounts: Partial<
-    Record<(typeof subTabs)[number]["key"], number>
-  > = {
+  const tabBadgeCounts = {
     "blueprints-claimable": availableBlueprints?.count ?? 0,
     "blueprints-claimed": mintedBlueprints?.count ?? 0,
     "blueprints-created": blueprintsCreated?.count ?? 0,
   };
-  const currentCount =
-    tabBadgeCounts[activeTab as (typeof subTabs)[number]["key"]];
+
   return (
     <section>
       <SubTabsWithCount
@@ -64,6 +48,7 @@ const BlueprintTabContentInner = async ({
           <CreateBlueprintButton />
         </div>
       </OwnAccountOnly>
+
       {activeTab === "blueprints-claimable" && (
         <BlueprintsList blueprints={availableBlueprints?.blueprints || []} />
       )}
@@ -78,35 +63,19 @@ const BlueprintTabContentInner = async ({
           count={blueprintsCreated?.count}
         />
       )}
-      {currentCount !== 0 && (
+
+      {(availableBlueprints?.count ||
+        mintedBlueprints?.count ||
+        blueprintsCreated?.count) && (
         <div className="mt-5">
           <Pagination
-            count={currentCount || 0}
+            count={
+              tabBadgeCounts[activeTab as keyof typeof tabBadgeCounts] || 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}
-        searchParams={searchParams}
-      />
-    </Suspense>
-  );
-};
-export { BlueprintsTabContent };
+}

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

@@ -0,0 +1,51 @@
+import { Suspense } from "react";
+import { ProfileSubTabKey } from "@/app/profile/[address]/tabs";
+import BlueprintsTabContentInner from "./blueprint-tab-content.client";
+import { getBlueprints } from "@/blueprints/getBlueprints";
+import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
+import { BLUEPRINTS_PER_PAGE } from "@/configs/ui";
+
+export default async function BlueprintsTabContent({
+  address,
+  activeTab,
+  searchParams,
+}: {
+  address: string;
+  activeTab: ProfileSubTabKey;
+  searchParams: Record<string, string>;
+}) {
+  const currentPage = Number(searchParams?.p) || 1;
+
+  // Fetch data server-side
+  const [availableBlueprints, mintedBlueprints, blueprintsCreated] =
+    await Promise.all([
+      getBlueprints({
+        filters: { minterAddress: address as `0x${string}`, minted: false },
+        first: BLUEPRINTS_PER_PAGE,
+        offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+      }),
+      getBlueprints({
+        filters: { minterAddress: address as `0x${string}`, minted: true },
+        first: BLUEPRINTS_PER_PAGE,
+        offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+      }),
+      getBlueprints({
+        filters: { adminAddress: address as `0x${string}` },
+        first: BLUEPRINTS_PER_PAGE,
+        offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+      }),
+    ]);
+
+  return (
+    <Suspense fallback={<ExploreListSkeleton length={9} />}>
+      <BlueprintsTabContentInner
+        address={address}
+        activeTab={activeTab}
+        searchParams={searchParams}
+        availableBlueprints={availableBlueprints}
+        mintedBlueprints={mintedBlueprints}
+        blueprintsCreated={blueprintsCreated}
+      />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import Pagination from "@/components/pagination";
+import { HyperboardRow } from "@/components/hyperboard/hyperboard-row";
+import { CreateCollectionButton } from "@/components/collections/buttons";
+import { EmptySection } from "@/app/profile/[address]/sections";
+import { HyperboardFragment } from "@/collections/hyperboard.fragment";
+import { useAccount } from "wagmi";
+
+export default function CollectionsTabContent({
+  address,
+  hyperboards,
+  count,
+}: {
+  address: string;
+  hyperboards: readonly HyperboardFragment[];
+  count: number;
+}) {
+  const { address: loggedInAddress } = useAccount();
+  const isOwnProfile = loggedInAddress === address;
+
+  return (
+    <div>
+      {isOwnProfile && (
+        <div className="flex justify-end mb-2">
+          <CreateCollectionButton />
+        </div>
+      )}
+      {hyperboards.length === 0 ? (
+        <EmptySection />
+      ) : (
+        <div className="flex flex-col gap-4">
+          {hyperboards.map((hyperboard) => (
+            <HyperboardRow
+              key={hyperboard.id}
+              hyperboardId={hyperboard.id}
+              name={hyperboard.name || ""}
+              description={
+                hyperboard.sections?.data?.[0]?.collection.description || ""
+              }
+              showEditAndDeleteButtons={isOwnProfile}
+            />
+          ))}
+        </div>
+      )}
+
+      {count > 0 && (
+        <div className="mt-5">
+          <Pagination count={count} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { Suspense } from "react";
+import { getCollectionsByAdminAddress } from "@/collections/getCollectionsByAdminAddress";
+import { COLLECTIONS_PER_PAGE } from "@/configs/ui";
+import CollectionsTabContent from "./collections-tab-content.client";
+import CollectionsTabSkeleton from "@/components/profile/collections-tab-skeleton";
+
+export default async function CollectionsTabContentServer({
+  address,
+  searchParams,
+}: {
+  address: string;
+  searchParams: Record<string, string>;
+}) {
+  const currentPage = Number(searchParams?.p) || 1;
+
+  // Fetch data server-side
+  const result = await getCollectionsByAdminAddress({
+    adminAddress: address,
+    first: COLLECTIONS_PER_PAGE,
+    offset: COLLECTIONS_PER_PAGE * (currentPage - 1),
+  });
+
+  if (!result) return null;
+
+  const { hyperboards, count } = result;
+
+  // Render client component with fetched data
+  return (
+    <Suspense fallback={<CollectionsTabSkeleton length={3} />}>
+      <CollectionsTabContent
+        address={address}
+        hyperboards={hyperboards}
+        count={count ?? 0}
+      />
+    </Suspense>
+  );
+}