feat(starring): Star/unstar from the message detail view

Summary: Adding star button to message-toolbar view

Test Plan: Added spec for starring message from the message-toolbar view

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D1683

internal_packages/message-list/lib/message-toolbar-items.cjsx

@@ -5,21 +5,23 @@ classNames = require 'classnames'
 {RetinaImg, Popover, Menu} = require 'nylas-component-kit'
 
 ThreadArchiveButton = require './thread-archive-button'
+ThreadStarButton = require './thread-star-button'
 
 class MessageToolbarItems extends React.Component
   @displayName: "MessageToolbarItems"
 
   constructor: (@props) ->
     @state =
-      threadIsSelected: FocusedContentStore.focusedId('thread')?
+      thread: FocusedContentStore.focused('thread')
 
   render: =>
     classes = classNames
       "message-toolbar-items": true
-      "hidden": !@state.threadIsSelected
+      "hidden": !@state.thread
 
     <div className={classes}>
       <ThreadArchiveButton />
+      <ThreadStarButton ref="starButton" thread={@state.thread} />
     </div>
 
   componentDidMount: =>
@@ -31,6 +33,6 @@ class MessageToolbarItems extends React.Component
 
   _onChange: =>
     @setState
-      threadIsSelected: FocusedContentStore.focusedId('thread')?
+      thread: FocusedContentStore.focused('thread')
 
 module.exports = MessageToolbarItems

internal_packages/message-list/lib/thread-star-button.cjsx

@@ -0,0 +1,29 @@
+_ = require 'underscore'
+React = require 'react'
+{Actions, Utils, AddRemoveTagsTask} = require 'nylas-exports'
+{RetinaImg} = require 'nylas-component-kit'
+
+class StarButton extends React.Component
+  @displayName: "StarButton"
+  @propTypes:
+    thread: React.PropTypes.object.isRequired
+
+  render: =>
+    selected = @props.thread? and @props.thread.isStarred()
+    <button className="btn btn-toolbar"
+            data-tooltip="Star"
+            onClick={@_onStarToggle}>
+      <RetinaImg name="toolbar-star.png" mode={RetinaImg.Mode.ContentIsMask} selected={selected} />
+    </button>
+
+  _onStarToggle: (e) =>
+    if @props.thread.isStarred()
+      task = new AddRemoveTagsTask(@props.thread, [], ['starred'])
+    else
+      task = new AddRemoveTagsTask(@props.thread, ['starred'], [])
+
+    Actions.queueTask(task)
+    e.stopPropagation()
+
+
+module.exports = StarButton

internal_packages/message-list/spec/message-toolbar-items-spec.cjsx

@@ -0,0 +1,44 @@
+React = require "react/addons"
+TestUtils = React.addons.TestUtils
+{Thread, FocusedContentStore, Actions, AddRemoveTagsTask} = require "nylas-exports"
+
+
+MessageToolbarItems = require '../lib/message-toolbar-items'
+
+test_thread = (new Thread).fromJSON({
+  "id" : "thread_12345"
+  "subject" : "Subject 12345"
+})
+
+test_thread_starred = (new Thread).fromJSON({
+  "id" : "thread_starred_12345"
+  "subject" : "Subject 12345"
+  "tags": [{"id": "starred"}]
+})
+
+describe "MessageToolbarItem starring", ->
+  it "stars a thread if the star button is clicked and thread is unstarred", ->
+    spyOn(FocusedContentStore, "focused").andCallFake ->
+      test_thread
+    spyOn(Actions, 'queueTask')
+    messageToolbarItems = TestUtils.renderIntoDocument(<MessageToolbarItems />)
+
+    starButton = React.findDOMNode(messageToolbarItems.refs.starButton)
+    TestUtils.Simulate.click starButton
+
+    expect(Actions.queueTask.mostRecentCall.args[0].thread).toBe(test_thread)
+    expect(Actions.queueTask.mostRecentCall.args[0].tagIdsToAdd).toEqual(['starred'])
+    expect(Actions.queueTask.mostRecentCall.args[0].tagIdsToRemove).toEqual([])
+
+  it "unstars a thread if the star button is clicked and thread is starred", ->
+    spyOn(FocusedContentStore, "focused").andCallFake ->
+      test_thread_starred
+    spyOn(Actions, 'queueTask')
+    messageToolbarItems = TestUtils.renderIntoDocument(<MessageToolbarItems />)
+
+    starButton = React.findDOMNode(messageToolbarItems.refs.starButton)
+    TestUtils.Simulate.click starButton
+
+    expect(Actions.queueTask.mostRecentCall.args[0].thread).toBe(test_thread_starred)
+    expect(Actions.queueTask.mostRecentCall.args[0].tagIdsToAdd).toEqual([])
+    expect(Actions.queueTask.mostRecentCall.args[0].tagIdsToRemove).toEqual(['starred'])