src/components/PopularPhotosGrid.js
/**
   * ### Render
   *
   * @return {Component} Display the popular feed photos grid
   */
Render
@return {Component} Display the popular feed photos grid
Render @return { Component } Display the popular feed photos grid
render() {
    const { popularPhotos } = this.props
    const size = {width: windowWidth, height: windowWidth}
    const placeholder = [0].map(
      (photo, i) => {
        return (
        <View key={i} style={[styles.placeholder, size]}>
        </View>
        )
      }
    )
    const photosRecieved = Boolean(popularPhotos[0])
    const IMAGES_PER_ROW = 3
    const calculatedSize = function(){
      const size = windowWidth / IMAGES_PER_ROW
      return {width: size, height: size}
    }
    const renderRow = function(images) {
      return images.map((uri,i) =>{
        return(
          <Image key={i} style={[styles.item, calculatedSize()]} source={{uri: uri}} />
        )
      })
    }
    const renderImagesInGroupsOf = function(count) {
      return _.chunk(popularPhotos, IMAGES_PER_ROW).map((imagesForRow, i) => {
        return (
          <View style={styles.row} key={i}>
            {renderRow(imagesForRow)}
          </View>
        )
      })
    }
    let images = renderImagesInGroupsOf(3)
    return (
      <View style={styles.container}>
        {photosRecieved ? images : placeholder}
      </View>
    )
  }
render ( ) { const { popularPhotos } = this . props const size = { width : windowWidth , height : windowWidth } const placeholder = [ 0 ] . map ( ( photo , i ) => { return ( < View key = { i } style = { [ styles . placeholder , size ] } > < / View > ) } ) const photosRecieved = Boolean ( popularPhotos [ 0 ] ) const IMAGES_PER_ROW = 3 const calculatedSize = function ( ) { const size = windowWidth / IMAGES_PER_ROW return { width : size , height : size } } const renderRow = function ( images ) { return images . map ( ( uri , i ) => { return ( < Image key = { i } style = { [ styles . item , calculatedSize ( ) ] } source = { { uri : uri } } / > ) } ) } const renderImagesInGroupsOf = function ( count ) { return _ . chunk ( popularPhotos , IMAGES_PER_ROW ) . map ( ( imagesForRow , i ) => { return ( < View style = { styles . row } key = { i } > { renderRow ( imagesForRow ) } < / View > ) } ) } let images = renderImagesInGroupsOf ( 3 ) return ( < View style = { styles . container } > { photosRecieved ? images : placeholder } < / View > ) }
### Render
 @return {Component} Display the popular feed photos grid
### Render @return { Component } Display the popular feed photos grid