From a1a5d94fddf000c09c08ca641d17f256b36f23e0 Mon Sep 17 00:00:00 2001
From: Kyle Sanderson <kyle.leet@gmail.com>
Date: Sun, 19 Mar 2023 13:07:03 -0700
Subject: [PATCH] fix(filters): remove requirement for numberfields (#758)

* fix(filters): remove requirement for logScore.

* default to zero on numberfield clear

* code comment for parseInt

---------

Co-authored-by: soup <soup@r4tio.dev>
---
 web/src/components/inputs/input.tsx | 42 ++++++++++++++++-------------
 web/src/screens/filters/action.tsx  |  8 +-----
 web/src/screens/filters/details.tsx | 12 ++++-----
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx
index 0e9b244..bf3490b 100644
--- a/web/src/components/inputs/input.tsx
+++ b/web/src/components/inputs/input.tsx
@@ -207,15 +207,15 @@ export const PasswordField = ({
 };
 
 interface NumberFieldProps {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    step?: number;
-    disabled?: boolean;
-    required?: boolean;
-    min?: number;
-    max?: number;
-    tooltip?: JSX.Element;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  step?: number;
+  disabled?: boolean;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  tooltip?: JSX.Element;
 }
 
 export const NumberField = ({
@@ -230,20 +230,18 @@ export const NumberField = ({
   required
 }: NumberFieldProps) => (
   <div className="col-span-12 sm:col-span-6">
-    <label htmlFor={name} className="flex float-left mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+    <label
+      htmlFor={name}
+      className="flex float-left mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide"
+    >
       <div className="flex">
         {label}
-        {tooltip && (
-          <CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>
-        )}
+        {tooltip && <CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>}
       </div>
     </label>
 
     <Field name={name} type="number">
-      {({
-        field,
-        meta
-      }: FieldProps) => (
+      {({ field, meta, form }: FieldProps<number>) => (
         <div className="sm:col-span-2">
           <input
             type="number"
@@ -262,12 +260,20 @@ export const NumberField = ({
             )}
             placeholder={placeholder}
             disabled={disabled}
+            onChange={event => {
+              // safeguard and validation if user removes the number
+              // it will then set 0 by default. Formik can't handle this properly
+              if (event.target.value == "") {
+                form.setFieldValue(field.name, 0);
+                return;
+              }
+              form.setFieldValue(field.name, parseInt(event.target.value)); // Convert the input value to an integer using parseInt() to ensure that the backend can properly parse the numberfield as an integer.
+            }}
           />
           {meta.touched && meta.error && (
             <div className="error">{meta.error}</div>
           )}
         </div>
-
       )}
     </Field>
   </div>
diff --git a/web/src/screens/filters/action.tsx b/web/src/screens/filters/action.tsx
index 13bd3cc..8954bc6 100644
--- a/web/src/screens/filters/action.tsx
+++ b/web/src/screens/filters/action.tsx
@@ -202,13 +202,11 @@ const TypeForm = ({ action, idx, clients }: TypeFormProps) => {
                 name={`actions.${idx}.limit_download_speed`}
                 label="Limit download speed (KiB/s)"
                 placeholder="Takes any number (0 is no limit)"
-                min={0} required={true}
               />
               <NumberField
                 name={`actions.${idx}.limit_upload_speed`}
                 label="Limit upload speed (KiB/s)"
                 placeholder="Takes any number (0 is no limit)"
-                min={0} required={true}
               />
             </div>
 
@@ -217,14 +215,12 @@ const TypeForm = ({ action, idx, clients }: TypeFormProps) => {
                 name={`actions.${idx}.limit_ratio`}
                 label="Ratio limit"
                 placeholder="Takes any number (0 is no limit)"
-                min={0} required={true}
-                step={0.5}
+                step={1} // 0.5 does not work
               />
               <NumberField
                 name={`actions.${idx}.limit_seed_time`}
                 label="Seed time limit (minutes)"
                 placeholder="Takes any number (0 is no limit)"
-                min={0} required={true}
               />
             </div>
           </div>
@@ -263,12 +259,10 @@ const TypeForm = ({ action, idx, clients }: TypeFormProps) => {
                 name={`actions.${idx}.reannounce_interval`}
                 label="Reannounce interval. Run every X seconds"
                 placeholder="7 is default and recommended"
-                min={1} required={true}
               />
               <NumberField
                 name={`actions.${idx}.reannounce_max_attempts`}
                 label="Run reannounce Y times"
-                min={1} required={true}
               />
             </div>
           </div>
diff --git a/web/src/screens/filters/details.tsx b/web/src/screens/filters/details.tsx
index 23e7330..be484b9 100644
--- a/web/src/screens/filters/details.tsx
+++ b/web/src/screens/filters/details.tsx
@@ -238,8 +238,8 @@ export default function FilterDetails() {
                 min_size: filter.min_size,
                 max_size: filter.max_size,
                 delay: filter.delay,
-                priority: filter.priority ?? 0,
-                max_downloads: filter.max_downloads ?? 0,
+                priority: filter.priority,
+                max_downloads: filter.max_downloads,
                 max_downloads_unit: filter.max_downloads_unit,
                 use_regex: filter.use_regex || false,
                 shows: filter.shows,
@@ -276,7 +276,7 @@ export default function FilterDetails() {
                 quality: filter.quality || [],
                 media: filter.media || [],
                 match_release_types: filter.match_release_types || [],
-                log_score: filter.log_score ?? 0,
+                log_score: filter.log_score,
                 log: filter.log,
                 cue: filter.cue,
                 perfect_flac: filter.perfect_flac,
@@ -351,8 +351,8 @@ export function General() {
           <TextField name="min_size" label="Min size" columns={6} placeholder="eg. 100MiB, 80GB" tooltip={<div><p>Supports units such as MB, MiB, GB, etc.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
           <TextField name="max_size" label="Max size" columns={6} placeholder="eg. 100MiB, 80GB"  tooltip={<div><p>Supports units such as MB, MiB, GB, etc.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
           <NumberField name="delay" label="Delay" placeholder="Number of seconds to delay actions"  tooltip={<div><p>Number of seconds to wait before running actions.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
-          <NumberField name="priority" label="Priority" placeholder="Higher number = higher prio" required={true} tooltip={<div><p>Filters are checked in order of priority. Higher number = higher priority.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
-          <NumberField name="max_downloads" label="Max downloads" placeholder="Takes any number (0 is infinite)" min={0} required={true}  tooltip={<div><p>Number of max downloads as specified by the respective unit.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
+          <NumberField name="priority" label="Priority" placeholder="Higher number = higher prio" tooltip={<div><p>Filters are checked in order of priority. Higher number = higher priority.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
+          <NumberField name="max_downloads" label="Max downloads" placeholder="Takes any number (0 is infinite)" tooltip={<div><p>Number of max downloads as specified by the respective unit.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
           <Select name="max_downloads_unit" label="Max downloads per" options={downloadsPerUnitOptions}  optionDefaultText="Select unit"  tooltip={<div><p>The unit of time for counting the maximum downloads per filter.</p><a href='https://autobrr.com/filters#rules' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#rules</a></div>} />
         </div>
       </div>
@@ -436,7 +436,7 @@ export function Music({ values }: AdvancedProps) {
         </div>
 
         <div className="mt-6 grid grid-cols-12 gap-6">
-          <NumberField name="log_score" label="Log score" placeholder="eg. 100" min={0} max={100} required={true} disabled={values.perfect_flac} tooltip={<div><p>	Log scores go from 0 to 100. This is overridden by Perfect FLAC.</p><a href='https://autobrr.com/filters#quality-1' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#quality-1</a></div>} />
+          <NumberField name="log_score" label="Log score" placeholder="eg. 100" min={0} max={100} disabled={values.perfect_flac} tooltip={<div><p>	Log scores go from 0 to 100. This is overridden by Perfect FLAC.</p><a href='https://autobrr.com/filters#quality-1' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/filters#quality-1</a></div>} />
         </div>
 
       </div>