Fixed: Autotagging using tag specification

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'

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[];
+  value: V;
-  onChange: (change: InputChanged<number[]>) => void;
+  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();
+      if (isArray) {
-      newValue.splice(index, 1);
+        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 (