meses-feed/src/ui/components/FeedPopup/FeedActivity/index.jsx

Meses feed SDK in JavaScript

import React from 'react'
import styles from './styles.css'
import moment from 'moment'
import { TiMediaRecordOutline, TiMediaRecord } from 'react-icons/lib/ti'

class FeedActivity extends React.Component {

  defaultParser(actor, verb, object) { return actor + ' ' + verb + ' ' + object }

  render() {
    let { parser, time, readTime, actor, verb, object, handleMarkRead } = this.props
    
    parser = parser ? parser : this.defaultParser
    const message = parser(actor, verb, object)
    const timeFormat = this._getTimeFormat(time)

    return (
      <div className={ styles.feedActivity }>
        <div className={ styles.message }>{ message }</div>
        <div className={ styles.time }>{ this._dateFormat(time, timeFormat) }</div>
        <div className={ styles.readButton }><TiMediaRecordOutline /></div>
      </div>
    )
  }

  _getTimeFormat(time) {
    const momentTime = moment(time)
    const currentMillis = new Date().getTime()
    const oneDayMillis = 24 * 60 * 60 * 1000
    const format =
      (currentMillis - momentTime <= oneDayMillis) ? 'LT' : // 00:00 AM
      (currentMillis - momentTime <= 7 * oneDayMillis) ? 'ddd M/D LT' : 'YYYY/M/D LT'
    
    return format
  }

  _dateFormat(time, format) {
    let dateTime = moment(time)
    return (dateTime.isValid()) ? dateTime.format(format) : '-'
  }
}

export default FeedActivity