import React from 'react';

export default class List extends React.Component {

    constructor() {
        super();

        this.updateData = this.updateData.bind(this);
        this.addData = this.addData.bind(this);

        this.state = { myData: [
                                    {
                                        title: "Intro to React",
                                        speaker: "Taggart Bowen-Gaddy",
                                        time: "10:00am"
                                    },
                                    {
                                        title: "Lets talk about Flux",
                                        speaker: "Andrew Smith",
                                        time: "11:00am"
                                    },
                                    {
                                        title: "Dataflow through React",
                                        speaker: "Clint Ayres",
                                        time: "1:00pm"
                                    },
                                    {
                                        title: "Building HUGE Flux Applications",
                                        speaker: "Jordan Garcia",
                                        time: "2:00pm"
                                    },
                                    {
                                        title: "Exploring React Native",
                                        speaker: "Josh Jensen",
                                        time: "3:30pm"
                                    },
                                    {
                                        title: "Why is React Functional",
                                        speaker: "John K Paul",
                                        time: "4:30pm"
                                    }
                                ]
                    }
    }

    render() {
        return (
            <div className="list">
                <div className="list-title" onClick={ this.updateData }>
                    React Track - Connect JS
                </div>
                <div className="list-items">
                    { this.state.myData.map(datum => (<ListItem itemData={ datum } key={ datum.title } />))}
                </div>
                <button onClick={ this.addData }>Add Item</button>
            </div>
        )
    }

    updateData(newData) {
        this.setState({ data: newData });
    }

    addData(evt) {
        var newItem = {
                        title: "Reacting with React",
                        speaker: "George P. Burdell",
                        time: "11:30pm"
                    };
        var newData = this.state.myData.push(newItem);
        this.updateData(newData);
    }
};

class ListItem extends React.Component {

    constructor() {
        super();

        this.toggleFavorited = this.toggleFavorited.bind(this);

        this.state = {};
    }

    render() {
        return (
            <div className="list-item" style={{backgroundColor: this.state.favorited ? 'gold' : '#eee'}} onClick={ this.toggleFavorited }>
                <div className="title">
                    { this.props.itemData.title }
                </div>
                <div className="speaker">
                    { this.props.itemData.speaker }
                </div>
                <div className="time">
                    { this.humanizeTime(this.props.itemData.time) }
                </div>
            </div>
        )
    }

    humanizeTime(hourOfDay) {
        // Make the time human readable
        return hourOfDay;
    }

    toggleFavorited() {
        this.setState({
            favorited: !this.state.favorited
        });
    }
}


@@ -413,19 +413,16 @@
 art 
-Bowen-Gaddy
+& Andrew
 %22,%0A 
@@ -470,17 +470,17 @@
 me: %2210:
-0
+1
 0am%22%0A   
@@ -605,28 +605,38 @@
 e: %22
-Lets talk about Flux
+Navigating the React Ecosystem
 %22,%0A 
@@ -688,20 +688,20 @@
 r: %22
-Andrew Smith
+Ben Ilegbodu
 %22,%0A 
@@ -749,17 +749,17 @@
 me: %2211:
-0
+2
 0am%22%0A   
@@ -884,23 +884,34 @@
 e: %22
-Dataflow throug
+Making Designers Happy wit
 h Re
@@ -970,18 +970,20 @@
 r: %22
-Clint Ayre
+Brian Dougla
 s%22,%0A
@@ -1031,17 +1031,17 @@
 ime: %221:
-0
+2
 0pm%22%0A   
@@ -1166,39 +1166,21 @@
 e: %22
-Building HUGE Flux Applications
+Testing React
 %22,%0A 
@@ -1232,21 +1232,21 @@
 r: %22
-Jordan Garcia
+Kent C. Dodds
 %22,%0A 
@@ -1293,17 +1293,17 @@
 ime: %222:
-0
+3
 0pm%22%0A   
@@ -1428,30 +1428,47 @@
 e: %22
-Exploring React Native
+Building distributed systems with Redux
 %22,%0A 
@@ -1520,19 +1520,19 @@
 r: %22
-Josh Jensen
+Clint Ayres
 %22,%0A 
@@ -1581,11 +1581,11 @@
 e: %22
-3:3
+4:0
 0pm%22
@@ -1714,31 +1714,35 @@
 e: %22
-Why is React Functional
+Isomorphic React w/o Node??
 %22,%0A 
@@ -1794,19 +1794,20 @@
 r: %22
-John K Paul
+Ben Ilegbodu
 %22,%0A 
@@ -1856,11 +1856,11 @@
 e: %22
-4:3
+5:1
 0pm%22
@@ -2146,11 +2146,13 @@
 nect
- JS
+.Tech
 %0A   
@@ -3799,9 +3799,8 @@
     %7D%0A%7D%0A
-%0A

update to 2016