import React from 'react'

import UserName from './user-name'
import {preventDefault} from '../utils'

const renderLike = (user) => (
  <li className="p-timeline-user-like" key={user.id}>
    <UserName user={user}/>
    <span>,&#32;</span>
  </li>
)

const renderLastLike = (user, omittedLikes = 0, showMoreLikes = null) => (
  <li className="p-timeline-user-like" key={user.id}>
    <UserName user={user}/>
    <span>
    { omittedLikes > 0 ? (
      <span>
        &nbsp;and&nbsp;
        <a onClick={preventDefault(showMoreLikes)}>
          {omittedLikes} other people
        </a>
      </span>
    ) : false }
    &nbsp;liked this
    </span>
  </li>
)

export default ({likes, showMoreLikes, post}) => {
  const hasLikes = likes.length > 0
  const _showMoreLikes = () => showMoreLikes(post.id)
  const likes_exclude_last = likes.slice(0, likes.length - 1).map(renderLike)
  const last = hasLikes && likes[likes.length - 1]
  const rendered_last = last ? renderLastLike(last, post.omittedLikes, _showMoreLikes) : false

  const rendered_likes = rendered_last ? [...likes_exclude_last, rendered_last] : likes_exclude_last

  return (hasLikes ? (
    <div className="likes">
      <i className="fa fa-heart icon"></i>
      <ul className="p-timeline-user-likes">
        {rendered_likes}
      </ul>
    </div>
  ) : <div/>)
}

import React from 'react'

import UserName from './user-name'
import {preventDefault} from '../utils'

const renderLike = (item, i, items) => (
  <li key={item.id}>
    {item.id !== 'more-likes' ? (
      <UserName user={item}/>
    ) : (
      <a onClick={preventDefault(item.showMoreLikes)}>{item.omittedLikes} other people</a>
    )}

    {i < items.length - 2 ? (
      <span>, </span>
    ) : i === items.length - 2 ? (
      <span> and </span>
    ) : (
      <span> liked this</span>
    )}
  </li>
)

export default ({likes, showMoreLikes, post}) => {
  if (!likes.length) {
    return <div/>
  }

  const likeList = likes

  if (post.omittedLikes) {
    likeList.push({
      id: 'more-likes',
      omittedLikes: post.omittedLikes,
      showMoreLikes: () => showMoreLikes(post.id)
    })
  }

  const renderedLikes = likeList.map(renderLike)

  return (
    <div className="likes">
      <i className="fa fa-heart icon"></i>
      <ul>{renderedLikes}</ul>
    </div>
  )
}

Implement proper "and" in the list of likes
Implement proper "and" in the list of likes
