Refactor RadioGroup

app/gabsocial/features/forms/index.js

@@ -7,7 +7,11 @@ export class SimpleForm extends ImmutablePureComponent {
 
   static propTypes = {
     children: PropTypes.node,
-    onSubmit: PropTypes.function,
+    onSubmit: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onSubmit: e => e.preventDefault(),
   }
 
   render() {
@@ -79,3 +83,66 @@ export class Checkbox extends ImmutablePureComponent {
   }
 
 }
+
+export class RadioGroup extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  render() {
+    const { label, children, onChange } = this.props;
+
+    const childrenWithProps = React.Children.map(children, child =>
+      React.cloneElement(child, { onChange })
+    );
+
+    return (
+      <div className='input with_floating_label radio_buttons optional user_setting_default_privacy'>
+        <div className='label_input'>
+          <label className='radio_buttons optional'>{label}</label>
+          <ul>{childrenWithProps}</ul>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export class RadioItem extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    checked: PropTypes.bool.isRequired,
+    onChange: PropTypes.func,
+  }
+
+  static defaultProps = {
+    checked: false,
+  }
+
+  render() {
+    const { label, hint, value, checked, onChange } = this.props;
+    const id = uuidv4();
+
+    return (
+      <li className='radio'>
+        <label htmlFor={id}>
+          <input
+            id={id}
+            className='radio_buttons optional'
+            type='radio'
+            checked={checked}
+            onChange={onChange}
+            value={value}
+          /> {label}
+          {hint && <span className='hint'>{hint}</span>}
+        </label>
+      </li>
+    );
+  }
+
+}

app/gabsocial/features/preferences/index.js

@@ -6,7 +6,12 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { changeSetting } from 'gabsocial/actions/settings';
 import Column from '../ui/components/column';
-import { SimpleForm, FieldsGroup } from 'gabsocial/features/forms';
+import {
+  SimpleForm,
+  FieldsGroup,
+  RadioGroup,
+  RadioItem,
+} from 'gabsocial/features/forms';
 import SettingsCheckbox from './components/settings_checkbox';
 
 const messages = defineMessages({
@@ -60,19 +65,12 @@ class Preferences extends ImmutablePureComponent {
     dispatch(changeSetting(['defaultPrivacy'], e.target.value));
   }
 
-  handleCheckboxSetting = path => {
-    const { dispatch } = this.props;
-    return (e) => {
-      dispatch(changeSetting(path, e.target.checked));
-    };
-  }
-
   render() {
     const { settings, intl } = this.props;
 
     return (
       <Column icon='users' heading={intl.formatMessage(messages.heading)} backBtnSlim>
-        <SimpleForm onSubmit={this.handleSubmit}>
+        <SimpleForm>
 
           <FieldsGroup>
             <div className='input with_label select optional user_setting_theme'>
@@ -98,31 +96,26 @@ class Preferences extends ImmutablePureComponent {
           </FieldsGroup>
 
           <FieldsGroup>
-            <div className='input with_floating_label radio_buttons optional user_setting_default_privacy'>
+            <RadioGroup label='Post privacy' onChange={this.onDefaultPrivacyChange}>
-              <div className='label_input'>
+              <RadioItem
-                <label className='radio_buttons optional'>Post privacy</label>
+                label='Public'
-                <ul>
+                hint='Everyone can see'
-                  <li className='radio'>
+                checked={settings.get('defaultPrivacy') === 'public'}
-                    <label htmlFor='user_setting_default_privacy_public'>
+                value='public'
-                      <input className='radio_buttons optional' type='radio' checked={settings.get('defaultPrivacy') === 'public'} onChange={this.onDefaultPrivacyChange} value='public' id='user_setting_default_privacy_public' />Public
+              />
-                      <span className='hint'>Everyone can see</span>
+              <RadioItem
-                    </label>
+                label='Unlisted'
-                  </li>
+                hint='Everyone can see, but not listed on public timelines'
-                  <li className='radio'>
+                checked={settings.get('defaultPrivacy') === 'unlisted'}
-                    <label htmlFor='user_setting_default_privacy_unlisted'>
+                value='unlisted'
-                      <input className='radio_buttons optional' type='radio' checked={settings.get('defaultPrivacy') === 'unlisted'} onChange={this.onDefaultPrivacyChange} value='unlisted' id='user_setting_default_privacy_unlisted' />Unlisted
+              />
-                      <span className='hint'>Everyone can see, but not listed on public timelines</span>
+              <RadioItem
-                    </label>
+                label='Followers-only'
-                  </li>
+                hint='Only show to followers'
-                  <li className='radio'>
+                checked={settings.get('defaultPrivacy') === 'private'}
-                    <label htmlFor='user_setting_default_privacy_private'>
+                value='private'
-                      <input className='radio_buttons optional' type='radio' checked={settings.get('defaultPrivacy') === 'private'} onChange={this.onDefaultPrivacyChange} value='private' id='user_setting_default_privacy_private' />Followers-only
+              />
-                      <span className='hint'>Only show to followers</span>
+            </RadioGroup>
-                    </label>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </FieldsGroup>
 
           <FieldsGroup>