feat(requestlist): add requests list media type filtering (#1511)

* feat: add requests list media type filtering

* chore: some better indent

* fix(lint): missing break statements before case

* fix: yet another lint issue

* fix(lint): yet another lint issue

* Revert "fix(lint): yet another lint issue"

This reverts commit 24c3f90ed0beb6c9c37ec7aae008c329673be18f.

* fix: lint issues

src/components/RequestList/index.tsx

@@ -14,6 +14,7 @@ import {
   Bars3BottomLeftIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  CircleStackIcon,
   FunnelIcon,
 } from '@heroicons/react/24/solid';
 import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
@@ -47,6 +48,8 @@ type Sort = 'added' | 'modified';
 
 type SortDirection = 'asc' | 'desc';
 
+type MediaType = 'all' | 'movie' | 'tv';
+
 const RequestList = () => {
   const router = useRouter();
   const intl = useIntl();
@@ -56,6 +59,7 @@ const RequestList = () => {
   const { user: currentUser } = useUser();
   const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.PENDING);
   const [currentSort, setCurrentSort] = useState<Sort>('added');
+  const [currentMediaType, setCurrentMediaType] = useState<string>('all');
   const [currentSortDirection, setCurrentSortDirection] =
     useState<SortDirection>('desc');
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
@@ -71,7 +75,7 @@ const RequestList = () => {
   } = useSWR<RequestResultsResponse>(
     `/api/v1/request?take=${currentPageSize}&skip=${
       pageIndex * currentPageSize
-    }&filter=${currentFilter}&sort=${currentSort}&sortDirection=${currentSortDirection}${
+    }&filter=${currentFilter}&mediaType=${currentMediaType}&sort=${currentSort}&sortDirection=${currentSortDirection}${
       router.pathname.startsWith('/profile')
         ? `&requestedBy=${currentUser?.id}`
         : router.query.userId
@@ -107,12 +111,19 @@ const RequestList = () => {
       'rl-filter-settings',
       JSON.stringify({
         currentFilter,
+        currentMediaType,
         currentSort,
         currentSortDirection,
         currentPageSize,
       })
     );
-  }, [currentFilter, currentSort, currentSortDirection, currentPageSize]);
+  }, [
+    currentFilter,
+    currentMediaType,
+    currentSort,
+    currentSortDirection,
+    currentPageSize,
+  ]);
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -152,6 +163,37 @@ const RequestList = () => {
           {intl.formatMessage(messages.requests)}
         </Header>
         <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <CircleStackIcon className="h-6 w-6" />
+            </span>
+            <select
+              id="mediaType"
+              name="mediaType"
+              onChange={(e) => {
+                setCurrentMediaType(e.target.value as MediaType);
+                router.push({
+                  pathname: router.pathname,
+                  query: router.query.userId
+                    ? { userId: router.query.userId }
+                    : {},
+                });
+              }}
+              value={currentMediaType}
+              className="rounded-r-only"
+            >
+              <option value="all">
+                {intl.formatMessage(globalMessages.all)}
+              </option>
+              <option value="movie">
+                {intl.formatMessage(globalMessages.movies)}
+              </option>
+              <option value="tv">
+                {intl.formatMessage(globalMessages.tvshows)}
+              </option>
+            </select>
+            ;
+          </div>
           <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
               <FunnelIcon className="h-6 w-6" />
@@ -263,11 +305,15 @@ const RequestList = () => {
           <span className="text-2xl text-gray-400">
             {intl.formatMessage(globalMessages.noresults)}
           </span>
-          {currentFilter !== Filter.ALL && (
+          {(currentFilter !== Filter.ALL ||
+            currentMediaType !== Filter.ALL) && (
             <div className="mt-4">
               <Button
                 buttonType="primary"
-                onClick={() => setCurrentFilter(Filter.ALL)}
+                onClick={() => {
+                  setCurrentFilter(Filter.ALL);
+                  setCurrentMediaType(Filter.ALL);
+                }}
               >
                 {intl.formatMessage(messages.showallrequests)}
               </Button>