eslint fix

src/components/editors/EditorPanel/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ChangeEventHandler } from 'react';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
-import { ImageUploadButton } from '~/components/editors/ImageUploadButton';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
 
 interface IProps {
   data: INode;
@@ -11,7 +11,7 @@ interface IProps {
 
 const EditorPanel: FC<IProps> = ({ onUpload }) => (
   <div className={styles.panel}>
-    <ImageUploadButton onUpload={onUpload} />
+    <EditorUploadButton onUpload={onUpload} />
   </div>
 );
 

src/components/editors/EditorUploadButton/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC, ChangeEventHandler } from 'react';
+import * as styles from './styles.scss';
+import { Icon } from '~/components/input/Icon';
+
+interface IProps {
+  onUpload?: ChangeEventHandler<HTMLInputElement>;
+}
+
+const EditorUploadButton: FC<IProps> = ({
+  onUpload,
+}) => (
+  <div className={styles.wrap}>
+    <input type="file" onChange={onUpload} accept="image/*" multiple />
+
+    <div className={styles.icon}>
+      <Icon size={32} icon="plus" />
+    </div>
+  </div>
+);
+
+export { EditorUploadButton };

src/components/editors/ImageEditor/index.tsx

@@ -1,40 +1,55 @@
-import React, { FC, useCallback, useEffect, useState, ChangeEventHandler, DragEventHandler } from 'react';
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useState,
+  ChangeEventHandler,
+  DragEventHandler
+} from 'react';
 import uuid from 'uuid4';
-import { INode, IFileWithUUID, IFile } from '~/redux/types';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { connect } from 'react-redux';
-import { selectUploads } from '~/redux/uploads/selectors';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
+import { INode, IFileWithUUID, IFile } from '~/redux/types';
+import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
+import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import { moveArrItem } from '~/utils/fn';
 import { IUploadStatus } from '~/redux/uploads/reducer';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles
 };
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
   data: INode;
   pending_files: IUploadStatus[];
   setData: (val: INode) => void;
   onFileMove: (o: number, n: number) => void;
   onInputChange: ChangeEventHandler<HTMLInputElement>;
   onDrop: DragEventHandler<HTMLFormElement>;
-}
-
-const ImageEditorUnconnected: FC<IProps> = ({ data, onFileMove, onInputChange, onDrop, pending_files }) => {
-  return (
-    <ImageGrid
-      onFileMove={onFileMove}
-      items={data.files}
-      locked={pending_files}
-      onUpload={onInputChange}
-      onDrop={onDrop}
-    />
-  );
 };
 
-const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
+const ImageEditorUnconnected: FC<IProps> = ({
+  data,
+  onFileMove,
+  onInputChange,
+  onDrop,
+  pending_files
+}) => (
+  <ImageGrid
+    onFileMove={onFileMove}
+    items={data.files}
+    locked={pending_files}
+    onUpload={onInputChange}
+    onDrop={onDrop}
+  />
+);
+
+const ImageEditor = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ImageEditorUnconnected);
 export { ImageEditor };

src/components/editors/ImageGrid/index.tsx

@@ -1,10 +1,11 @@
-import React, { FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler } from 'react';
+import React, {
+  FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler
+} from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
-import { ImageUploadButton } from '~/components/editors/ImageUploadButton';
 
 interface IProps {
   items: IFile[];
@@ -12,50 +13,52 @@ interface IProps {
   onFileMove: (o: number, n: number) => void;
   onUpload?: ChangeEventHandler<HTMLInputElement>;
   onDrop: DragEventHandler<HTMLFormElement>;
-};
+}
 
 const SortableItem = SortableElement(({ children }) => <div className={styles.item}>{children}</div>);
 
-const SortableList = SortableContainer(({ items, locked, onUpload, onDrop }: { items: IFile[]; locked: IUploadStatus[]; onUpload: ChangeEventHandler<HTMLInputElement>; onDrop: DragEventHandler<HTMLFormElement> }) => {
-  return (
+const SortableList = SortableContainer(
+  ({
+    items,
+    locked,
+    onDrop
+  }: {
+    items: IFile[];
+    locked: IUploadStatus[];
+    onUpload: ChangeEventHandler<HTMLInputElement>;
+    onDrop: DragEventHandler<HTMLFormElement>;
+  }) => (
     <form className={styles.grid} onDrop={onDrop}>
-      {
-        items.map((file, index) => (
-          <SortableItem key={file.id} index={index} collection={0}>
-            <ImageUpload
-              id={file.id}
-              thumb={file.url}
-            />
-          </SortableItem>
-        ))
-      }
-      {
-        locked.map((item, index) => (
-          <SortableItem key={item.temp_id} index={index} collection={1} disabled>
-            <ImageUpload
-              thumb={item.preview}
-              progress={item.progress}
-              is_uploading
-            />
-          </SortableItem>
-        ))
-      }
+      {items.map((file, index) => (
+        <SortableItem key={file.id} index={index} collection={0}>
+          <ImageUpload id={file.id} thumb={file.url} />
+        </SortableItem>
+      ))}
+      {locked.map((item, index) => (
+        <SortableItem key={item.temp_id} index={index} collection={1} disabled>
+          <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
+        </SortableItem>
+      ))}
     </form>
-  );
-});
+  )
+);
 
 const ImageGrid: FC<IProps> = ({
-  items,
-  locked,
-  onFileMove,
-  onUpload,
-  onDrop,
+  items, locked, onFileMove, onUpload, onDrop
 }) => {
   const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]);
 
   return (
-    <SortableList onSortEnd={onMove} axis="xy" items={items} locked={locked} onUpload={onUpload} onDrop={onDrop} pressDelay={100} />
-  )
-}
+    <SortableList
+      onSortEnd={onMove}
+      axis="xy"
+      items={items}
+      locked={locked}
+      onUpload={onUpload}
+      onDrop={onDrop}
+      pressDelay={100}
+    />
+  );
+};
 
-export { ImageGrid };
+export { ImageGrid };

src/components/editors/ImageUploadButton/index.tsx

@@ -1,21 +0,0 @@
-import React, { FC, ChangeEventHandler } from 'react';
-import * as styles from './styles.scss';
-import { Icon } from '~/components/input/Icon';
-
-interface IProps {
-  onUpload?: ChangeEventHandler<HTMLInputElement>;
-};
-
-const ImageUploadButton: FC<IProps> = ({
-  onUpload,
-}) => (
-    <div className={styles.wrap}>
-      <input type="file" onChange={onUpload} accept="image/*" multiple />
-
-      <div className={styles.icon}>
-        <Icon size={32} icon="plus" />
-      </div>
-    </div>
-  )
-
-export { ImageUploadButton };