From fe09ae9de52c9fa6ba89b4d2d427c78300984d63 Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Fri, 10 Jun 2022 09:35:35 +0800
Subject: [PATCH] Fix a issue when trying to edit profile with cutoff selected

---
 frontend/src/components/forms/ProfileEditForm.tsx | 15 +++++++++++++--
 frontend/src/pages/Movies/Details/index.tsx       | 13 -------------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx
index a18b55017..dae71532d 100644
--- a/frontend/src/components/forms/ProfileEditForm.tsx
+++ b/frontend/src/components/forms/ProfileEditForm.tsx
@@ -65,7 +65,8 @@ const ProfileEditForm: FunctionComponent<Props> = ({
 
   const itemCutoffOptions = useSelectorOptions(
     form.values.items,
-    (v) => v.language
+    (v) => v.language,
+    (v) => String(v.id)
   );
 
   const cutoffOptions = useMemo(
@@ -76,6 +77,13 @@ const ProfileEditForm: FunctionComponent<Props> = ({
     [itemCutoffOptions]
   );
 
+  const selectedCutoff = useMemo(
+    () =>
+      cutoffOptions.options.find((v) => v.value.id === form.values.cutoff)
+        ?.value ?? null,
+    [cutoffOptions, form.values.cutoff]
+  );
+
   const mustContainOptions = useSelectorOptions(
     form.values.mustContain,
     (v) => v
@@ -255,7 +263,10 @@ const ProfileEditForm: FunctionComponent<Props> = ({
                 clearable
                 label="Cutoff"
                 {...cutoffOptions}
-                {...form.getInputProps("cutoff")}
+                value={selectedCutoff}
+                onChange={(value) => {
+                  form.setFieldValue("cutoff", value?.id ?? null);
+                }}
               ></Selector>
             </Stack>
           </Accordion.Item>
diff --git a/frontend/src/pages/Movies/Details/index.tsx b/frontend/src/pages/Movies/Details/index.tsx
index f8f65434d..5cc197fdb 100644
--- a/frontend/src/pages/Movies/Details/index.tsx
+++ b/frontend/src/pages/Movies/Details/index.tsx
@@ -126,19 +126,6 @@ const MovieDetailView: FunctionComponent = () => {
     <Container fluid px={0}>
       <QueryOverlay result={movieQuery}>
         <DropOverlay state={dropzone}>
-          {/* <FileOverlay
-          disabled={profile === undefined}
-          accept={[""]}
-          onDrop={onDrop}
-        ></FileOverlay> */}
-          {/* <div hidden>
-          <File
-            disabled={profile === undefined}
-            accept={[""]}
-            openRef={dialogRef}
-            onDrop={onDrop}
-          ></File>
-        </div> */}
           <Toolbox>
             <Group spacing="xs">
               <Toolbox.Button