drag-and-drop on form

src/components/editors/ImageEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, {FC, useCallback, useEffect} from 'react';
 import { INode } from '~/redux/types';
 import * as styles from './styles.scss';
 
@@ -8,10 +8,26 @@ interface IProps {
 };
 
 const ImageEditor: FC<IProps> = ({
-}) => (
-    <div className={styles.uploads}>
-      <div />
-    </div>
-  )
+  data,
+  setData,
+}) => {
+  const eventPreventer = useCallback(event => event.preventDefault(), []);
 
-export { ImageEditor };
+  useEffect(() => {
+    window.addEventListener("dragover", eventPreventer,false);
+    window.addEventListener("drop",eventPreventer,false);
+
+    return () => {
+      window.removeEventListener("dragover", eventPreventer,false);
+      window.removeEventListener("drop",eventPreventer,false);
+    }
+  }, [eventPreventer]);
+
+  return (
+    <form className={styles.uploads} onDrop={e => { console.log(e.dataTransfer.files);}}>
+      <div>{data.type}</div>
+    </form>
+  );
+};
+
+export { ImageEditor };

src/components/editors/ImageEditor/styles.scss

@@ -11,4 +11,4 @@
   @media (max-width: 600px) {
     grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
   }
-}
+}

src/containers/dialogs/EditorDialog/index.tsx

@@ -4,7 +4,7 @@ import { IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
-import { Button } from '../../../components/input/Button/index';
+import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
 import * as styles from './styles.scss';
 import { connect } from 'react-redux';

src/redux/modal/reducer.ts

@@ -10,7 +10,7 @@ export interface IModalState {
 
 const INITIAL_STATE: IModalState = {
   is_shown: true,
-  dialog: DIALOGS.LOGIN,
+  dialog: DIALOGS.EDITOR,
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

src/redux/node/constants.ts

@@ -1,4 +1,10 @@
-import { INode } from "../types";
+import {IBlock, INode} from "../types";
+
+export const EMPTY_BLOCK: IBlock = {
+  type: null,
+  temp_ids: [],
+  attaches: [],
+};
 
 export const EMPTY_NODE: INode = {
   id: null,
@@ -11,10 +17,12 @@ export const EMPTY_NODE: INode = {
   cover: null,
   type: null,
 
+  blocks: [],
+
   options: {
     flow: {
       display: 'single',
       show_description: false,
     }
   },
-}
+}

src/redux/node/reducer.ts

@@ -1,6 +1,6 @@
 import { createReducer } from "~/utils/reducer";
 import { INode } from "../types";
-import { EMPTY_NODE } from "./constants";
+import {EMPTY_BLOCK, EMPTY_NODE} from "./constants";
 import { NODE_HANDLERS } from "./handlers";
 
 export type INodeState = Readonly<{
@@ -13,10 +13,14 @@ export type INodeState = Readonly<{
 const INITIAL_STATE: INodeState = {
   editor: {
     ...EMPTY_NODE,
+    type: 'image',
+    blocks: [
+      { ...EMPTY_BLOCK, type: 'image' },
+    ]
   },
   is_loading: false,
   error: null,
   errors: {},
 };
 
-export default createReducer(INITIAL_STATE, NODE_HANDLERS);
+export default createReducer(INITIAL_STATE, NODE_HANDLERS);

src/redux/types.ts

@@ -64,6 +64,12 @@ export interface IFile {
   updatedAt?: string;
 }
 
+export interface IBlock {
+  type: 'image' | 'text' | 'media' | 'youtube' | 'video',
+  temp_ids: UUID[];
+  attaches: UUID[];
+}
+
 export interface INode {
   id?: UUID;
   user_id: UUID;
@@ -74,6 +80,8 @@ export interface INode {
   cover: IFile['id'];
   type: 'image';
 
+  blocks: IBlock[];
+
   brief?: {
     thumbnail?: string;
     description?: string;
@@ -90,4 +98,4 @@ export interface INode {
 
   createdAt?: string;
   updatedAt?: string;
-}
+}