fallback to the first opt specified in rowsPerPageOptions when limit isn't present in rowsPerPageOptions
This commit is contained in:
parent
b1b8009161
commit
6e0b9bd950
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { TFunction } from 'i18next';
|
import { validateRowsPerPage } from './helpers';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
TablePagination,
|
TablePagination,
|
||||||
|
@ -7,6 +7,7 @@ import {
|
||||||
TableFooter as MUITableFooter,
|
TableFooter as MUITableFooter,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import { TFunction } from 'i18next';
|
||||||
export interface Props {
|
export interface Props {
|
||||||
page?: number;
|
page?: number;
|
||||||
count?: number;
|
count?: number;
|
||||||
|
@ -51,7 +52,7 @@ function TableFooter({
|
||||||
page={page}
|
page={page}
|
||||||
onChangePage={handlePageChange}
|
onChangePage={handlePageChange}
|
||||||
onChangeRowsPerPage={handleRowsPerPageChange}
|
onChangeRowsPerPage={handleRowsPerPageChange}
|
||||||
rowsPerPage={rowsPerPage}
|
rowsPerPage={validateRowsPerPage(rowsPerPage, rowsPerPageOptions)}
|
||||||
rowsPerPageOptions={rowsPerPageOptions}
|
rowsPerPageOptions={rowsPerPageOptions}
|
||||||
size={size}
|
size={size}
|
||||||
colSpan={100}
|
colSpan={100}
|
||||||
|
|
17
src/common/Table/helpers.ts
Normal file
17
src/common/Table/helpers.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
export const validateRowsPerPage = (
|
||||||
|
rowsPerPage: number,
|
||||||
|
rowsPerPageOptions: Array<number | { value: number; label: string }> = [
|
||||||
|
25,
|
||||||
|
50,
|
||||||
|
100,
|
||||||
|
]
|
||||||
|
) => {
|
||||||
|
const rpp =
|
||||||
|
rowsPerPageOptions.find(opt =>
|
||||||
|
typeof opt === 'number' ? rowsPerPage === opt : opt.value === rowsPerPage
|
||||||
|
) ??
|
||||||
|
(typeof rowsPerPageOptions[0] === 'number'
|
||||||
|
? rowsPerPageOptions[0]
|
||||||
|
: rowsPerPageOptions[0].value);
|
||||||
|
return typeof rpp === 'number' ? rpp : rpp.value;
|
||||||
|
};
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
||||||
|
import { validateRowsPerPage } from '@common/Table/helpers';
|
||||||
import { SERVER_PAGE } from '@config/routes';
|
import { SERVER_PAGE } from '@config/routes';
|
||||||
import { ENNOBLEMENTS } from './queries';
|
import { ENNOBLEMENTS } from './queries';
|
||||||
import { LIMIT } from './constants';
|
import { LIMIT } from './constants';
|
||||||
|
@ -27,14 +28,15 @@ function Ennoblements({ t, server, playerID }: Props) {
|
||||||
page: withDefault(NumberParam, 0),
|
page: withDefault(NumberParam, 0),
|
||||||
limit: withDefault(NumberParam, LIMIT),
|
limit: withDefault(NumberParam, LIMIT),
|
||||||
});
|
});
|
||||||
|
const limit = validateRowsPerPage(query.limit);
|
||||||
const { data: queryData, loading: queryLoading } = useQuery<
|
const { data: queryData, loading: queryLoading } = useQuery<
|
||||||
EnnoblementsT,
|
EnnoblementsT,
|
||||||
EnnoblementsQueryVariables
|
EnnoblementsQueryVariables
|
||||||
>(ENNOBLEMENTS, {
|
>(ENNOBLEMENTS, {
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
variables: {
|
variables: {
|
||||||
limit: query.limit,
|
limit,
|
||||||
offset: query.page * query.limit,
|
offset: query.page * limit,
|
||||||
sort: ['ennobledAt DESC'],
|
sort: ['ennobledAt DESC'],
|
||||||
filter: {
|
filter: {
|
||||||
or: {
|
or: {
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
|
||||||
import { subDays, isEqual as isEqualDate } from 'date-fns';
|
import { subDays, isEqual as isEqualDate } from 'date-fns';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
||||||
|
import { validateRowsPerPage } from '@common/Table/helpers';
|
||||||
import { SERVER_PAGE } from '@config/routes';
|
import { SERVER_PAGE } from '@config/routes';
|
||||||
import { PLAYER_HISTORY_AND_DAILY_STATS } from './queries';
|
import { PLAYER_HISTORY_AND_DAILY_STATS } from './queries';
|
||||||
import { LIMIT } from './constants';
|
import { LIMIT } from './constants';
|
||||||
|
@ -28,15 +29,16 @@ function PlayerHistory({ t, server, playerID }: Props) {
|
||||||
page: withDefault(NumberParam, 0),
|
page: withDefault(NumberParam, 0),
|
||||||
limit: withDefault(NumberParam, LIMIT),
|
limit: withDefault(NumberParam, LIMIT),
|
||||||
});
|
});
|
||||||
|
const limit = validateRowsPerPage(query.limit);
|
||||||
const { data: queryData, loading: queryLoading } = useQuery<
|
const { data: queryData, loading: queryLoading } = useQuery<
|
||||||
PlayerHistoryT,
|
PlayerHistoryT,
|
||||||
Variables
|
Variables
|
||||||
>(PLAYER_HISTORY_AND_DAILY_STATS, {
|
>(PLAYER_HISTORY_AND_DAILY_STATS, {
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
variables: {
|
variables: {
|
||||||
limit: query.limit,
|
limit,
|
||||||
playerHistoryOffset: query.page * query.limit,
|
playerHistoryOffset: query.page * limit,
|
||||||
dailyPlayerStatsOffset: query.page * query.limit + 1,
|
dailyPlayerStatsOffset: query.page * limit + 1,
|
||||||
sort: ['createDate DESC'],
|
sort: ['createDate DESC'],
|
||||||
playerHistoryFilter: {
|
playerHistoryFilter: {
|
||||||
playerID: [playerID],
|
playerID: [playerID],
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
||||||
|
import { validateRowsPerPage } from '@common/Table/helpers';
|
||||||
import { SERVER_PAGE } from '@config/routes';
|
import { SERVER_PAGE } from '@config/routes';
|
||||||
import { TRIBE_CHANGES } from './queries';
|
import { TRIBE_CHANGES } from './queries';
|
||||||
import { LIMIT } from './constants';
|
import { LIMIT } from './constants';
|
||||||
|
@ -24,14 +25,15 @@ function TribeChanges({ t, server, playerID }: Props) {
|
||||||
page: withDefault(NumberParam, 0),
|
page: withDefault(NumberParam, 0),
|
||||||
limit: withDefault(NumberParam, LIMIT),
|
limit: withDefault(NumberParam, LIMIT),
|
||||||
});
|
});
|
||||||
|
const limit = validateRowsPerPage(query.limit);
|
||||||
const { data: queryData, loading: queryLoading } = useQuery<
|
const { data: queryData, loading: queryLoading } = useQuery<
|
||||||
TribeChangesQuery,
|
TribeChangesQuery,
|
||||||
TribeChangesQueryVariables
|
TribeChangesQueryVariables
|
||||||
>(TRIBE_CHANGES, {
|
>(TRIBE_CHANGES, {
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
variables: {
|
variables: {
|
||||||
limit: query.limit,
|
limit,
|
||||||
offset: query.page * query.limit,
|
offset: query.page * limit,
|
||||||
sort: ['createdAt DESC'],
|
sort: ['createdAt DESC'],
|
||||||
filter: {
|
filter: {
|
||||||
playerID: [playerID],
|
playerID: [playerID],
|
||||||
|
|
Reference in New Issue
Block a user