file sorting

src/components/editors/ImageEditor/index.tsx

@@ -7,6 +7,7 @@ import { selectUploads } from '~/redux/uploads/selectors';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
 import { ImageGrid } from '~/components/editors/ImageGrid';
+import { moveArrItem } from '~/utils/fn';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -18,12 +19,14 @@ type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
   setData: (val: INode) => void;
 }
 
-
-
 const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles, statuses, files }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
   const [temp, setTemp] = useState([]);
 
+  const onFileMove = useCallback((old_index: number, new_index: number) => {
+    setData(assocPath(['files'], moveArrItem(old_index, new_index, data.files), data));
+  }, [data, setData]);
+
   const onFileAdd = useCallback((file: IFile) => {
     setData(assocPath(['files'], append(file, data.files), data));
   }, [data, setData]);
@@ -96,6 +99,7 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
 
   return (
     <ImageGrid
+      onFileMove={onFileMove}
       items={data.files}
       locked={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
     />

src/components/editors/ImageGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactChildren } from 'react';
+import React, { FC, ReactChildren, useCallback } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
 import { ImageUpload } from '~/components/upload/ImageUpload';
@@ -8,6 +8,7 @@ import { IUploadStatus } from '~/redux/uploads/reducer';
 interface IProps {
   items: IFile[];
   locked: IUploadStatus[];
+  onFileMove: (o: number, n: number) => void;
 };
 
 const SortableItem = SortableElement(({ children }) => <div className={styles.item}>{children}</div>);
@@ -44,11 +45,12 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
 const ImageGrid: FC<IProps> = ({
   items,
   locked,
+  onFileMove,
 }) => {
-
+  const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]);
 
   return (
-    <SortableList onSortEnd={console.log} axis="xy" items={items} locked={locked} />
+    <SortableList onSortEnd={onMove} axis="xy" items={items} locked={locked} />
   )
 }
 

src/utils/fn.ts

@@ -0,0 +1,6 @@
+import curry from 'ramda/es/curry';
+import insert from 'ramda/es/insert';
+import nth from 'ramda/es/nth';
+import remove from 'ramda/es/remove';
+
+export const moveArrItem = curry((at, to, list) => insert(to, nth(at, list), remove(at, 1, list)))