removing uploaded files

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 };