gistfile1.js

import React, { Component, StatelessComponent } from 'react'
import Header from '../common/header'
import Flow from '../common/Flow';
import Pagelister from '../common/pagelister';
import { useSelector,useDispatch } from 'react-redux'
import ComponentLister from '../common/ComponentLister';
import Editor from '../common/Editor';
import UsedComponents from '../common/UsedComponents';
import Dragapp from './Dragapp';
import { Trash } from '../../react-page-maker/src';
import core from '../../react-page-maker/src/core/core';
import { deleteComponent } from '../../../redux/actions';


export default () => {

    const store = useSelector(state => state.element, () => {

    })

    const dispatch = useDispatch( )


    const onKeyDown = (e) =>{
        if (e.keyCode === 8) {
            console.log(e.keyCode);


            const elementToDelete = core.getDraggedElement()

            if (elementToDelete) {
                const { removeElement } = elementToDelete;

                removeElement(elementToDelete.elementID, () => {
                    // acknowledge
                    // remove it from the usedComponentList
                    dispatch(deleteComponent(

                        {
                            id:elementToDelete.elementID
                        }

                    ))
                });   
            }


        }


    }

    return (
        <div  onKeyDown={onKeyDown}  tabIndex="0" >   
            <Header></Header>

            {store.editMode == false && (
                <div style={{
                    'display': 'flex',
                    'height': 'calc(100vh - 50px)'
                }}>
                    <Pagelister></Pagelister>
                    <Flow></Flow>
                </div>
            )}


            {store.editMode == true && (
                <div style={{
                    'display': 'flex',
                    'height': 'calc(100vh - 50px)'
                }}>
                  <UsedComponents></UsedComponents>
                  <Dragapp  ></Dragapp>
                  <Editor></Editor>
                  <ComponentLister></ComponentLister>

                </div>
            )}

        </div>
    )

}