(quality) refactored upload components

app/frontend/src/javascript/components/form/form-file-upload.tsx

@@ -4,17 +4,13 @@ import { Path } from 'react-hook-form';
 import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
 import { FieldPathValue } from 'react-hook-form/dist/types/path';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
-import { FormInput } from '../form/form-input';
+import { FormInput } from './form-input';
 import { FormComponent } from '../../models/form-component';
 import { AbstractFormItemProps } from './abstract-form-item';
 import { FabButton } from '../base/fab-button';
 import { FilePdf, Trash } from 'phosphor-react';
-
+import { FileType } from '../../models/file';
-export interface FileType {
+import FileUploadLib from '../../lib/file-upload';
-  id?: number,
-  attachment_name?: string,
-  attachment_url?: string
-}
 
 interface FormFileUploadProps<TFieldValues> extends FormComponent<TFieldValues>, AbstractFormItemProps<TFieldValues> {
   setValue: UseFormSetValue<TFieldValues>,
@@ -36,7 +32,7 @@ export const FormFileUpload = <TFieldValues extends FieldValues>({ id, register,
    * Check if file is selected
    */
   const hasFile = (): boolean => {
-    return !!file?.attachment_name;
+    return FileUploadLib.hasFile(file);
   };
 
   /**
@@ -62,20 +58,7 @@ export const FormFileUpload = <TFieldValues extends FieldValues>({ id, register,
    * Callback triggered when the user clicks on the delete button.
    */
   function onRemoveFile () {
-    if (file?.id) {
+    FileUploadLib.onRemoveFile(file, id, setFile, setValue, onFileRemove);
-      setValue(
-        `${id}[_destroy]` as Path<TFieldValues>,
-        true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
-      );
-    }
-    setValue(
-      `${id}[attachment_files]` as Path<TFieldValues>,
-      null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
-    );
-    setFile(null);
-    if (typeof onFileRemove === 'function') {
-      onFileRemove();
-    }
   }
 
   // Compose classnames from props

app/frontend/src/javascript/components/form/form-image-upload.tsx

@@ -4,19 +4,14 @@ import { Path } from 'react-hook-form';
 import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
 import { FieldPathValue } from 'react-hook-form/dist/types/path';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
-import { FormInput } from '../form/form-input';
+import { FormInput } from './form-input';
 import { FormComponent } from '../../models/form-component';
 import { AbstractFormItemProps } from './abstract-form-item';
 import { FabButton } from '../base/fab-button';
 import noImage from '../../../../images/no_image.png';
 import { Trash } from 'phosphor-react';
-
+import { ImageType } from '../../models/file';
-export interface ImageType {
+import FileUploadLib from '../../lib/file-upload';
-  id?: number,
-  attachment_name?: string,
-  attachment_url?: string,
-  is_main?: boolean
-}
 
 interface FormImageUploadProps<TFieldValues> extends FormComponent<TFieldValues>, AbstractFormItemProps<TFieldValues> {
   setValue: UseFormSetValue<TFieldValues>,
@@ -46,7 +41,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues>({ id, register
    * Check if image is selected
    */
   const hasImage = (): boolean => {
-    return !!file?.attachment_name;
+    return FileUploadLib.hasFile(file);
   };
 
   /**
@@ -82,20 +77,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues>({ id, register
    * Callback triggered when the user clicks on the delete button.
    */
   function onRemoveFile () {
-    if (file?.id) {
+    FileUploadLib.onRemoveFile(file, id, setFile, setValue, onFileRemove);
-      setValue(
-        `${id}[_destroy]` as Path<TFieldValues>,
-        true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
-      );
-    }
-    setValue(
-      `${id}[attachment_files]` as Path<TFieldValues>,
-      null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
-    );
-    setFile(null);
-    if (typeof onFileRemove === 'function') {
-      onFileRemove();
-    }
   }
 
   /**

app/frontend/src/javascript/lib/file-upload.ts

@@ -0,0 +1,29 @@
+import { Path } from 'react-hook-form';
+import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
+import { FieldPathValue } from 'react-hook-form/dist/types/path';
+import { FieldValues } from 'react-hook-form/dist/types/fields';
+import { FileType } from '../models/file';
+import { Dispatch, SetStateAction } from 'react';
+
+export default class FileUploadLib {
+  public static onRemoveFile<TFieldValues extends FieldValues> (file: FileType, id: string, setFile: Dispatch<SetStateAction<FileType>>, setValue: UseFormSetValue<TFieldValues>, onFileRemove: () => void) {
+    if (file?.id) {
+      setValue(
+        `${id}[_destroy]` as Path<TFieldValues>,
+        true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+      );
+    }
+    setValue(
+      `${id}[attachment_files]` as Path<TFieldValues>,
+      null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+    );
+    setFile(null);
+    if (typeof onFileRemove === 'function') {
+      onFileRemove();
+    }
+  }
+
+  public static hasFile (file: FileType): boolean {
+    return !!file?.attachment_name;
+  }
+}

app/frontend/src/javascript/models/file.ts

@@ -0,0 +1,9 @@
+export interface FileType {
+  id?: number,
+  attachment_name?: string,
+  attachment_url?: string
+}
+
+export interface ImageType extends FileType {
+  is_main?: boolean
+}