Refactor form validation and fix issues

frontend/src/components/forms/ColorToolForm.tsx

@@ -2,6 +2,7 @@ import { useSubtitleAction } from "@/apis/hooks";
 import { Selector, SelectorOption } from "@/components";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
+import FormUtils from "@/utilities/form";
 import { Button, Divider, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { FunctionComponent } from "react";
@@ -93,7 +94,10 @@ const ColorToolForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
       color: "",
     },
     validate: {
-      color: (c) => colorOptions.find((op) => op.value === c) !== undefined,
+      color: FormUtils.validation(
+        (value) => colorOptions.find((op) => op.value === value) !== undefined,
+        "Must select a color"
+      ),
     },
   });
 

frontend/src/components/forms/FrameRateForm.tsx

@@ -1,6 +1,7 @@
 import { useSubtitleAction } from "@/apis/hooks";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
+import FormUtils from "@/utilities/form";
 import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { FunctionComponent } from "react";
@@ -26,8 +27,14 @@ const FrameRateForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
       to: 0,
     },
     validate: {
-      from: (v) => v > 0,
-      to: (v) => v > 0,
+      from: FormUtils.validation(
+        (value) => value > 0,
+        "The From value must be larger than 0"
+      ),
+      to: FormUtils.validation(
+        (value) => value > 0,
+        "The To value must be larger than 0"
+      ),
     },
   });
 

frontend/src/components/forms/MovieUploadForm.tsx

@@ -3,6 +3,7 @@ import { useModals, withModal } from "@/modules/modals";
 import { task, TaskGroup } from "@/modules/task";
 import { useTableStyles } from "@/styles";
 import { useArrayAction, useSelectorOptions } from "@/utilities";
+import FormUtils from "@/utilities/form";
 import {
   useLanguageProfileBy,
   useProfileItemsToLanguages,
@@ -113,7 +114,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         })),
     },
     validate: {
-      files: (values) => {
+      files: FormUtils.validation((values) => {
         return (
           values.find(
             (v) =>
@@ -122,7 +123,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
               v.validateResult.state === "error"
           ) === undefined
         );
-      },
+      }, "Some files cannot be uploaded, please check"),
     },
   });
 

frontend/src/components/forms/ProfileEditForm.tsx

@@ -3,6 +3,7 @@ import { useModals, withModal } from "@/modules/modals";
 import { useTableStyles } from "@/styles";
 import { useArrayAction, useSelectorOptions } from "@/utilities";
 import { LOG } from "@/utilities/console";
+import FormUtils from "@/utilities/form";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import {
   Accordion,
@@ -49,9 +50,14 @@ const ProfileEditForm: FunctionComponent<Props> = ({
   const form = useForm({
     initialValues: profile,
     validate: {
-      name: (value) => (value.length > 0 ? null : "Must have a name"),
-      items: (value) =>
-        value.length > 0 ? null : "Must contain at lease 1 language",
+      name: FormUtils.validation(
+        (value) => value.length > 0,
+        "Must have a name"
+      ),
+      items: FormUtils.validation(
+        (value) => value.length > 0,
+        "Must contain at lease 1 language"
+      ),
     },
   });
 

frontend/src/components/forms/SeriesUploadForm.tsx

@@ -7,6 +7,7 @@ import { useModals, withModal } from "@/modules/modals";
 import { task, TaskGroup } from "@/modules/task";
 import { useTableStyles } from "@/styles";
 import { useArrayAction, useSelectorOptions } from "@/utilities";
+import FormUtils from "@/utilities/form";
 import {
   useLanguageProfileBy,
   useProfileItemsToLanguages,
@@ -126,14 +127,17 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
         })),
     },
     validate: {
-      files: (values) =>
-        values.find(
-          (v) =>
-            v.language === null ||
-            v.episode === null ||
-            v.validateResult === undefined ||
-            v.validateResult.state === "error"
-        ) === undefined,
+      files: FormUtils.validation(
+        (values) =>
+          values.find(
+            (v) =>
+              v.language === null ||
+              v.episode === null ||
+              v.validateResult === undefined ||
+              v.validateResult.state === "error"
+          ) === undefined,
+        "Some files cannot be uploaded, please check"
+      ),
     },
   });
 

frontend/src/components/forms/TimeOffsetForm.tsx

@@ -1,6 +1,7 @@
 import { useSubtitleAction } from "@/apis/hooks";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
+import FormUtils from "@/utilities/form";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
@@ -31,10 +32,13 @@ const TimeOffsetForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
       ms: 0,
     },
     validate: {
-      hour: (v) => v >= 0,
-      min: (v) => v >= 0,
-      sec: (v) => v >= 0,
-      ms: (v) => v >= 0,
+      hour: FormUtils.validation((v) => v >= 0, "Hour must be larger than 0"),
+      min: FormUtils.validation((v) => v >= 0, "Minute must be larger than 0"),
+      sec: FormUtils.validation((v) => v >= 0, "Second must be larger than 0"),
+      ms: FormUtils.validation(
+        (v) => v >= 0,
+        "Millisecond must be larger than 0"
+      ),
     },
   });
 

frontend/src/components/forms/TranslationForm.tsx

@@ -2,6 +2,7 @@ import { useSubtitleAction } from "@/apis/hooks";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
 import { useSelectorOptions } from "@/utilities";
+import FormUtils from "@/utilities/form";
 import { useEnabledLanguages } from "@/utilities/languages";
 import { Alert, Button, Divider, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
@@ -139,7 +140,7 @@ const TranslationForm: FunctionComponent<Props> = ({
       language: null as Language.Info | null,
     },
     validate: {
-      language: isObject,
+      language: FormUtils.validation(isObject, "Please select a language"),
     },
   });
 

frontend/src/pages/Settings/Notifications/components.tsx

@@ -3,6 +3,7 @@ import { Selector } from "@/components";
 import MutateButton from "@/components/async/MutateButton";
 import { useModals, withModal } from "@/modules/modals";
 import { BuildKey, useSelectorOptions } from "@/utilities";
+import FormUtils from "@/utilities/form";
 import {
   Button,
   Divider,
@@ -44,8 +45,14 @@ const NotificationForm: FunctionComponent<Props> = ({
       url: payload?.url ?? "",
     },
     validate: {
-      selection: isObject,
-      url: (value) => value.trim() !== "",
+      selection: FormUtils.validation(
+        isObject,
+        "Please select a notification provider"
+      ),
+      url: FormUtils.validation(
+        (value) => value.trim().length !== 0,
+        "URL must not be empty"
+      ),
     },
   });
 

frontend/src/utilities/form.ts

@@ -0,0 +1,15 @@
+function validation<T>(condition: (value: T) => boolean, message: string) {
+  return (value: T) => {
+    if (condition(value)) {
+      return null;
+    } else {
+      return message;
+    }
+  };
+}
+
+const FormUtils = {
+  validation,
+};
+
+export default FormUtils;