Skip to content

Commit 7a4192c

Browse files
mpsalungggmpsalunggg
authored
Merge pull request #94 from hammercode-dev/feat/wiring-get-list-event-admin
[FEAT] - wiring get list event admin
2 parents a3e8b14 + 2ceaa1a commit 7a4192c

File tree

21 files changed

+474
-331
lines changed

21 files changed

+474
-331
lines changed

‎src/app/[locale]/(public)/(user)/my-events/page.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
11
import { UserEventPage } from "@/features/events/pages";
22

3-
interface MyEventsPageProps {
4-
searchParams: Promise<{
5-
page?: string;
6-
limit?: string;
7-
}>;
8-
}
9-
10-
export default async function MyEventsPage({ searchParams }: MyEventsPageProps) {
11-
const { page, limit } = await searchParams;
12-
13-
return <UserEventPage page={Number(page) || 1} perPage={Number(limit) || 5} />;
3+
export default async function MyEventsPage() {
4+
return <UserEventPage />;
145
}

‎src/components/common/PaginationCustom/index.tsx‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎src/components/common/TableData/TableData.tsx‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
"use client";
22

3-
import { useState, useMemo } from "react";
3+
import { useState, useEffect } from "react";
44
import { useReactTable, getCoreRowModel, flexRender, ColumnDef } from "@tanstack/react-table";
55
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/Table";
66
import { TablePagination } from "./TablePagination";
77
import { TableToolbar } from "./TableToolbar";
8+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
9+
import { usePagination, useDebounced, useQueryParams } from "@/hooks";
810

911
interface TableDataProps<T> {
1012
data: T[];
@@ -14,6 +16,9 @@ interface TableDataProps<T> {
1416
itemsPerPage?: number;
1517
className?: string;
1618
rightAction?: React.ReactNode;
19+
currentPage?: number;
20+
totalPages?: number;
21+
onSearchChange?: (search: string) => void;
1722
}
1823

1924
function TableData<T>({
@@ -24,29 +29,28 @@ function TableData<T>({
2429
itemsPerPage = 5,
2530
className,
2631
rightAction,
32+
currentPage = 1,
33+
totalPages = 1,
34+
onSearchChange,
2735
}: TableDataProps<T>) {
28-
const [globalFilter, setGlobalFilter] = useState("");
29-
const [currentPage, setCurrentPage] = useState(1);
36+
const { getParam, setParams } = useQueryParams();
37+
const [searchValue, setSearchValue] = useState(getParam("search", ""));
38+
const debouncedSearchValue = useDebounced(searchValue, 500);
39+
const { handleItemsPerPageChange } = usePagination({ currentPage, totalPages, itemsPerPage });
3040

31-
const filteredData = useMemo(() => {
32-
if (!searchable || !globalFilter) return data;
41+
useEffect(() => {
42+
setParams({
43+
search: debouncedSearchValue || null,
44+
page: debouncedSearchValue ? 1 : currentPage,
45+
});
3346

34-
return data.filter((item: T) =>
35-
Object.values(item as Record<string, unknown>).some((value) =>
36-
value?.toString().toLowerCase().includes(globalFilter.toLowerCase())
37-
)
38-
);
39-
}, [data, globalFilter, searchable]);
40-
41-
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
42-
43-
const paginatedData = useMemo(() => {
44-
const startIndex = (currentPage - 1) * itemsPerPage;
45-
return filteredData.slice(startIndex, startIndex + itemsPerPage);
46-
}, [filteredData, currentPage, itemsPerPage]);
47+
if (onSearchChange) {
48+
onSearchChange(debouncedSearchValue);
49+
}
50+
}, [debouncedSearchValue, onSearchChange, currentPage]);
4751

4852
const table = useReactTable({
49-
data: paginatedData,
53+
data,
5054
columns,
5155
getCoreRowModel: getCoreRowModel(),
5256
manualPagination: true,
@@ -57,10 +61,9 @@ function TableData<T>({
5761
<TableToolbar
5862
searchable={searchable}
5963
searchPlaceholder={searchPlaceholder}
60-
searchValue={globalFilter}
64+
searchValue={searchValue}
6165
onSearchChange={(value) => {
62-
setGlobalFilter(value);
63-
setCurrentPage(1);
66+
setSearchValue(value);
6467
}}
6568
rightAction={rightAction}
6669
/>
@@ -100,11 +103,33 @@ function TableData<T>({
100103

101104
{totalPages > 1 && (
102105
<div className="flex items-center justify-between">
103-
<div className="text-muted-foreground text-sm">
104-
{currentPage} of {totalPages} pages
106+
<div className="flex items-center gap-4">
107+
<div className="text-muted-foreground text-sm">
108+
{currentPage} of {totalPages} pages
109+
</div>
110+
<div className="flex items-center gap-2">
111+
<span className="text-muted-foreground text-sm">Items per page:</span>
112+
<Select
113+
value={itemsPerPage.toString()}
114+
onValueChange={(value) => {
115+
const newItemsPerPage = parseInt(value, 10);
116+
handleItemsPerPageChange(newItemsPerPage);
117+
}}
118+
>
119+
<SelectTrigger className="w-16">
120+
<SelectValue />
121+
</SelectTrigger>
122+
<SelectContent>
123+
<SelectItem value="1">1</SelectItem>
124+
<SelectItem value="2">2</SelectItem>
125+
<SelectItem value="5">5</SelectItem>
126+
<SelectItem value="10">10</SelectItem>
127+
</SelectContent>
128+
</Select>
129+
</div>
105130
</div>
106131

107-
<TablePagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
132+
<TablePagination currentPage={currentPage} totalPages={totalPages} itemsPerPage={itemsPerPage} />
108133
</div>
109134
)}
110135
</div>

‎src/components/common/TableData/TablePagination.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,25 @@ import {
1111
} from "@/components/ui/Pagination";
1212
import { buttonVariants } from "@/components/ui/Button";
1313
import { cn } from "@/lib/utils";
14-
import { usePagination } from "@/components/hooks/UsePagination";
14+
import { usePagination } from "@/hooks";
1515

1616
interface TablePaginationProps {
17-
currentPage: number;
18-
totalPages: number;
19-
onPageChange: (page: number) => void;
17+
itemsPerPage: number;
18+
currentPage?: number;
19+
totalPages?: number;
2020
className?: string;
2121
}
2222

2323
export const TablePagination: React.FC<TablePaginationProps> = ({
24-
currentPage,
25-
totalPages,
26-
onPageChange,
24+
itemsPerPage,
25+
currentPage = 1,
26+
totalPages = 1,
2727
className,
2828
}) => {
29-
const { hasNextPage, hasPrevPage, nextPage, prevPage, pages } = usePagination({
29+
const { hasNextPage, hasPrevPage, nextPage, prevPage, pages, handlePageChange } = usePagination({
3030
currentPage,
3131
totalPages,
32+
itemsPerPage,
3233
});
3334

3435
if (totalPages <= 1) {
@@ -41,7 +42,7 @@ export const TablePagination: React.FC<TablePaginationProps> = ({
4142
<PaginationContent>
4243
<PaginationItem>
4344
<PaginationPrevious
44-
onClick={() => hasPrevPage && onPageChange(prevPage!)}
45+
onClick={() => hasPrevPage && handlePageChange(prevPage!)}
4546
className={cn(
4647
"bg-secondary text-secondary-foreground cursor-pointer",
4748
!hasPrevPage && "cursor-not-allowed opacity-50"
@@ -53,7 +54,7 @@ export const TablePagination: React.FC<TablePaginationProps> = ({
5354
{pages.map((page, index) => {
5455
if (page === "ellipsis") {
5556
return (
56-
<PaginationItem key={index}>
57+
<PaginationItem key={`ellipsis-${index}`}>
5758
<PaginationEllipsis />
5859
</PaginationItem>
5960
);
@@ -62,9 +63,9 @@ export const TablePagination: React.FC<TablePaginationProps> = ({
6263
const isActive = page === currentPage;
6364

6465
return (
65-
<PaginationItem key={page}>
66+
<PaginationItem key={`page-${page}`}>
6667
<PaginationLink
67-
onClick={() => onPageChange(page as number)}
68+
onClick={() => handlePageChange(page as number)}
6869
isActive={isActive}
6970
className={cn("cursor-pointer", {
7071
[buttonVariants({
@@ -82,7 +83,7 @@ export const TablePagination: React.FC<TablePaginationProps> = ({
8283

8384
<PaginationItem>
8485
<PaginationNext
85-
onClick={() => hasNextPage && onPageChange(nextPage!)}
86+
onClick={() => hasNextPage && handlePageChange(nextPage!)}
8687
className={cn(
8788
"bg-secondary text-secondary-foreground cursor-pointer",
8889
!hasNextPage && "cursor-not-allowed opacity-50"

‎src/components/hooks/UsePagination/index.tsx‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/ui/Sidebar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot";
55
import { cva, VariantProps } from "class-variance-authority";
66
import { PanelLeftIcon } from "lucide-react";
77

8-
import { useIsMobile } from "@/hooks/use-mobile";
8+
import { useIsMobile } from "@/hooks/useIsMobile";
99
import { cn } from "@/lib/utils";
1010
import { Button } from "@/components/ui/Button";
1111
import { Input } from "@/components/ui/Input";

‎src/features/blog/components/BlogList.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import BlogCard from "./BlogCard";
33
import { BlogPost } from "@/lib/mdx";
4-
import { PaginationCustom } from "@/components/common/PaginationCustom";
4+
// import { PaginationCustom } from "@/components/common/PaginationCustom";
55
import { Skeleton } from "@/components/ui/Skeleton";
66

77
interface BlogListProps {
@@ -10,7 +10,7 @@ interface BlogListProps {
1010
totalPages: number;
1111
}
1212

13-
const BlogList = ({ blogs, currentPage, totalPages }: BlogListProps) => {
13+
const BlogList = ({ blogs }: BlogListProps) => {
1414
return (
1515
<React.Suspense
1616
fallback={
@@ -26,7 +26,7 @@ const BlogList = ({ blogs, currentPage, totalPages }: BlogListProps) => {
2626
))}
2727
</div>
2828

29-
<PaginationCustom currentPage={currentPage} totalPages={totalPages} />
29+
{/* <PaginationCustom currentPage={currentPage} totalPages={totalPages} /> */}
3030
</React.Suspense>
3131
);
3232
};

0 commit comments

Comments
 (0)