import React, { Component } from 'react';
import { Link  } from 'react-router'
import { connect } from 'react-redux'
import {bindActionCreators} from 'redux';

import { loadFrames } from './actions'

class Frames extends Component {

  constructor() {
    super()
    this.state = {newFrameName: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    this.props.loadFrames()
  }

  render() {
    return (
      <div>
        <h1>Frames</h1>
        <ul>
        {this.props.frames.items.map(frame => (
          <li key={`frame${frame.name}`}><Link to={`/frames/${frame.id}`}>{frame.name}</Link></li>
        ))}
        </ul>

        <form onSubmit={this.handleSubmit}>
          <div>Create New Frame</div>
          <input type="text" value={this.state.newFrameName} onChange={this.handleChange} />
          <input type="submit" value="Submit" />
        </form>
      </div>)
  }


  handleChange(event) {
    this.setState({newFrameName: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();

    const {newFrameName} = this.state;
    var form = new FormData();
    form.append('name', newFrameName)

    fetch("/api/frames", {
      method: "POST",
      body: form,
      credentials: 'include'
    }).then(() => {
      setTimeout(this.props.loadFrames, 500)
    });

    this.setState({newFrameName: ''})
  }

}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({loadFrames}, dispatch);
}

function mapStateToProps(state) {
    return {
        frames: state.frames
    };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Frames)

@@ -164,39 +164,411 @@
 ort 
-%7B loadFrames %7D from './actions'
+TextField from 'material-ui/TextField'%0Aimport Button from 'material-ui/Button'%0Aimport List, %7B ListItem, ListItemText %7D from 'material-ui/List';%0Aimport Avatar from 'material-ui/Avatar';%0Aimport %7B withStyles %7D from 'material-ui/styles';%0Aimport %7B CropOriginal %7D from 'material-ui-icons';%0A%0Aimport %7B loadFrames %7D from './actions'%0A%0Aconst styles = theme =%3E (%7B%0A  root: %7B%0A    flexGrow: 1,%0A    margin: 30,%0A  %7D,%0A%7D);
 %0A%0Acl
@@ -858,27 +858,97 @@
     
-return (%0A      %3Cdiv
+const %7B classes, frames %7D = this.props;%0A%0A    return (%0A      %3Cdiv className=%7Bclasses.root%7D
 %3E%0A  
@@ -978,18 +978,20 @@
        %3C
-ul
+List
 %3E%0A      
@@ -996,20 +996,11 @@
     
-%7Bthis.props.
+  %7B
 fram
@@ -1023,16 +1023,18 @@
 me =%3E (%0A
+  
         
@@ -1040,22 +1040,36 @@
    %3C
-li
+ListItem button
  key=%7B%60
-fr
+stre
 am
-e
 $%7Bfr
@@ -1083,14 +1083,47 @@
 e%7D%60%7D
-%3E%3C
+%0A                      component=%7B
 Link
+%7D
  to=
@@ -1150,33 +1150,167 @@
 %7D%60%7D%3E
-%7Bframe.name%7D%3C/Link%3E%3C/li%3E%0A
+%0A              %3CAvatar%3E%0A                %3CCropOriginal /%3E%0A              %3C/Avatar%3E%0A              %3CListItemText primary=%7Bframe.name%7D /%3E%0A            %3C/ListItem%3E%0A  
     
@@ -1327,18 +1327,20 @@
       %3C/
-ul
+List
 %3E%0A%0A     
@@ -1393,62 +1393,41 @@
    %3C
-div%3ECreate New Frame%3C/div%3E%0A          %3Cinput type=%22text
+TextField label=%22Create New Frame
 %22 va
@@ -1503,44 +1503,63 @@
    %3C
-input type=%22submit%22 value=%22S
+Button raised color=%22primary%22 type=%22s
 ubmit%22
- /
+%3EAdd%3C/Button
 %3E%0A  
@@ -2253,16 +2253,35 @@
 default 
+withStyles(styles)(
 connect(
@@ -2330,9 +2330,10 @@
 (Frames)
+)
 %0A

Refactor Frames page to Materials