feat(ui): add user requests page

overseerr-api.yml

@@ -3453,6 +3453,8 @@ paths:
       summary: Get all requests
       description: |
         Returns all requests if the user has the `ADMIN` or `MANAGE_REQUESTS` permissions. Otherwise, only the logged-in user's requests are returned.
+
+        If the `requestedBy` parameter is specified, only requests from that particular user ID will be returned.
       tags:
         - request
       parameters:
@@ -3480,6 +3482,12 @@ paths:
             type: string
             enum: [added, modified]
             default: added
+        - in: query
+          name: requestedBy
+          schema:
+            type: number
+            nullable: true
+            example: 1
       responses:
         '200':
           description: Requests returned
@@ -4089,7 +4097,7 @@ paths:
                     type: number
   /media:
     get:
-      summary: Return media
+      summary: Get media
       description: Returns all media (can be filtered and limited) in a JSON object.
       tags:
         - media

server/routes/request.ts

@@ -17,6 +17,9 @@ requestRoutes.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;
+    const requestedBy = req.query.requestedBy
+      ? Number(req.query.requestedBy)
+      : 0;
 
     let statusFilter: MediaRequestStatus[];
 
@@ -103,6 +106,10 @@ requestRoutes.get('/', async (req, res, next) => {
       query = query.andWhere('requestedBy.id = :id', {
         id: req.user?.id,
       });
+    } else if (requestedBy) {
+      query = query.andWhere('requestedBy.id = :id', {
+        id: requestedBy,
+      });
     }
 
     const [requests, requestCount] = await query

src/components/RequestList/index.tsx

@@ -8,11 +8,13 @@ import Table from '../Common/Table';
 import Button from '../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import PageTitle from '../Common/PageTitle';
+import { useRouter } from 'next/router';
+import { useUser } from '../../hooks/useUser';
 
 const messages = defineMessages({
   requests: 'Requests',
   mediaInfo: 'Media Info',
-  status: 'Status',
+  status: 'Media Status',
   requestedAt: 'Requested At',
   modifiedBy: 'Last Modified By',
   showingresults:
@@ -35,16 +37,24 @@ type Filter = 'all' | 'pending' | 'approved' | 'processing' | 'available';
 type Sort = 'added' | 'modified';
 
 const RequestList: React.FC = () => {
+  const router = useRouter();
   const intl = useIntl();
   const [pageIndex, setPageIndex] = useState(0);
-  const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
+  const { user } = useUser({
+    id: Number(router.query.userId),
+  });
+  const [currentFilter, setCurrentFilter] = useState<Filter>(
+    router.query.userId ? 'all' : 'pending'
+  );
   const [currentSort, setCurrentSort] = useState<Sort>('added');
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
 
   const { data, error, revalidate } = useSWR<RequestResultsResponse>(
     `/api/v1/request?take=${currentPageSize}&skip=${
       pageIndex * currentPageSize
-    }&filter=${currentFilter}&sort=${currentSort}`
+    }&filter=${currentFilter}&sort=${currentSort}${
+      user?.id && `&requestedBy=${user.id}`
+    }`
   );
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -59,9 +69,13 @@ const RequestList: React.FC = () => {
 
   return (
     <>
-      <PageTitle title={intl.formatMessage(messages.requests)} />
+      <PageTitle
+        title={[intl.formatMessage(messages.requests), user?.displayName]}
+      />
       <div className="flex flex-col justify-between lg:items-end lg:flex-row">
-        <Header>{intl.formatMessage(messages.requests)}</Header>
+        <Header subtext={user?.displayName}>
+          {intl.formatMessage(messages.requests)}
+        </Header>
         <div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
           <div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
             <span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">

src/components/UserProfile/index.tsx

@@ -13,6 +13,7 @@ import ImageFader from '../Common/ImageFader';
 import PageTitle from '../Common/PageTitle';
 import ProfileHeader from './ProfileHeader';
 import { defineMessages, useIntl } from 'react-intl';
+import Link from 'next/link';
 
 const messages = defineMessages({
   recentrequests: 'Recent Requests',
@@ -77,9 +78,25 @@ const UserProfile: React.FC = () => {
       <ProfileHeader user={user} />
       <div className="relative z-40 mt-6 mb-4 md:flex md:items-center md:justify-between">
         <div className="flex-1 min-w-0">
-          <div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
-            <span>{intl.formatMessage(messages.recentrequests)}</span>
-          </div>
+          <Link href={`/users/${user?.id}/requests`}>
+            <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
+              <span>{intl.formatMessage(messages.recentrequests)}</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
         </div>
       </div>
       <div className="relative z-40">

src/i18n/locale/en.json

@@ -181,7 +181,7 @@
   "components.RequestList.showingresults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
   "components.RequestList.sortAdded": "Request Date",
   "components.RequestList.sortModified": "Last Modified",
-  "components.RequestList.status": "Status",
+  "components.RequestList.status": "Media Status",
   "components.RequestModal.AdvancedRequester.advancedoptions": "Advanced Options",
   "components.RequestModal.AdvancedRequester.animenote": "* This series is an anime.",
   "components.RequestModal.AdvancedRequester.default": "(Default)",

src/pages/users/[userId]/requests.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NextPage } from 'next';
+import RequestList from '../../../components/RequestList';
+import useRouteGuard from '../../../hooks/useRouteGuard';
+import { Permission } from '../../../hooks/useUser';
+
+const UserRequestsPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_REQUESTS);
+  return <RequestList />;
+};
+
+export default UserRequestsPage;