Renamer settings: add field for numbers, fix infinite preview retry (#…

…993)
ShokoAnime · Aug 19, 2024 · a24dfdb · a24dfdb
1 parent 237aad5
commit a24dfdb
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 10 deletions.
diff --git a/src/components/Input/InputSmall.tsx b/src/components/Input/InputSmall.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import useEventCallback from '@/hooks/useEventCallback';
+
 type Props = {
   id: string;
   type: string;
@@ -12,6 +14,8 @@ type Props = {
   disabled?: boolean;
   autoComplete?: string;
   suffixes?: React.ReactNode;
+  min?: number;
+  max?: number;
 };
 
 const InputSmall = React.memo((props: Props) => {
@@ -21,6 +25,8 @@ const InputSmall = React.memo((props: Props) => {
     className,
     disabled,
     id,
+    max,
+    min,
     onChange,
     onKeyUp,
     placeholder,
@@ -29,6 +35,22 @@ const InputSmall = React.memo((props: Props) => {
     value,
   } = props;
 
+  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (type === 'number' && max && event.target.valueAsNumber > max) {
+      onChange({
+        ...event,
+        target: {
+          ...event.target,
+          value: max.toString(),
+          valueAsNumber: max,
+        },
+      });
+      return;
+    }
+
+    onChange(event);
+  });
+
   return (
     <>
       <input
@@ -37,11 +59,13 @@ const InputSmall = React.memo((props: Props) => {
         type={type}
         placeholder={placeholder ?? ''}
         value={value}
-        onChange={onChange}
+        onChange={handleChange}
         onKeyUp={onKeyUp}
         autoFocus={autoFocus}
         disabled={disabled}
         autoComplete={autoComplete ?? 'on'}
+        min={min}
+        max={max}
       />
 
       {suffixes}

diff --git a/src/components/Utilities/Renamer/RenamerSettings.tsx b/src/components/Utilities/Renamer/RenamerSettings.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { filter, map } from 'lodash';
 
 import Checkbox from '@/components/Input/Checkbox';
+import InputSmall from '@/components/Input/InputSmall';
+import useEventCallback from '@/hooks/useEventCallback';
 
 import type { RenamerConfigSettingsType, RenamerSettingsType } from '@/core/react-query/renamer/types';
 import type { Updater } from 'use-immer';
@@ -18,31 +20,66 @@ type SettingProps = {
   updateSetting: (name: string, value: string | number | boolean) => void;
 };
 
-const Setting = ({ currentValue, settingModel, updateSetting }: SettingProps) => {
+const Setting = React.memo(({ currentValue, settingModel, updateSetting }: SettingProps) => {
+  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.type === 'checkbox') {
+      updateSetting(settingModel.Name, event.target.checked);
+      return;
+    }
+
+    const value = ['Integer', 'Decimal'].includes(settingModel.SettingType)
+      ? event.target.valueAsNumber
+      : event.target.value;
+    updateSetting(settingModel.Name, value);
+  });
+
   if (currentValue === undefined) return null;
 
   switch (settingModel.SettingType) {
     case 'Text':
-      return <div>TEXT</div>;
     case 'LargeText':
-      return <div>TEXT AREA</div>;
+      return (
+        <div className="flex justify-between">
+          {settingModel.Name}
+          <InputSmall
+            value={currentValue as string}
+            onChange={handleChange}
+            id={settingModel.Name}
+            type="text"
+            className="w-64 px-2"
+          />
+        </div>
+      );
     case 'Boolean':
       return (
         <Checkbox
-          isChecked={currentValue as unknown as boolean}
-          onChange={event => updateSetting(settingModel.Name, event.target.checked)}
+          isChecked={currentValue as boolean}
+          onChange={handleChange}
           id={settingModel.Name}
           label={settingModel.Name}
           justify
         />
       );
     case 'Integer':
     case 'Decimal':
-      return <div>INTEGER</div>;
+      return (
+        <div className="flex justify-between">
+          {settingModel.Name}
+          <InputSmall
+            value={currentValue as number}
+            onChange={handleChange}
+            id={settingModel.Name}
+            type="number"
+            className="w-16 px-2 text-center"
+            min={settingModel.MinimumValue}
+            max={settingModel.MaximumValue}
+          />
+        </div>
+      );
     default:
       return null;
   }
-};
+});
 
 const RenamerSettings = ({ newConfig, setNewConfig, settingsModel }: Props) => {
   const updateSetting = (name: string, value: string | number | boolean) => {

diff --git a/src/core/react-query/renamer/helpers.ts b/src/core/react-query/renamer/helpers.ts
@@ -5,6 +5,7 @@ import type {
   RenamerConfigResponseType,
   RenamerConfigSettingsType,
   RenamerConfigType,
+  RenamerRelocateBaseRequestType,
   RenamerResponseType,
   RenamerResultType,
   RenamerSettingsType,
@@ -29,6 +30,23 @@ export const updateResults = (response: RenamerResultType[]) => {
   if (!response[0].IsPreview) store.dispatch(updateFiles(response));
 };
 
+export const updateApiErrors = (_: Error, args: RenamerRelocateBaseRequestType) => {
+  const mappedResults = args.FileIDs.reduce(
+    (result, fileId) => (
+      {
+        ...result,
+        [fileId]: {
+          FileID: fileId,
+          ErrorMessage: 'Error! Check server logs for more details.',
+        } as RenamerResultType,
+      }
+    ),
+    {} as Record<number, RenamerResultType>,
+  );
+
+  store.dispatch(addRenameResults(mappedResults));
+};
+
 export const transformRenamerConfigs = (response: RenamerConfigResponseType[]): RenamerConfigType[] =>
   response.map((config) => {
     if (!config.Settings) return config as RenamerConfigType;

diff --git a/src/core/react-query/renamer/mutations.ts b/src/core/react-query/renamer/mutations.ts
@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 
 import { axios } from '@/core/axios';
 import { invalidateQueries } from '@/core/react-query/queryClient';
-import { updateResults } from '@/core/react-query/renamer/helpers';
+import { updateApiErrors, updateResults } from '@/core/react-query/renamer/helpers';
 
 import type {
   RenamerConfigResponseType,
@@ -16,6 +16,7 @@ export const useRenamerPreviewMutation = () =>
   useMutation<RenamerResultType[], unknown, RenamerPreviewRequestType>({
     mutationFn: ({ move, rename, ...body }) => axios.post('Renamer/Preview', body, { params: { move, rename } }),
     onSuccess: updateResults,
+    onError: updateApiErrors,
   });
 
 export const useRenamerRelocateMutation = () =>
@@ -27,6 +28,7 @@ export const useRenamerRelocateMutation = () =>
         params: { deleteEmptyDirectories, move, rename },
       }),
     onSuccess: updateResults,
+    onError: updateApiErrors,
   });
 
 export const useRenamerDeleteConfigMutation = () =>

diff --git a/src/core/react-query/renamer/types.ts b/src/core/react-query/renamer/types.ts
@@ -21,6 +21,8 @@ export type RenamerSettingsType = {
   Description?: string;
   Language?: CodeLanguageType;
   SettingType: SettingTypeType;
+  MinimumValue?: number;
+  MaximumValue?: number;
 };
 
 type CodeLanguageType =
@@ -76,7 +78,7 @@ export type RenamerResultType = {
   AbsolutePath?: string;
 };
 
-type RenamerRelocateBaseRequestType = {
+export type RenamerRelocateBaseRequestType = {
   move?: boolean;
   rename?: boolean;
   FileIDs: number[];