canape/src/public/js/components/list/posters.js

import React from 'react'

import fuzzy from 'fuzzy';
import InfiniteScroll from 'react-infinite-scroller';

import ListFilter from './filter'
import ExplorerOptions from './explorerOptions'
import ListPoster from './poster'

import Loader from '../loader/loader'

const DEFAULT_LIST_SIZE = 30;
const DEFAULT_ADD_EXTRA_ITEMS = 30;

export default class ListPosters extends React.Component {
  constructor(props) {
    super(props);
    this.loadMore = this.loadMore.bind(this);
    this.state = this.getNextState(props);
  }
  loadMore() {
    // Nothing to do if the app is loading
    if (this.props.loading) {
      return;
    }

    if (!this.props.data.length) {
      return;
    }

    this.setState(this.getNextState(this.props));
  }
  getNextState(props) {
    let totalListSize = props.data.length;
    let currentListSize = (this.state && this.state.items) ? this.state.items : 0;
    let nextListSize = currentListSize + DEFAULT_ADD_EXTRA_ITEMS;
    let hasMore = true;

    if (nextListSize >= totalListSize) {
      nextListSize = totalListSize;
      hasMore = false;
    }

    return {
      items: nextListSize,
      hasMore: hasMore,
    };
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.data.length !== nextProps.data.length) {
      this.setState(this.getNextState(nextProps));
    }
  }
  render() {
    let elmts = this.props.data.slice();
    const listSize = elmts.length;
    const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12";

    // Filter the list of elements
    if (this.props.filter !== "") {
      const filtered = fuzzy.filter(this.props.filter, elmts, {
        extract: (el) => el.title
      });
      elmts = filtered.map((el) => el.original);
    } else {
      elmts = elmts.slice(0, this.state.items);
    }

    // Chose when to display filter / explore options
    let displayFilter = true;
    if (this.props.params
      && this.props.params.category
      && this.props.params.category !== ""
      && this.props.params.source
      && this.props.params.source !== "") {
      displayFilter = false;
    }

    return (
      <div className={colSize}>
        <ListFilter
          listSize={listSize}
          display={displayFilter}
          formModel={this.props.formModel}
          controlModel={this.props.filterControlModel}
          controlPlaceHolder={this.props.filterControlPlaceHolder}
        />
        <ExplorerOptions
          type={this.props.type}
          display={!displayFilter}
          params={this.props.params}
          router={this.props.router}
          options={this.props.exploreOptions}
        />
        <Posters
          elmts={elmts}
          loading={this.props.loading}
          hasMore={this.state.hasMore}
          loadMore={this.loadMore}
          selectedImdbId={this.props.selectedImdbId}
          onClick={this.props.onClick}
        />
      </div>
    );
  }
}

function Posters(props) {
  if (props.loading) {
    return (<Loader />);
  }

  if (props.elmts.length === 0)  {
    return (
      <div className="jumbotron">
        <h2>No result</h2>
      </div>
    );
  }

  return (
    <div>
      <InfiniteScroll
        hasMore={props.hasMore}
        loadMore={props.loadMore}
        className="row"
      >
        {props.elmts.map(function(el, index) {
          const selected = (el.imdb_id === props.selectedImdbId) ? true : false;
          return (
            <ListPoster
              index={index}
              data={el}
              key={el.imdb_id}
              selected={selected}
              onClick={() => props.onClick(el.imdb_id)}
            />
          )}
        )}
        </InfiniteScroll>
      </div>
  );
}