fix(frontend): handle media items/requests no longer having a valid tmdb id

fixes #517

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<RequestItemErroProps> = ({
+  mediaId,
+  revalidateList,
+}) => {
+  const intl = useIntl();
+  const { hasPermission } = useUser();
+
+  const deleteRequest = async () => {
+    await axios.delete(`/api/v1/media/${mediaId}`);
+    revalidateList();
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-64 px-10 bg-gray-800 lg:flex-row ring-1 ring-red-500 rounded-xl xl:h-32">
+      <span className="text-sm text-center text-gray-300 lg:text-left">
+        {intl.formatMessage(messages.mediaerror)}
+      </span>
+      {hasPermission(Permission.MANAGE_REQUESTS) && mediaId && (
+        <div className="mt-4 lg:ml-4 lg:mt-0">
+          <Button
+            buttonType="danger"
+            buttonSize="sm"
+            onClick={() => deleteRequest()}
+          >
+            <svg
+              className="w-5 h-5 mr-1"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              />
+            </svg>
+            <span>{intl.formatMessage(messages.deleterequest)}</span>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
 interface RequestItemProps {
   request: MediaRequest;
   revalidateList: () => void;
@@ -108,9 +161,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
 
   if (!title || !requestData) {
     return (
-      <div
-        className="w-full h-64 bg-gray-800 rounded-xl xl:h-32 animate-pulse"
-        ref={ref}
+      <RequestItemError
+        mediaId={requestData?.media.id}
+        revalidateList={revalidateList}
       />
     );
   }