Merge branch 'development'

app/assets/javascripts/components/actions/compose.jsx

@@ -22,6 +22,8 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
 export const COMPOSE_MOUNT   = 'COMPOSE_MOUNT';
 export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
+export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
+
 export function changeCompose(text) {
   return {
     type: COMPOSE_CHANGE,
@@ -62,7 +64,8 @@ export function submitCompose() {
     api(getState).post('/api/v1/statuses', {
       status: getState().getIn(['compose', 'text'], ''),
       in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
-      media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id'))
+      media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')),
+      sensitive: getState().getIn(['compose', 'sensitive'])
     }).then(function (response) {
       dispatch(submitComposeSuccess(response.data));
       dispatch(updateTimeline('home', response.data));
@@ -197,3 +200,10 @@ export function unmountCompose() {
     type: COMPOSE_UNMOUNT
   };
 };
+
+export function changeComposeSensitivity(checked) {
+  return {
+    type: COMPOSE_SENSITIVITY_CHANGE,
+    checked
+  };
+};

app/assets/javascripts/components/components/media_gallery.jsx

@@ -1,9 +1,47 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import { FormattedMessage } from 'react-intl';
+
+const outerStyle = {
+  marginTop: '8px',
+  overflow: 'hidden',
+  width: '100%',
+  boxSizing: 'border-box'
+};
+
+const spoilerStyle = {
+  background: '#000',
+  color: '#fff',
+  textAlign: 'center',
+  height: '100%',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+};
+
+const spoilerSpanStyle = {
+  display: 'block',
+  fontSize: '14px',
+};
+
+const spoilerSubSpanStyle = {
+  display: 'block',
+  fontSize: '11px',
+  fontWeight: '500'
+};
 
 const MediaGallery = React.createClass({
 
+  getInitialState () {
+    return {
+      visible: false
+    };
+  },
+
   propTypes: {
+    sensitive: React.PropTypes.bool,
     media: ImmutablePropTypes.list.isRequired,
     height: React.PropTypes.number.isRequired,
     onOpenMedia: React.PropTypes.func.isRequired
@@ -20,69 +58,85 @@ const MediaGallery = React.createClass({
     e.stopPropagation();
   },
 
+  handleOpen () {
+    this.setState({ visible: true });
+  },
+
   render () {
-    var children = this.props.media.take(4);
-    var size     = children.size;
-
-    children = children.map((attachment, i) => {
-      let width  = 50;
-      let height = 100;
-      let top    = 'auto';
-      let left   = 'auto';
-      let bottom = 'auto';
-      let right  = 'auto';
-
-      if (size === 1) {
-        width = 100;
-      }
-
-      if (size === 4 || (size === 3 && i > 0)) {
-        height = 50;
-      }
-
-      if (size === 2) {
-        if (i === 0) {
-          right = '2px';
-        } else {
-          left = '2px';
-        }
-      } else if (size === 3) {
-        if (i === 0) {
-          right = '2px';
-        } else if (i > 0) {
-          left = '2px';
-        }
+    const { media, sensitive } = this.props;
 
-        if (i === 1) {
-          bottom = '2px';
-        } else if (i > 1) {
-          top = '2px';
-        }
-      } else if (size === 4) {
-        if (i === 0 || i === 2) {
-          right = '2px';
+    let children;
+
+    if (sensitive && !this.state.visible) {
+      children = (
+        <div style={spoilerStyle} onClick={this.handleOpen}>
+          <span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+          <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+        </div>
+      );
+    } else {
+      const size = media.take(4).size;
+
+      children = media.take(4).map((attachment, i) => {
+        let width  = 50;
+        let height = 100;
+        let top    = 'auto';
+        let left   = 'auto';
+        let bottom = 'auto';
+        let right  = 'auto';
+
+        if (size === 1) {
+          width = 100;
         }
 
-        if (i === 1 || i === 3) {
-          left = '2px';
+        if (size === 4 || (size === 3 && i > 0)) {
+          height = 50;
         }
 
-        if (i < 2) {
-          bottom = '2px';
-        } else {
-          top = '2px';
+        if (size === 2) {
+          if (i === 0) {
+            right = '2px';
+          } else {
+            left = '2px';
+          }
+        } else if (size === 3) {
+          if (i === 0) {
+            right = '2px';
+          } else if (i > 0) {
+            left = '2px';
+          }
+
+          if (i === 1) {
+            bottom = '2px';
+          } else if (i > 1) {
+            top = '2px';
+          }
+        } else if (size === 4) {
+          if (i === 0 || i === 2) {
+            right = '2px';
+          }
+
+          if (i === 1 || i === 3) {
+            left = '2px';
+          }
+
+          if (i < 2) {
+            bottom = '2px';
+          } else {
+            top = '2px';
+          }
         }
-      }
 
-      return (
-        <div key={attachment.get('id')} style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', border: 'none', display: 'block', width: `${width}%`, height: `${height}%` }}>
-          <a href={attachment.get('url')} onClick={this.handleClick.bind(this, attachment.get('url'))} target='_blank' style={{ display: 'block', width: '100%', height: '100%', background: `url(${attachment.get('preview_url')}) no-repeat center`, textDecoration: 'none', backgroundSize: 'cover', cursor: 'zoom-in' }} />
-        </div>
-      );
-    });
+        return (
+          <div key={attachment.get('id')} style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', border: 'none', display: 'block', width: `${width}%`, height: `${height}%` }}>
+            <a href={attachment.get('url')} onClick={this.handleClick.bind(this, attachment.get('url'))} target='_blank' style={{ display: 'block', width: '100%', height: '100%', background: `url(${attachment.get('preview_url')}) no-repeat center`, textDecoration: 'none', backgroundSize: 'cover', cursor: 'zoom-in' }} />
+          </div>
+        );
+      });
+    }
 
     return (
-      <div style={{ marginTop: '8px', overflow: 'hidden', width: '100%', height: `${this.props.height}px`, boxSizing: 'border-box' }}>
+      <div style={{ ...outerStyle, height: `${this.props.height}px` }}>
         {children}
       </div>
     );

app/assets/javascripts/components/components/status.jsx

@@ -83,9 +83,9 @@ const Status = React.createClass({
 
     if (status.get('media_attachments').size > 0) {
       if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = <VideoPlayer media={status.getIn(['media_attachments', 0])} />;
+        media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} />;
       } else {
-        media = <MediaGallery media={status.get('media_attachments')} height={110} onOpenMedia={this.props.onOpenMedia} />;
+        media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} />;
       }
     }
 

app/assets/javascripts/components/components/video_player.jsx

@@ -1,7 +1,7 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import IconButton from './icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 const messages = defineMessages({
   toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }
@@ -25,6 +25,30 @@ const muteStyle = {
   zIndex: '5'
 };
 
+const spoilerStyle = {
+  marginTop: '8px',
+  background: '#000',
+  color: '#fff',
+  textAlign: 'center',
+  height: '100%',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+};
+
+const spoilerSpanStyle = {
+  display: 'block',
+  fontSize: '14px'
+};
+
+const spoilerSubSpanStyle = {
+  display: 'block',
+  fontSize: '11px',
+  fontWeight: '500'
+};
+
 const VideoPlayer = React.createClass({
   propTypes: {
     media: ImmutablePropTypes.map.isRequired,
@@ -41,6 +65,7 @@ const VideoPlayer = React.createClass({
 
   getInitialState () {
     return {
+      visible: false,
       muted: true
     };
   },
@@ -63,8 +88,21 @@ const VideoPlayer = React.createClass({
     }
   },
 
+  handleOpen () {
+    this.setState({ visible: true });
+  },
+
   render () {
-    const { media, intl, width, height } = this.props;
+    const { media, intl, width, height, sensitive } = this.props;
+
+    if (sensitive && !this.state.visible) {
+      return (
+        <div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleOpen}>
+          <span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+          <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+        </div>
+      );
+    }
 
     return (
       <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>

app/assets/javascripts/components/features/compose/components/compose_form.jsx

@@ -9,6 +9,7 @@ import AutosuggestAccountContainer from '../../compose/containers/autosuggest_ac
 import { debounce } from 'react-decoration';
 import UploadButtonContainer from '../containers/upload_button_container';
 import { defineMessages, injectIntl } from 'react-intl';
+import Toggle from 'react-toggle';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@@ -67,6 +68,7 @@ const ComposeForm = React.createClass({
     text: React.PropTypes.string.isRequired,
     suggestion_token: React.PropTypes.string,
     suggestions: React.PropTypes.array,
+    sensitive: React.PropTypes.bool,
     is_submitting: React.PropTypes.bool,
     is_uploading: React.PropTypes.bool,
     in_reply_to: ImmutablePropTypes.map,
@@ -75,7 +77,8 @@ const ComposeForm = React.createClass({
     onCancelReply: React.PropTypes.func.isRequired,
     onClearSuggestions: React.PropTypes.func.isRequired,
     onFetchSuggestions: React.PropTypes.func.isRequired,
-    onSuggestionSelected: React.PropTypes.func.isRequired
+    onSuggestionSelected: React.PropTypes.func.isRequired,
+    onChangeSensitivity: React.PropTypes.func.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -139,6 +142,10 @@ const ComposeForm = React.createClass({
     this.autosuggest = c;
   },
 
+  handleChangeSensitivity (e) {
+    this.props.onChangeSensitivity(e.target.checked);
+  },
+
   render () {
     const { intl } = this.props;
     let replyArea  = '';
@@ -178,6 +185,11 @@ const ComposeForm = React.createClass({
           <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div>
           <UploadButtonContainer style={{ paddingTop: '4px' }} />
         </div>
+
+        <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #616b86', paddingTop: '10px' }}>
+          <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
+          <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}>Sensitive content</span>
+        </label>
       </div>
     );
   }

app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx

@@ -6,7 +6,8 @@ import {
   cancelReplyCompose,
   clearComposeSuggestions,
   fetchComposeSuggestions,
-  selectComposeSuggestion
+  selectComposeSuggestion,
+  changeComposeSensitivity
 } from '../../../actions/compose';
 import { makeGetStatus } from '../../../selectors';
 
@@ -18,6 +19,7 @@ const makeMapStateToProps = () => {
       text: state.getIn(['compose', 'text']),
       suggestion_token: state.getIn(['compose', 'suggestion_token']),
       suggestions: state.getIn(['compose', 'suggestions']).toJS(),
+      sensitive: state.getIn(['compose', 'sensitive']),
       is_submitting: state.getIn(['compose', 'is_submitting']),
       is_uploading: state.getIn(['compose', 'is_uploading']),
       in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to']))
@@ -51,6 +53,10 @@ const mapDispatchToProps = function (dispatch) {
 
     onSuggestionSelected (position, accountId) {
       dispatch(selectComposeSuggestion(position, accountId));
+    },
+
+    onChangeSensitivity (checked) {
+      dispatch(changeComposeSensitivity(checked));
     }
   }
 };

app/assets/javascripts/components/features/status/components/detailed_status.jsx

@@ -36,9 +36,9 @@ const DetailedStatus = React.createClass({
 
     if (status.get('media_attachments').size > 0) {
       if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = <VideoPlayer media={status.getIn(['media_attachments', 0])} width={317} height={178} />;
+        media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={317} height={178} />;
       } else {
-        media = <MediaGallery media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
+        media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
       }
     }
 

app/assets/javascripts/components/reducers/compose.jsx

@@ -15,7 +15,8 @@ import {
   COMPOSE_UPLOAD_PROGRESS,
   COMPOSE_SUGGESTIONS_CLEAR,
   COMPOSE_SUGGESTIONS_READY,
-  COMPOSE_SUGGESTION_SELECT
+  COMPOSE_SUGGESTION_SELECT,
+  COMPOSE_SENSITIVITY_CHANGE
 } from '../actions/compose';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { ACCOUNT_SET_SELF } from '../actions/accounts';
@@ -23,6 +24,7 @@ import Immutable from 'immutable';
 
 const initialState = Immutable.Map({
   mounted: false,
+  sensitive: false,
   text: '',
   in_reply_to: null,
   is_submitting: false,
@@ -87,6 +89,8 @@ export default function compose(state = initialState, action) {
       return state.set('mounted', true);
     case COMPOSE_UNMOUNT:
       return state.set('mounted', false);
+    case COMPOSE_SENSITIVITY_CHANGE:
+      return state.set('sensitive', action.checked);
     case COMPOSE_CHANGE:
       return state.set('text', action.text);
     case COMPOSE_REPLY:

app/assets/stylesheets/components.scss

@@ -405,3 +405,109 @@
     text-decoration: underline;
   }
 }
+
+.react-toggle {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #282c37;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: darken(#282c37, 10%);
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: #2b90d9;
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: lighten(#2b90d9, 10%);
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #282c37;
+  border-radius: 50%;
+  background-color: #FAFAFA;
+  box-sizing: border-box;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: #2b90d9;
+}

app/controllers/api/v1/accounts_controller.rb

@@ -57,7 +57,8 @@ class Api::V1::AccountsController < ApiController
   end
 
   def statuses
-    @statuses = @account.statuses.with_includes.paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]).to_a
+    @statuses = @account.statuses.paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]).to_a
+    @statuses = cache(@statuses)
 
     set_maps(@statuses)
     set_counters_maps(@statuses)
@@ -120,4 +121,23 @@ class Api::V1::AccountsController < ApiController
     @followed_by = Account.followed_by_map([@account.id], current_user.account_id)
     @blocking    = Account.blocking_map([@account.id], current_user.account_id)
   end
+
+  def cache(raw)
+    uncached_ids           = []
+    cached_keys_with_value = Rails.cache.read_multi(*raw.map(&:cache_key))
+
+    raw.each do |status|
+      uncached_ids << status.id unless cached_keys_with_value.key?(status.cache_key)
+    end
+
+    unless uncached_ids.empty?
+      uncached = Status.where(id: uncached_ids).with_includes.map { |s| [s.id, s] }.to_h
+
+      uncached.values.each do |status|
+        Rails.cache.write(status.cache_key, status)
+      end
+    end
+
+    raw.map { |status| cached_keys_with_value[status.cache_key] || uncached[status.id] }
+  end
 end

app/controllers/api/v1/statuses_controller.rb

@@ -9,6 +9,8 @@ class Api::V1::StatusesController < ApiController
   respond_to :json
 
   def show
+    cached  = Rails.cache.read(@status.cache_key)
+    @status = cached unless cached.nil?
   end
 
   def context
@@ -50,7 +52,7 @@ class Api::V1::StatusesController < ApiController
   end
 
   def create
-    @status = PostStatusService.new.call(current_user.account, params[:status], params[:in_reply_to_id].blank? ? nil : Status.find(params[:in_reply_to_id]), params[:media_ids])
+    @status = PostStatusService.new.call(current_user.account, params[:status], params[:in_reply_to_id].blank? ? nil : Status.find(params[:in_reply_to_id]), media_ids: params[:media_ids], sensitive: params[:sensitive])
     render action: :show
   end
 

app/services/post_status_service.rb

@@ -5,11 +5,13 @@ class PostStatusService < BaseService
   # @param [Account] account Account from which to post
   # @param [String] text Message
   # @param [Status] in_reply_to Optional status to reply to
-  # @param [Enumerable] media_ids Optional array of media IDs to attach
+  # @param [Hash] options
+  # @option [Boolean] :sensitive
+  # @option [Enumerable] :media_ids Optional array of media IDs to attach
   # @return [Status]
-  def call(account, text, in_reply_to = nil, media_ids = nil)
-    status = account.statuses.create!(text: text, thread: in_reply_to)
-    attach_media(status, media_ids)
+  def call(account, text, in_reply_to = nil, options = {})
+    status = account.statuses.create!(text: text, thread: in_reply_to, sensitive: options[:sensitive])
+    attach_media(status, options[:media_ids])
     process_mentions_service.call(status)
     process_hashtags_service.call(status)
     DistributionWorker.perform_async(status.id)

app/views/api/v1/statuses/_show.rabl

@@ -1,4 +1,4 @@
-attributes :id, :created_at, :in_reply_to_id
+attributes :id, :created_at, :in_reply_to_id, :sensitive
 
 node(:uri)              { |status| TagManager.instance.uri_for(status) }
 node(:content)          { |status| Formatter.instance.format(status) }

db/migrate/20161123093447_add_sensitive_to_statuses.rb

@@ -0,0 +1,5 @@
+class AddSensitiveToStatuses < ActiveRecord::Migration[5.0]
+  def change
+    add_column :statuses, :sensitive, :boolean, default: false
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20161122163057) do
+ActiveRecord::Schema.define(version: 20161123093447) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -155,13 +155,14 @@ ActiveRecord::Schema.define(version: 20161122163057) do
 
   create_table "statuses", force: :cascade do |t|
     t.string   "uri"
-    t.integer  "account_id",                  null: false
-    t.text     "text",           default: "", null: false
-    t.datetime "created_at",                  null: false
-    t.datetime "updated_at",                  null: false
+    t.integer  "account_id",                     null: false
+    t.text     "text",           default: "",    null: false
+    t.datetime "created_at",                     null: false
+    t.datetime "updated_at",                     null: false
     t.integer  "in_reply_to_id"
     t.integer  "reblog_of_id"
     t.string   "url"
+    t.boolean  "sensitive",      default: false
     t.index ["account_id"], name: "index_statuses_on_account_id", using: :btree
     t.index ["in_reply_to_id"], name: "index_statuses_on_in_reply_to_id", using: :btree
     t.index ["reblog_of_id"], name: "index_statuses_on_reblog_of_id", using: :btree

package.json

@@ -8,6 +8,7 @@
     "@kadira/storybook": "^2.24.0",
     "axios": "^0.14.0",
     "babel-plugin-react-transform": "^2.0.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
@@ -16,37 +17,39 @@
     "browserify-incremental": "^3.1.1",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.5.2",
+    "emojione": "^2.2.6",
     "enzyme": "^2.4.1",
     "es6-promise": "^3.2.1",
+    "http-link-header": "^0.5.0",
     "immutable": "^3.8.1",
+    "intl": "^1.2.5",
     "jsdom": "^9.6.0",
     "mocha": "^3.1.1",
     "react": "^15.3.2",
     "react-addons-perf": "^15.3.2",
     "react-addons-pure-render-mixin": "^15.3.1",
     "react-addons-test-utils": "^15.3.2",
+    "react-autosuggest": "^7.0.1",
+    "react-decoration": "^1.4.0",
     "react-dom": "^15.3.0",
     "react-immutable-proptypes": "^2.1.0",
+    "react-intl": "^2.1.5",
+    "react-motion": "^0.4.5",
     "react-notification": "^6.4.0",
     "react-proxy": "^1.1.8",
     "react-redux": "^5.0.0-beta.3",
     "react-redux-loading-bar": "^2.4.1",
+    "react-responsive": "^1.1.5",
     "react-router": "^2.8.0",
+    "react-router-scroll": "^0.3.2",
     "react-simple-dropdown": "^1.1.4",
     "redux": "^3.5.2",
     "redux-immutable": "^3.0.8",
     "redux-thunk": "^2.1.0",
     "reselect": "^2.5.4",
-    "sinon": "^1.17.6",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "emojione": "^2.2.6",
-    "http-link-header": "^0.5.0",
-    "intl": "^1.2.5",
-    "react-autosuggest": "^7.0.1",
-    "react-decoration": "^1.4.0",
-    "react-intl": "^2.1.5",
-    "react-motion": "^0.4.5",
-    "react-responsive": "^1.1.5",
-    "react-router-scroll": "^0.3.2"
+    "sinon": "^1.17.6"
+  },
+  "dependencies": {
+    "react-toggle": "^2.1.1"
   }
 }

yarn.lock

@@ -1335,7 +1335,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.1.2, classnames@^2.2.3:
+classnames@^2.1.2, classnames@^2.2.3, classnames@~2.2:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -3841,7 +3841,7 @@ react-addons-perf@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.3.2.tgz#bbdbebe8649f936f9636a5750ac145bf5c620213"
 
-react-addons-pure-render-mixin@^15.3.1:
+react-addons-pure-render-mixin@>=0.14.0, react-addons-pure-render-mixin@^15.3.1:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.3.2.tgz#c5f54764667ead26e6cdf7178b6c8dbbd8463ec2"
 
@@ -4022,6 +4022,13 @@ react-themeable@^1.1.0:
   dependencies:
     object-assign "^3.0.0"
 
+react-toggle@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-2.1.1.tgz#80600a64417a1acc8aaa4c1477f7fbdb88b988fb"
+  dependencies:
+    classnames "~2.2"
+    react-addons-pure-render-mixin ">=0.14.0"
+
 react@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"