Skip to content

S
sweepstake
Commit 0f842d23 by Arjun Jhukal
Options

updated the pagination

parent 4afdf020
Showing with 64 additions and 71 deletions
src/components/pages/dashboard/adminDashboard/activityLog/Activities.tsx
"use client";
import TableHeader from '@/components/molecules/TableHeader';
import CustomTable from '@/components/organism/Table';
import { User, Lock, ArrowUp, ArrowDown } from '@wandersonalwes/iconsax-react';
import React, { useMemo } from 'react';
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, ColumnDef } from '@tanstack/react-table';
import { Pagination, Box } from '@mui/material';
import { TransactionStatusProps } from '../transaction/TransactionTable';
import { StatusOptions } from '@/types/config';
import { useGetAllActivityQuery } from '@/services/notificationApi';
import { StatusOptions } from '@/types/config';
import { ActivityProps } from '@/types/notification';
import { Box, Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
import { ArrowDown, ArrowUp } from '@wandersonalwes/iconsax-react';
import React, { useMemo } from 'react';
import { TransactionStatusProps } from '../transaction/TransactionTable';
......@@ -28,7 +28,7 @@ export default function Activities() {
const [search, setSearch] = React.useState("");
const [page, setPage] = React.useState(1);
const [pageIndex, setPageIndex] = React.useState(1);
const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
const [pageSize, setPageSize] = React.useState(10);
const [activityType, setActivityType] = React.useState("");
......@@ -36,13 +36,13 @@ export default function Activities() {
// const [download, { isLoading: downloading }] = useStartDownloadMutation();
const queryArgs = useMemo(
() => ({
page,
per_page: pageSize,
pageIndex: pageIndex,
pageSize: pageSize,
search: search || "",
activity_type: activityType,
status
}),
[page, pageSize, search, status, activityType]
[pageIndex, pageSize, search, status, activityType]
);
......@@ -169,7 +169,7 @@ export default function Activities() {
/>
<CustomTable
key={`${page}-${pageSize}-${search}-${activityType}`}
key={`${pageIndex}-${pageSize}-${search}-${activityType}`}
table={table}
loading={isLoading}
/>
......@@ -190,8 +190,8 @@ export default function Activities() {
</select>
</div>
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
page={pageIndex}
onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
</div>
</div>
);
......
src/components/pages/dashboard/adminDashboard/pages/index.tsx
......@@ -16,11 +16,11 @@ export default function GeneralPageLiting() {
const dispatch = useAppDispatch();
const [search, setSearch] = useState("");
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1);
const [pageIndex, setPageIndex] = useState(1);
const [pageSize, setPageSize] = useState(10);
const { data, isLoading: loadingPages } = useGetAllPageQuery({
page,
per_page: pageSize,
pageIndex: pageIndex,
pageSize: pageSize,
search: search || ""
});
const [deletePage, { isLoading: deleting }] = useDeletePageByIdMutation();
......@@ -138,8 +138,8 @@ export default function GeneralPageLiting() {
</select>
</div>
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
page={pageIndex}
onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
</div>
</div>
</section>
......
src/components/pages/dashboard/adminDashboard/players/index.tsx
......@@ -23,12 +23,12 @@ export default function PlayerListing() {
const dispatch = useAppDispatch();
const [search, setSearch] = useState("");
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1);
const [pageIndex, setPageIndex] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [currentTab, setCurrentTab] = React.useState("");
const { data, isLoading: loadingPlayer } = useGetAllPlayerQuery({
page,
per_page: pageSize,
pageIndex: pageIndex,
pageSize: pageSize,
search: search || "",
status: currentTab || ""
});
......@@ -199,17 +199,10 @@ export default function PlayerListing() {
columns,
state: {
sorting,
pagination: {
pageIndex: page - 1,
pageSize: pageSize,
},
},
onSortingChange: setSorting,
onPaginationChange: (updater) => {
const newState = typeof updater === "function" ? updater({ pageIndex: page - 1, pageSize }) : updater;
setPage(newState.pageIndex + 1);
setPageSize(newState.pageSize);
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
......@@ -287,8 +280,8 @@ export default function PlayerListing() {
</select>
</div>
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
page={pageIndex}
onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
</div>
</div>
</section>
......
src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx
......@@ -30,7 +30,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
const dispatch = useAppDispatch();
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1);
const [pageIndex, setPageIndex] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [rowSelection, setRowSelection] = useState({});
const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
......@@ -43,7 +43,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
const queryArgs = useMemo(
() => ({
page,
pageIndex,
per_page: pageSize,
search: search || "",
game_id,
......@@ -54,7 +54,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
start_date: customRange.startDate,
end_date: customRange.endDate
}),
[page, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
[pageIndex, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
);
const { data, isLoading: loadingTransaction } = useGetAllTransactionQuery(queryArgs);
......@@ -223,7 +223,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
<>
<CustomTable
key={`${page}-${pageSize}-${search}-${game_id}-${user_id}`}
key={`${pageIndex}-${pageSize}-${search}-${game_id}-${user_id}`}
table={table} loading={loadingTransaction} />
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
......@@ -242,8 +242,8 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
</select>
</div>
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
page={pageIndex}
onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
</div>
</>
</div>
......
src/components/pages/dashboard/userDashboard/depositHistory/index.tsx
......@@ -5,7 +5,7 @@ import { useGetAllDepositQuery } from '@/services/transaction';
import { SingleDepositProps } from '@/types/transaction';
import { Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
import React, { useState } from 'react'
import { useState } from 'react';
export default function DepositHistoryPage(
{ currentFilter,
......@@ -15,13 +15,13 @@ export default function DepositHistoryPage(
currentFilter: number | null;
customRange: { startDate: string | null, endDate: string | null }
}) {
const [page, setPage] = useState(1);
const [pageIndex, setPageIndex] = useState(1);
const [pageSize, setPageSize] = useState(10);
const { data, isLoading } = useGetAllDepositQuery({
days: currentFilter,
customRange,
page,
per_page: pageSize
pageIndex,
pageSize
});
const columns: ColumnDef<SingleDepositProps>[] = [
{
......@@ -77,8 +77,8 @@ export default function DepositHistoryPage(
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
page={pageIndex}
onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
<div>
<span>Row per page:</span>
<select
......
src/components/pages/dashboard/userDashboard/withdrawlHistory/index.tsx
......@@ -13,11 +13,11 @@ export default function WithdrawnHistoryPage({ currentFilter,
currentFilter: number | null;
customRange: { startDate: string | null, endDate: string | null }
}) {
const [page, setPage] = useState(1);
const [pageIndex, setPageIndex] = useState(1);
const [pageSize, setPageSize] = useState(10);
const { data, isLoading } = useGetAllWithdrawlQuery({
page,
per_page: pageSize,
pageIndex,
pageSize,
days:currentFilter,
customRange
});
......@@ -73,8 +73,8 @@ export default function WithdrawnHistoryPage({ currentFilter,
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
{data && data?.data?.data.length > 5 ? <div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
page={pageIndex}
onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
<div>
<span>Row per page:</span>
<select
......
src/services/notificationApi.tsx
import { GlobalResponse, QueryParams } from "@/types/config";
import { ActivityResponse, NotificationResponse } from "@/types/notification";
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
import { ActivityResponse, NotificationResponse } from "@/types/notification";
import { GlobalResponse, QueryParams } from "@/types/config";
export const notificationApi = createApi({
reducerPath: "notificationApi",
......@@ -9,11 +9,11 @@ export const notificationApi = createApi({
tagTypes: ['Notification', "Activity"],
endpoints: (builder) => ({
getAllNotification: builder.query<NotificationResponse, QueryParams>({
query: ({ search, page, per_page }) => {
query: ({ search, pageIndex, pageSize }) => {
const params = new URLSearchParams();
if (search) params.append('search', search);
if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString());
if (pageIndex) params.append('page', pageIndex.toString());
if (pageSize) params.append('page_size', pageSize.toString());
const queryString = params.toString();
return {
url: `/api/admin/notifications${queryString ? `?${queryString}` : ''}`,
......@@ -37,11 +37,11 @@ export const notificationApi = createApi({
invalidatesTags: ["Notification"]
}),
getAllActivity: builder.query<ActivityResponse, { activity_type: string, status?: string } & QueryParams>({
query: ({ search, page, per_page, activity_type, status }) => {
query: ({ search, pageIndex, pageSize, activity_type, status }) => {
const params = new URLSearchParams();
if (search) params.append('search', search);
if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString());
if (pageIndex) params.append('page', pageIndex.toString());
if (pageSize) params.append('page_size', pageSize.toString());
if (activity_type) params.append('type', activity_type.toString());
if (status) params.append('status', status.toString());
const queryString = params.toString();
......
src/services/playerApi.ts
......@@ -26,11 +26,11 @@ export const playerApi = createApi({
// GET ALL Players
getAllPlayer: builder.query<PlayerListResponse, QueryParams>({
query: ({ search, page, per_page, status }) => {
query: ({ search, pageIndex, pageSize, status }) => {
const params = new URLSearchParams();
if (search) params.append("search", search);
if (page) params.append("page", page.toString());
if (per_page) params.append("page_size", per_page.toString());
if (pageIndex) params.append("page", pageIndex.toString());
if (pageSize) params.append("page_size", pageSize.toString());
if (status) params.append("status", status.toString());
const queryString = params.toString();
return {
......
src/services/transaction.ts
......@@ -18,11 +18,11 @@ export const transactionApi = createApi({
invalidatesTags: ["Deposit"]
}),
getAllDeposit: builder.query<DepositListProps, QueryParams & { days: number | null; customRange: { startDate: string | null; endDate: string | null } }>({
query: ({ search, page, per_page, days, customRange }) => {
query: ({ search, pageIndex, pageSize, days, customRange }) => {
const params = new URLSearchParams();
if (search) params.append('search', search);
if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString());
if (pageIndex) params.append('page', pageIndex.toString());
if (pageSize) params.append('page_size', pageSize.toString());
if (days) params.append('days', days.toString());
if (customRange.startDate) params.append('start_date', customRange.startDate.toString());
if (customRange.endDate) params.append('end_date', customRange.endDate.toString());
......@@ -43,11 +43,11 @@ export const transactionApi = createApi({
invalidatesTags: ["Withdrawl"]
}),
getAllWithdrawl: builder.query<DepositListProps, QueryParams & { days: number | null; customRange: { startDate: string | null; endDate: string | null } }>({
query: ({ search, page, per_page, days, customRange }) => {
query: ({ search, pageIndex, pageSize, days, customRange }) => {
const params = new URLSearchParams();
if (search) params.append('search', search);
if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString());
if (pageIndex) params.append('page', pageIndex.toString());
if (pageSize) params.append('page_size', pageSize.toString());
if (days) params.append('days', days.toString());
if (customRange.startDate) params.append('start_date', customRange.startDate.toString());
if (customRange.endDate) params.append('end_date', customRange.endDate.toString());
......@@ -61,11 +61,11 @@ export const transactionApi = createApi({
providesTags: ["Withdrawl"]
}),
getAllTransaction: builder.query<DepositListProps, QueryParams & { status?: TransactionStatusProps; user_id?: string | number; game_id?: string | number, selectedGame?: string; selectedTransactionType?: string, start_date?: string; end_date?: string; }>({
query: ({ search, page, per_page, user_id, game_id, status, selectedGame, selectedTransactionType, start_date, end_date }) => {
query: ({ search, pageIndex, pageSize, user_id, game_id, status, selectedGame, selectedTransactionType, start_date, end_date }) => {
const params = new URLSearchParams();
if (search) params.append('search', search);
if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString());
if (pageIndex) params.append('page', pageIndex.toString());
if (pageSize) params.append('page_size', pageSize.toString());
if (user_id) params.append('user', user_id.toString());
if (game_id) params.append('game', game_id.toString());
if (status) params.append('status', status.toString());
......
src/types/config.ts
......@@ -34,8 +34,8 @@ export interface GlobalResponse {
}
export interface QueryParams {
page?: number;
per_page?: number;
pageIndex?: number;
pageSize?: number;
search?: string;
status?: string;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment