MovieTile.js

// @flow

import React from 'react';
import classNames from 'classnames';
import ContainerDimensions from 'react-container-dimensions';
import CardCarousel from '../CardCarousel';
import MovieDetailsCard from '../MovieDetailsCard';
import type {
  PropsType as MovieDetailsCardPropsType
} from '../../components/MovieDetailsCard';
import VenueMovieEvents from '../VenueMovieEvents';
import './styles.scss';

type MovieTilePropsType = {
  +movie: $PropertyType<MovieDetailsCardPropsType, 'movie'>
};

export default ({movie}: MovieTilePropsType) => {
  const venues = movie.venues.slice(0, 3);

  const venueList = venues.map((venue) => {
    return <VenueMovieEvents
      events={venue.events}
      key={venue.id}
      paginate={true}
      venue={venue}
    />;
  });

  const noVenues = <div key='no-venues' styleName='no-venues'>
    <span styleName='call-to-action'>
      No nearby showtimes. Try searching a different location or date.
    </span>
  </div>;

  const lastVenue = <div key='last-venue' styleName='last-venue'>
    <span styleName='call-to-action'>
      <b>Change location</b><br />to see other venues playing the movie.
    </span>
  </div>;

  if (venues.length) {
    venueList.push(lastVenue);
  } else {
    venueList.push(noVenues);
  }

  const MovieTileBody = ({width}) => {
    const fullWidth = width > 320 * 4;

    const styleName = classNames({
      'movie-card': true,
      'one-column': !fullWidth,
      'two-columns': fullWidth
    });

    return <div styleName='movie-title'>
      <div styleName={styleName}>
        <MovieDetailsCard
          movie={movie}
        />
      </div>

      <div styleName='venue-list'>
        <CardCarousel>
          {venueList}
        </CardCarousel>
      </div>
    </div>;
  };

  return <ContainerDimensions>{MovieTileBody}</ContainerDimensions>;
};