Skip to content
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.

Sign up for GitHub

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

feat: [SC-26202] ✨ Build Name Details Page draft and most important … #570

Merged
merged 20 commits into from
Feb 2, 2025
+3,612 −399
Merged

feat: [SC-26202] ✨ Build Name Details Page draft and most important … #570

Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d6ef199
feat: [SC-26202] ✨ Build Name Details Page draft and most important …
FrancoAguzzi Jan 23, 2025
ff86c37
feat: [SC-26202] ✨ Make name details page beautiful
FrancoAguzzi Jan 24, 2025
18b0aa0
feat: [SC-26202] ✨ Other name ideas in Name Details page
FrancoAguzzi Jan 26, 2025
172f827
feat: [SC-26202] 🐛 Fix build errors
FrancoAguzzi Jan 26, 2025
3bd8b81
feat: [SC-26202] 💄 Improve visualization in Name Details page
FrancoAguzzi Jan 26, 2025
b3ba5eb
Merge branch 'main' into francoaguzzi/sc-26202/name-details-page
lightwalker-eth Jan 26, 2025
665a9c3
feat: [SC-26202] ✨ Add Skeletons to Name Details page
FrancoAguzzi Jan 27, 2025
2733a27
feat: [SC-26202] ✨ Add possibility of not loading related collection …
FrancoAguzzi Jan 27, 2025
090c389
Merge remote-tracking branch 'origin/main' into francoaguzzi/sc-26202…
FrancoAguzzi Jan 27, 2025
e24f8b8
feat: [SC-26202] 🐛 Fix Ui bug in Collection page
FrancoAguzzi Jan 29, 2025
cff48e7
fix: [SC-26202] :bug: Align Ui type usage with API type
FrancoAguzzi Jan 29, 2025
c57d404
feat: [SC-26202] ✨ Normalizing query name input
FrancoAguzzi Jan 29, 2025
d06a591
feat: [SC-26202] ✨ Appending TLD usage from namegraph.dev in the URL
FrancoAguzzi Jan 30, 2025
bf2d729
Merge branch 'main' into francoaguzzi/sc-26202/name-details-page
FrancoAguzzi Jan 30, 2025
889d65a
[SC-26223] ✨ Migrate NFTAvatar (#583)
FrancoAguzzi Jan 30, 2025
8c5cdac
feat: [SC-26202] ✨ Align namegraph.dev "search" URL query param to De…
FrancoAguzzi Jan 30, 2025
b9248d8
Merge branch 'francoaguzzi/sc-26202/name-details-page' of https://git…
FrancoAguzzi Jan 30, 2025
d64edc3
Merge remote-tracking branch 'origin/main' into francoaguzzi/sc-26202…
FrancoAguzzi Feb 1, 2025
56314de
feat: [SC-26202] ⚙️ Adjust query params provider in namegraph.dev
FrancoAguzzi Feb 2, 2025
d752018
feat: [SC-26202] ⚙️ Enhance namegraph.dev URLs and code reusing
FrancoAguzzi Feb 2, 2025
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
5 changes: 5 additions & 0 deletions .changeset/smooth-yaks-protect.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@namehash/namegraph-sdk": minor
---

Add possibility of not querying any related collections when using suggestionsByCategory endpoint
102 changes: 64 additions & 38 deletions apps/namegraph.dev/app/collections/[id]/explore-collection-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import {
fetchCollectionMembers,
findCollectionsByCollection,
getCollectionById,
getNameDetailsPageHref,
sampleNamesByCollectionId,
scrambleNamesByCollectionId,
} from "@/lib/utils";
@@ -16,7 +17,6 @@ import {
} from "@namehash/namegraph-sdk/utils";
import { useEffect, useState } from "react";
import { Noto_Emoji } from "next/font/google";
import { useQueryParams } from "@/components/use-query-params";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight, Loader } from "lucide-react";
import Skeleton from "@/components/skeleton";
@@ -29,6 +29,9 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Link } from "@namehash/namekit-react";
import { NameWithCurrentTld } from "@/components/collections/name-with-current-tld";
import { useQueryParams } from "@/components/use-query-params";

const notoBlack = Noto_Emoji({ preload: false });

@@ -107,13 +110,14 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
}, [id]);

const loadCollectionMembers = () => {
if (!!collectionMembers?.[params.page]) {
if (!!collectionMembers?.[params.collectionDetails.page]) {
return;
}

setLoadingCollectionMembers(true);
fetchCollectionMembers(id, {
offset: (params.page - 1) * navigationConfig.itemsPerPage,
offset:
(params.collectionDetails.page - 1) * navigationConfig.itemsPerPage,
limit: navigationConfig.itemsPerPage,
})
.then((res) => {
@@ -122,21 +126,21 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {

setCollectionMembers({
...collectionMembers,
[params.page]: {
[params.collectionDetails.page]: {
suggestions,
},
});
} else {
setCollectionMembers({
...collectionMembers,
[params.page]: null,
[params.collectionDetails.page]: null,
});
}
})
.catch(() => {
setCollectionMembers({
...collectionMembers,
[params.page]: null,
[params.collectionDetails.page]: null,
});
})
.finally(() => setLoadingCollectionMembers(false));
@@ -220,17 +224,16 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
/**
* Table query
*/
const DEFAULT_PAGE_NUMBER = 1;
const DEFAULT_COLLECTIONS_PARAMS: Record<string, any> = {
page: DEFAULT_PAGE_NUMBER,
};
type DefaultDomainFiltersType = typeof DEFAULT_COLLECTIONS_PARAMS;
const { params, setParams } = useQueryParams<DefaultDomainFiltersType>(
DEFAULT_COLLECTIONS_PARAMS,
);
const { params, setParams } = useQueryParams();

const handlePageChange = (page: number) => {
setParams({ page });
setParams({
...params,
collectionDetails: {
...params.collectionDetails,
page,
},
});
};

/**
@@ -242,29 +245,29 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
totalItems: undefined,
});
const isFirstCollectionsPageForCurrentQuery = () => {
return Number(params.page) === 1;
return Number(params.collectionDetails.page) === 1;
};
const isLastCollectionsPageForCurrentQuery = () => {
if (navigationConfig.totalItems) {
return (
Number(params.page) * navigationConfig.itemsPerPage >=
Number(params.collectionDetails.page) * navigationConfig.itemsPerPage >=
navigationConfig.totalItems
);
} else return false;
};

const getNavigationPageTextGuide = () => {
return navigationConfig.totalItems
? `${(Number(params.page) - 1) * navigationConfig.itemsPerPage + 1}-${Math.min(
Number(params.page) * navigationConfig.itemsPerPage,
? `${(Number(params.collectionDetails.page) - 1) * navigationConfig.itemsPerPage + 1}-${Math.min(
Number(params.collectionDetails.page) * navigationConfig.itemsPerPage,
navigationConfig.totalItems,
)} of ${navigationConfig.totalItems} name suggestions`
: "No name suggestions found";
};

useEffect(() => {
loadCollectionMembers();
}, [params.page]);
}, [params.collectionDetails.page]);

useEffect(() => {
setNavigationConfig({
@@ -314,7 +317,7 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
<div className="w-full">
<div className="w-full mb-8">
<div className="w-full flex flex-col space-y-4 p-3 rounded-xl border border-gray-200">
<div className="w-full h-[877px] flex flex-col justify-start">
<div className="w-full h-[1023px] flex flex-col justify-start">
<div className="h-full">
{/* Collection Count and Sort */}
<div className="max-w-[756px] w-full flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 mb-5">
@@ -329,7 +332,9 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
disabled={isFirstCollectionsPageForCurrentQuery()}
onClick={() =>
handlePageChange(
Number(params.page) - 1,
Number(
params.collectionDetails.page,
) - 1,
)
}
>
@@ -340,7 +345,9 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
disabled={isLastCollectionsPageForCurrentQuery()}
onClick={() =>
handlePageChange(
Number(params.page) + 1,
Number(
params.collectionDetails.page,
) + 1,
)
}
>
@@ -358,16 +365,21 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
</div>
) : collectionMembers ? (
collectionMembers[
params.page
params.collectionDetails.page
]?.suggestions.map((suggestion) => (
<div
<Link
href={getNameDetailsPageHref(
suggestion.label,
)}
className="bg-gray-100 rounded-full group-2 px-4 py-1 flex items-start"
key={suggestion.label}
className="bg-gray-100 rounded-full groupp-2 px-4 flex items-start"
>
<div className="max-h-[20px] relative flex items-center justify-center overflow-hidden">
{suggestion.label}
<NameWithCurrentTld
name={suggestion.label}
/>
</div>
</div>
</Link>
))
) : null}
</div>
@@ -385,7 +397,9 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
disabled={isFirstCollectionsPageForCurrentQuery()}
onClick={() =>
handlePageChange(
Number(params.page) - 1,
Number(
params.collectionDetails.page,
) - 1,
)
}
>
@@ -397,7 +411,9 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
disabled={isLastCollectionsPageForCurrentQuery()}
onClick={() =>
handlePageChange(
Number(params.page) + 1,
Number(
params.collectionDetails.page,
) + 1,
)
}
>
@@ -436,14 +452,19 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
<div className="flex flex-wrap gap-3 pl-3">
{sampledNameIdeas?.map((suggestion) => {
return (
<div
<Link
href={getNameDetailsPageHref(
suggestion.label,
)}
key={suggestion.label}
className="bg-gray-100 rounded-full groupp-2 px-4 flex items-start"
className="bg-gray-100 rounded-full group-2 px-4 flex items-start"
>
<div className="relative flex items-center justify-center overflow-hidden">
{suggestion.label}
<NameWithCurrentTld
name={suggestion.label}
/>
</div>
</div>
</Link>
);
})}
</div>
@@ -504,14 +525,19 @@ export const ExploreCollectionPage = ({ id }: { id: string }) => {
<div className="flex flex-wrap gap-3 pl-3">
{scrambledNameIdeas?.map((suggestion) => {
return (
<div
<Link
href={getNameDetailsPageHref(
suggestion.label,
)}
key={suggestion.label}
className="bg-gray-100 rounded-full groupp-2 px-4 flex items-start"
className="bg-gray-100 rounded-full group-2 px-4 flex items-start"
>
<div className="relative flex items-center justify-center overflow-hidden">
{suggestion.label}
<NameWithCurrentTld
name={suggestion.label}
/>
</div>
</div>
</Link>
);
})}
</div>
Loading