index.js

import React from 'react';
import ReactDOM from 'react-dom';
import '@atlaskit/css-reset';
import styled from 'styled-components';
import {DragDropContext, Droppable} from 'react-beautiful-dnd';
import initialData from './initial-data';
import Column from './column';

const Container = styled.div`
  display:flex;
`;

class InnerList extends React.Component{
    shouldComponentUpdate(nextProps){
        if (
            nextProps.column === this.props.column &&
            nextProps.taskMap === this.props.taskMap &&
            nextProps.index === this.props.index
        ){
            return false;
        }
        return true;
    }
    
    render() {
        const { column, taskMap, index } = this.props;
        const tasks = column.taskIds.map(taskId => taskMap[taskId]);
        return <Column column={column} tasks={tasks} index={index}/>
    }
}

class App extends React.Component {
    state = initialData;
    onDragEnd = result => {

        const { destination, source, draggableId, type } = result;

        if (!destination) {
            return;
        }

        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }

        if (type === 'column') {
            const newColumnOrder = Array.from(this.state.columnOrder);
            newColumnOrder.splice(source.index, 1);
            newColumnOrder.splice(destination.index, 0, draggableId);

            const newState = {
                ...this.state,
                //lowercase c
                columnOrder: newColumnOrder,
            };
            this.setState(newState);
            return;
        }

        const home = this.state.columns[source.droppableId];
        const foreign = this.state.columns[destination.droppableId];

        if(home === foreign ){
        const newTaskIds = Array.from(home.taskIds);
        newTaskIds.splice(source.index, 1);
        newTaskIds.splice(destination.index, 0, draggableId);


        const newHome = {
            ...home,
            taskIds: newTaskIds,
        };

        const newState = {
            ...this.state,
            columns: {
            ...this.state.columns,
            [newHome.id]: newHome,
            },
        };

        this.setState(newState);
        return;
        }

        const homeTaskIds = Array.from(home.taskIds);
        homeTaskIds.splice(source.index, 1);
        const newHome ={
            ...home,
            taskIds: homeTaskIds,
          };
        const foreignTaskIds = Array.from(foreign.taskIds);
        foreignTaskIds.splice(destination.index,0, draggableId);
        const newForeign = {
            ...foreign,
            taskIds: foreignTaskIds,
        }
        const newState = {
            ...this.state,
            columns: {
                ...this.state.columns,
                [newHome.id]: newHome,
                [newForeign.id]: newForeign,
            },
        };
        this.setState(newState);
    };
        
    render() {
        return( 
            <DragDropContext onDragEnd={this.onDragEnd}>
            <Droppable 
              droppableId="all-columns" 
              direction="horizontal" 
              type="column"
            >
                {provided => (
                <Container
                {...provided.droppableProps}
                innerRef={provided.innerRef}
                >
            {this.state.columnOrder.map((columnId, index) => {
            const column = this.state.columns[columnId];
            //const tasks = column.taskIds.map(taskId => this.state.tasks[taskId]);
            return ( 
            <InnerList 
            key={column.id} 
            column={column} 
            taskMap={this.state.tasks} 
            index={index}
            />
            );
            })}
            {provided.placeholder}
             </Container>
                )}
              </Droppable>
            </DragDropContext>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));