Merge development into master

1 files changed, 94 insertions, 93 deletions

diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index b51614770..8e318d7ad 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -1,37 +1,35 @@
-import { useMovieSubtitleModification } from "@/apis/hooks";
-import { useModals, withModal } from "@/modules/modals";
-import { TaskGroup, task } from "@/modules/task";
-import { useTableStyles } from "@/styles";
-import { useArrayAction, useSelectorOptions } from "@/utilities";
-import FormUtils from "@/utilities/form";
-import {
-  useLanguageProfileBy,
-  useProfileItemsToLanguages,
-} from "@/utilities/languages";
-import {
-  faCheck,
-  faCircleNotch,
-  faInfoCircle,
-  faTimes,
-  faTrash,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FunctionComponent, useEffect, useMemo } from "react";
 import {
   Button,
   Checkbox,
-  createStyles,
   Divider,
   MantineColor,
   Stack,
   Text,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
+import {
+  faCheck,
+  faCircleNotch,
+  faInfoCircle,
+  faTimes,
+  faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ColumnDef } from "@tanstack/react-table";
 import { isString } from "lodash";
-import { FunctionComponent, useEffect, useMemo } from "react";
-import { Column } from "react-table";
-import TextPopover from "../TextPopover";
-import { Action, Selector } from "../inputs";
-import { SimpleTable } from "../tables";
+import { useMovieSubtitleModification } from "@/apis/hooks";
+import { Action, Selector } from "@/components/inputs";
+import SimpleTable from "@/components/tables/SimpleTable";
+import TextPopover from "@/components/TextPopover";
+import { useModals, withModal } from "@/modules/modals";
+import { task, TaskGroup } from "@/modules/task";
+import { useArrayAction, useSelectorOptions } from "@/utilities";
+import FormUtils from "@/utilities/form";
+import {
+  useLanguageProfileBy,
+  useProfileItemsToLanguages,
+} from "@/utilities/languages";
 
 type SubtitleFile = {
   file: File;
@@ -79,21 +77,12 @@ interface Props {
   onComplete?: () => void;
 }
 
-const useStyles = createStyles((theme) => {
-  return {
-    wrapper: {
-      overflowWrap: "anywhere",
-    },
-  };
-});
-
 const MovieUploadForm: FunctionComponent<Props> = ({
   files,
   movie,
   onComplete,
 }) => {
   const modals = useModals();
-  const { classes } = useStyles();
 
   const profile = useLanguageProfileBy(movie.profileId);
 
@@ -154,63 +143,77 @@ const MovieUploadForm: FunctionComponent<Props> = ({
     });
   });
 
-  const columns = useMemo<Column<SubtitleFile>[]>(
-    () => [
-      {
-        accessor: "validateResult",
-        Cell: ({ cell: { value } }) => {
-          const icon = useMemo(() => {
-            switch (value?.state) {
-              case "valid":
-                return faCheck;
-              case "warning":
-                return faInfoCircle;
-              case "error":
-                return faTimes;
-              default:
-                return faCircleNotch;
-            }
-          }, [value?.state]);
+  const ValidateResultCell = ({
+    validateResult,
+  }: {
+    validateResult: SubtitleValidateResult | undefined;
+  }) => {
+    const icon = useMemo(() => {
+      switch (validateResult?.state) {
+        case "valid":
+          return faCheck;
+        case "warning":
+          return faInfoCircle;
+        case "error":
+          return faTimes;
+        default:
+          return faCircleNotch;
+      }
+    }, [validateResult?.state]);
 
-          const color = useMemo<MantineColor | undefined>(() => {
-            switch (value?.state) {
-              case "valid":
-                return "green";
-              case "warning":
-                return "yellow";
-              case "error":
-                return "red";
-              default:
-                return undefined;
-            }
-          }, [value?.state]);
+    const color = useMemo<MantineColor | undefined>(() => {
+      switch (validateResult?.state) {
+        case "valid":
+          return "green";
+        case "warning":
+          return "yellow";
+        case "error":
+          return "red";
+        default:
+          return undefined;
+      }
+    }, [validateResult?.state]);
 
-          return (
-            <TextPopover text={value?.messages}>
-              <Text color={color} inline>
-                <FontAwesomeIcon icon={icon}></FontAwesomeIcon>
-              </Text>
-            </TextPopover>
-          );
+    return (
+      <TextPopover text={validateResult?.messages}>
+        <Text c={color} inline>
+          <FontAwesomeIcon icon={icon} />
+        </Text>
+      </TextPopover>
+    );
+  };
+
+  const columns = useMemo<ColumnDef<SubtitleFile>[]>(
+    () => [
+      {
+        id: "validateResult",
+        cell: ({
+          row: {
+            original: { validateResult },
+          },
+        }) => {
+          return <ValidateResultCell validateResult={validateResult} />;
         },
       },
       {
-        Header: "File",
+        header: "File",
         id: "filename",
-        accessor: "file",
-        Cell: ({ value }) => {
-          const { classes } = useTableStyles();
-
-          return <Text className={classes.primary}>{value.name}</Text>;
+        accessorKey: "file",
+        cell: ({
+          row: {
+            original: { file },
+          },
+        }) => {
+          return <Text className="table-primary">{file.name}</Text>;
         },
       },
       {
-        Header: "Forced",
-        accessor: "forced",
-        Cell: ({ row: { original, index }, value }) => {
+        header: "Forced",
+        accessorKey: "forced",
+        cell: ({ row: { original, index } }) => {
           return (
             <Checkbox
-              checked={value}
+              checked={original.forced}
               onChange={({ currentTarget: { checked } }) => {
                 action.mutate(index, { ...original, forced: checked });
               }}
@@ -219,12 +222,12 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         },
       },
       {
-        Header: "HI",
-        accessor: "hi",
-        Cell: ({ row: { original, index }, value }) => {
+        header: "HI",
+        accessorKey: "hi",
+        cell: ({ row: { original, index } }) => {
           return (
             <Checkbox
-              checked={value}
+              checked={original.hi}
               onChange={({ currentTarget: { checked } }) => {
                 action.mutate(index, { ...original, hi: checked });
               }}
@@ -233,15 +236,14 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         },
       },
       {
-        Header: "Language",
-        accessor: "language",
-        Cell: ({ row: { original, index }, value }) => {
-          const { classes } = useTableStyles();
+        header: "Language",
+        accessorKey: "language",
+        cell: ({ row: { original, index } }) => {
           return (
             <Selector
               {...languageOptions}
-              className={classes.select}
-              value={value}
+              className="table-long-break"
+              value={original.language}
               onChange={(item) => {
                 action.mutate(index, { ...original, language: item });
               }}
@@ -251,13 +253,12 @@ const MovieUploadForm: FunctionComponent<Props> = ({
       },
       {
         id: "action",
-        accessor: "file",
-        Cell: ({ row: { index } }) => {
+        cell: ({ row: { index } }) => {
           return (
             <Action
               label="Remove"
               icon={faTrash}
-              color="red"
+              c="red"
               onClick={() => action.remove(index)}
             ></Action>
           );
@@ -289,7 +290,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         modals.closeSelf();
       })}
     >
-      <Stack className={classes.wrapper}>
+      <Stack className="table-long-break">
         <SimpleTable columns={columns} data={form.values.files}></SimpleTable>
         <Divider></Divider>
         <Button type="submit">Upload</Button>