// App.js

import React, { Component } from 'react';
import { Grid } from 'semantic-ui-react';
import MainView from './MainView';
import ItemList from './ItemList';

class App extends Component {
    constructor(props) {
        super(props);
        this.onDragEnd = this.onDragEnd.bind(this);
    }

    onDragEnd(result) {
        if (!result.destination) {
            return;
        }
        // reorder the destination list
        // set the state of the destination component
    }

    render() {
        return (
            <div className="App">
                <DragDropContext onDragEnd={this.onDragEnd}>
                    <Grid columns={2}>
                        <Grid.Column width={13}>
                            <MainView />
                        </Grid.Column>
                        <Grid.Column width={3}>
                            <ItemList />
                        </Grid.Column>
                    </Grid>
                </DragDropContext>
            </div>
        );
    }
}

export default App;