import React, { Component, PropTypes } from 'react';
import connectData from 'helpers/connectData';
import * as searchActions from 'redux/modules/search';
import { QueryInput } from 'components';
import { pushState } from 'redux-router';
import { reduxForm } from 'redux-form';
import { Link } from 'react-router';

function fetchDataDeferred(getState, dispatch) {
  const query = getState().router.location.query.q;
  if (searchActions.currentQuery(getState().search) !== query) {
    return dispatch(searchActions.performSearch(query));
  }
}

function renderMovie(inMovie) {
  const id = inMovie.get('id');
  return (<div key={id}>
    <Link to={`/movies/${id}`}>
      {inMovie.get('title')}
    </Link>
  </div>);
}

@connectData(null, fetchDataDeferred)
@reduxForm({
  form: 'search',
  fields: ['query'],
}, state => ({
  searchState: state.search,
  initialValues: {query: state.search.get('query')}
}), {pushState})
export default class Search extends Component {
  static propTypes = {
    searchState: PropTypes.object,
    fields: PropTypes.object,
    pushState: PropTypes.func,
    initialValues: PropTypes.object,
  };

  render() {
    const queryField = this.props.fields.query;
    const movies = this.props.searchState.get('movies');
    if (!searchActions.isLoaded(this.props.searchState)) {
      return (
        <div>Loading...</div>
      );
    }
    return (
      <div>
        <QueryInput queryField={queryField} onSubmit={newQuery => {
          this.props.pushState(null, '/search', {q: newQuery});
        }} />
        {movies.map(renderMovie)}
      </div>
    );
  }
}

@@ -282,18 +282,87 @@
 ort %7B Li
-nk
+stGroup, ListGroupItem %7D from 'react-bootstrap';%0Aimport %7B LinkContainer
  %7D from 
@@ -374,16 +374,26 @@
 t-router
+-bootstrap
 ';%0A%0Afunc
@@ -696,22 +696,8 @@
 rn (
-%3Cdiv key=%7Bid%7D%3E
 %0A   
@@ -702,16 +702,25 @@
    %3CLink
+Container
  to=%7B%60/m
@@ -734,16 +734,49 @@
 %7Bid%7D%60%7D%3E%0A
+      %3CListGroupItem key=%7Bid%7D%3E%0A  
       %7Bi
@@ -804,24 +804,50 @@
     
+ 
+ 
 %3C/Li
-nk%3E%0A  %3C/div%3E
+stGroupItem%3E%0A    %3C/LinkContainer%3E%0A  
 );%0A%7D
@@ -1669,16 +1669,38 @@
   %7D%7D /%3E%0A
+        %3CListGroup%3E%0A  
         
@@ -1725,16 +1725,37 @@
 Movie)%7D%0A
+        %3C/ListGroup%3E%0A
       %3C/

use a listgroup