lancetw/react-isomorphic-bundle

import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'
import { isEmpty, at } from 'lodash'
import { toShortDate } from 'shared/utils/date-utils'
import { PostPropArray } from 'shared/utils/forms'
import { originLocaleName } from 'shared/utils/locale-utils'
import { tongwenAutoStr } from 'shared/utils/tongwen'
import CpropList from './CpropList'

export default class HomeComponent extends Component {

  static propTypes = {
    post: PropTypes.object.isRequired,
    defaultLocale: PropTypes.string.isRequired
  }

  constructor (props) {
    super(props)
  }

  renderNews = (posts) => {
    if (!isEmpty(posts)) {
      return posts.map(function (post) {
        return this.renderItem(post)
      }.bind(this))
    } else {
      return <div></div>
    }
  }

  renderItem (post) {
    const Translate = require('react-translate-component')
    const { defaultLocale } = this.props

    const eventDate = (post.startDate === post.endDate)
    ? toShortDate(post.endDate)
    : toShortDate(post.startDate) + ' - ' + toShortDate(post.endDate)

    return (
      <div key={post.id} className="ui orange icon message">
        <div className="content">
          <h3>
            <Link to={`/w/${post.id}`}>
              <span className="ui orange">
                [{at(PostPropArray(originLocaleName(defaultLocale)), post.prop)}]
              </span>
              <span> </span>
              {post.ocname && post.ocname !== '0' ? tongwenAutoStr(post.ocname, defaultLocale)
                : <Translate content="news.unnamed" />}
            </Link>
          </h3>
          <div className="header">
            {tongwenAutoStr(post.title, defaultLocale)}
          </div>
        </div>
      </div>
    )
  }

  render () {
    const Translate = require('react-translate-component')
    const { posts } = this.props.post
    const loading = this.props.post.isFetching

    return (
      <main className="ui has-header two column grid container">
        <div className="sixteen wide tablet twelve wide computer column">
          <div className="ui grid center aligned container">
            <div className="tablet computer only row">
              <Link to="/w/cal" className="ui orange huge button">
                <Translate content="home.browse" />
              </Link>
            </div>
            <div className="mobile only row">
              <Link to="/w/today">
                <div className="image logo-oursevents-mobile"></div>
              </Link>
            </div>
            <div className="mobile only row">
              <Link className="ui orange large button left floated" to="/w/today">
                <i className="heart icon"></i>
                <Translate content="header.overview" />
              </Link>
              <Link className="ui orange large button right floated" to="/nearby">
                <i className="location arrow icon"></i>
                <Translate content="header.nearby" />
              </Link>
            </div>
          </div>
          { this.renderNews(posts) }
          {loading && isEmpty(posts) && (
            <div className="ui segment basic">
              <div className="ui active inverted dimmer">
                <div className="ui indeterminate text loader">
                  <Translate content="wall.loading" />
                </div>
              </div>
            </div>
          )}
          {!loading && isEmpty(posts) && (
            <div>
              <div className="ui hidden divider"></div>
              <div className="ui segment basic center aligned">
                <Translate content="post.nodata" />
              </div>
            </div>
          )}
          <div className="ui basic segment center">
            <a href="http://www.ccnda.org" target="_blank">
              <div className="image logo border"></div>
            </a>
          </div>
        </div>
        <div className="four wide computer sixteen wide tablet column">
          <div className="ui grid center aligned">
            <div className="tablet computer only row">
              <div className="ui center">
                <Link to="/post">
                  <div className="image logo-oursevents"></div>
                </Link>
                <CpropList
                  className="ui relaxed list"
                  defaultLocale={this.props.defaultLocale} />
              </div>
            </div>
          </div>
        </div>
      </main>
    )
  }
}