From 265b075ddce4f296b7c3fd175e2b760d5a994818 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 16 Oct 2019 15:47:52 +0700
Subject: [PATCH] refactored code

---
 src/components/editors/ImageEditor/index.tsx |  8 +++++---
 src/components/editors/ImageGrid/index.tsx   | 20 +++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx
index 45ff0bd5..decfacb6 100644
--- a/src/components/editors/ImageEditor/index.tsx
+++ b/src/components/editors/ImageEditor/index.tsx
@@ -1,6 +1,6 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useCallback } from 'react';
 import { connect } from 'react-redux';
-import { INode } from '~/redux/types';
+import { INode, IFile } from '~/redux/types';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
@@ -24,7 +24,9 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) =
     statuses,
   ]);
 
-  return <ImageGrid data={data} setData={setData} locked={pending_files} />;
+  const setFiles = useCallback((files: IFile[]) => setData({ ...data, files }), [data, setData]);
+
+  return <ImageGrid files={data.files} setFiles={setFiles} locked={pending_files} />;
 };
 
 const ImageEditor = connect(
diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx
index 0ead0f6c..c4a2eb50 100644
--- a/src/components/editors/ImageGrid/index.tsx
+++ b/src/components/editors/ImageGrid/index.tsx
@@ -9,26 +9,24 @@ import reject from 'ramda/es/reject';
 import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 
 interface IProps {
-  data: INode;
-  setData: (val: INode) => void;
+  files: IFile[];
+  setFiles: (val: IFile[]) => void;
   locked: IUploadStatus[];
 }
 
-const ImageGrid: FC<IProps> = ({ data, setData, locked }) => {
+const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setData(assocPath(['files'], moveArrItem(oldIndex, newIndex, data.files), data));
+      setFiles(moveArrItem(oldIndex, newIndex, files) as IFile[]);
     },
-    [data, setData]
+    [setFiles, files]
   );
 
   const onDrop = useCallback(
-    (file_id: IFile['id']) => {
-      setData(
-        assocPath(['files'], reject(el => !el || !el.id || el.id === file_id, data.files), data)
-      );
+    (remove_id: IFile['id']) => {
+      setFiles(files.filter(file => file.id === remove_id));
     },
-    [setData, data]
+    [setFiles, files]
   );
 
   return (
@@ -36,7 +34,7 @@ const ImageGrid: FC<IProps> = ({ data, setData, locked }) => {
       onDrop={onDrop}
       onSortEnd={onMove}
       axis="xy"
-      items={data.files}
+      items={files}
       locked={locked}
       pressDelay={window.innerWidth < 768 ? 200 : 0}
       helperClass={styles.helper}