feat(ui): Add 'Page Size' setting for request/user list pages (#957)

overseerr-api.yml

@@ -1070,9 +1070,6 @@ components:
         pages:
           type: number
           example: 10
-        pageSize:
-          type: number
-          example: 10
         results:
           type: number
           example: 100
@@ -2747,10 +2744,22 @@ paths:
   /user:
     get:
       summary: Get all users
-      description: Returns all users in a JSON array.
+      description: Returns all users in a JSON object.
       tags:
         - users
       parameters:
+        - in: query
+          name: take
+          schema:
+            type: number
+            nullable: true
+            example: 20
+        - in: query
+          name: skip
+          schema:
+            type: number
+            nullable: true
+            example: 0
         - in: query
           name: sort
           schema:
@@ -2763,6 +2772,11 @@ paths:
           content:
             application/json:
               schema:
+                type: object
+                properties:
+                  pageInfo:
+                    $ref: '#/components/schemas/PageInfo'
+                  results:
                     type: array
                     items:
                     $ref: '#/components/schemas/User'

server/interfaces/api/userInterfaces.ts

@@ -1,6 +1,11 @@
+import type { User } from '../../entity/User';
 import { MediaRequest } from '../../entity/MediaRequest';
 import { PaginatedResponse } from './common';
 
+export interface UserResultsResponse extends PaginatedResponse {
+  results: User[];
+}
+
 export interface UserRequestsResponse extends PaginatedResponse {
   results: MediaRequest[];
 }

server/routes/request.ts

@@ -14,9 +14,8 @@ import { User } from '../entity/User';
 const requestRoutes = Router();
 
 requestRoutes.get('/', async (req, res, next) => {
-  const requestRepository = getRepository(MediaRequest);
   try {
-    const pageSize = req.query.take ? Number(req.query.take) : 20;
+    const pageSize = req.query.take ? Number(req.query.take) : 10;
     const skip = req.query.skip ? Number(req.query.skip) : 0;
 
     let statusFilter: MediaRequestStatus[];
@@ -79,7 +78,7 @@ requestRoutes.get('/', async (req, res, next) => {
         sortFilter = 'request.id';
     }
 
-    let query = requestRepository
+    let query = getRepository(MediaRequest)
       .createQueryBuilder('request')
       .leftJoinAndSelect('request.media', 'media')
       .leftJoinAndSelect('request.seasons', 'seasons')

server/routes/user/index.ts

@@ -9,12 +9,16 @@ import logger from '../../logger';
 import gravatarUrl from 'gravatar-url';
 import { UserType } from '../../constants/user';
 import { isAuthenticated } from '../../middleware/auth';
+import { UserResultsResponse } from '../../interfaces/api/userInterfaces';
 import { UserRequestsResponse } from '../../interfaces/api/userInterfaces';
 import userSettingsRoutes from './usersettings';
 
 const router = Router();
 
-router.get('/', async (req, res) => {
+router.get('/', async (req, res, next) => {
+  try {
+    const pageSize = req.query.take ? Number(req.query.take) : 10;
+    const skip = req.query.skip ? Number(req.query.skip) : 0;
     let query = getRepository(User).createQueryBuilder('user');
 
     switch (req.query.sort) {
@@ -42,13 +46,26 @@ router.get('/', async (req, res) => {
         break;
     }
 
-  const users = await query.getMany();
+    const [users, userCount] = await query
+      .take(pageSize)
+      .skip(skip)
+      .getManyAndCount();
 
-  return res
+    return res.status(200).json({
-    .status(200)
+      pageInfo: {
-    .json(
+        pages: Math.ceil(userCount / pageSize),
-      User.filterMany(users, req.user?.hasPermission(Permission.MANAGE_USERS))
+        pageSize,
-    );
+        results: userCount,
+        page: Math.ceil(skip / pageSize) + 1,
+      },
+      results: User.filterMany(
+        users,
+        req.user?.hasPermission(Permission.MANAGE_USERS)
+      ),
+    } as UserResultsResponse);
+  } catch (e) {
+    next({ status: 500, message: e.message });
+  }
 });
 
 router.post(

src/components/RequestList/index.tsx

@@ -17,6 +17,7 @@ const messages = defineMessages({
   modifiedBy: 'Last Modified By',
   showingresults:
     'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
+  resultsperpage: 'Display {pageSize} results per page',
   next: 'Next',
   previous: 'Previous',
   filterAll: 'All',
@@ -38,10 +39,11 @@ const RequestList: React.FC = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
   const [currentSort, setCurrentSort] = useState<Sort>('added');
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
 
   const { data, error, revalidate } = useSWR<RequestResultsResponse>(
-    `/api/v1/request?take=10&skip=${
+    `/api/v1/request?take=${currentPageSize}&skip=${
-      pageIndex * 10
+      pageIndex * currentPageSize
     }&filter=${currentFilter}&sort=${currentSort}`
   );
   if (!data && !error) {
@@ -160,9 +162,9 @@ const RequestList: React.FC = () => {
           })}
 
           {data.results.length === 0 && (
-            <tr className="relative w-full h-24 p-2 text-white">
+            <tr className="relative h-24 p-2 text-white">
               <Table.TD colSpan={6} noPadding>
-                <div className="flex flex-col items-center justify-center p-6">
+                <div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
                   <span className="text-base">
                     {intl.formatMessage(messages.noresults)}
                   </span>
@@ -184,17 +186,18 @@ const RequestList: React.FC = () => {
           <tr className="bg-gray-700">
             <Table.TD colSpan={6} noPadding>
               <nav
-                className="flex items-center justify-between px-6 py-3"
+                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
                 aria-label="Pagination"
               >
-                <div className="hidden sm:block">
+                <div className="hidden lg:flex lg:flex-1">
                   <p className="text-sm">
-                    {intl.formatMessage(messages.showingresults, {
+                    {data.results.length > 0 &&
-                      from: pageIndex * 10,
+                      intl.formatMessage(messages.showingresults, {
+                        from: pageIndex * currentPageSize + 1,
                         to:
-                        data.results.length < 10
+                          data.results.length < currentPageSize
-                          ? pageIndex * 10 + data.results.length
+                            ? pageIndex * currentPageSize + data.results.length
-                          : (pageIndex + 1) * 10,
+                            : (pageIndex + 1) * currentPageSize,
                         total: data.pageInfo.results,
                         strong: function strong(msg) {
                           return <span className="font-medium">{msg}</span>;
@@ -202,15 +205,37 @@ const RequestList: React.FC = () => {
                       })}
                   </p>
                 </div>
-                <div className="flex justify-start flex-1 sm:justify-end">
+                <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-                  <span className="mr-2">
+                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+                    {intl.formatMessage(messages.resultsperpage, {
+                      pageSize: (
+                        <select
+                          id="pageSize"
+                          name="pageSize"
+                          onChange={(e) => {
+                            setPageIndex(0);
+                            setCurrentPageSize(Number(e.target.value));
+                          }}
+                          value={currentPageSize}
+                          className="inline short"
+                        >
+                          <option value="5">5</option>
+                          <option value="10">10</option>
+                          <option value="25">25</option>
+                          <option value="50">50</option>
+                          <option value="100">100</option>
+                        </select>
+                      ),
+                    })}
+                  </span>
+                </div>
+                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
                   <Button
                     disabled={!hasPrevPage}
                     onClick={() => setPageIndex((current) => current - 1)}
                   >
                     {intl.formatMessage(messages.previous)}
                   </Button>
-                  </span>
                   <Button
                     disabled={!hasNextPage}
                     onClick={() => setPageIndex((current) => current + 1)}

src/components/Settings/RadarrModal/index.tsx

@@ -402,7 +402,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       name="port"
                       type="text"
                       placeholder="7878"
-                      className="port"
+                      className="short"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setIsValidated(false);
                         setFieldValue('port', e.target.value);

src/components/Settings/SettingsPlex.tsx

@@ -486,7 +486,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       id="port"
                       name="port"
                       placeholder="32400"
-                      className="port"
+                      className="short"
                     />
                   </div>
                   {errors.port && touched.port && (

src/components/Settings/SonarrModal/index.tsx

@@ -431,7 +431,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       name="port"
                       type="text"
                       placeholder="8989"
-                      className="port"
+                      className="short"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setIsValidated(false);
                         setFieldValue('port', e.target.value);

src/components/UserList/index.tsx

@@ -21,6 +21,7 @@ import Alert from '../Common/Alert';
 import BulkEditModal from './BulkEditModal';
 import PageTitle from '../Common/PageTitle';
 import Link from 'next/link';
+import type { UserResultsResponse } from '../../../server/interfaces/api/userInterfaces';
 
 const messages = defineMessages({
   users: 'Users',
@@ -65,6 +66,11 @@ const messages = defineMessages({
   sortUpdated: 'Last Updated',
   sortDisplayName: 'Display Name',
   sortRequests: 'Request Count',
+  next: 'Next',
+  previous: 'Previous',
+  showingresults:
+    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
+  resultsperpage: 'Display {pageSize} results per page',
 });
 
 type Sort = 'created' | 'updated' | 'requests' | 'displayname';
@@ -73,10 +79,16 @@ const UserList: React.FC = () => {
   const intl = useIntl();
   const router = useRouter();
   const { addToast } = useToasts();
+  const [pageIndex, setPageIndex] = useState(0);
   const [currentSort, setCurrentSort] = useState<Sort>('created');
-  const { data, error, revalidate } = useSWR<User[]>(
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
-    `/api/v1/user?sort=${currentSort}`
+
+  const { data, error, revalidate } = useSWR<UserResultsResponse>(
+    `/api/v1/user?take=${currentPageSize}&skip=${
+      pageIndex * currentPageSize
+    }&sort=${currentSort}`
   );
+
   const [isDeleting, setDeleting] = useState(false);
   const [isImporting, setImporting] = useState(false);
   const [deleteModal, setDeleteModal] = useState<{
@@ -99,7 +111,7 @@ const UserList: React.FC = () => {
   const isAllUsersSelected = () => {
     return (
       selectedUsers.length ===
-      data?.filter((user) => user.id !== currentUser?.id).length
+      data?.results.filter((user) => user.id !== currentUser?.id).length
     );
   };
   const isUserSelected = (userId: number) => selectedUsers.includes(userId);
@@ -107,10 +119,12 @@ const UserList: React.FC = () => {
     if (
       data &&
       selectedUsers.length >= 0 &&
-      selectedUsers.length < data?.length - 1
+      selectedUsers.length < data?.results.length - 1
     ) {
       setSelectedUsers(
-        data.filter((user) => isUserPermsEditable(user.id)).map((u) => u.id)
+        data.results
+          .filter((user) => isUserPermsEditable(user.id))
+          .map((u) => u.id)
       );
     } else {
       setSelectedUsers([]);
@@ -191,6 +205,13 @@ const UserList: React.FC = () => {
     ),
   });
 
+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
+  const hasNextPage = data.pageInfo.pages > pageIndex + 1;
+  const hasPrevPage = pageIndex > 0;
+
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.users)} />
@@ -372,7 +393,7 @@ const UserList: React.FC = () => {
             revalidate();
           }}
           selectedUserIds={selectedUsers}
-          users={data}
+          users={data.results}
         />
       </Transition>
 
@@ -411,6 +432,7 @@ const UserList: React.FC = () => {
               id="sort"
               name="sort"
               onChange={(e) => {
+                setPageIndex(0);
                 setCurrentSort(e.target.value as Sort);
               }}
               value={currentSort}
@@ -436,7 +458,7 @@ const UserList: React.FC = () => {
         <thead>
           <tr>
             <Table.TH>
-              {(data ?? []).length > 1 && (
+              {(data.results ?? []).length > 1 && (
                 <input
                   type="checkbox"
                   id="selectAll"
@@ -455,7 +477,7 @@ const UserList: React.FC = () => {
             <Table.TH>{intl.formatMessage(messages.created)}</Table.TH>
             <Table.TH>{intl.formatMessage(messages.lastupdated)}</Table.TH>
             <Table.TH className="text-right">
-              {(data ?? []).length > 1 && (
+              {(data.results ?? []).length > 1 && (
                 <Button
                   buttonType="warning"
                   onClick={() => setShowBulkEditModal(true)}
@@ -468,7 +490,7 @@ const UserList: React.FC = () => {
           </tr>
         </thead>
         <Table.TBody>
-          {data?.map((user) => (
+          {data?.results.map((user) => (
             <tr key={`user-list-${user.id}`}>
               <Table.TD>
                 {isUserPermsEditable(user.id) && (
@@ -554,6 +576,69 @@ const UserList: React.FC = () => {
               </Table.TD>
             </tr>
           ))}
+          <tr className="bg-gray-700">
+            <Table.TD colSpan={8} noPadding>
+              <nav
+                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
+                aria-label="Pagination"
+              >
+                <div className="hidden lg:flex lg:flex-1">
+                  <p className="text-sm">
+                    {data.results.length > 0 &&
+                      intl.formatMessage(messages.showingresults, {
+                        from: pageIndex * currentPageSize + 1,
+                        to:
+                          data.results.length < currentPageSize
+                            ? pageIndex * currentPageSize + data.results.length
+                            : (pageIndex + 1) * currentPageSize,
+                        total: data.pageInfo.results,
+                        strong: function strong(msg) {
+                          return <span className="font-medium">{msg}</span>;
+                        },
+                      })}
+                  </p>
+                </div>
+                <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
+                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+                    {intl.formatMessage(messages.resultsperpage, {
+                      pageSize: (
+                        <select
+                          id="pageSize"
+                          name="pageSize"
+                          onChange={(e) => {
+                            setPageIndex(0);
+                            setCurrentPageSize(Number(e.target.value));
+                          }}
+                          value={currentPageSize}
+                          className="inline short"
+                        >
+                          <option value="5">5</option>
+                          <option value="10">10</option>
+                          <option value="25">25</option>
+                          <option value="50">50</option>
+                          <option value="100">100</option>
+                        </select>
+                      ),
+                    })}
+                  </span>
+                </div>
+                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+                  <Button
+                    disabled={!hasPrevPage}
+                    onClick={() => setPageIndex((current) => current - 1)}
+                  >
+                    {intl.formatMessage(messages.previous)}
+                  </Button>
+                  <Button
+                    disabled={!hasNextPage}
+                    onClick={() => setPageIndex((current) => current + 1)}
+                  >
+                    {intl.formatMessage(messages.next)}
+                  </Button>
+                </div>
+              </nav>
+            </Table.TD>
+          </tr>
         </Table.TBody>
       </Table>
     </>

src/i18n/locale/en.json

@@ -170,6 +170,7 @@
   "components.RequestList.previous": "Previous",
   "components.RequestList.requestedAt": "Requested At",
   "components.RequestList.requests": "Requests",
+  "components.RequestList.resultsperpage": "Display {pageSize} results per page",
   "components.RequestList.showallrequests": "Show All Requests",
   "components.RequestList.showingresults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
   "components.RequestList.sortAdded": "Request Date",
@@ -635,14 +636,18 @@
   "components.UserList.importfromplexerror": "Something went wrong while importing users from Plex.",
   "components.UserList.lastupdated": "Last Updated",
   "components.UserList.localuser": "Local User",
+  "components.UserList.next": "Next",
   "components.UserList.password": "Password",
   "components.UserList.passwordinfo": "Password Information",
   "components.UserList.passwordinfodescription": "Email notifications need to be configured and enabled in order to automatically generate passwords.",
   "components.UserList.permissions": "Permissions",
   "components.UserList.plexuser": "Plex User",
+  "components.UserList.previous": "Previous",
+  "components.UserList.resultsperpage": "Display {pageSize} results per page",
   "components.UserList.role": "Role",
   "components.UserList.save": "Save Changes",
   "components.UserList.saving": "Saving…",
+  "components.UserList.showingResults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
   "components.UserList.sortCreated": "Creation Date",
   "components.UserList.sortDisplayName": "Display Name",
   "components.UserList.sortRequests": "Request Count",

src/styles/globals.css

@@ -102,8 +102,9 @@ select.rounded-r-only {
   @apply rounded-l-none;
 }
 
-input.port {
+input.short,
-  @apply w-24;
+select.short {
+  @apply w-20;
 }
 
 .protocol {