Add forced and hi checkbox to subtitle upload modal

frontend/src/components/modals/MovieUploadModal.tsx

@@ -1,11 +1,8 @@
-import React, { FunctionComponent, useCallback, useMemo } from "react";
-import { Form } from "react-bootstrap";
-import { Column } from "react-table";
+import React, { FunctionComponent, useCallback } from "react";
 import { dispatchTask } from "../../@modules/task";
 import { createTask } from "../../@modules/task/utilities";
 import { useProfileBy, useProfileItemsToLanguages } from "../../@redux/hooks";
 import { MoviesApi } from "../../apis";
-import { BuildKey } from "../../utilities";
 import { BaseModalProps } from "./BaseModal";
 import { useModalInformation } from "./hooks";
 import SubtitleUploadModal, {
@@ -13,9 +10,7 @@ import SubtitleUploadModal, {
   Validator,
 } from "./SubtitleUploadModal";
 
-interface Payload {
-  forced: boolean;
-}
+interface Payload {}
 
 export const TaskGroupName = "Uploading Subtitles...";
 
@@ -67,11 +62,7 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
       const tasks = items
         .filter((v) => v.language !== null)
         .map((v) => {
-          const {
-            file,
-            language,
-            payload: { forced },
-          } = v;
+          const { file, language, forced, hi } = v;
 
           return createTask(
             file.name,
@@ -79,9 +70,9 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
             MoviesApi.uploadSubtitles.bind(MoviesApi),
             radarrId,
             {
-              file: file,
+              file,
               forced,
-              hi: false,
+              hi,
               language: language!.code2,
             }
           );
@@ -92,39 +83,12 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
     [payload]
   );
 
-  const columns = useMemo<Column<PendingSubtitle<Payload>>[]>(
-    () => [
-      {
-        id: "forced",
-        Header: "Forced",
-        accessor: "payload",
-        Cell: ({ row, value, update }) => {
-          const { original, index } = row;
-          return (
-            <Form.Check
-              custom
-              disabled={original.state === "fetching"}
-              id={BuildKey(index, original.file.name, "forced")}
-              checked={value.forced}
-              onChange={(v) => {
-                const newInfo = { ...row.original };
-                newInfo.payload.forced = v.target.checked;
-                update && update(row, newInfo);
-              }}
-            ></Form.Check>
-          );
-        },
-      },
-    ],
-    []
-  );
-
   return (
     <SubtitleUploadModal
       hideAllLanguages
       initial={{ forced: false }}
       availableLanguages={availableLanguages}
-      columns={columns}
+      columns={[]}
       upload={upload}
       update={update}
       validate={validate}

frontend/src/components/modals/SubtitleUploadModal.tsx

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Container, Form } from "react-bootstrap";
 import { Column, TableUpdater } from "react-table";
 import { LanguageSelector, MessageIcon } from "..";
+import { BuildKey } from "../../utilities";
 import { FileForm } from "../inputs";
 import { SimpleTable } from "../tables";
 import BaseModal, { BaseModalProps } from "./BaseModal";
@@ -20,6 +21,8 @@ export interface PendingSubtitle<P> {
   state: "valid" | "fetching" | "warning" | "error";
   messages: string[];
   language: Language.Info | null;
+  forced: boolean;
+  hi: boolean;
   payload: P;
 }
 
@@ -67,6 +70,8 @@ export default function SubtitleUploadModal<T>(
         state: "fetching",
         messages: [],
         language: initialLanguage,
+        forced: false,
+        hi: false,
         payload: { ...initialRef.current },
       }));
 
@@ -165,7 +170,48 @@ export default function SubtitleUploadModal<T>(
         Header: "File",
         accessor: (d) => d.file.name,
       },
-      ...columns,
+      {
+        id: "hi",
+        Header: "HI",
+        accessor: "hi",
+        Cell: ({ row, value, update }) => {
+          const { original, index } = row;
+          return (
+            <Form.Check
+              custom
+              disabled={original.state === "fetching"}
+              id={BuildKey(index, original.file.name, "hi")}
+              checked={value}
+              onChange={(v) => {
+                const newInfo = { ...row.original };
+                newInfo.hi = v.target.checked;
+                update && update(row, newInfo);
+              }}
+            ></Form.Check>
+          );
+        },
+      },
+      {
+        id: "forced",
+        Header: "Forced",
+        accessor: "forced",
+        Cell: ({ row, value, update }) => {
+          const { original, index } = row;
+          return (
+            <Form.Check
+              custom
+              disabled={original.state === "fetching"}
+              id={BuildKey(index, original.file.name, "forced")}
+              checked={value}
+              onChange={(v) => {
+                const newInfo = { ...row.original };
+                newInfo.forced = v.target.checked;
+                update && update(row, newInfo);
+              }}
+            ></Form.Check>
+          );
+        },
+      },
       {
         id: "language",
         Header: "Language",
@@ -188,6 +234,7 @@ export default function SubtitleUploadModal<T>(
           );
         },
       },
+      ...columns,
       {
         id: "action",
         accessor: "file",