removing uploaded files

src/components/editors/EditorUploadButton/index.tsx

@@ -9,6 +9,7 @@ import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { connect } from 'react-redux';
+import { MAX_NODE_FILES } from '~/redux/node/constants';
 
 const mapStateToProps = state => {
   const { statuses, files } = selectUploads(state);
@@ -41,6 +42,11 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
 
   const onUpload = useCallback(
     (uploads: File[]) => {
+      const current = temp.length + data.files.length;
+      const limit = MAX_NODE_FILES - current;
+
+      if (current >= MAX_NODE_FILES) return;
+
       const items: IFileWithUUID[] = Array.from(uploads).map(
         (file: File): IFileWithUUID => ({
           file,
@@ -51,12 +57,12 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
         })
       );
 
-      const temps = items.map(file => file.temp_id);
+      const temps = items.map(file => file.temp_id).slice(0, limit);
 
       setTemp([...temp, ...temps]);
       uploadUploadFiles(items);
     },
-    [setTemp, uploadUploadFiles, temp]
+    [setTemp, uploadUploadFiles, temp, data]
   );
 
   const onFileAdd = useCallback(

src/components/editors/ImageGrid/index.tsx

@@ -7,6 +7,9 @@ import { IUploadStatus } from '~/redux/uploads/reducer';
 import { getURL } from '~/utils/dom';
 import assocPath from 'ramda/es/assocPath';
 import { moveArrItem } from '~/utils/fn';
+import omit from 'ramda/es/omit';
+import remove from 'ramda/es/remove';
+import reject from 'ramda/es/reject';
 
 interface IProps {
   data: INode;
@@ -19,13 +22,23 @@ const SortableItem = SortableElement(({ children }) => (
 ));
 
 const SortableList = SortableContainer(
-  ({ items, locked }: { items: IFile[]; locked: IUploadStatus[] }) => (
+  ({
+    items,
+    locked,
+    onDrop,
+  }: {
+    items: IFile[];
+    locked: IUploadStatus[];
+    onDrop: (file_id: IFile['id']) => void;
+  }) => (
     <div className={styles.grid}>
-      {items.map((file, index) => (
+      {items
-        <SortableItem key={file.id} index={index} collection={0}>
+        .filter(file => file && file.id)
-          <ImageUpload id={file.id} thumb={getURL(file)} />
+        .map((file, index) => (
-        </SortableItem>
+          <SortableItem key={file.id} index={index} collection={0}>
-      ))}
+            <ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
+          </SortableItem>
+        ))}
 
       {locked.map((item, index) => (
         <SortableItem key={item.temp_id} index={index} collection={1} disabled>
@@ -44,8 +57,18 @@ const ImageGrid: FC<IProps> = ({ data, setData, locked }) => {
     [data, setData]
   );
 
+  const onDrop = useCallback(
+    (file_id: IFile['id']) => {
+      setData(
+        assocPath(['files'], reject(el => !el || !el.id || el.id === file_id, data.files), data)
+      );
+    },
+    [setData, data]
+  );
+
   return (
     <SortableList
+      onDrop={onDrop}
       onSortEnd={onMove}
       axis="xy"
       items={data.files}

src/components/upload/ImageUpload/index.tsx

@@ -1,27 +1,43 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import classNames from 'classnames';
 import * as styles from './styles.scss';
 import { ArcProgress } from '~/components/input/ArcProgress';
+import { IFile } from '~/redux/types';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
-  id?: string;
+  id?: IFile['id'];
   thumb?: string;
   progress?: number;
+  onDrop?: (file_id: IFile['id']) => void;
 
   is_uploading?: boolean;
 }
 
-const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading }) => (
+const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading, id, onDrop }) => {
-  <div className={styles.wrap}>
+  const onDropFile = useCallback(() => {
-    <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+    if (!id || !onDrop) return;
-      {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
+    onDrop(id);
-      {is_uploading && (
+  }, [id, onDrop]);
-        <div className={styles.progress}>
+
-          <ArcProgress size={72} progress={progress} />
+  return (
+    <div className={styles.wrap}>
+      {id && onDrop && (
+        <div className={styles.drop} onMouseDown={onDropFile}>
+          <Icon icon="close" />
         </div>
       )}
+
+      <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+        {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
+        {is_uploading && (
+          <div className={styles.progress}>
+            <ArcProgress size={72} progress={progress} />
+          </div>
+        )}
+      </div>
     </div>
-  </div>
+  );
-);
+};
 
 export { ImageUpload };

src/components/upload/ImageUpload/styles.scss

@@ -57,3 +57,29 @@
 .helper {
   opacity: 0.3;
 }
+
+.drop {
+  width: 24px;
+  height: 24px;
+  background: #222222;
+  position: absolute;
+  right: $gap;
+  top: $gap;
+  border-radius: 12px;
+  z-index: 2;
+  transition: background-color 250ms, opacity 0.25s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    opacity: 1;
+    background-color: $red;
+  }
+}

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback, FormEvent, useEffect } from 'react';
+import React, { FC, useState, useCallback, FormEvent, useEffect, createElement } from 'react';
 import { connect } from 'react-redux';
 import { ScrollDialog } from '../ScrollDialog';
 import { IDialogProps } from '~/redux/modal/constants';
@@ -9,11 +9,11 @@ import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
 import * as styles from './styles.scss';
 import { selectNode } from '~/redux/node/selectors';
-import { ImageEditor } from '~/components/editors/ImageEditor';
 import { EditorPanel } from '~/components/editors/EditorPanel';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { ERROR_LITERAL } from '~/constants/errors';
+import { NODE_EDITORS } from '~/redux/node/constants';
 
 const mapStateToProps = state => {
   const { editor, errors } = selectNode(state);
@@ -27,14 +27,19 @@ const mapDispatchToProps = {
   nodeSetSaveErrors: NODE_ACTIONS.nodeSetSaveErrors,
 };
 
-type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+type IProps = IDialogProps &
+  ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    type: typeof NODE_EDITORS[keyof typeof NODE_EDITORS];
+  };
 
 const EditorDialogUnconnected: FC<IProps> = ({
-  onRequestClose,
   editor,
   errors,
   nodeSave,
   nodeSetSaveErrors,
+  onRequestClose,
+  type,
 }) => {
   const [data, setData] = useState(editor);
   const [temp, setTemp] = useState([]);
@@ -54,6 +59,10 @@ const EditorDialogUnconnected: FC<IProps> = ({
     [data, nodeSave]
   );
 
+  useEffect(() => {
+    if (!NODE_EDITORS[type] && onRequestClose) onRequestClose();
+  }, [type]);
+
   useEffect(() => {
     if (!Object.keys(errors).length) return;
     nodeSetSaveErrors({});
@@ -75,6 +84,8 @@ const EditorDialogUnconnected: FC<IProps> = ({
 
   const error = errors && Object.values(errors)[0];
 
+  if (!NODE_EDITORS[type]) return null;
+
   return (
     <form onSubmit={onSubmit} className={styles.form}>
       <ScrollDialog
@@ -84,7 +95,12 @@ const EditorDialogUnconnected: FC<IProps> = ({
         onClose={onRequestClose}
       >
         <div className={styles.editor}>
-          <ImageEditor data={data} setData={setData} temp={temp} setTemp={setTemp} />
+          {createElement(NODE_EDITORS[type], {
+            data,
+            setData,
+            temp,
+            setTemp,
+          })}
         </div>
       </ScrollDialog>
     </form>

src/containers/dialogs/Modal/index.tsx

@@ -29,6 +29,8 @@ const ModalUnconnected: FC<IProps> = ({
 
   if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null;
 
+  console.log({ onRequestClose });
+
   return ReactDOM.createPortal(
     <div className={styles.fixed}>
       <div className={styles.overlay} onClick={onRequestClose} />
@@ -38,18 +40,18 @@ const ModalUnconnected: FC<IProps> = ({
             {React.createElement(DIALOG_CONTENT[dialog], {
               onRequestClose,
               onDialogChange: modalShowDialog,
-            } as IDialogProps)}
+            })}
           </div>
         </div>
       </div>
     </div>,
-    document.body,
+    document.body
   );
 };
 
 const Modal = connect(
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 )(ModalUnconnected);
 
 export { ModalUnconnected, Modal };

src/containers/editors/EditorDialogImage/index.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { EditorDialog } from '~/containers/dialogs/EditorDialog';
+import { IDialogProps } from '~/redux/types';
+import { NODE_TYPES } from '~/redux/node/constants';
+
+type IProps = IDialogProps & {};
+
+const EditorDialogImage: FC<IProps> = props => <EditorDialog type={NODE_TYPES.IMAGE} {...props} />;
+
+export { EditorDialogImage };

src/redux/modal/constants.ts

@@ -1,5 +1,5 @@
 import { ValueOf } from '~/redux/types';
-import { EditorDialog } from '~/containers/dialogs/EditorDialog';
+import { EditorDialogImage } from '~/containers/editors/EditorDialogImage';
 import { LoginDialog } from '~/containers/dialogs/LoginDialog';
 
 export const MODAL_ACTIONS = {
@@ -14,7 +14,7 @@ export const DIALOGS = {
 };
 
 export const DIALOG_CONTENT = {
-  [DIALOGS.EDITOR_IMAGE]: EditorDialog,
+  [DIALOGS.EDITOR_IMAGE]: EditorDialogImage,
   [DIALOGS.LOGIN]: LoginDialog,
 };
 

src/redux/node/constants.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { IBlock, INode, ValueOf, IComment } from '../types';
 import { NodeImageBlock } from '~/components/node/NodeImageBlock';
+import { ImageEditor } from '~/components/editors/ImageEditor';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -74,3 +75,9 @@ export const EMPTY_COMMENT: IComment = {
   is_private: false,
   user: null,
 };
+
+export const NODE_EDITORS = {
+  [NODE_TYPES.IMAGE]: ImageEditor,
+};
+
+export const MAX_NODE_FILES = 16;

src/redux/types.ts

@@ -58,7 +58,7 @@ export type UUID = string;
 export type IUploadType = 'image' | 'text' | 'audio' | 'video' | 'other';
 
 export interface IFile {
-  id?: UUID;
+  id?: number;
   temp_id?: UUID;
   user_id?: UUID;
   node_id?: UUID;

src/redux/uploads/reducer.ts

@@ -6,7 +6,7 @@ export interface IUploadStatus {
   is_uploading: boolean;
   error: string;
   preview: string;
-  uuid: UUID;
+  uuid: IFile['id'];
   url: string;
   type: string;
   thumbnail_url: string;