Local-only option and dropdown all working

app/javascript/mastodon/actions/compose.js

@@ -24,6 +24,7 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
 export const COMPOSE_MOUNT   = 'COMPOSE_MOUNT';
 export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
+export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE';
 export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
@@ -244,6 +245,13 @@ export function unmountCompose() {
   };
 };
 
+export function changeComposeAdvancedOption(option) {
+  return {
+    type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
+    option: option,
+  };
+}
+
 export function changeComposeSensitivity() {
   return {
     type: COMPOSE_SENSITIVITY_CHANGE,

app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js

@@ -1,12 +1,30 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import IconButton from '../../../components/icon_button';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  local_only_short: { id: 'advanced-options.local-only.short', defaultMessage: 'Local-only'},
+  local_only_long: { id: 'advanced-options.local-only.long', defaultMessage: 'bla' },
+  advanced_options_icon_title: { id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
+});
 
 const iconStyle = {
   height: null,
   lineHeight: '27px',
 };
 
+@injectIntl
 export default class AdvancedOptionsDropdown extends React.PureComponent {
+  static propTypes = {
+    values: ImmutablePropTypes.contains({
+      do_not_federate: PropTypes.bool.isRequired,
+    }).isRequired,
+    onChange: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
   onToggleDropdown = () => {
       this.setState({ open: !this.state.open });
   };
@@ -31,30 +49,43 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
     open: false,
   };
 
+  handleClick = (e) => {
+    const option = e.currentTarget.getAttribute('data-index');
+    e.preventDefault();
+    this.props.onChange(option);
+  }
+
   setRef = (c) => {
     this.node = c;
   }
 
   render () {
     const { open } = this.state;
+    const { intl, values } = this.props;
 
     const options = [
-      { icon: 'wifi', shortText: 'Local-only', longText: 'bla' },
+      { icon: 'wifi', shortText: messages.local_only_short,  longText: messages.local_only_long, key: 'do_not_federate' },
     ];
     const optionElems = options.map((option) => {
-      return <div role='button' className='advanced-options-dropdown__option'>
+      const active = values.get(option.key) ? 'active' : '';
-        <div className='advanced-options-dropdown__option__icon'>
+      return (
-          <IconButton icon={option.icon} />
+        <div role='button' className={`advanced-options-dropdown__option ${active}`}
-        </div>
+          onClick={this.handleClick} data-index={option.key} key={option.key} >
-        <div className='advanced-options-dropdown__option__content'>
+          <div className='advanced-options-dropdown__option__icon'>
-          <strong>{option.shortText}</strong>
+            <IconButton icon={option.icon} title={intl.formatMessage(option.shortText)} />
-          {option.longText}
+          </div>
+          <div className='advanced-options-dropdown__option__content'>
+            <strong>{intl.formatMessage(option.shortText)}</strong>
+            {intl.formatMessage(option.longText)}
+          </div>
         </div>
-      </div>;
+      );
     });
+
     return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}>
       <div className='advanced-options-dropdown__value'>
         <IconButton className='advanced-options-dropdown__value'
+          title={intl.formatMessage(messages.advanced_options_icon_title)}
           icon='ellipsis-h' active={open}
           size={18} inverted
           style={iconStyle}

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -36,6 +36,9 @@ export default class ComposeForm extends ImmutablePureComponent {
     suggestions: ImmutablePropTypes.list,
     spoiler: PropTypes.bool,
     privacy: PropTypes.string,
+    advanced_options: ImmutablePropTypes.contains({
+      do_not_federate: PropTypes.bool,
+    }),
     spoiler_text: PropTypes.string,
     focusDate: PropTypes.instanceOf(Date),
     preselectDate: PropTypes.instanceOf(Date),

app/javascript/mastodon/features/compose/containers/advanced_options_container.js

@@ -1,3 +1,17 @@
+import { connect } from 'react-redux';
 import AdvancedOptionsDropdown from '../components/advanced_options_dropdown';
+import { changeComposeAdvancedOption } from '../../../actions/compose';
 
-export default AdvancedOptionsDropdown;
+const mapStateToProps = state => ({
+  values: state.getIn(['compose', 'advanced_options']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (option) {
+    dispatch(changeComposeAdvancedOption(option));
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AdvancedOptionsDropdown);

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -15,6 +15,7 @@ const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestion_token: state.getIn(['compose', 'suggestion_token']),
   suggestions: state.getIn(['compose', 'suggestions']),
+  advanced_options: state.getIn(['compose', 'advanced_options']),
   spoiler: state.getIn(['compose', 'spoiler']),
   spoiler_text: state.getIn(['compose', 'spoiler_text']),
   privacy: state.getIn(['compose', 'privacy']),

app/javascript/mastodon/reducers/compose.js

@@ -16,6 +16,7 @@ import {
   COMPOSE_SUGGESTIONS_CLEAR,
   COMPOSE_SUGGESTIONS_READY,
   COMPOSE_SUGGESTION_SELECT,
+  COMPOSE_ADVANCED_OPTIONS_CHANGE,
   COMPOSE_SENSITIVITY_CHANGE,
   COMPOSE_SPOILERNESS_CHANGE,
   COMPOSE_SPOILER_TEXT_CHANGE,
@@ -29,6 +30,9 @@ import uuid from '../uuid';
 
 const initialState = Immutable.Map({
   mounted: false,
+  advanced_options: Immutable.Map({
+    do_not_federate: false
+  }),
   sensitive: false,
   spoiler: false,
   spoiler_text: '',
@@ -140,6 +144,11 @@ export default function compose(state = initialState, action) {
     return state.set('mounted', true);
   case COMPOSE_UNMOUNT:
     return state.set('mounted', false);
+  case COMPOSE_ADVANCED_OPTIONS_CHANGE:
+    return state
+      .set('advanced_options',
+        state.get('advanced_options').set(action.option, !state.getIn(['advanced_options', action.option])))
+      .set('idempotencyKey', uuid());
   case COMPOSE_SENSITIVITY_CHANGE:
     return state
       .set('sensitive', !state.get('sensitive'))