Pagination added

Author: JKSANJAY27

src/api/fetchTeams.ts

@@ -1,16 +1,16 @@
-import { type Team } from "@/data/schema"
-import {type TeamsResponse} from "@/data/schema"
+import { type Team, type TeamsResponse } from "@/data/schema";
+import { TeamsResponseSchema } from "@/data/schema";
 import axios from "./axiosConfig";
 
-
-export const fetchTeams = async()=>{
-    try{
-        const response = await axios.get<TeamsResponse>('admin/teams?limit=10')
-        console.log(response.data.data.teams)
-        return response.data.data.teams;
-    }catch(err){
-        throw err;
-    }
-}
-
-
+export const fetchTeams = async ({ page, limit }: { page: number; limit: number }) => {
+  try {
+    const response = await axios.get<TeamsResponse>(
+      `admin/teams?page=${page}&limit=${limit}`
+    );
+     const parsedResponse = TeamsResponseSchema.parse(response.data);
+    return  { teams: parsedResponse.data.teams };
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/api/fetchUsers.ts

@@ -1,17 +1,23 @@
-import { type User } from "@/data/schema"
-import {type UserResponse} from "@/data/schema"
+import { type UserResponse } from "@/data/schema";
+import { usersResponseSchema } from "@/data/schema";
 import axios from "./axiosConfig";
 
+export const fetchUsers = async ({
+  page,
+  limit,
+}: {
+  page: number;
+  limit: number;
+}) => {
+  try {
+    const response = await axios.get<UserResponse>(
+      `admin/users?page=${page}&limit=${limit}`
+    );
 
-export const fetchUsers = async()=>{
-    try{
-        const response = await axios.get<UserResponse>('admin/users?limit=10')
-        console.log(response.data)
-        return response.data.data.users;
-    }catch(err){
-        console.log(err)
-        throw err;
-    }
-}
-
-
+    const parsedResponse = usersResponseSchema.parse(response.data);
+    return {users: parsedResponse.data.users, totalPages: 100};
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/app/teams/page.tsx

@@ -9,15 +9,19 @@ import tooms from "@/components/dumTeams.json";
 import { useQuery } from "@tanstack/react-query";
 import { type Team } from "@/data/schema";
 import { fetchTeams } from "@/api/fetchTeams";
+import { useState } from "react";
 
 export default function Teams() {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+
   const {
-    data: teamList,
-    isLoading,
-    isError,
+      data: teamList,
+      isLoading,
+      isError,
   } = useQuery({
-    queryKey: ["teams"],
-    queryFn: fetchTeams,
+      queryKey: ["teams", pageIndex, pageSize],
+      queryFn: () => fetchTeams({ page: pageIndex + 1, limit: pageSize }),
   });
 
   if (isLoading) {
@@ -31,7 +35,15 @@ export default function Teams() {
       <div className="p-4">
         <div className="mb-4"></div>
         {/* <DataTableUsers users={oosers} columns={userCol} /> */}
-        <DataTable<Team, string> columns={teamCol} data={teamList ?? []} />
+        <DataTable<Team, string>
+            columns={teamCol}
+            data={teamList?.teams ?? []}
+            pageCount = {100}
+            onPageChange={setPageIndex}
+            onPageSizeChange={setPageSize}
+            currentPage = {pageIndex}
+            pageSize = {pageSize}
+        />
       </div>
     </>
   );

src/app/users/page.tsx

@@ -9,6 +9,7 @@ import oosers from "@/components/dumUser.json";
 import { useQuery } from "@tanstack/react-query";
 import { fetchUsers } from "@/api/fetchUsers";
 import { User } from "@/data/schema"
+import { useState } from "react";
 
 
 export default function Users() {
@@ -62,13 +63,12 @@ export default function Users() {
   //       return <>Skill Issue</>
   //   }
 
-  const {
-    data: userList,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ["users"],
-    queryFn: fetchUsers,
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+
+  const { data: userList, isLoading, isError } = useQuery({
+    queryKey: ["users", pageIndex, pageSize],
+    queryFn: () => fetchUsers({ page: pageIndex + 1, limit: pageSize }),
   });
 
   if (isLoading) {
@@ -82,7 +82,15 @@ export default function Users() {
     <div className="p-4">
       <div className="mb-4"></div>
       {/* <DataTableUsers users={oosers} columns={userCol} /> */}
-      <DataTable<User, string> columns={userCol} data={userList ?? []} />
+      <DataTable<User, string>
+          columns={userCol}
+          data={userList?.users ?? []}
+          pageCount = {100}
+          onPageChange={setPageIndex}
+          onPageSizeChange={setPageSize}
+          currentPage = {pageIndex}
+          pageSize = {pageSize}
+      />
 
     </div>
   );

src/components/table/data-table-pagination.tsx

@@ -17,11 +17,23 @@ import {
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void
 }
 
 export function DataTablePagination<TData>({
   table,
+  onPageChange,
+  onPageSizeChange,
 }: DataTablePaginationProps<TData>) {
+  const handlePageChange = (page: number)=>{
+    onPageChange(page);
+    table.setPageIndex(page);
+  }
+  const handlePageSizeChange = (size: number)=>{
+      onPageSizeChange(size);
+      table.setPageSize(size)
+  }
   return (
     <div className="flex items-center justify-between px-2">
       <div className="flex-1 text-sm text-muted-foreground">
@@ -33,8 +45,8 @@ export function DataTablePagination<TData>({
           <p className="text-sm font-medium">Rows per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value : string) => {
-              table.setPageSize(Number(value))
+             onValueChange={(value) => {
+               handlePageSizeChange(Number(value))
             }}
           >
             <SelectTrigger className="h-8 w-[70px]">
@@ -57,7 +69,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
+              onClick={() => handlePageChange(0)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
@@ -66,7 +78,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
+            onClick={() => handlePageChange(table.getState().pagination.pageIndex - 1)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
@@ -75,7 +87,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
+            onClick={() => handlePageChange(table.getState().pagination.pageIndex + 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
@@ -84,7 +96,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              onClick={() => handlePageChange(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
@@ -94,4 +106,4 @@ export function DataTablePagination<TData>({
       </div>
     </div>
   )
-}
+}

src/components/table/data-table.tsx

@@ -25,11 +25,21 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
+  pageCount: number | undefined;
+  onPageChange: (page:number)=>void;
+  onPageSizeChange: (size: number) => void
+  currentPage: number;
+  pageSize: number;
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
+  pageCount,
+  onPageChange,
+  onPageSizeChange,
+  currentPage,
+  pageSize
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({});
   const [columnVisibility, setColumnVisibility] =
@@ -39,6 +49,14 @@ export function DataTable<TData, TValue>({
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
+  const pagination = React.useMemo(
+    () => ({
+      pageIndex: currentPage,
+      pageSize,
+    }),
+    [currentPage, pageSize]
+  )
+
   const table = useReactTable({
     data,
     columns,
@@ -47,6 +65,7 @@ export function DataTable<TData, TValue>({
       columnVisibility,
       rowSelection,
       columnFilters,
+      pagination
     },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
@@ -59,8 +78,15 @@ export function DataTable<TData, TValue>({
     getSortedRowModel: getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
+    manualPagination:true,
+    pageCount: pageCount,
   });
 
+  React.useEffect(() => {
+    table.setPageIndex(currentPage);
+    table.setPageSize(pageSize);
+  }, [currentPage, pageSize, table]);
+
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />
@@ -114,7 +140,7 @@ export function DataTable<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <DataTablePagination table={table} />
+      <DataTablePagination table={table} onPageChange={onPageChange} onPageSizeChange = {onPageSizeChange}/>
     </div>
   );
 }

src/data/schema.ts

@@ -31,7 +31,7 @@ const userSchema = z.object({
 });
 
 // Response schema
-const usersResponseSchema = z.object({
+export const usersResponseSchema = z.object({
   status: z.string(),
   message: z.string(),
   data: z.object({
@@ -53,7 +53,7 @@ export const teamSchema = z.object({
   IsBanned: z.boolean(),
 });
 
-const TeamsResponseSchema = z.object({
+export const TeamsResponseSchema = z.object({
   status: z.string(),
   message: z.string().optional(),
   data: z.object({