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

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

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"