/gallery/:id

Gallery.jsx

import { Component, PropTypes } from 'react'

import GalleryView from './GalleryView.jsx'
import Loading from './Loading.jsx'

import { createContainer } from 'meteor/react-meteor-data'
import { Galleries } from '../../imports/api/galleries.js'

import { moment } from 'meteor/momentjs:moment'

class Gallery extends Component {
  componentDidMount () {
    document.title = 'Susan Luery Studios - Gallery'
  }

  componentWillMount () {
    document.title = 'Loading...'
  }

  getThumbnailLink () {
    return '/img/' + this.props.gallery.thumbnail
  }

  render () {
    const gallery = this.props.gallery

    if (!gallery)
      return <Loading status={this.props.loading}/>

    let defaultMap = (_, key) => _[key]
    let details = [
      { key: 'name' },
      { key: 'date', fn: _ => moment(_.date).format('MMM Do, YYYY') },
      { key: 'description' },
      { key: 'thumbnail' },
    ].map(({key, fn=defaultMap}) => {
      return (
        <li key={key} className='list-group-item'>
          <span className='badge'>{key}</span>
          {fn(gallery, key)}
        </li>
      )
    })

    return (
      <div className='row'>
        <div className='col-lg-8 col-md-8 pull-left'>
          {/* <h1 className='text-center'>{gallery.name}</h1> */}
          <img src={this.getThumbnailLink()} className='col-lg-12'/>
        </div>
        <div className='col-lg-4 col-md-4 pull-right'>
          <ul className='list-group'>{details}</ul>
        </div>
      </div>
    )
  }
}


Gallery.propTypes = {
  gallery: PropTypes.object,
  loading: PropTypes.bool,
}

export default createContainer((props) => {
  let id = props.params.id
  let handle = Meteor.subscribe('single-gallery', props.params.id)
  return {
    gallery: Galleries.findOne(id),
    loading: handle.ready(),
  }
}, Gallery)