fix(media): clean up watchlist on error card delete (#3073)

Author: fallenbagel

server/routes/media.ts

@@ -17,7 +17,7 @@ import logger from '@server/logger';
 import { isAuthenticated } from '@server/middleware/auth';
 import { Router } from 'express';
 import type { FindOneOptions } from 'typeorm';
-import { In, IsNull, Not } from 'typeorm';
+import { EntityNotFoundError, In, IsNull, Not } from 'typeorm';
 
 const mediaRoutes = Router();
 
@@ -187,11 +187,15 @@ mediaRoutes.delete(
 
       return res.status(204).send();
     } catch (e) {
-      logger.error('Something went wrong fetching media in delete request', {
+      if (e instanceof EntityNotFoundError) {
+        return res.status(204).send();
+      }
+      logger.error('Something went wrong deleting media', {
         label: 'Media',
+        mediaId: req.params.id,
         message: e.message,
       });
-      next({ status: 404, message: 'Media not found' });
+      next({ status: 500, message: 'Failed to delete media' });
     }
   }
 );

src/components/TitleCard/ErrorCard.tsx

@@ -1,4 +1,5 @@
 import Button from '@app/components/Common/Button';
+import useToasts from '@app/hooks/useToasts';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/solid';
@@ -23,9 +24,28 @@ const messages = defineMessages('components.TitleCard', {
 
 const ErrorCard = ({ id, tmdbId, tvdbId, type, canExpand }: ErrorCardProps) => {
   const intl = useIntl();
+  const { addToast } = useToasts();
 
   const deleteMedia = async () => {
-    await axios.delete(`/api/v1/media/${id}`);
+    try {
+      await axios.delete(`/api/v1/watchlist/${tmdbId}?mediaType=${type}`);
+    } catch (e) {
+      if (!axios.isAxiosError(e) || e.response?.status !== 404) {
+        addToast(intl.formatMessage(globalMessages.error), {
+          appearance: 'error',
+          autoDismiss: true,
+        });
+        return;
+      }
+    }
+    await axios.delete(`/api/v1/media/${id}`).catch((e) => {
+      if (axios.isAxiosError(e) && e.response?.status === 404) return;
+      addToast(intl.formatMessage(globalMessages.error), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    });
+    mutate('/api/v1/discover/watchlist');
     mutate('/api/v1/media?filter=allavailable&take=20&sort=mediaAdded');
     mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0');
   };