fix(requests): handle when tvdbid is null (#657)

Co-authored-by: sct <sctsnipe@gmail.com>

src/components/RequestModal/MovieRequestModal.tsx

@@ -39,6 +39,7 @@ const messages = defineMessages({
   errorediting: 'Something went wrong editing the request.',
   requestedited: 'Request edited.',
   autoapproval: 'Auto Approval',
+  requesterror: 'Something went wrong when trying to request media.',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -78,41 +79,50 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   const sendRequest = useCallback(async () => {
     setIsUpdating(true);
-    let overrideParams = {};
-    if (requestOverrides) {
-      overrideParams = {
-        serverId: requestOverrides.server,
-        profileId: requestOverrides.profile,
-        rootFolder: requestOverrides.folder,
-      };
-    }
-    const response = await axios.post<MediaRequest>('/api/v1/request', {
-      mediaId: data?.id,
-      mediaType: 'movie',
-      is4k,
-      ...overrideParams,
-    });
 
-    if (response.data) {
-      if (onComplete) {
-        onComplete(
-          hasPermission(Permission.AUTO_APPROVE) ||
-            hasPermission(Permission.AUTO_APPROVE_MOVIE)
-            ? MediaStatus.PROCESSING
-            : MediaStatus.PENDING
+    try {
+      let overrideParams = {};
+      if (requestOverrides) {
+        overrideParams = {
+          serverId: requestOverrides.server,
+          profileId: requestOverrides.profile,
+          rootFolder: requestOverrides.folder,
+        };
+      }
+      const response = await axios.post<MediaRequest>('/api/v1/request', {
+        mediaId: data?.id,
+        mediaType: 'movie',
+        is4k,
+        ...overrideParams,
+      });
+
+      if (response.data) {
+        if (onComplete) {
+          onComplete(
+            hasPermission(Permission.AUTO_APPROVE) ||
+              hasPermission(Permission.AUTO_APPROVE_MOVIE)
+              ? MediaStatus.PROCESSING
+              : MediaStatus.PENDING
+          );
+        }
+        addToast(
+          <span>
+            {intl.formatMessage(messages.requestSuccess, {
+              title: data?.title,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
         );
       }
-      addToast(
-        <span>
-          {intl.formatMessage(messages.requestSuccess, {
-            title: data?.title,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
-        </span>,
-        { appearance: 'success', autoDismiss: true }
-      );
+    } catch (e) {
+      addToast(intl.formatMessage(messages.requesterror), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
       setIsUpdating(false);
     }
   }, [data, onComplete, addToast, requestOverrides]);
@@ -123,25 +133,29 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   const cancelRequest = async () => {
     setIsUpdating(true);
-    const response = await axios.delete<MediaRequest>(
-      `/api/v1/request/${activeRequest?.id}`
-    );
 
-    if (response.status === 204) {
-      if (onComplete) {
-        onComplete(MediaStatus.UNKNOWN);
-      }
-      addToast(
-        <span>
-          {intl.formatMessage(messages.requestCancel, {
-            title: data?.title,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
-        </span>,
-        { appearance: 'success', autoDismiss: true }
+    try {
+      const response = await axios.delete<MediaRequest>(
+        `/api/v1/request/${activeRequest?.id}`
       );
+
+      if (response.status === 204) {
+        if (onComplete) {
+          onComplete(MediaStatus.UNKNOWN);
+        }
+        addToast(
+          <span>
+            {intl.formatMessage(messages.requestCancel, {
+              title: data?.title,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+      }
+    } catch (e) {
       setIsUpdating(false);
     }
   };

src/components/RequestModal/SearchByNameModal/index.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import Alert from '../../Common/Alert';
+import Modal from '../../Common/Modal';
+import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';
+import useSWR from 'swr';
+import { defineMessages, useIntl } from 'react-intl';
+import { SonarrSeries } from '../../../../server/api/sonarr';
+
+const messages = defineMessages({
+  next: 'Next',
+  notvdbid: 'Manual match required',
+  notvdbiddescription:
+    "We couldn't automatically match your request. Please select the correct match from the list below.",
+  nosummary: 'No summary for this title was found.',
+});
+
+interface SearchByNameModalProps {
+  setTvdbId: (id: number) => void;
+  tvdbId: number | undefined;
+  loading: boolean;
+  onCancel?: () => void;
+  closeModal: () => void;
+  modalTitle: string;
+  tmdbId: number;
+}
+
+const SearchByNameModal: React.FC<SearchByNameModalProps> = ({
+  setTvdbId,
+  tvdbId,
+  loading,
+  onCancel,
+  closeModal,
+  modalTitle,
+  tmdbId,
+}) => {
+  const intl = useIntl();
+  const { data, error } = useSWR<SonarrSeries[]>(
+    `/api/v1/service/sonarr/lookup/${tmdbId}`
+  );
+
+  const handleClick = (tvdbId: number) => {
+    setTvdbId(tvdbId);
+  };
+
+  return (
+    <Modal
+      loading={loading && !error}
+      backgroundClickable
+      onCancel={onCancel}
+      onOk={closeModal}
+      title={modalTitle}
+      okText={intl.formatMessage(messages.next)}
+      okDisabled={!tvdbId}
+      okButtonType="primary"
+      iconSvg={
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+      }
+    >
+      <Alert title={intl.formatMessage(messages.notvdbid)} type="info">
+        {intl.formatMessage(messages.notvdbiddescription)}
+      </Alert>
+      {!data && !error && <SmallLoadingSpinner />}
+      <div className="grid grid-cols-1 gap-4 pb-2 md:grid-cols-2">
+        {data?.slice(0, 6).map((item) => (
+          <button
+            key={item.tvdbId}
+            className="container flex flex-col items-center justify-center h-40 mx-auto space-y-4 transition scale-100 outline-none cursor-pointer focus:ring focus:ring-indigo-500 focus:ring-opacity-70 focus:outline-none rounded-xl transform-gpu hover:scale-105"
+            onClick={() => handleClick(item.tvdbId)}
+          >
+            <div
+              className={`bg-gray-600 h-40 overflow-hidden w-full flex items-center p-2 rounded-xl shadow transition ${
+                tvdbId === item.tvdbId ? 'ring ring-indigo-500' : ''
+              } `}
+            >
+              <div className="flex items-center flex-none w-24 space-x-4">
+                <img
+                  src={
+                    item.remotePoster ??
+                    '/images/overseerr_poster_not_found.png'
+                  }
+                  alt={item.title}
+                  className="w-auto rounded-md h-100"
+                />
+              </div>
+              <div className="self-start flex-grow p-3 text-left">
+                <div className="text-sm font-medium text-grey-200">
+                  {item.title}
+                </div>
+                <div className="h-24 overflow-hidden text-sm text-gray-400">
+                  {item.overview ?? intl.formatMessage(messages.nosummary)}
+                </div>
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </Modal>
+  );
+};
+
+export default SearchByNameModal;

src/components/RequestModal/TvRequestModal.tsx

@@ -18,6 +18,7 @@ import globalMessages from '../../i18n/globalMessages';
 import SeasonRequest from '../../../server/entity/SeasonRequest';
 import Alert from '../Common/Alert';
 import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import SearchByNameModal from './SearchByNameModal';
 
 const messages = defineMessages({
   requestadmin: 'Your request will be immediately approved.',
@@ -40,6 +41,12 @@ const messages = defineMessages({
   requestedited: 'Request edited.',
   requestcancelled: 'Request cancelled.',
   autoapproval: 'Auto Approval',
+  requesterror: 'Something went wrong when trying to request media.',
+  next: 'Next',
+  notvdbid: 'No TVDB id was found connected on TMDB',
+  notvdbiddescription:
+    'Either add the TVDB id to TMDB and come back later, or select the correct match below.',
+  backbutton: 'Back',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -73,6 +80,12 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
   );
   const intl = useIntl();
   const { hasPermission } = useUser();
+  const [searchModal, setSearchModal] = useState<{
+    show: boolean;
+  }>({
+    show: true,
+  });
+  const [tvdbId, setTvdbId] = useState<number | undefined>(undefined);
 
   const updateRequest = async () => {
     if (!editRequest) {
@@ -129,38 +142,47 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     if (onUpdating) {
       onUpdating(true);
     }
-    let overrideParams = {};
-    if (requestOverrides) {
-      overrideParams = {
-        serverId: requestOverrides.server,
-        profileId: requestOverrides.profile,
-        rootFolder: requestOverrides.folder,
-      };
-    }
-    const response = await axios.post<MediaRequest>('/api/v1/request', {
-      mediaId: data?.id,
-      tvdbId: data?.externalIds.tvdbId,
-      mediaType: 'tv',
-      is4k,
-      seasons: selectedSeasons,
-      ...overrideParams,
-    });
 
-    if (response.data) {
-      if (onComplete) {
-        onComplete(response.data.media.status);
+    try {
+      let overrideParams = {};
+      if (requestOverrides) {
+        overrideParams = {
+          serverId: requestOverrides.server,
+          profileId: requestOverrides.profile,
+          rootFolder: requestOverrides.folder,
+        };
       }
-      addToast(
-        <span>
-          {intl.formatMessage(messages.requestSuccess, {
-            title: data?.name,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
-        </span>,
-        { appearance: 'success', autoDismiss: true }
-      );
+      const response = await axios.post<MediaRequest>('/api/v1/request', {
+        mediaId: data?.id,
+        tvdbId: tvdbId ?? data?.externalIds.tvdbId,
+        mediaType: 'tv',
+        is4k,
+        seasons: selectedSeasons,
+        ...overrideParams,
+      });
+
+      if (response.data) {
+        if (onComplete) {
+          onComplete(response.data.media.status);
+        }
+        addToast(
+          <span>
+            {intl.formatMessage(messages.requestSuccess, {
+              title: data?.name,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.requesterror), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
       if (onUpdating) {
         onUpdating(false);
       }
@@ -279,11 +301,24 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     return seasonRequest;
   };
 
-  return (
+  return !data?.externalIds.tvdbId && searchModal.show ? (
+    <SearchByNameModal
+      tvdbId={tvdbId}
+      setTvdbId={setTvdbId}
+      closeModal={() => setSearchModal({ show: false })}
+      loading={!data && !error}
+      onCancel={onCancel}
+      modalTitle={intl.formatMessage(
+        is4k ? messages.request4ktitle : messages.requesttitle,
+        { title: data?.name }
+      )}
+      tmdbId={tmdbId}
+    />
+  ) : (
     <Modal
       loading={!data && !error}
       backgroundClickable
-      onCancel={onCancel}
+      onCancel={tvdbId ? () => setSearchModal({ show: true }) : onCancel}
       onOk={() => (editRequest ? updateRequest() : sendRequest())}
       title={intl.formatMessage(
         is4k ? messages.request4ktitle : messages.requesttitle,
@@ -302,6 +337,11 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       okButtonType={
         editRequest && selectedSeasons.length === 0 ? 'danger' : `primary`
       }
+      cancelText={
+        tvdbId
+          ? intl.formatMessage(messages.backbutton)
+          : intl.formatMessage(globalMessages.cancel)
+      }
       iconSvg={
         <svg
           className="w-6 h-6"