#58 using formik at node submit form

src/components/editors/EditorUploadButton/index.tsx

@@ -1,110 +1,35 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { ChangeEvent, FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { IFile, IFileWithUUID } from '~/redux/types';
-import uuid from 'uuid4';
-import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { append, assocPath } from 'ramda';
-import { selectUploads } from '~/redux/uploads/selectors';
-import { connect } from 'react-redux';
-import { NODE_SETTINGS } from '~/redux/node/constants';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
+import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
+import { getFileType } from '~/utils/uploader';
 
-const mapStateToProps = state => {
-  const { statuses, files } = selectUploads(state);
-
-  return { statuses, files };
+type IProps = IEditorComponentProps & {
+  accept?: string;
+  icon?: string;
+  type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
 };
 
-const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & IEditorComponentProps & {
-    accept?: string;
-    icon?: string;
-    type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
-  };
-
-const EditorUploadButtonUnconnected: FC<IProps> = ({
-  data,
-  setData,
-  temp,
-  setTemp,
-  statuses,
-  files,
-  uploadUploadFiles,
+const EditorUploadButton: FC<IProps> = ({
   accept = 'image/*',
   icon = 'plus',
   type = UPLOAD_TYPES.IMAGE,
 }) => {
-  const eventPreventer = useCallback(event => event.preventDefault(), []);
-
-  const onUpload = useCallback(
-    (uploads: File[]) => {
-      const current = temp.length + data.files.length;
-      const limit = NODE_SETTINGS.MAX_FILES - current;
-
-      if (current >= NODE_SETTINGS.MAX_FILES) return;
-
-      const items: IFileWithUUID[] = Array.from(uploads).map(
-        (file: File): IFileWithUUID => ({
-          file,
-          temp_id: uuid(),
-          subject: UPLOAD_SUBJECTS.EDITOR,
-          target: UPLOAD_TARGETS.NODES,
-          type,
-        })
-      );
-
-      const temps = items
-        .filter(file => file?.temp_id)
-        .map(file => file.temp_id!)
-        .slice(0, limit);
-
-      setTemp([...temp, ...temps]);
-      uploadUploadFiles(items);
-    },
-    [setTemp, uploadUploadFiles, temp, data, type]
-  );
-
-  const onFileAdd = useCallback(
-    (file: IFile) => {
-      setData(assocPath(['files'], append(file, data.files), data));
-    },
-    [data, setData]
-  );
-
-  useEffect(() => {
-    window.addEventListener('dragover', eventPreventer, false);
-    window.addEventListener('drop', eventPreventer, false);
-
-    return () => {
-      window.removeEventListener('dragover', eventPreventer, false);
-      window.removeEventListener('drop', eventPreventer, false);
-    };
-  }, [eventPreventer]);
-
-  useEffect(() => {
-    Object.entries(statuses).forEach(([id, status]) => {
-      if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
-        onFileAdd(files[status.uuid]);
-        setTemp(temp.filter(el => el !== id));
-      }
-    });
-  }, [statuses, files, temp, onFileAdd]);
+  const { uploadFiles } = useFileUploaderContext()!;
 
   const onInputChange = useCallback(
-    event => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       event.preventDefault();
 
-      if (!event.target.files || !event.target.files.length) return;
+      const files = Array.from(event.target.files || []).filter(
+        file => !type || getFileType(file) === type
+      );
 
-      onUpload(Array.from(event.target.files));
+      uploadFiles(files);
     },
-    [onUpload]
+    [uploadFiles]
   );
 
   return (
@@ -118,9 +43,4 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
   );
 };
 
-const EditorUploadButton = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(EditorUploadButtonUnconnected);
-
 export { EditorUploadButton };