activity_feed.js.coffee

@ActivityFeed = React.createClass

  componentWillReceiveProps: (nextProps) ->
    
    new_activity = nextProps.newActivity
    updated_activities = this.state.activities
    updated_activities.unshift(new_activity) if new_activity.data?

    this.setState
        activities: updated_activities

  getInitialState: ->
    activities: [] 

  activityList: ->
    <div className="timeline">
      <div className="line text-muted"></div>
        {
            this.state.activities.map (activity )->
                key = activity.timestamp+'-'+activity.uuid
                <ActivityLine key={key} activity={activity} />
        }
      </div>     

  noActivity: ->
    <div className='well well-sm'>
      <div className="row">
        <div className="col-md-4">
          <img className='media-object' src="/images/no-activity.png" />
        </div>
        <div className="col-md-8">
          <h4>No activity since your last logon</h4>
        </div>
      </div>
    </div>

  render: ->
      if this.state.activities.length > 0
        @activityList()
      else 
        @noActivity()

activity_line.js.coffee

@ActivityLine = React.createClass
  render: ->
      activity = this.props.activity
      [action_verb, action_icon] = switch(activity.action)
                  when 'join' then ['has joined the quiz', 'fa fa-sign-in online']
                  when 'timeout' then ['has left the quiz', 'fa fa-sign-out offline']
                  when 'leave' then ['has left the quiz', 'fa fa-sign-out offline']
                  when 'state-change' then ["has changed is name to #{activity.data.name}", 'fa fa-exchange']
                  when 'answered' 
                    if activity.data.correct
                      ['has answered the question correctly', 'fa fa-check-circle online']
                    else
                      ['has answered the question wrongly', 'fa fa-check-circle offline']
                      
      <article className="panel panel-danger panel-outline">
          <div className="panel-heading icon">
              <i className={action_icon}></i>
          </div>
          <div className="panel-body">
              <strong>{activity.data.name}</strong> {action_verb} <span title={moment.unix(activity.timestamp).format('llll')} data-livestamp={activity.timestamp}></span>
          </div>
      </article>

ActivityFeed React component.md

Usage

You can add an activity to the ActivityFeed component by passing to the newActivity property a hash representing the activity See the example below:

Displaying a question:

  activity = { 
                action: 'join' ,
                timestamp: '1441200610', 
                uuid: 'cb875517105e7e26', 
                data:  
                  name: 'John'
              }
                        
React.render(<ActivityFeed newActivity=message />, @react('ActivityFeed'))

Dependencies

• Twitter Bootsrap 3.3
• Font awesome 4.4
• This icon: http://ic8.link/13758

timeline.css

/* http://bootsnipp.com/snippets/featured/single-column-responsive-timeline */

.timeline {
    position: relative;
    padding: 21px 0px 10px;
    margin-top: 15px;
    margin-bottom: 30px;
}

.timeline .line {
    position: absolute;
    width: 4px;
    display: block;
    background: currentColor;
    top: 0px;
    bottom: 0px;
    margin-left: 30px;
}

.timeline .line::before { top: -4px; }
.timeline .line::after { bottom: -4px; }
.timeline .line::before,
.timeline .line::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: currentColor;
}

.timeline .panel {
    position: relative;
    margin: 10px 0px 21px 70px;
    clear: both;
}

.timeline .panel::before {
    position: absolute;
    display: block;
    top: 8px;
    left: -24px;
    content: '';
    width: 0px;
    height: 0px;
    border: inherit;
    border-width: 12px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; }
.timeline .panel .panel-heading.icon {
    position: absolute;
    left: -59px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
}

.timeline .panel-outline {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.timeline .panel-outline .panel-body {
    padding: 10px 0px;
}

.timeline .panel-outline .panel-heading:not(.icon),
.timeline .panel-outline .panel-footer {
    display: none;
}