fallback to the first opt specified in rowsPerPageOptions when limit isn't present in rowsPerPageOptions

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}

src/common/Table/helpers.ts

@@ -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;
+};

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: {

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],

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],