feat: add ability to remove tvdb links

and also make it display all links for a given site, since you want to delete the right link if you have multiple.
ShokoAnime · Nov 14, 2023 · 66b5c50 · 66b5c50
1 parent e2beda1
commit 66b5c50
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 10 deletions.
diff --git a/src/components/Collection/SeriesMetadata.tsx b/src/components/Collection/SeriesMetadata.tsx
@@ -3,10 +3,13 @@ import { mdiCloseCircleOutline, mdiOpenInNew, mdiPencilCircleOutline, mdiPlusCir
 import { Icon } from '@mdi/react';
 
 import Button from '@/components/Input/Button';
+import { useDeleteSeriesTvdbLinkMutation } from '@/core/rtkQuery/splitV3Api/seriesApi';
 
-const MetadataLink = ({ id, site }: { site: string, id: number | number[] }) => {
+const MetadataLink = ({ id, seriesId, site }: { id: number | number[], seriesId: number, site: string }) => {
   const linkId = Array.isArray(id) ? id[0] : id;
 
+  const [disableTvDBTrigger] = useDeleteSeriesTvdbLinkMutation();
+
   const siteLink = useMemo(() => {
     switch (site) {
       case 'AniDB':
@@ -24,6 +27,18 @@ const MetadataLink = ({ id, site }: { site: string, id: number | number[] }) =>
     }
   }, [linkId, site]);
 
+  const canDisable = site === 'TvDB';
+
+  const disableMetadata = () => {
+    switch (site) {
+      case 'TvDB':
+        disableTvDBTrigger({ seriesId, tvdbShowId: linkId }).catch(() => {});
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <div key={site} className="flex justify-between">
       <div className="flex gap-x-4">
@@ -50,7 +65,7 @@ const MetadataLink = ({ id, site }: { site: string, id: number | number[] }) =>
                 <Button disabled>
                   <Icon className="text-panel-icon-action" path={mdiPencilCircleOutline} size={1} />
                 </Button>
-                <Button disabled>
+                <Button disabled={!canDisable} onClick={disableMetadata}>
                   <Icon className="text-panel-icon-danger" path={mdiCloseCircleOutline} size={1} />
                 </Button>
               </>

diff --git a/src/core/rtkQuery/splitV3Api/seriesApi.ts b/src/core/rtkQuery/splitV3Api/seriesApi.ts
@@ -53,6 +53,15 @@ const seriesApi = splitV3Api.injectEndpoints({
       invalidatesTags: ['SeriesUpdated'],
     }),
 
+    deleteSeriesTvdbLink: build.mutation<void, { seriesId: number, tvdbShowId: number }>({
+      query: ({ seriesId, tvdbShowId }) => ({
+        url: `Series/${seriesId}/TvDB`,
+        method: 'DELETE',
+        body: { ID: tvdbShowId },
+      }),
+      invalidatesTags: ['SeriesUpdated', 'SeriesAniDB', 'SeriesEpisodes'],
+    }),
+
     // Get a paginated list of Shoko.Server.API.v3.Models.Shoko.Series without local files, available to the current Shoko.Server.API.v3.Models.Shoko.User.
     getSeriesWithoutFiles: build.query<ListResultType<SeriesType[]>, PaginationType>({
       query: params => ({ url: 'Series/WithoutFiles', params }),
@@ -231,6 +240,7 @@ const seriesApi = splitV3Api.injectEndpoints({
 
 export const {
   useDeleteSeriesMutation,
+  useDeleteSeriesTvdbLinkMutation,
   useGetAniDBRecommendedAnimeQuery,
   useGetAniDBRelatedQuery,
   useGetAniDBSimilarQuery,

diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
@@ -32,6 +32,9 @@ const NextUpEpisode = ({ nextUpEpisode }: { nextUpEpisode: EpisodeType }) => {
   );
 };
 
+// Links
+const MetadataLinks = ['AniDB', 'TMDB', 'TvDB', 'TraktTv'];
+
 const SeriesOverview = () => {
   const { seriesId } = useParams();
 
@@ -44,9 +47,6 @@ const SeriesOverview = () => {
   const similarData = useGetAniDBSimilarQuery({ seriesId: seriesId! }, { skip: !seriesId });
   const similar: SeriesAniDBSimilarType[] = similarData?.data ?? [] as SeriesAniDBSimilarType[];
 
-  // Links
-  const metadataLinks = ['AniDB', 'TMDB', 'TvDB', 'TraktTv'];
-
   if (!seriesId || !series) return null;
 
   return (
@@ -68,11 +68,28 @@ const SeriesOverview = () => {
             transparent
           >
             <div className="flex flex-col gap-y-2">
-              {metadataLinks.map(site => (
-                <div className="rounded border border-panel-border bg-panel-background-alt px-4 py-3" key={site}>
-                  <SeriesMetadata site={site} id={series.IDs[site]} />
-                </div>
-              ))}
+              {MetadataLinks.map((site) => {
+                const idOrIds = series.IDs[site] as number | number[];
+                if (typeof idOrIds === 'number' || idOrIds.length === 0) {
+                  const id = typeof idOrIds === 'number' ? idOrIds : idOrIds[0] || 0;
+                  return (
+                    <div
+                      className="rounded border border-panel-border bg-panel-background-alt px-4 py-3"
+                      key={`${site}-${id}`}
+                    >
+                      <SeriesMetadata site={site} id={idOrIds} seriesId={series.IDs.ID} />
+                    </div>
+                  );
+                }
+                return idOrIds.map(id => (
+                  <div
+                    className="rounded border border-panel-border bg-panel-background-alt px-4 py-3"
+                    key={`${site}-${id}`}
+                  >
+                    <SeriesMetadata site={site} id={id} seriesId={series.IDs.ID} />
+                  </div>
+                ));
+              })}
             </div>
           </ShokoPanel>
         </div>