diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx index 52887b97..e6baf6b1 100644 --- a/src/components/RequestCard/index.tsx +++ b/src/components/RequestCard/index.tsx @@ -3,7 +3,7 @@ import Link from 'next/link'; import React, { useContext, useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import { defineMessages, useIntl } from 'react-intl'; -import useSWR from 'swr'; +import useSWR, { mutate } from 'swr'; import { MediaRequestStatus, MediaStatus, @@ -22,6 +22,8 @@ import StatusBadge from '../StatusBadge'; const messages = defineMessages({ seasons: '{seasonCount, plural, one {Season} other {Seasons}}', + mediaerror: 'The associated title for this request is no longer available.', + deleterequest: 'Delete Request', }); const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { @@ -38,6 +40,59 @@ const RequestCardPlaceholder: React.FC = () => { ); }; +interface RequestCardErrorProps { + mediaId?: number; +} + +const RequestCardError: React.FC = ({ mediaId }) => { + const { hasPermission } = useUser(); + const intl = useIntl(); + + const deleteRequest = async () => { + await axios.delete(`/api/v1/media/${mediaId}`); + mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0'); + }; + + return ( +
+
+
+
+
+ {intl.formatMessage(messages.mediaerror)} +
+ {hasPermission(Permission.MANAGE_REQUESTS) && mediaId && ( +
+ +
+ )} +
+
+
+
+ ); +}; + interface RequestCardProps { request: MediaRequest; onTitleData?: (requestId: number, title: MovieDetails | TvDetails) => void; @@ -88,11 +143,11 @@ const RequestCard: React.FC = ({ request, onTitleData }) => { } if (!requestData && !requestError) { - return ; + return ; } if (!title || !requestData) { - return ; + return ; } return ( diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx index 6e76f994..fb9bdcbd 100644 --- a/src/components/RequestList/RequestItem/index.tsx +++ b/src/components/RequestList/RequestItem/index.tsx @@ -28,12 +28,65 @@ const messages = defineMessages({ requested: 'Requested', modified: 'Modified', modifieduserdate: '{date} by {user}', + mediaerror: 'The associated title for this request is no longer available.', + deleterequest: 'Delete Request', }); const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { return (movie as MovieDetails).title !== undefined; }; +interface RequestItemErroProps { + mediaId?: number; + revalidateList: () => void; +} + +const RequestItemError: React.FC = ({ + mediaId, + revalidateList, +}) => { + const intl = useIntl(); + const { hasPermission } = useUser(); + + const deleteRequest = async () => { + await axios.delete(`/api/v1/media/${mediaId}`); + revalidateList(); + }; + + return ( +
+ + {intl.formatMessage(messages.mediaerror)} + + {hasPermission(Permission.MANAGE_REQUESTS) && mediaId && ( +
+ +
+ )} +
+ ); +}; + interface RequestItemProps { request: MediaRequest; revalidateList: () => void; @@ -108,9 +161,9 @@ const RequestItem: React.FC = ({ if (!title || !requestData) { return ( -
); } diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index d9a94db2..0b0e388a 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -160,8 +160,12 @@ "components.RequestButton.requestmore4k": "Request More 4K", "components.RequestButton.viewrequest": "View Request", "components.RequestButton.viewrequest4k": "View 4K Request", + "components.RequestCard.deleterequest": "Delete Request", + "components.RequestCard.mediaerror": "The associated title for this request is no longer available.", "components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}", + "components.RequestList.RequestItem.deleterequest": "Delete Request", "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.", + "components.RequestList.RequestItem.mediaerror": "The associated title for this request is no longer available.", "components.RequestList.RequestItem.modified": "Modified", "components.RequestList.RequestItem.modifieduserdate": "{date} by {user}", "components.RequestList.RequestItem.requested": "Requested",