feat(sidebar): show pending requests count in the sidebar

fallenbagel · Jan 6, 2025 · f3931da · f3931da
1 parent f84d752
commit f3931da
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/server/interfaces/api/requestInterfaces.ts b/server/interfaces/api/requestInterfaces.ts
@@ -20,3 +20,14 @@ export type MediaRequestBody = {
   userId?: number;
   tags?: number[];
 };
+
+export type RequestCountResponse = {
+  total: number;
+  movie: number;
+  tv: number;
+  pending: number;
+  approved: number;
+  declined: number;
+  processing: number;
+  available: number;
+};
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
@@ -1,3 +1,4 @@
+import Badge from '@app/components/Common/Badge';
 import UserWarnings from '@app/components/Layout/UserWarnings';
 import VersionStatus from '@app/components/Layout/VersionStatus';
 import useClickOutside from '@app/hooks/useClickOutside';
@@ -15,11 +16,13 @@ import {
   UsersIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
+import type { RequestCountResponse } from '@server/interfaces/api/requestInterfaces';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import useSWR from 'swr';
 
 export const menuMessages = defineMessages('components.Layout.Sidebar', {
   dashboard: 'Discover',
@@ -119,6 +122,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
   const router = useRouter();
   const intl = useIntl();
   const { hasPermission } = useUser();
+  const { data: requests } = useSWR<RequestCountResponse>(
+    '/api/v1/request/count'
+  );
   useClickOutside(navRef, () => setClosed());
 
   return (
@@ -204,6 +210,15 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                             {intl.formatMessage(
                               menuMessages[sidebarLink.messagesKey]
                             )}
+                            {sidebarLink.messagesKey === 'requests' &&
+                              requests &&
+                              requests.pending > 0 && (
+                                <span className="ml-3">
+                                  <Badge badgeType="default">
+                                    {requests.pending}
+                                  </Badge>
+                                </span>
+                              )}
                           </Link>
                         );
                       })}
@@ -265,6 +280,15 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                       {intl.formatMessage(
                         menuMessages[sidebarLink.messagesKey]
                       )}
+                      {sidebarLink.messagesKey === 'requests' &&
+                        requests &&
+                        requests.pending > 0 && (
+                          <span className="ml-3">
+                            <Badge badgeType="default">
+                              {requests.pending}
+                            </Badge>
+                          </span>
+                        )}
                     </Link>
                   );
                 })}