Updated tanstack table to v8.x

frontend/package.json

@@ -20,6 +20,7 @@
     "@mantine/modals": "^7.11.0",
     "@mantine/notifications": "^7.11.0",
     "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-table": "^8.19.2",
     "axios": "^1.6.8",
     "braces": "^3.0.3",
     "react": "^18.3.1",
@@ -43,7 +44,6 @@
     "@types/node": "^20.12.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/ui": "^1.2.2",
@@ -61,7 +61,6 @@
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
     "pretty-quick": "^4.0.0",
-    "react-table": "^7.8.0",
     "recharts": "^2.12.6",
     "sass": "^1.74.1",
     "typescript": "^5.4.4",

frontend/src/components/forms/MovieUploadForm.tsx

@@ -1,5 +1,4 @@
 import { FunctionComponent, useEffect, useMemo } from "react";
-import { Column } from "react-table";
 import {
   Button,
   Checkbox,
@@ -17,10 +16,11 @@ import {
   faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ColumnDef } from "@tanstack/react-table";
 import { isString } from "lodash";
 import { useMovieSubtitleModification } from "@/apis/hooks";
 import { Action, Selector } from "@/components/inputs";
-import { SimpleTable } from "@/components/tables";
+import SimpleTable from "@/components/tables/SimpleTable";
 import TextPopover from "@/components/TextPopover";
 import { useModals, withModal } from "@/modules/modals";
 import { task, TaskGroup } from "@/modules/task";
@@ -143,61 +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 c={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 }) => {
-          return <Text className="table-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 });
               }}
@@ -206,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 });
               }}
@@ -220,14 +236,14 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         },
       },
       {
-        Header: "Language",
-        accessor: "language",
-        Cell: ({ row: { original, index }, value }) => {
+        header: "Language",
+        accessorKey: "language",
+        cell: ({ row: { original, index } }) => {
           return (
             <Selector
               {...languageOptions}
               className="table-long-break"
-              value={value}
+              value={original.language}
               onChange={(item) => {
                 action.mutate(index, { ...original, language: item });
               }}
@@ -237,8 +253,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
       },
       {
         id: "action",
-        accessor: "file",
-        Cell: ({ row: { index } }) => {
+        cell: ({ row: { index } }) => {
           return (
             <Action
               label="Remove"