From 9ef7c2a0b4b2fd176bfddbc4c3d7db9c01a1913e Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Fri, 18 Apr 2025 10:14:38 +0300
Subject: [PATCH] Fixed: Autotagging using tag specification

---
 .../src/Components/Form/FormInputGroup.tsx    |  4 +-
 .../src/Components/Form/Tag/MovieTagInput.tsx | 54 +++++++++++++------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Components/Form/FormInputGroup.tsx b/frontend/src/Components/Form/FormInputGroup.tsx
index cb112b1196..5a4136687e 100644
--- a/frontend/src/Components/Form/FormInputGroup.tsx
+++ b/frontend/src/Components/Form/FormInputGroup.tsx
@@ -120,7 +120,7 @@ type PickProps<V, C extends InputType> = C extends 'text'
   : C extends 'monitorMoviesSelect'
   ? MonitorMoviesSelectInputProps
   : C extends 'movieTag'
-  ? MovieTagInputProps
+  ? MovieTagInputProps<V>
   : C extends 'number'
   ? NumberInputProps
   : C extends 'oauth'
@@ -137,7 +137,7 @@ type PickProps<V, C extends InputType> = C extends 'text'
   ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
     EnhancedSelectInputProps<any, V>
   : C extends 'tag'
-  ? MovieTagInputProps
+  ? MovieTagInputProps<V>
   : C extends 'tagSelect'
   ? TagSelectInputProps
   : C extends 'text'
diff --git a/frontend/src/Components/Form/Tag/MovieTagInput.tsx b/frontend/src/Components/Form/Tag/MovieTagInput.tsx
index e6f8965376..8797b50a04 100644
--- a/frontend/src/Components/Form/Tag/MovieTagInput.tsx
+++ b/frontend/src/Components/Form/Tag/MovieTagInput.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { addTag } from 'Store/Actions/tagActions';
@@ -12,10 +12,10 @@ interface MovieTag extends TagBase {
   name: string;
 }
 
-export interface MovieTagInputProps {
+export interface MovieTagInputProps<V> {
   name: string;
-  value: number[];
-  onChange: (change: InputChanged<number[]>) => void;
+  value: V;
+  onChange: (change: InputChanged<V>) => void;
 }
 
 const VALID_TAG_REGEX = new RegExp('[^-_a-z0-9]', 'i');
@@ -59,28 +59,48 @@ function createMovieTagsSelector(tags: number[]) {
   });
 }
 
-export default function MovieTagInput({
+export default function MovieTagInput<V>({
   name,
   value,
   onChange,
-}: MovieTagInputProps) {
+}: MovieTagInputProps<V>) {
   const dispatch = useDispatch();
+  const isArray = Array.isArray(value);
+
+  const arrayValue = useMemo(() => {
+    if (isArray) {
+      return value as number[];
+    }
+
+    return value === 0 ? [] : [value as number];
+  }, [isArray, value]);
 
   const { tags, tagList, allTags } = useSelector(
-    createMovieTagsSelector(value)
+    createMovieTagsSelector(arrayValue)
   );
 
   const handleTagCreated = useCallback(
     (tag: MovieTag) => {
-      onChange({ name, value: [...value, tag.id] });
+      if (isArray) {
+        onChange({ name, value: [...value, tag.id] as V });
+      } else {
+        onChange({
+          name,
+          value: tag.id as V,
+        });
+      }
     },
-    [name, value, onChange]
+    [name, value, isArray, onChange]
   );
 
   const handleTagAdd = useCallback(
     (newTag: MovieTag) => {
       if (newTag.id) {
-        onChange({ name, value: [...value, newTag.id] });
+        if (isArray) {
+          onChange({ name, value: [...value, newTag.id] as V });
+        } else {
+          onChange({ name, value: newTag.id as V });
+        }
 
         return;
       }
@@ -96,17 +116,21 @@ export default function MovieTagInput({
         );
       }
     },
-    [name, value, allTags, handleTagCreated, onChange, dispatch]
+    [name, value, isArray, allTags, handleTagCreated, onChange, dispatch]
   );
 
   const handleTagDelete = useCallback(
     ({ index }: { index: number }) => {
-      const newValue = value.slice();
-      newValue.splice(index, 1);
+      if (isArray) {
+        const newValue = value.slice();
+        newValue.splice(index, 1);
 
-      onChange({ name, value: newValue });
+        onChange({ name, value: newValue as V });
+      } else {
+        onChange({ name, value: 0 as V });
+      }
     },
-    [name, value, onChange]
+    [name, value, isArray, onChange]
   );
 
   return (