fix: disambiguate tmdb ids by media type across lookups (#2577)

src/components/Blocklist/index.tsx

@@ -178,7 +178,10 @@ const Blocklist = () => {
       ) : (
         data.results.map((item: BlocklistItem) => {
           return (
-            <div className="py-2" key={`request-list-${item.tmdbId}`}>
+            <div
+              className="py-2"
+              key={`request-list-${item.mediaType}-${item.tmdbId}`}
+            >
               <BlocklistedItem item={item} revalidateList={revalidate} />
             </div>
           );
@@ -297,7 +300,9 @@ const BlocklistedItem = ({ item, revalidateList }: BlocklistedItemProps) => {
     setIsUpdating(true);
 
     try {
-      await axios.delete(`/api/v1/blocklist/${tmdbId}`);
+      await axios.delete(
+        `/api/v1/blocklist/${tmdbId}?mediaType=${item.mediaType}`
+      );
 
       addToast(
         <span>

src/components/BlocklistBlock/index.tsx

@@ -7,6 +7,7 @@ import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { CalendarIcon, TrashIcon, UserIcon } from '@heroicons/react/24/solid';
+import type { MediaType } from '@server/constants/media';
 import type { Blocklist } from '@server/entity/Blocklist';
 import axios from 'axios';
 import Link from 'next/link';
@@ -22,12 +23,14 @@ const messages = defineMessages('component.BlocklistBlock', {
 
 interface BlocklistBlockProps {
   tmdbId: number;
+  mediaType: MediaType;
   onUpdate?: () => void;
   onDelete?: () => void;
 }
 
 const BlocklistBlock = ({
   tmdbId,
+  mediaType,
   onUpdate,
   onDelete,
 }: BlocklistBlockProps) => {
@@ -35,13 +38,15 @@ const BlocklistBlock = ({
   const intl = useIntl();
   const [isUpdating, setIsUpdating] = useState(false);
   const { addToast } = useToasts();
-  const { data } = useSWR<Blocklist>(`/api/v1/blocklist/${tmdbId}`);
+  const { data } = useSWR<Blocklist>(
+    `/api/v1/blocklist/${tmdbId}?mediaType=${mediaType}`
+  );
 
   const removeFromBlocklist = async (tmdbId: number, title?: string) => {
     setIsUpdating(true);
 
     try {
-      await axios.delete('/api/v1/blocklist/' + tmdbId);
+      await axios.delete(`/api/v1/blocklist/${tmdbId}?mediaType=${mediaType}`);
 
       addToast(
         <span>

src/components/ManageSlideOver/index.tsx

@@ -322,6 +322,7 @@ const ManageSlideOver = ({
             <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <BlocklistBlock
                 tmdbId={data.mediaInfo.tmdbId}
+                mediaType={data.mediaInfo.mediaType}
                 onUpdate={() => revalidate()}
                 onDelete={() => onClose()}
               />

src/components/MovieDetails/index.tsx

@@ -358,7 +358,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   const onClickDeleteWatchlistBtn = async (): Promise<void> => {
     setIsUpdating(true);
     try {
-      await axios.delete(`/api/v1/watchlist/${movie?.id}`);
+      await axios.delete(
+        `/api/v1/watchlist/${movie?.id}?mediaType=${MediaType.MOVIE}`
+      );
 
       addToast(
         <span>

src/components/TitleCard/index.tsx

@@ -139,7 +139,9 @@ const TitleCard = ({
   const onClickDeleteWatchlistBtn = async (): Promise<void> => {
     setIsUpdating(true);
     try {
-      const response = await axios.delete<Watchlist>('/api/v1/watchlist/' + id);
+      const response = await axios.delete<Watchlist>(
+        `/api/v1/watchlist/${id}?mediaType=${mediaType}`
+      );
 
       if (response.status === 204) {
         addToast(
@@ -223,7 +225,9 @@ const TitleCard = ({
     const topNode = cardRef.current;
 
     if (topNode) {
-      const res = await axios.delete('/api/v1/blocklist/' + id);
+      const res = await axios.delete(
+        `/api/v1/blocklist/${id}?mediaType=${mediaType}`
+      );
 
       if (res.status === 204) {
         addToast(

src/components/TvDetails/index.tsx

@@ -386,7 +386,9 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     setIsUpdating(true);
 
     try {
-      await axios.delete('/api/v1/watchlist/' + tv?.id);
+      await axios.delete(
+        `/api/v1/watchlist/${tv?.id}?mediaType=${MediaType.TV}`
+      );
 
       addToast(
         <span>