From 573282863d3b4321be3a23a60a7082baff8c4b39 Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Fri, 28 May 2021 00:14:05 +0800
Subject: [PATCH] Fix subtitle badges display issues in some situations

---
 frontend/src/Movies/Detail/table.tsx   |  8 ++------
 frontend/src/Series/Episodes/table.tsx |  9 ++-------
 frontend/src/utilites/index.ts         | 13 +++++++++++++
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Movies/Detail/table.tsx b/frontend/src/Movies/Detail/table.tsx
index a50b9c82b..0f6b02166 100644
--- a/frontend/src/Movies/Detail/table.tsx
+++ b/frontend/src/Movies/Detail/table.tsx
@@ -1,6 +1,5 @@
 import { faSearch, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { intersectionWith } from "lodash";
 import React, { FunctionComponent, useMemo } from "react";
 import { Badge } from "react-bootstrap";
 import { Column } from "react-table";
@@ -8,6 +7,7 @@ import { useProfileItems } from "../../@redux/hooks";
 import { useShowOnlyDesired } from "../../@redux/hooks/site";
 import { MoviesApi } from "../../apis";
 import { AsyncButton, LanguageText, SimpleTable } from "../../components";
+import { filterSubtitleBy } from "../../utilites";
 
 const missingText = "Missing Subtitles";
 
@@ -109,11 +109,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile }) => {
 
     let raw_subtitles = movie.subtitles;
     if (onlyDesired) {
-      raw_subtitles = intersectionWith(
-        raw_subtitles,
-        profileItems,
-        (l, r) => l.code2 === r.code2
-      );
+      raw_subtitles = filterSubtitleBy(raw_subtitles, profileItems);
     }
 
     return [...raw_subtitles, ...missing];
diff --git a/frontend/src/Series/Episodes/table.tsx b/frontend/src/Series/Episodes/table.tsx
index dd2ad34c1..c449ca8c0 100644
--- a/frontend/src/Series/Episodes/table.tsx
+++ b/frontend/src/Series/Episodes/table.tsx
@@ -6,7 +6,6 @@ import {
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { intersectionWith } from "lodash";
 import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { Badge, ButtonGroup } from "react-bootstrap";
 import { Column, TableUpdater } from "react-table";
@@ -23,7 +22,7 @@ import {
   useShowModal,
 } from "../../components";
 import { ManualSearchModal } from "../../components/modals/ManualSearchModal";
-import { BuildKey } from "../../utilites";
+import { BuildKey, filterSubtitleBy } from "../../utilites";
 import { SubtitleAction } from "./components";
 
 interface Props {
@@ -121,11 +120,7 @@ const Table: FunctionComponent<Props> = ({ episodes, profile }) => {
 
             let raw_subtitles = episode.subtitles;
             if (onlyDesired) {
-              raw_subtitles = intersectionWith(
-                raw_subtitles,
-                profileItems,
-                (l, r) => l.code2 === r.code2
-              );
+              raw_subtitles = filterSubtitleBy(raw_subtitles, profileItems);
             }
 
             const subtitles = raw_subtitles.map((val, idx) => (
diff --git a/frontend/src/utilites/index.ts b/frontend/src/utilites/index.ts
index f4860e171..f41f6e566 100644
--- a/frontend/src/utilites/index.ts
+++ b/frontend/src/utilites/index.ts
@@ -1,3 +1,4 @@
+import { difference, differenceWith } from "lodash";
 import { Dispatch } from "react";
 import { isEpisode, isMovie, isSeries } from "./validate";
 
@@ -107,5 +108,17 @@ export function ScrollToTop() {
   window.scrollTo(0, 0);
 }
 
+export function filterSubtitleBy(
+  subtitles: Subtitle[],
+  languages: Language[]
+): Subtitle[] {
+  const result = differenceWith(
+    subtitles,
+    languages,
+    (a, b) => a.code2 === b.code2
+  );
+  return difference(subtitles, result);
+}
+
 export * from "./hooks";
 export * from "./validate";