Start refactoring forms

app/gabsocial/features/forms/index.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+
+export class SimpleForm extends ImmutablePureComponent {
+
+  static propTypes = {
+    children: PropTypes.node,
+    onSubmit: PropTypes.function,
+  }
+
+  render() {
+    const { children, onSubmit } = this.props;
+
+    return (
+      <form className='simple_form' onSubmit={onSubmit}>
+        {children}
+      </form>
+    );
+  }
+
+}
+
+export class FieldsGroup extends ImmutablePureComponent {
+
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <div className='fields-group'>
+        {children}
+      </div>
+    );
+  }
+
+}
+
+export class Checkbox extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: PropTypes.string,
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+  }
+
+  static defaultProps = {
+    checked: false,
+  }
+
+  render() {
+    const { label, checked, onChange } = this.props;
+    const id = uuidv4();
+
+    return (
+      <div className='input with_label boolean optional'>
+        <div className='label_input'>
+          <label className='boolean optional' htmlFor={id}>
+            {label}
+          </label>
+          <div className='label_input__wrapper'>
+            <label className='checkbox'>
+              <input
+                id={id}
+                className='boolean optional'
+                type='checkbox'
+                checked={checked}
+                onChange={onChange}
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/gabsocial/features/preferences/components/settings_checkbox.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { changeSetting } from 'gabsocial/actions/settings';
+import { Checkbox } from '../../forms';
+
+const mapStateToProps = state => ({
+  settings: state.get('settings'),
+});
+
+export default @connect(mapStateToProps)
+class SettingsCheckbox extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: PropTypes.string,
+    path: PropTypes.array.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+  }
+
+  handleCheckboxSetting = path => {
+    const { dispatch } = this.props;
+    return (e) => {
+      dispatch(changeSetting(path, e.target.checked));
+    };
+  }
+
+  render() {
+    const { label, path, settings } = this.props;
+
+    return (
+      <Checkbox
+        label={label}
+        checked={settings.getIn(path)}
+        onChange={this.handleCheckboxSetting(path)}
+      />
+    );
+  }
+
+}

app/gabsocial/features/preferences/index.js

@@ -6,6 +6,8 @@ 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 SettingsCheckbox from './components/settings_checkbox';
 
 const messages = defineMessages({
   heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
@@ -70,9 +72,9 @@ class Preferences extends ImmutablePureComponent {
 
     return (
       <Column icon='users' heading={intl.formatMessage(messages.heading)} backBtnSlim>
-        <form className='simple_form' onSubmit={this.handleSubmit}>
+        <SimpleForm onSubmit={this.handleSubmit}>
 
-          <div className='fields-group'>
+          <FieldsGroup>
             <div className='input with_label select optional user_setting_theme'>
               <div className='label_input'>
                 <label className='select optional' htmlFor='user_setting_theme'>Site theme</label>
@@ -93,9 +95,9 @@ class Preferences extends ImmutablePureComponent {
                 </div>
               </div>
             </div>
-          </div>
+          </FieldsGroup>
 
-          <div className='fields-group'>
+          <FieldsGroup>
             <div className='input with_floating_label radio_buttons optional user_setting_default_privacy'>
               <div className='label_input'>
                 <label className='radio_buttons optional'>Post privacy</label>
@@ -121,52 +123,24 @@ class Preferences extends ImmutablePureComponent {
                 </ul>
               </div>
             </div>
-          </div>
+          </FieldsGroup>
 
-          <div className='fields-group'>
+          <FieldsGroup>
+            <SettingsCheckbox
+              label='Show confirmation dialog before unfollowing someone'
+              path={['unfollowModal']}
+            />
+            <SettingsCheckbox
+              label='Show confirmation dialog before reposting'
+              path={['boostModal']}
+            />
+            <SettingsCheckbox
+              label='Show confirmation dialog before deleting a post'
+              path={['deleteModal']}
+            />
+          </FieldsGroup>
 
-            <div className='input with_label boolean optional user_setting_unfollow_modal'>
+        </SimpleForm>
-              <div className='label_input'>
-                <label className='boolean optional' htmlFor='user_setting_unfollow_modal'>
-                  Show confirmation dialog before unfollowing someone
-                </label>
-                <div className='label_input__wrapper'>
-                  <label className='checkbox'>
-                    <input className='boolean optional' type='checkbox' checked={settings.get('unfollowModal')} onChange={this.handleCheckboxSetting(['unfollowModal'])} id='user_setting_unfollow_modal' />
-                  </label>
-                </div>
-              </div>
-            </div>
-
-            <div className='input with_label boolean optional user_setting_boost_modal'>
-              <div className='label_input'>
-                <label className='boolean optional' htmlFor='user_setting_boost_modal'>
-                  Show confirmation dialog before reposting
-                </label>
-                <div className='label_input__wrapper'>
-                  <label className='checkbox'>
-                    <input className='boolean optional' type='checkbox' checked={settings.get('boostModal')} onChange={this.handleCheckboxSetting(['boostModal'])} id='user_setting_boost_modal' />
-                  </label>
-                </div>
-              </div>
-            </div>
-
-            <div className='input with_label boolean optional user_setting_delete_modal'>
-              <div className='label_input'>
-                <label className='boolean optional' htmlFor='user_setting_delete_modal'>
-                  Show confirmation dialog before deleting a post
-                </label>
-                <div className='label_input__wrapper'>
-                  <label className='checkbox'>
-                    <input className='boolean optional' type='checkbox' checked={settings.get('deleteModal')} onChange={this.handleCheckboxSetting(['deleteModal'])} id='user_setting_delete_modal' />
-                  </label>
-                </div>
-              </div>
-            </div>
-
-          </div>
-
-        </form>
       </Column>
     );
   }