Getting rid of string/boolean confusion

The issue is in the dropdown_selector component, which stores data as a
`data-index` element on a dropdown. This means all values are cast to
strings in anything using that dropdown, which means we need to
unstringify on the `handleChange` function that (up in the component)
calls the `getAttribue` function. Anyway this means we can remove
terrible hacks in multiple places.

app/javascript/mastodon/actions/compose.js

@@ -228,7 +228,7 @@ export function submitCompose() {
         spoiler_text: getState().getIn(['compose', 'spoiler']) ? getState().getIn(['compose', 'spoiler_text'], '') : '',
         visibility: getState().getIn(['compose', 'privacy']),
         poll: getState().getIn(['compose', 'poll'], null),
-        local_only: getState().getIn(['compose', 'federation']) === 'false',
+        local_only: !getState().getIn(['compose', 'federation']),
         language: getState().getIn(['compose', 'language']),
       },
       headers: {

app/javascript/mastodon/features/compose/components/federation_dropdown.jsx

@@ -78,7 +78,11 @@ class FederationDropdown extends PureComponent {
   };
 
   handleChange = value => {
-    this.props.onChange(value);
+    // because handleChange always receives string values from DropdownSelector we need to convert them back to boolean
+    // since the strings "true" and "false" get stored on the "data-index" attribute in the dropdown, we need to
+    // check for the string 'true' and convert that to boolean true, everything else is false
+    // (this way a failure to pass a value will result in false, or local-only, which is a safer default)
+    this.props.onChange(value === 'true');
   };
 
   UNSAFE_componentWillMount() {
@@ -106,9 +110,7 @@ class FederationDropdown extends PureComponent {
     const { value, container, disabled } = this.props;
     const { open, placement } = this.state;
 
-    // terrible hack to convert string 'false' to boolean false; due to
-    // the implemenation of federation value being stored as string in some places
-    const valueOption = this.options.find(item => item.value === (value !== 'false'));
+    const valueOption = this.options.find(item => item.value === value);
 
     return (
       <div ref={this.setTargetRef} onKeyDown={this.handleKeyDown}>

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

@@ -20,7 +20,7 @@ const mapStateToProps = state => ({
   spoiler: state.getIn(['compose', 'spoiler']),
   spoilerText: state.getIn(['compose', 'spoiler_text']),
   privacy: state.getIn(['compose', 'privacy']),
-  federation: state.getIn(['compose', 'federation']) !== 'false',
+  federation: state.getIn(['compose', 'federation']),
   focusDate: state.getIn(['compose', 'focusDate']),
   caretPosition: state.getIn(['compose', 'caretPosition']),
   preselectDate: state.getIn(['compose', 'preselectDate']),