From 28b97d66915f7a7564560684387a2cb784c830d1 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Fri, 20 Sep 2024 23:00:50 +0900
Subject: [PATCH] feat: Replace dropdown

---
 .../src/components/forms/MovieUploadForm.tsx  | 88 +++++++++++------
 .../src/components/forms/SeriesUploadForm.tsx | 99 +++++++++++--------
 .../forms/uploadFormSelectorTypes.tsx         | 16 +++
 3 files changed, 133 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/components/forms/uploadFormSelectorTypes.tsx

diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index 9046e5049..f7f8f47c5 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -1,9 +1,9 @@
-import { FunctionComponent, useEffect, useMemo } from "react";
+import React, { FunctionComponent, useEffect, useMemo } from "react";
 import {
   Button,
-  Checkbox,
   Divider,
   MantineColor,
+  Select,
   Stack,
   Text,
 } from "@mantine/core";
@@ -19,6 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ColumnDef } from "@tanstack/react-table";
 import { isString, uniqBy } from "lodash";
 import { useMovieSubtitleModification } from "@/apis/hooks";
+import { subtitlesTypeOptions } from "@/components/forms/uploadFormSelectorTypes";
 import { Action, Selector } from "@/components/inputs";
 import SimpleTable from "@/components/tables/SimpleTable";
 import TextPopover from "@/components/TextPopover";
@@ -207,34 +208,6 @@ const MovieUploadForm: FunctionComponent<Props> = ({
           return <Text className="table-primary">{file.name}</Text>;
         },
       },
-      {
-        header: "Forced",
-        accessorKey: "forced",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.forced}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, { ...original, forced: checked });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
-      {
-        header: "HI",
-        accessorKey: "hi",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.hi}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, { ...original, hi: checked });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
       {
         header: "Language",
         accessorKey: "language",
@@ -251,6 +224,61 @@ const MovieUploadForm: FunctionComponent<Props> = ({
           );
         },
       },
+      {
+        header: () => (
+          <Selector
+            options={subtitlesTypeOptions}
+            value={null}
+            placeholder="Type"
+            onChange={(value) => {
+              if (value) {
+                action.update((item) => {
+                  switch (value) {
+                    case "hi":
+                      return { ...item, hi: true, forced: false };
+                    case "forced":
+                      return { ...item, hi: false, forced: true };
+                    case "normal":
+                      return { ...item, hi: false, forced: false };
+                    default:
+                      return item;
+                  }
+                });
+              }
+            }}
+          ></Selector>
+        ),
+        accessorKey: "type",
+        cell: ({ row: { original, index } }) => {
+          return (
+            <Select
+              value={
+                subtitlesTypeOptions.find((s) => {
+                  if (original.hi) {
+                    return s.value === "hi";
+                  }
+
+                  if (original.forced) {
+                    return s.value === "forced";
+                  }
+
+                  return s.value === "normal";
+                })?.value
+              }
+              data={subtitlesTypeOptions}
+              onChange={(value) => {
+                if (value) {
+                  action.mutate(index, {
+                    ...original,
+                    hi: value === "hi",
+                    forced: value === "forced",
+                  });
+                }
+              }}
+            ></Select>
+          );
+        },
+      },
       {
         id: "action",
         cell: ({ row: { index } }) => {
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index 9b5ca9e3f..9ae6308c9 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/frontend/src/components/forms/SeriesUploadForm.tsx
@@ -1,9 +1,9 @@
-import { FunctionComponent, useEffect, useMemo } from "react";
+import React, { FunctionComponent, useEffect, useMemo } from "react";
 import {
   Button,
-  Checkbox,
   Divider,
   MantineColor,
+  Select,
   Stack,
   Text,
 } from "@mantine/core";
@@ -23,6 +23,7 @@ import {
   useEpisodeSubtitleModification,
   useSubtitleInfos,
 } from "@/apis/hooks";
+import { subtitlesTypeOptions } from "@/components/forms/uploadFormSelectorTypes";
 import { Action, Selector } from "@/components/inputs";
 import SimpleTable from "@/components/tables/SimpleTable";
 import TextPopover from "@/components/TextPopover";
@@ -235,42 +236,6 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
           return <Text className="table-primary">{name}</Text>;
         },
       },
-      {
-        header: "Forced",
-        accessorKey: "forced",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.forced}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, {
-                  ...original,
-                  forced: checked,
-                  hi: checked ? false : original.hi,
-                });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
-      {
-        header: "HI",
-        accessorKey: "hi",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.hi}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, {
-                  ...original,
-                  hi: checked,
-                  forced: checked ? false : original.forced,
-                });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
       {
         header: () => (
           <Selector
@@ -280,8 +245,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
             onChange={(value) => {
               if (value) {
                 action.update((item) => {
-                  item.language = value;
-                  return item;
+                  return { ...item, language: value };
                 });
               }
             }}
@@ -301,6 +265,61 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
           );
         },
       },
+      {
+        header: () => (
+          <Selector
+            options={subtitlesTypeOptions}
+            value={null}
+            placeholder="Type"
+            onChange={(value) => {
+              if (value) {
+                action.update((item) => {
+                  switch (value) {
+                    case "hi":
+                      return { ...item, hi: true, forced: false };
+                    case "forced":
+                      return { ...item, hi: false, forced: true };
+                    case "normal":
+                      return { ...item, hi: false, forced: false };
+                    default:
+                      return item;
+                  }
+                });
+              }
+            }}
+          ></Selector>
+        ),
+        accessorKey: "type",
+        cell: ({ row: { original, index } }) => {
+          return (
+            <Select
+              value={
+                subtitlesTypeOptions.find((s) => {
+                  if (original.hi) {
+                    return s.value === "hi";
+                  }
+
+                  if (original.forced) {
+                    return s.value === "forced";
+                  }
+
+                  return s.value === "normal";
+                })?.value
+              }
+              data={subtitlesTypeOptions}
+              onChange={(value) => {
+                if (value) {
+                  action.mutate(index, {
+                    ...original,
+                    hi: value === "hi",
+                    forced: value === "forced",
+                  });
+                }
+              }}
+            ></Select>
+          );
+        },
+      },
       {
         id: "episode",
         header: "Episode",
diff --git a/frontend/src/components/forms/uploadFormSelectorTypes.tsx b/frontend/src/components/forms/uploadFormSelectorTypes.tsx
new file mode 100644
index 000000000..168cdddb1
--- /dev/null
+++ b/frontend/src/components/forms/uploadFormSelectorTypes.tsx
@@ -0,0 +1,16 @@
+import { SelectorOption } from "@/components";
+
+export const subtitlesTypeOptions: SelectorOption<string>[] = [
+  {
+    label: "Normal",
+    value: "normal",
+  },
+  {
+    label: "Hearing-Impaired",
+    value: "hi",
+  },
+  {
+    label: "Forced",
+    value: "forced",
+  },
+];