import React from 'react'
import { parsePost } from '../parsers/PostParser'

class PostsAsGrid extends React.Component {
  static propTypes = {
    posts: React.PropTypes.object,
    json: React.PropTypes.object,
    currentUser: React.PropTypes.object,
    gridColumnCount: React.PropTypes.number,
  }

  renderColumn(posts) {
    const { json, currentUser } = this.props
    return (
      <div className="Column">
        {posts.map((post) => {
          return (
            <article ref={`postGrid_${post.id}`} key={post.id} className="Post PostGrid">
              {parsePost(post, json, currentUser)}
            </article>
          )
        })}
      </div>
    )
  }

  render() {
    const { posts, gridColumnCount } = this.props
    if (!gridColumnCount) { return null }
    const columns = []
    for (let i = 0; i < gridColumnCount; i++) {
      columns.push([])
    }
    for (const index in posts.data) {
      if (posts.data[index]) {
        columns[index % gridColumnCount].push(posts.data[index])
      }
    }
    return (
      <div className="Posts asGrid">
        {columns.map((column) => {
          return this.renderColumn(column)
        })}
      </div>
    )
  }
}

export default PostsAsGrid


@@ -317,16 +317,23 @@
 mn(posts
+, index
 ) %7B%0A    
@@ -415,16 +415,40 @@
 %22Column%22
+ key=%7B%60column_$%7Bindex%7D%60%7D
 %3E%0A      
@@ -1134,16 +1134,23 @@
 ((column
+, index
 ) =%3E %7B%0A 
@@ -1189,16 +1189,23 @@
 n(column
+, index
 )%0A      

Fix an issue with grid post rendering.