Skip to content

Fix/profile page rendering #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions app/hypercerts/[hypercertId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Metadata, ResolvingMetadata } from "next";
import { Fragment, Suspense } from "react";

import { CurrencyButtons } from "@/components/currency-buttons";
Expand All @@ -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,
}: {
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -64,6 +48,7 @@ const BlueprintTabContentInner = async ({
<CreateBlueprintButton />
</div>
</OwnAccountOnly>

{activeTab === "blueprints-claimable" && (
<BlueprintsList blueprints={availableBlueprints?.blueprints || []} />
)}
Expand All @@ -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 };
}
51 changes: 51 additions & 0 deletions app/profile/[address]/blueprint-tab-content.server.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
53 changes: 0 additions & 53 deletions app/profile/[address]/collections-tab-content-inner.tsx

This file was deleted.

54 changes: 54 additions & 0 deletions app/profile/[address]/collections-tab-content.client.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
37 changes: 37 additions & 0 deletions app/profile/[address]/collections-tab-content.server.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading