From f05daa8223d7b95e2f1c95d11a88558111ff512b Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Sun, 22 Aug 2021 20:03:36 +0800
Subject: [PATCH] no log: Remove loose object from all tables

---
 frontend/src/@types/react-table.d.ts          |  3 +-
 frontend/src/DisplayItem/Episodes/table.tsx   | 10 +++----
 frontend/src/DisplayItem/Movies/index.tsx     | 20 +++++--------
 frontend/src/DisplayItem/Series/index.tsx     | 19 +++++-------
 .../generic/BaseItemView/table.tsx            |  6 +---
 frontend/src/Settings/Languages/modal.tsx     | 22 +++++++-------
 frontend/src/Settings/Languages/table.tsx     |  8 ++---
 .../src/Settings/components/pathMapper.tsx    | 14 ++++-----
 frontend/src/System/Logs/table.tsx            | 10 ++-----
 frontend/src/Wanted/Movies/index.tsx          |  4 +--
 frontend/src/Wanted/Series/index.tsx          |  2 +-
 .../components/modals/SeriesUploadModal.tsx   | 29 +++++++------------
 12 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/frontend/src/@types/react-table.d.ts b/frontend/src/@types/react-table.d.ts
index 05bb31cf3..272639da3 100644
--- a/frontend/src/@types/react-table.d.ts
+++ b/frontend/src/@types/react-table.d.ts
@@ -51,8 +51,7 @@ declare module "react-table" {
 
   interface CustomTableProps<D extends Record<string, unknown>>
     extends useSelectionProps<D> {
-    externalUpdate?: TableUpdater<D>;
-    loose?: any[];
+    update?: TableUpdater<D>;
   }
 
   interface CustomTableState<D extends Record<string, unknown>>
diff --git a/frontend/src/DisplayItem/Episodes/table.tsx b/frontend/src/DisplayItem/Episodes/table.tsx
index a7dc02036..a10bc7084 100644
--- a/frontend/src/DisplayItem/Episodes/table.tsx
+++ b/frontend/src/DisplayItem/Episodes/table.tsx
@@ -147,28 +147,28 @@ const Table: FunctionComponent<Props> = ({
       {
         Header: "Actions",
         accessor: "sonarrEpisodeId",
-        Cell: ({ row, externalUpdate }) => {
+        Cell: ({ row, update }) => {
           return (
             <ButtonGroup>
               <ActionButton
                 icon={faUser}
                 disabled={serie.content?.profileId === null || disabled}
                 onClick={() => {
-                  externalUpdate && externalUpdate(row, "manual-search");
+                  update && update(row, "manual-search");
                 }}
               ></ActionButton>
               <ActionButton
                 icon={faHistory}
                 disabled={disabled}
                 onClick={() => {
-                  externalUpdate && externalUpdate(row, "history");
+                  update && update(row, "history");
                 }}
               ></ActionButton>
               <ActionButton
                 icon={faBriefcase}
                 disabled={disabled}
                 onClick={() => {
-                  externalUpdate && externalUpdate(row, "tools");
+                  update && update(row, "tools");
                 }}
               ></ActionButton>
             </ButtonGroup>
@@ -206,7 +206,7 @@ const Table: FunctionComponent<Props> = ({
           <GroupTable
             columns={columns}
             data={content}
-            externalUpdate={updateRow}
+            update={updateRow}
             initialState={{
               sortBy: [
                 { id: "season", desc: true },
diff --git a/frontend/src/DisplayItem/Movies/index.tsx b/frontend/src/DisplayItem/Movies/index.tsx
index d9c2fbe1f..8ca97226a 100644
--- a/frontend/src/DisplayItem/Movies/index.tsx
+++ b/frontend/src/DisplayItem/Movies/index.tsx
@@ -6,7 +6,7 @@ import { Badge } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { Column } from "react-table";
 import { movieUpdateAll, movieUpdateByRange } from "../../@redux/actions";
-import { useMovieEntities } from "../../@redux/hooks";
+import { useLanguageProfiles, useMovieEntities } from "../../@redux/hooks";
 import { useReduxAction } from "../../@redux/hooks/base";
 import { MoviesApi } from "../../apis";
 import { ActionBadge, LanguageText, TextPopover } from "../../components";
@@ -18,6 +18,8 @@ interface Props {}
 const MovieView: FunctionComponent<Props> = () => {
   const movies = useMovieEntities();
   const loader = useReduxAction(movieUpdateByRange);
+  const profiles = useLanguageProfiles();
+
   const columns: Column<Item.Movie>[] = useMemo<Column<Item.Movie>[]>(
     () => [
       {
@@ -67,14 +69,8 @@ const MovieView: FunctionComponent<Props> = () => {
       {
         Header: "Languages Profile",
         accessor: "profileId",
-        Cell: ({ value, loose }) => {
-          if (loose) {
-            // Define in generic/BaseItemView/table.tsx
-            const profiles = loose[0] as Language.Profile[];
-            return profiles.find((v) => v.profileId === value)?.name ?? null;
-          } else {
-            return null;
-          }
+        Cell: ({ value }) => {
+          return profiles?.find((v) => v.profileId === value)?.name ?? null;
         },
       },
       {
@@ -97,17 +93,17 @@ const MovieView: FunctionComponent<Props> = () => {
       {
         accessor: "radarrId",
         selectHide: true,
-        Cell: ({ row, value, externalUpdate }) => {
+        Cell: ({ row, update }) => {
           return (
             <ActionBadge
               icon={faWrench}
-              onClick={() => externalUpdate && externalUpdate(row, "edit")}
+              onClick={() => update && update(row, "edit")}
             ></ActionBadge>
           );
         },
       },
     ],
-    []
+    [profiles]
   );
 
   return (
diff --git a/frontend/src/DisplayItem/Series/index.tsx b/frontend/src/DisplayItem/Series/index.tsx
index 81f37c021..53d0da7e3 100644
--- a/frontend/src/DisplayItem/Series/index.tsx
+++ b/frontend/src/DisplayItem/Series/index.tsx
@@ -4,7 +4,7 @@ import { Badge, ProgressBar } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { Column } from "react-table";
 import { seriesUpdateAll, seriesUpdateByRange } from "../../@redux/actions";
-import { useSerieEntities } from "../../@redux/hooks";
+import { useLanguageProfiles, useSerieEntities } from "../../@redux/hooks";
 import { useReduxAction } from "../../@redux/hooks/base";
 import { SeriesApi } from "../../apis";
 import { ActionBadge } from "../../components";
@@ -16,6 +16,7 @@ interface Props {}
 const SeriesView: FunctionComponent<Props> = () => {
   const series = useSerieEntities();
   const loader = useReduxAction(seriesUpdateByRange);
+  const profiles = useLanguageProfiles();
   const columns: Column<Item.Series>[] = useMemo<Column<Item.Series>[]>(
     () => [
       {
@@ -53,14 +54,8 @@ const SeriesView: FunctionComponent<Props> = () => {
       {
         Header: "Languages Profile",
         accessor: "profileId",
-        Cell: ({ value, loose }) => {
-          if (loose) {
-            // Define in generic/BaseItemView/table.tsx
-            const profiles = loose[0] as Language.Profile[];
-            return profiles.find((v) => v.profileId === value)?.name ?? null;
-          } else {
-            return null;
-          }
+        Cell: ({ value }) => {
+          return profiles?.find((v) => v.profileId === value)?.name ?? null;
         },
       },
       {
@@ -98,17 +93,17 @@ const SeriesView: FunctionComponent<Props> = () => {
       {
         accessor: "sonarrSeriesId",
         selectHide: true,
-        Cell: ({ row, externalUpdate }) => (
+        Cell: ({ row, update }) => (
           <ActionBadge
             icon={faWrench}
             onClick={() => {
-              externalUpdate && externalUpdate(row, "edit");
+              update && update(row, "edit");
             }}
           ></ActionBadge>
         ),
       },
     ],
-    []
+    [profiles]
   );
 
   return (
diff --git a/frontend/src/DisplayItem/generic/BaseItemView/table.tsx b/frontend/src/DisplayItem/generic/BaseItemView/table.tsx
index 72c9f234b..a06b66a54 100644
--- a/frontend/src/DisplayItem/generic/BaseItemView/table.tsx
+++ b/frontend/src/DisplayItem/generic/BaseItemView/table.tsx
@@ -2,7 +2,6 @@ import { uniqBy } from "lodash";
 import React, { useCallback, useMemo } from "react";
 import { TableOptions, TableUpdater, useRowSelect } from "react-table";
 import { SharedProps } from ".";
-import { useLanguageProfiles } from "../../../@redux/hooks";
 import {
   AsyncPageTable,
   ItemEditorModal,
@@ -45,12 +44,9 @@ function Table<T extends Item.Base>({
     [dirtyItems, orderList]
   );
 
-  const profiles = useLanguageProfiles();
-
   const options: Partial<TableOptions<T> & TableStyleProps<T>> = {
-    loose: [profiles],
     emptyText: `No ${name} Found`,
-    externalUpdate: updateRow,
+    update: updateRow,
   };
 
   return (
diff --git a/frontend/src/Settings/Languages/modal.tsx b/frontend/src/Settings/Languages/modal.tsx
index d5aaf1f34..92854ef22 100644
--- a/frontend/src/Settings/Languages/modal.tsx
+++ b/frontend/src/Settings/Languages/modal.tsx
@@ -135,7 +135,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
       {
         Header: "Language",
         accessor: "language",
-        Cell: ({ value, row, externalUpdate }) => {
+        Cell: ({ value, row, update }) => {
           const code = value;
           const item = row.original;
           const lang = useMemo(
@@ -150,7 +150,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
                 onChange={(l) => {
                   if (l) {
                     item.language = l.code2;
-                    externalUpdate && externalUpdate(row, item);
+                    update && update(row, item);
                   }
                 }}
               ></LanguageSelector>
@@ -161,7 +161,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
       {
         Header: "Forced",
         accessor: "forced",
-        Cell: ({ row, value, externalUpdate }) => {
+        Cell: ({ row, value, update }) => {
           const item = row.original;
           return (
             <Form.Check
@@ -170,7 +170,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
               checked={value === "True"}
               onChange={(v) => {
                 item.forced = v.target.checked ? "True" : "False";
-                externalUpdate && externalUpdate(row, item);
+                update && update(row, item);
               }}
             ></Form.Check>
           );
@@ -179,7 +179,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
       {
         Header: "HI",
         accessor: "hi",
-        Cell: ({ row, value, externalUpdate }) => {
+        Cell: ({ row, value, update }) => {
           const item = row.original;
           return (
             <Form.Check
@@ -188,7 +188,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
               checked={value === "True"}
               onChange={(v) => {
                 item.hi = v.target.checked ? "True" : "False";
-                externalUpdate && externalUpdate(row, item);
+                update && update(row, item);
               }}
             ></Form.Check>
           );
@@ -197,7 +197,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
       {
         Header: "Exclude Audio",
         accessor: "audio_exclude",
-        Cell: ({ row, value, externalUpdate }) => {
+        Cell: ({ row, value, update }) => {
           const item = row.original;
           return (
             <Form.Check
@@ -206,7 +206,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
               checked={value === "True"}
               onChange={(v) => {
                 item.audio_exclude = v.target.checked ? "True" : "False";
-                externalUpdate && externalUpdate(row, item);
+                update && update(row, item);
               }}
             ></Form.Check>
           );
@@ -215,11 +215,11 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
       {
         id: "action",
         accessor: "id",
-        Cell: ({ row, externalUpdate }) => {
+        Cell: ({ row, update }) => {
           return (
             <ActionButton
               icon={faTrash}
-              onClick={() => externalUpdate && externalUpdate(row)}
+              onClick={() => update && update(row)}
             ></ActionButton>
           );
         },
@@ -245,7 +245,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
           responsive={false}
           columns={columns}
           data={current.items}
-          externalUpdate={updateRow}
+          update={updateRow}
         ></SimpleTable>
         <Button block variant="light" onClick={addItem}>
           Add
diff --git a/frontend/src/Settings/Languages/table.tsx b/frontend/src/Settings/Languages/table.tsx
index bbc7bf63a..4547e3198 100644
--- a/frontend/src/Settings/Languages/table.tsx
+++ b/frontend/src/Settings/Languages/table.tsx
@@ -96,7 +96,7 @@ const Table: FunctionComponent = () => {
       },
       {
         accessor: "profileId",
-        Cell: ({ row, externalUpdate }) => {
+        Cell: ({ row, update }) => {
           const profile = row.original;
 
           return (
@@ -104,12 +104,12 @@ const Table: FunctionComponent = () => {
               <ActionButton
                 icon={faWrench}
                 onClick={() => {
-                  externalUpdate && externalUpdate(row, profile);
+                  update && update(row, profile);
                 }}
               ></ActionButton>
               <ActionButton
                 icon={faTrash}
-                onClick={() => externalUpdate && externalUpdate(row)}
+                onClick={() => update && update(row)}
               ></ActionButton>
             </ButtonGroup>
           );
@@ -126,7 +126,7 @@ const Table: FunctionComponent = () => {
       <SimpleTable
         columns={columns}
         data={profiles}
-        externalUpdate={updateRow}
+        update={updateRow}
       ></SimpleTable>
       <Button
         block
diff --git a/frontend/src/Settings/components/pathMapper.tsx b/frontend/src/Settings/components/pathMapper.tsx
index 7ba17e001..b94d1366f 100644
--- a/frontend/src/Settings/components/pathMapper.tsx
+++ b/frontend/src/Settings/components/pathMapper.tsx
@@ -99,7 +99,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
       {
         Header: capitalize(type),
         accessor: "from",
-        Cell: ({ value, row, externalUpdate }) => (
+        Cell: ({ value, row, update }) => (
           <FileBrowser
             drop="up"
             defaultValue={value}
@@ -107,7 +107,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
             onChange={(path) => {
               const newItem = { ...row.original };
               newItem.from = path;
-              externalUpdate && externalUpdate(row, newItem);
+              update && update(row, newItem);
             }}
           ></FileBrowser>
         ),
@@ -122,7 +122,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
       {
         Header: "Bazarr",
         accessor: "to",
-        Cell: ({ value, row, externalUpdate }) => (
+        Cell: ({ value, row, update }) => (
           <FileBrowser
             drop="up"
             defaultValue={value}
@@ -130,7 +130,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
             onChange={(path) => {
               const newItem = { ...row.original };
               newItem.to = path;
-              externalUpdate && externalUpdate(row, newItem);
+              update && update(row, newItem);
             }}
           ></FileBrowser>
         ),
@@ -138,11 +138,11 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
       {
         id: "action",
         accessor: "to",
-        Cell: ({ row, externalUpdate }) => (
+        Cell: ({ row, update }) => (
           <ActionButton
             icon={faTrash}
             onClick={() => {
-              externalUpdate && externalUpdate(row);
+              update && update(row);
             }}
           ></ActionButton>
         ),
@@ -159,7 +159,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
           responsive={false}
           columns={columns}
           data={data}
-          externalUpdate={updateCell}
+          update={updateCell}
         ></SimpleTable>
         <Button block variant="light" onClick={addRow}>
           Add
diff --git a/frontend/src/System/Logs/table.tsx b/frontend/src/System/Logs/table.tsx
index e9f0dba8c..9805040cd 100644
--- a/frontend/src/System/Logs/table.tsx
+++ b/frontend/src/System/Logs/table.tsx
@@ -59,12 +59,12 @@ const Table: FunctionComponent<Props> = ({ logs }) => {
       },
       {
         accessor: "exception",
-        Cell: ({ row, value, externalUpdate }) => {
+        Cell: ({ row, value, update }) => {
           if (!isUndefined(value)) {
             return (
               <ActionButton
                 icon={faLayerGroup}
-                onClick={() => externalUpdate && externalUpdate(row, value)}
+                onClick={() => update && update(row, value)}
               ></ActionButton>
             );
           } else {
@@ -78,11 +78,7 @@ const Table: FunctionComponent<Props> = ({ logs }) => {
 
   return (
     <React.Fragment>
-      <PageTable
-        columns={columns}
-        data={logs}
-        externalUpdate={show}
-      ></PageTable>
+      <PageTable columns={columns} data={logs} update={show}></PageTable>
       <SystemLogModal size="xl" modalKey="system-log"></SystemLogModal>
     </React.Fragment>
   );
diff --git a/frontend/src/Wanted/Movies/index.tsx b/frontend/src/Wanted/Movies/index.tsx
index 2d33b144b..6fc080f30 100644
--- a/frontend/src/Wanted/Movies/index.tsx
+++ b/frontend/src/Wanted/Movies/index.tsx
@@ -41,7 +41,7 @@ const WantedMoviesView: FunctionComponent<Props> = () => {
       {
         Header: "Missing",
         accessor: "missing_subtitles",
-        Cell: ({ row, value, externalUpdate }) => {
+        Cell: ({ row, value, update }) => {
           const wanted = row.original;
           const hi = wanted.hearing_impaired;
           const movieid = wanted.radarrId;
@@ -59,7 +59,7 @@ const WantedMoviesView: FunctionComponent<Props> = () => {
                   forced: false,
                 })
               }
-              onSuccess={() => externalUpdate && externalUpdate(row, movieid)}
+              onSuccess={() => update && update(row, movieid)}
             >
               <LanguageText className="pr-1" text={item}></LanguageText>
               <FontAwesomeIcon size="sm" icon={faSearch}></FontAwesomeIcon>
diff --git a/frontend/src/Wanted/Series/index.tsx b/frontend/src/Wanted/Series/index.tsx
index 57d62290f..d8e8dad37 100644
--- a/frontend/src/Wanted/Series/index.tsx
+++ b/frontend/src/Wanted/Series/index.tsx
@@ -48,7 +48,7 @@ const WantedSeriesView: FunctionComponent<Props> = () => {
       {
         Header: "Missing",
         accessor: "missing_subtitles",
-        Cell: ({ row, externalUpdate: update, value }) => {
+        Cell: ({ row, update, value }) => {
           const wanted = row.original;
           const hi = wanted.hearing_impaired;
           const seriesid = wanted.sonarrSeriesId;
diff --git a/frontend/src/components/modals/SeriesUploadModal.tsx b/frontend/src/components/modals/SeriesUploadModal.tsx
index 34e562e2f..7de4545fc 100644
--- a/frontend/src/components/modals/SeriesUploadModal.tsx
+++ b/frontend/src/components/modals/SeriesUploadModal.tsx
@@ -215,26 +215,21 @@ const SeriesUploadModal: FunctionComponent<SerieProps & BaseModalProps> = ({
         Header: "Episode",
         accessor: "instance",
         className: "vw-1",
-        Cell: ({ value, loose, row, externalUpdate }) => {
-          const uploading = loose![0] as boolean;
-          const availables = loose![1] as Item.Episode[];
-
-          const options = availables.map<SelectorOption<Item.Episode>>(
-            (ep) => ({
-              label: `(${ep.season}x${ep.episode}) ${ep.title}`,
-              value: ep,
-            })
-          );
+        Cell: ({ value, row, update }) => {
+          const options = episodes.map<SelectorOption<Item.Episode>>((ep) => ({
+            label: `(${ep.season}x${ep.episode}) ${ep.title}`,
+            value: ep,
+          }));
 
           const change = useCallback(
             (ep: Nullable<Item.Episode>) => {
               if (ep) {
                 const newInfo = { ...row.original };
                 newInfo.instance = ep;
-                externalUpdate && externalUpdate(row, newInfo);
+                update && update(row, newInfo);
               }
             },
-            [row, externalUpdate]
+            [row, update]
           );
 
           return (
@@ -249,15 +244,14 @@ const SeriesUploadModal: FunctionComponent<SerieProps & BaseModalProps> = ({
       },
       {
         accessor: "file",
-        Cell: ({ row, externalUpdate, loose }) => {
-          const [uploading] = loose!;
+        Cell: ({ row, update }) => {
           return (
             <Button
               size="sm"
               variant="light"
               disabled={uploading}
               onClick={() => {
-                externalUpdate && externalUpdate(row);
+                update && update(row);
               }}
             >
               <FontAwesomeIcon icon={faTrash}></FontAwesomeIcon>
@@ -266,7 +260,7 @@ const SeriesUploadModal: FunctionComponent<SerieProps & BaseModalProps> = ({
         },
       },
     ],
-    [language?.code2]
+    [language?.code2, episodes, uploading]
   );
 
   const updateItem = useCallback<TableUpdater<PendingSubtitle>>(
@@ -347,9 +341,8 @@ const SeriesUploadModal: FunctionComponent<SerieProps & BaseModalProps> = ({
           <SimpleTable
             columns={columns}
             data={pending}
-            loose={[uploading, episodes]}
             responsive={false}
-            externalUpdate={updateItem}
+            update={updateItem}
           ></SimpleTable>
         </div>
       </Container>