import React from 'react'
import { connect } from 'react-redux'
import { List, ListItem } from 'material-ui/List'
import AppBar from 'material-ui/AppBar'
import Subheader from 'material-ui/Subheader'
import Link from './Link'
import moment from 'moment'

class ListPage extends React.PureComponent {
  render() {
    return (
      <div>
        <AppBar />
        <List>
          {this.renderComicBooks()}
        </List>
      </div>
    )
  }

  renderComicBooks() {
    let comicBooks = this.props.comicBooks.sortBy(
      comicBook => comicBook.get('published')
    )

    let lastYear

    return comicBooks.flatMap(comicBook => {
      const year = moment(comicBook.get('published')).format('YYYY')
      const headerNeeded = year !== lastYear
      lastYear = year

      const id = comicBook.get('id')

      return [
        this.renderHeader(year, headerNeeded),
        <Link to={`/${id}`} key={id}>
          <ListItem primaryText={this.renderMainInfo(comicBook)} />
        </Link>,
      ]
    })
  }

  renderHeader(year, headerNeeded) {
    if (headerNeeded) {
      return (
        <Subheader key={year}>{year}</Subheader>
      )
    }
  }

  renderMainInfo(comicBook) {
    const name = comicBook.get('name')
    const number = comicBook.get('number')
    const published = moment(comicBook.get('published')).format('D.M.YYYY')
    return `${name} #${number} - ${published}`
  }
}

const mapStateToProps = state => ({
  comicBooks: state.get('comicBooks'),
})

export default connect(mapStateToProps)(ListPage)

@@ -147,16 +147,309 @@
 AppBar'%0A
+import TextField from 'material-ui/TextField'%0Aimport IconButton from 'material-ui/IconButton'%0Aimport ActionSearch from 'material-ui/svg-icons/action/search'%0Aimport NavigationMenu from 'material-ui/svg-icons/navigation/menu'%0Aimport NavigationClose from 'material-ui/svg-icons/navigation/close'%0A
 import S
@@ -486,16 +486,16 @@
 header'%0A
-
 import L
@@ -636,18 +636,29 @@
     
-%3C
+%7Bthis.render
 AppBar
- /%3E
+()%7D
 %0A   
@@ -717,24 +717,24 @@
     %3C/List%3E%0A
-
       %3C/div%3E
@@ -741,24 +741,552 @@
 %0A    )%0A  %7D%0A%0A
+  renderAppBar() %7B%0A    return (%0A      %3CAppBar%0A        // iconElementRight=%7B%3CIconButton%3E%3CActionSearch /%3E%3C/IconButton%3E%7D%0A%0A        iconElementLeft=%7B%3CIconButton%3E%3CActionSearch /%3E%3C/IconButton%3E%7D%0A        title=%7Bthis.renderSearchBar()%7D%0A        iconElementRight=%7B%3CIconButton%3E%3CNavigationClose /%3E%3C/IconButton%3E%7D%0A      /%3E%0A    )%0A  %7D%0A%0A  renderSearchBar() %7B%0A    return (%0A      %3CTextField%0A        fullWidth%0A        hintText=%22Hae...%22%0A        hintStyle=%7B%7B color: 'white' %7D%7D%0A        underlineFocusStyle=%7B%7B borderColor: 'white' %7D%7D%0A      /%3E%0A    )%0A  %7D%0A%0A
   renderComi

Add first draft of search bar to list page