fix: correct "Remove from *arr" button (#1544)

This PR fixes the "Delete from *arr" button in the request list. It checks from the API whether the
*arr server corresponding to the request still exists before displaying the remove button, and fixes
a cache removal issue that could cause problems when deleting recently added media. This PR also
reverts #1476, which introduced problems during removal.

fix #1494

src/components/RequestList/RequestItem/index.tsx

@@ -17,10 +17,10 @@ import {
   TrashIcon,
   XMarkIcon,
 } from '@heroicons/react/24/solid';
-import { MediaRequestStatus, MediaType } from '@server/constants/media';
+import { MediaRequestStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { NonFunctionProperties } from '@server/interfaces/api/common';
-import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
+import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import Link from 'next/link';
@@ -292,18 +292,11 @@ const RequestItemError = ({
 };
 
 interface RequestItemProps {
-  request: NonFunctionProperties<MediaRequest> & { profileName?: string };
+  request: RequestResultsResponse['results'][number];
   revalidateList: () => void;
-  radarrData?: RadarrSettings[];
-  sonarrData?: SonarrSettings[];
 }
 
-const RequestItem = ({
-  request,
-  revalidateList,
-  radarrData,
-  sonarrData,
-}: RequestItemProps) => {
+const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
   const settings = useSettings();
   const { ref, inView } = useInView({
     triggerOnce: true,
@@ -398,23 +391,6 @@ const RequestItem = ({
     iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
   });
 
-  const serviceExists = () => {
-    if (title?.mediaInfo) {
-      if (title?.mediaInfo.mediaType === MediaType.MOVIE) {
-        return (
-          radarrData?.find((radarr) => radarr.id === request.serverId) !==
-          undefined
-        );
-      } else {
-        return (
-          sonarrData?.find((sonarr) => sonarr.id === request.serverId) !==
-          undefined
-        );
-      }
-    }
-    return false;
-  };
-
   if (!title && !error) {
     return (
       <div
@@ -722,30 +698,30 @@ const RequestItem = ({
             )}
           {requestData.status !== MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
-              <ConfirmButton
-                onClick={() => deleteRequest()}
-                confirmText={intl.formatMessage(globalMessages.areyousure)}
-                className="w-full"
-              >
-                <TrashIcon />
-                <span>{intl.formatMessage(messages.deleterequest)}</span>
-              </ConfirmButton>
-            )}
-          {hasPermission(Permission.MANAGE_REQUESTS) &&
-            title?.mediaInfo?.serviceId &&
-            serviceExists() && (
-              <ConfirmButton
-                onClick={() => deleteMediaFile()}
-                confirmText={intl.formatMessage(globalMessages.areyousure)}
-                className="w-full"
-              >
-                <TrashIcon />
-                <span>
-                  {intl.formatMessage(messages.removearr, {
-                    arr: request.type === 'movie' ? 'Radarr' : 'Sonarr',
-                  })}
-                </span>
-              </ConfirmButton>
+              <>
+                <ConfirmButton
+                  onClick={() => deleteRequest()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>{intl.formatMessage(messages.deleterequest)}</span>
+                </ConfirmButton>
+                {request.canRemove && (
+                  <ConfirmButton
+                    onClick={() => deleteMediaFile()}
+                    confirmText={intl.formatMessage(globalMessages.areyousure)}
+                    className="w-full"
+                  >
+                    <TrashIcon />
+                    <span>
+                      {intl.formatMessage(messages.removearr, {
+                        arr: request.type === 'movie' ? 'Radarr' : 'Sonarr',
+                      })}
+                    </span>
+                  </ConfirmButton>
+                )}
+              </>
             )}
           {requestData.status === MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (

src/components/RequestList/index.tsx

@@ -17,8 +17,6 @@ import {
   FunnelIcon,
 } from '@heroicons/react/24/solid';
 import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
-import { Permission } from '@server/lib/permissions';
-import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -53,7 +51,7 @@ const RequestList = () => {
   const { user } = useUser({
     id: Number(router.query.userId),
   });
-  const { user: currentUser, hasPermission } = useUser();
+  const { user: currentUser } = useUser();
   const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.PENDING);
   const [currentSort, setCurrentSort] = useState<Sort>('added');
   const [currentSortDirection, setCurrentSortDirection] =
@@ -64,13 +62,6 @@ const RequestList = () => {
   const pageIndex = page - 1;
   const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
 
-  const { data: radarrData } = useSWR<RadarrSettings[]>(
-    hasPermission(Permission.ADMIN) ? '/api/v1/settings/radarr' : null
-  );
-  const { data: sonarrData } = useSWR<SonarrSettings[]>(
-    hasPermission(Permission.ADMIN) ? '/api/v1/settings/sonarr' : null
-  );
-
   const {
     data,
     error,
@@ -254,8 +245,6 @@ const RequestList = () => {
             <RequestItem
               request={request}
               revalidateList={() => revalidate()}
-              radarrData={radarrData}
-              sonarrData={sonarrData}
             />
           </div>
         );