meses-feed/src/ui/index.jsx

Meses feed SDK in JavaScript

import React from 'react'
import styles from './styles.css'

import FeedButton from './components/FeedButton'
import FeedPopup from './components/FeedPopup'

import MesesFeedApp from '../app'

class MesesFeedUI extends React.Component {
  constructor() {
    super()
    this.state = { popup: false, unseen: 0, feedActivities: [] }
    this.CLASS_TAG = '[MESES_FEED_UI]'
  }

  componentWillMount() {
    let { targetUri, applicationId, feedName, fetchSize } = this.props
    let { feedActivities } = this.state

    const self = this
    this._feed = new MesesFeedApp(targetUri, applicationId).getFeed(feedName)
    this._previousActivityQuery = this._feed.createPreviousFeedActivityQuery()
    this._previousActivityQuery.load(fetchSize ? fetchSize : 10)
      .then(result => self.setState({ feedActivities: feedActivities.concat(result) }))
      .catch(err => console.error(this.CLASS_TAG, err))

    this._feed.getUnseenCount()
      .then(result => self.setState({ unseen: result }))
      .catch(err => console.error(this.CLASS_TAG, err))
  }

  handleFeedButtonOnClick() {
    if (this.state.unseen > 0) this._handleMarkNotifAsSeen()
    this.setState({ popup: !this.state.popup }) 
  }

  render() {
    let { buttonClassName, popupClassName, fetchSize } = this.props
    let { activityParser } = this.props
    let { popup, feedActivities, unseen } = this.state

    return (
      <div style={{ display: 'inline-block', position: 'relative' }}>
        <FeedButton className={ buttonClassName ? buttonClassName : '' }
                    unseen={ unseen }
                    onClick={ this.handleFeedButtonOnClick.bind(this) } />
        { popup ? 
          <FeedPopup className={ popupClassName ? popupClassName : '' }
                     feedActivities={ feedActivities }
                     activityParser={ activityParser }
                     handleLoadMore={ this._handleLoadMoreActivities.bind(this) }
                     handleMarkRead={ this._handleMarkActivityAsRead.bind(this) } /> : '' }
      </div>
    )
  }

  _handleLoadMoreActivities() {
    let { fetchSize } = this.props
    let { feedActivities } = this.state

    const self = this
    this._previousActivityQuery.load(fetchSize ? fetchSize : 10)
      .then(result => self.setState({ feedActivities: feedActivities.concat(result) }))
      .catch(err => console.error(this.CLASS_TAG, err))
  }

  _handleMarkActivityAsRead(activityId) { this._feed.markRead(activityId) }
  _handleMarkNotifAsSeen() { this._feed.markAsSeen(); this.setState({ unseen: 0 }) }
}

export default MesesFeedUI