Skip to content

Commit

Permalink
Added initial data with pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jikugodwill
Jikugodwill committed Nov 27, 2024
1 parent 9c504d3 commit 35e684c
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 109 deletions.
34 changes: 10 additions & 24 deletions src/common/ui/components/molecules/pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "../../utils";
import { ButtonProps, buttonVariants } from "../atoms/button";

export const Pagination = ({
className,
...props
}: React.ComponentProps<"nav">) => (
export const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
<nav
role="navigation"
aria-label="pagination"
Expand All @@ -19,25 +16,17 @@ export const Pagination = ({

Pagination.displayName = "Pagination";

export const PaginationContent = forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
<ul
ref={ref}
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
));
export const PaginationContent = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
({ className, ...props }, ref) => (
<ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
),
);

PaginationContent.displayName = "PaginationContent";

export const PaginationItem = forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("", className)} {...props} />
));
export const PaginationItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
);

PaginationItem.displayName = "PaginationItem";

Expand Down Expand Up @@ -101,10 +90,7 @@ export const PaginationNext = ({

PaginationNext.displayName = "PaginationNext";

export const PaginationEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
export const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
<span
aria-hidden
className={cn("flex h-9 w-9 items-center justify-center", className)}
Expand Down
194 changes: 154 additions & 40 deletions src/modules/project/components/ProjectDiscovery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,56 +5,95 @@ import Image from "next/image";
import { ListRegistration } from "@/common/api/indexer";
import { CHRONOLOGICAL_SORT_OPTIONS } from "@/common/constants";
import { toChronologicalOrder } from "@/common/lib";
import { ChronologicalSortOrderVariant } from "@/common/types";
import {
Filter,
Group,
GroupType,
InfiniteScroll,
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
SearchBar,
SortSelect,
} from "@/common/ui/components";
import { ListCardSkeleton } from "@/modules/lists/components/ListCardSkeleton";

import { ProjectCard } from "./ProjectCard";
import { useProjectsFilters } from "../hooks/useProjectsFilters";
// import { useProjectsFilters } from "../hooks/useProjectsFilters";
import { categories, statuses } from "../constants";
import { useProjectLookup } from "../hooks/lookup";
import { ProjectCategory, ProjectListingStatusVariant } from "../types";

export const ProjectDiscovery = ({
// TODO: Delete
setCurrentFilterCategory,
// TODO: Delete
filteredRegistrations,
// TODO: Delete
setFilteredRegistrations,
}: {
// TODO: Delete
setCurrentFilterCategory: (type: string[]) => void;
// TODO: Delete
filteredRegistrations: ListRegistration[];
// TODO: Delete
setFilteredRegistrations: (type: any) => void;
}) => {
export const ProjectDiscovery = () => {
const [index, setIndex] = useState(1);
const [search, setSearch] = useState("");
const [sort, setSort] = useState<ChronologicalSortOrderVariant>("recent");
const {
projectCategoryFilter,
setProjectCategoryFilter,
projectLookupError,
projectLookupPageNumber,
setProjectLookupPageNumber,
projectSearchTerm,
setProjectSearchTerm,
projectSortingOrder,
setProjectSortingOrder,
projectStatusFilter,
setProjectStatusFilter,
isProjectLookupPending: loading,
projects,
totalProjectCount,
} = useProjectLookup({ listId: 1 });

const { tagList, loading } = useProjectsFilters((type: string) =>
setCurrentFilterCategory([type]),
);
console.log(projects.map((project) => project.registrant.id));

const chronologicallySortedProjects = useMemo(() => {
return toChronologicalOrder("submitted_at", filteredRegistrations);
}, [filteredRegistrations]);
const tagList: (Group<GroupType.multiple> | Group<GroupType.single>)[] = [
{
label: "Category",
options: categories,
type: GroupType.multiple,
props: {
value: projectCategoryFilter,
onValueChange: (value: ProjectCategory[]) => {
setProjectCategoryFilter(value);
console.log({ projectCategoryFilter });
},
},
},
{
label: "Status",
options: statuses,
type: GroupType.single,
props: {
value: projectStatusFilter,
onValueChange: (value: ProjectListingStatusVariant) => {
if (value === "all") {
setProjectStatusFilter("Approved");
} else {
setProjectStatusFilter(value);
}
},
},
},
];

const handleSort = (sortType: string) => {
switch (sortType) {
case "recent":
setFilteredRegistrations(chronologicallySortedProjects.toReversed());
return projects.toReversed();
break;
case "older":
setFilteredRegistrations(chronologicallySortedProjects);
return projects;
break;
default:
break;
}
};

return (
<div className="md:px-10 md:py-12 flex w-full flex-col px-2 py-10">
<div className="flex w-full flex-col gap-5">
Expand All @@ -63,7 +102,7 @@ export const ProjectDiscovery = ({
<span
style={{ color: "#DD3345", marginLeft: "8px", fontWeight: 600 }}
>
{filteredRegistrations?.length}
{totalProjectCount}
</span>
</div>

Expand All @@ -88,20 +127,95 @@ export const ProjectDiscovery = ({
Array.from({ length: 6 }, (_, index) => (
<ListCardSkeleton key={index} />
))
) : filteredRegistrations?.length ? (
<InfiniteScroll
className="p-0.5"
items={filteredRegistrations}
index={index}
setIndex={setIndex}
size={30}
renderItem={(registration: ListRegistration) => (
<ProjectCard
projectId={registration.registrant.id}
key={registration.id}
/>
)}
/>
) : totalProjectCount ? (
<>
<div className="md:grid-cols-2 lg:grid-cols-3 mt-8 grid w-full grid-cols-1 gap-8">
{projects.map((registration: ListRegistration) => (
<ProjectCard
projectId={registration.registrant.id}
key={registration.id}
/>
))}
</div>
<Pagination className="mt-[24px]">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
onClick={() =>
setProjectLookupPageNumber((prev) => Math.max(prev - 1, 1))
}
/>
</PaginationItem>
{(() => {
const totalPages = Math.ceil(totalProjectCount / 30);
const pages: (number | "ellipsis")[] = [];

if (totalPages <= 7) {
// Show all pages if total is 7 or less
pages.push(
...Array.from({ length: totalPages }, (_, i) => i + 1),
);
} else {
// Always show first page
pages.push(1);

if (projectLookupPageNumber <= 4) {
// Near start
pages.push(2, 3, 4, 5, "ellipsis", totalPages);
} else if (projectLookupPageNumber >= totalPages - 3) {
// Near end
pages.push(
"ellipsis",
totalPages - 4,
totalPages - 3,
totalPages - 2,
totalPages - 1,
totalPages,
);
} else {
// Middle
pages.push(
"ellipsis",
projectLookupPageNumber - 1,
projectLookupPageNumber,
projectLookupPageNumber + 1,
"ellipsis",
totalPages,
);
}
}

return pages.map((page, i) => (
<PaginationItem key={i}>
{page === "ellipsis" ? (
<PaginationEllipsis />
) : (
<PaginationLink
onClick={() => setProjectLookupPageNumber(page)}
className={
projectLookupPageNumber === page
? "border-black font-bold"
: ""
}
>
{page}
</PaginationLink>
)}
</PaginationItem>
));
})()}
<PaginationItem>
<PaginationNext
onClick={() =>
setProjectLookupPageNumber((prev) =>
Math.min(prev + 1, Math.ceil(totalProjectCount / 30)),
)
}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</>
) : (
<div className="min-h-100 flex w-full flex-col items-center justify-center">
<Image
Expand Down
23 changes: 7 additions & 16 deletions src/modules/project/hooks/lookup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@ import { useMemo, useState } from "react";

import { indexer } from "@/common/api/indexer";
import { toChronologicalOrder } from "@/common/lib";
import {
ByListId,
ChronologicalSortOrder,
ChronologicalSortOrderVariant,
} from "@/common/types";
import { ByListId, ChronologicalSortOrder, ChronologicalSortOrderVariant } from "@/common/types";

import { ProjectCategory, ProjectListingStatusVariant } from "../types";

Expand All @@ -17,11 +13,11 @@ export const useProjectLookup = ({ listId }: ProjectLookupParams) => {
const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined);
const [categoryFilter, setCategoryFilter] = useState<ProjectCategory[]>([]);

const [statusFilter, setStatusFilter] =
useState<ProjectListingStatusVariant>("Approved");
const [statusFilter, setStatusFilter] = useState<ProjectListingStatusVariant>("Approved");

const [sortingOrder, setSortingOrder] =
useState<ChronologicalSortOrderVariant>(ChronologicalSortOrder.recent);
const [sortingOrder, setSortingOrder] = useState<ChronologicalSortOrderVariant>(
ChronologicalSortOrder.recent,
);

const {
data: listRegistrations,
Expand All @@ -36,14 +32,9 @@ export const useProjectLookup = ({ listId }: ProjectLookupParams) => {
});

const results = useMemo(() => {
const oldToRecent = toChronologicalOrder(
"submitted_at",
listRegistrations?.results ?? [],
);
const oldToRecent = toChronologicalOrder("submitted_at", listRegistrations?.results ?? []);

return sortingOrder === ChronologicalSortOrder.older
? oldToRecent
: oldToRecent.toReversed();
return sortingOrder === ChronologicalSortOrder.older ? oldToRecent : oldToRecent.toReversed();
}, [listRegistrations?.results, sortingOrder]);

return {
Expand Down
Loading

0 comments on commit 35e684c

Please sign in to comment.