<commit_before>import React, { Component, PropTypes } from 'react';
import connectData from 'helpers/connectData';
import * as movieDuck from 'redux/modules/movie';
import { connect } from 'react-redux';
import Loader from 'react-loader';
import { Link } from 'react-router';
import { Glyphicon } from 'react-bootstrap';

function fetchDataDeferred(getState, dispatch, location, {id}) {
  if (!movieDuck.isLoaded(getState().movie, id)) {
    return dispatch(movieDuck.load(id));
  }
}

function renderSearchLink(searchState) {
  if (!searchState.get('query')) {
    return undefined;
  }
  return (<div>
    <Link to={`/search?q=${searchState.get('query')}&page=${searchState.get('page')}`}>
      <Glyphicon glyph="chevron-left" />
      Back to search
    </Link>
  </div>);
}

@connectData(null, fetchDataDeferred)
@connect(state => ({
  movieIndex: state.movie,
  searchState: state.search
}))
export default class Movie extends Component {
  static propTypes = {
    routeParams: PropTypes.object,
    movieIndex: PropTypes.object,
    searchState: PropTypes.object,
  }
  render() {
    console.log('search state is', this.props.searchState);
    const movie = this.props.movieIndex.get(this.props.routeParams.id);
    if (!movie) {
      return (<Loader
        color="#2C3E50"
        speed={2}
        radius={15}
        length={20}
        top="100px"
        hwaccel
      />);
    }
    return (<div>
      {renderSearchLink(this.props.searchState)}
      <h2>{movie.get('title')}</h2>
      <div>
        <img src={movie.get('posters').get('detailed')} />
      </div>
      <h3>{movie.get('year')} {movie.get('mpaa_rating')}</h3>
      <p>Directed by: {movie.get('abridged_directors').first()}</p>
      <p>Critic rating: {movie.get('ratings').get('critics_score')}</p>
      <p>Audience rating: {movie.get('ratings').get('audience_score')}</p>
      <p>{movie.get('synopsis')}</p>
    </div>);
  }
}<commit_msg>Wrap everything in panels<commit_after>import React, { Component, PropTypes } from 'react';
import connectData from 'helpers/connectData';
import * as movieDuck from 'redux/modules/movie';
import { connect } from 'react-redux';
import Loader from 'react-loader';
import { Link } from 'react-router';
import { Glyphicon, Panel, PageHeader, Jumbotron } from 'react-bootstrap';

function fetchDataDeferred(getState, dispatch, location, {id}) {
  if (!movieDuck.isLoaded(getState().movie, id)) {
    return dispatch(movieDuck.load(id));
  }
}

function renderSearchLink(searchState) {
  if (!searchState.get('query')) {
    return undefined;
  }
  return (<div>
    <Link to={`/search?q=${searchState.get('query')}&page=${searchState.get('page')}`}>
      <Glyphicon glyph="chevron-left" />
      Back to search
    </Link>
  </div>);
}

function maybeRenderPanel(title, value) {
  if (!value) {
    return undefined;
  }
  return (<Panel header={title}>
    {value}
  </Panel>);
}

@connectData(null, fetchDataDeferred)
@connect(state => ({
  movieIndex: state.movie,
  searchState: state.search
}))
export default class Movie extends Component {
  static propTypes = {
    routeParams: PropTypes.object,
    movieIndex: PropTypes.object,
    searchState: PropTypes.object,
  }
  render() {
    console.log('search state is', this.props.searchState);
    const movie = this.props.movieIndex.get(this.props.routeParams.id);
    if (!movie) {
      return (<Loader
        color="#2C3E50"
        speed={2}
        radius={15}
        length={20}
        top="100px"
        hwaccel
      />);
    }
    return (<div>
      {renderSearchLink(this.props.searchState)}
      <PageHeader>{movie.get('title')} <small>{movie.get('year')}</small></PageHeader>
      <Jumbotron>
        <img src={movie.get('posters').get('detailed')} />
      </Jumbotron>
      {maybeRenderPanel('MPAA Rating', movie.get('mpaa_rating'))}
      {maybeRenderPanel('Director', movie.get('abridged_directors').first().get('name'))}
      {maybeRenderPanel('Critic rating', movie.get('ratings').get('critics_score'))}
      {maybeRenderPanel('Audience rating', movie.get('ratings').get('audience_score'))}
      {maybeRenderPanel('Synopsis', movie.get('synopsis'))}
    </div>);
  }
}
{'fraction_non_alphanumeric': 0.17181143814309643, 'fraction_numerical': 0.006700167504187605, 'mean_word_length': 3.7608200455580865, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3491375', 'n_tokens_mistral': 1399, 'n_tokens_neox': 1367, 'n_words': 256}