fix(blacklist): handle invalid keywords gracefully (#1815)

* fix(blacklist): handle invalid keywords gracefully

* fix(blacklist): only remove keywords on 404 errors

* fix(blacklist): remove non-null assertion and add proper type annotation

* refactor(blacklist): return null instead of 404 for missing keywords

* fix(blacklist): add type annotation for validKeywords

* fix(selector): update type annotation for validKeywords

src/components/BlacklistedTagsBadge/index.tsx

@@ -29,14 +29,10 @@ const BlacklistedTagsBadge = ({ data }: BlacklistedTagsBadgeProps) => {
     const keywordIds = data.blacklistedTags.slice(1, -1).split(',');
     Promise.all(
       keywordIds.map(async (keywordId) => {
-        try {
-          const { data } = await axios.get<Keyword>(
-            `/api/v1/keyword/${keywordId}`
-          );
-          return data.name;
-        } catch (err) {
-          return '';
-        }
+        const { data } = await axios.get<Keyword | null>(
+          `/api/v1/keyword/${keywordId}`
+        );
+        return data?.name || `[Invalid: ${keywordId}]`;
       })
     ).then((keywords) => {
       setTagNamesBlacklistedFor(keywords.join(', '));

src/components/BlacklistedTagsSelector/index.tsx

@@ -5,7 +5,10 @@ import { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
 import { ArrowDownIcon } from '@heroicons/react/24/solid';
-import type { TmdbKeywordSearchResponse } from '@server/api/themoviedb/interfaces';
+import type {
+  TmdbKeyword,
+  TmdbKeywordSearchResponse,
+} from '@server/api/themoviedb/interfaces';
 import type { Keyword } from '@server/models/common';
 import axios from 'axios';
 import { useFormikContext } from 'formik';
@@ -124,15 +127,19 @@ const ControlledKeywordSelector = ({
 
       const keywords = await Promise.all(
         defaultValue.split(',').map(async (keywordId) => {
-          const { data } = await axios.get<Keyword>(
+          const { data } = await axios.get<Keyword | null>(
             `/api/v1/keyword/${keywordId}`
           );
           return data;
         })
       );
 
+      const validKeywords: TmdbKeyword[] = keywords.filter(
+        (keyword): keyword is TmdbKeyword => keyword !== null
+      );
+
       onChange(
-        keywords.map((keyword) => ({
+        validKeywords.map((keyword) => ({
           label: keyword.name,
           value: keyword.id,
         }))

src/components/Discover/CreateSlider/index.tsx

@@ -77,16 +77,19 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
 
         const keywords = await Promise.all(
           slider.data.split(',').map(async (keywordId) => {
-            const keyword = await axios.get<Keyword>(
+            const keyword = await axios.get<Keyword | null>(
               `/api/v1/keyword/${keywordId}`
             );
-
             return keyword.data;
           })
         );
 
+        const validKeywords: Keyword[] = keywords.filter(
+          (keyword): keyword is Keyword => keyword !== null
+        );
+
         setDefaultDataValue(
-          keywords.map((keyword) => ({
+          validKeywords.map((keyword) => ({
             label: keyword.name,
             value: keyword.id,
           }))

src/components/Selector/index.tsx

@@ -309,16 +309,19 @@ export const KeywordSelector = ({
 
       const keywords = await Promise.all(
         defaultValue.split(',').map(async (keywordId) => {
-          const keyword = await axios.get<Keyword>(
+          const keyword = await axios.get<Keyword | null>(
             `/api/v1/keyword/${keywordId}`
           );
-
           return keyword.data;
         })
       );
 
+      const validKeywords: Keyword[] = keywords.filter(
+        (keyword): keyword is Keyword => keyword !== null
+      );
+
       setDefaultDataValue(
-        keywords.map((keyword) => ({
+        validKeywords.map((keyword) => ({
           label: keyword.name,
           value: keyword.id,
         }))

src/components/Settings/OverrideRule/OverrideRuleTiles.tsx

@@ -113,12 +113,16 @@ const OverrideRuleTiles = ({
           .flat()
           .filter((keywordId) => keywordId)
           .map(async (keywordId) => {
-            const response = await axios.get(`/api/v1/keyword/${keywordId}`);
-            const keyword: Keyword = response.data;
-            return keyword;
+            const response = await axios.get<Keyword | null>(
+              `/api/v1/keyword/${keywordId}`
+            );
+            return response.data;
           })
       );
-      setKeywords(keywords);
+      const validKeywords: Keyword[] = keywords.filter(
+        (keyword): keyword is Keyword => keyword !== null
+      );
+      setKeywords(validKeywords);
       const allUsersFromRules = rules
         .map((rule) => rule.users)
         .filter((users) => users)