From 6e0b9bd950dd99e353e0e03ce7c7ea930751b809 Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Tue, 15 Dec 2020 06:39:09 +0100 Subject: [PATCH] fallback to the first opt specified in rowsPerPageOptions when limit isn't present in rowsPerPageOptions --- src/common/Table/TableFooter.tsx | 5 +++-- src/common/Table/helpers.ts | 17 +++++++++++++++++ .../components/Ennoblements/Ennoblements.tsx | 6 ++++-- .../components/PlayerHistory/PlayerHistory.tsx | 8 +++++--- .../components/TribeChanges/TribeChanges.tsx | 6 ++++-- 5 files changed, 33 insertions(+), 9 deletions(-) create mode 100644 src/common/Table/helpers.ts diff --git a/src/common/Table/TableFooter.tsx b/src/common/Table/TableFooter.tsx index c3681a9..eb75196 100644 --- a/src/common/Table/TableFooter.tsx +++ b/src/common/Table/TableFooter.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { TFunction } from 'i18next'; +import { validateRowsPerPage } from './helpers'; import { TablePagination, @@ -7,6 +7,7 @@ import { TableFooter as MUITableFooter, } from '@material-ui/core'; +import { TFunction } from 'i18next'; export interface Props { page?: number; count?: number; @@ -51,7 +52,7 @@ function TableFooter({ page={page} onChangePage={handlePageChange} onChangeRowsPerPage={handleRowsPerPageChange} - rowsPerPage={rowsPerPage} + rowsPerPage={validateRowsPerPage(rowsPerPage, rowsPerPageOptions)} rowsPerPageOptions={rowsPerPageOptions} size={size} colSpan={100} diff --git a/src/common/Table/helpers.ts b/src/common/Table/helpers.ts new file mode 100644 index 0000000..620c8ed --- /dev/null +++ b/src/common/Table/helpers.ts @@ -0,0 +1,17 @@ +export const validateRowsPerPage = ( + rowsPerPage: number, + rowsPerPageOptions: Array = [ + 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; +}; diff --git a/src/features/ServerPage/features/PlayerPage/features/EnnoblementsPage/components/Ennoblements/Ennoblements.tsx b/src/features/ServerPage/features/PlayerPage/features/EnnoblementsPage/components/Ennoblements/Ennoblements.tsx index 470460d..effb135 100644 --- a/src/features/ServerPage/features/PlayerPage/features/EnnoblementsPage/components/Ennoblements/Ennoblements.tsx +++ b/src/features/ServerPage/features/PlayerPage/features/EnnoblementsPage/components/Ennoblements/Ennoblements.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useQuery } from '@apollo/client'; import { useQueryParams, NumberParam, withDefault } from 'use-query-params'; +import { validateRowsPerPage } from '@common/Table/helpers'; import { SERVER_PAGE } from '@config/routes'; import { ENNOBLEMENTS } from './queries'; import { LIMIT } from './constants'; @@ -27,14 +28,15 @@ function Ennoblements({ t, server, playerID }: Props) { page: withDefault(NumberParam, 0), limit: withDefault(NumberParam, LIMIT), }); + const limit = validateRowsPerPage(query.limit); const { data: queryData, loading: queryLoading } = useQuery< EnnoblementsT, EnnoblementsQueryVariables >(ENNOBLEMENTS, { fetchPolicy: 'cache-and-network', variables: { - limit: query.limit, - offset: query.page * query.limit, + limit, + offset: query.page * limit, sort: ['ennobledAt DESC'], filter: { or: { diff --git a/src/features/ServerPage/features/PlayerPage/features/HistoryPage/components/PlayerHistory/PlayerHistory.tsx b/src/features/ServerPage/features/PlayerPage/features/HistoryPage/components/PlayerHistory/PlayerHistory.tsx index a38c363..d35148c 100644 --- a/src/features/ServerPage/features/PlayerPage/features/HistoryPage/components/PlayerHistory/PlayerHistory.tsx +++ b/src/features/ServerPage/features/PlayerPage/features/HistoryPage/components/PlayerHistory/PlayerHistory.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react'; import { subDays, isEqual as isEqualDate } from 'date-fns'; import { useQuery } from '@apollo/client'; import { useQueryParams, NumberParam, withDefault } from 'use-query-params'; +import { validateRowsPerPage } from '@common/Table/helpers'; import { SERVER_PAGE } from '@config/routes'; import { PLAYER_HISTORY_AND_DAILY_STATS } from './queries'; import { LIMIT } from './constants'; @@ -28,15 +29,16 @@ function PlayerHistory({ t, server, playerID }: Props) { page: withDefault(NumberParam, 0), limit: withDefault(NumberParam, LIMIT), }); + const limit = validateRowsPerPage(query.limit); const { data: queryData, loading: queryLoading } = useQuery< PlayerHistoryT, Variables >(PLAYER_HISTORY_AND_DAILY_STATS, { fetchPolicy: 'cache-and-network', variables: { - limit: query.limit, - playerHistoryOffset: query.page * query.limit, - dailyPlayerStatsOffset: query.page * query.limit + 1, + limit, + playerHistoryOffset: query.page * limit, + dailyPlayerStatsOffset: query.page * limit + 1, sort: ['createDate DESC'], playerHistoryFilter: { playerID: [playerID], diff --git a/src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/TribeChanges.tsx b/src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/TribeChanges.tsx index 66254d2..007872d 100644 --- a/src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/TribeChanges.tsx +++ b/src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/TribeChanges.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useQuery } from '@apollo/client'; import { useQueryParams, NumberParam, withDefault } from 'use-query-params'; +import { validateRowsPerPage } from '@common/Table/helpers'; import { SERVER_PAGE } from '@config/routes'; import { TRIBE_CHANGES } from './queries'; import { LIMIT } from './constants'; @@ -24,14 +25,15 @@ function TribeChanges({ t, server, playerID }: Props) { page: withDefault(NumberParam, 0), limit: withDefault(NumberParam, LIMIT), }); + const limit = validateRowsPerPage(query.limit); const { data: queryData, loading: queryLoading } = useQuery< TribeChangesQuery, TribeChangesQueryVariables >(TRIBE_CHANGES, { fetchPolicy: 'cache-and-network', variables: { - limit: query.limit, - offset: query.page * query.limit, + limit, + offset: query.page * limit, sort: ['createdAt DESC'], filter: { playerID: [playerID],