Basic theme switcher (no persistence)

app/gabsocial/features/preferences/index.js

@@ -3,13 +3,29 @@ import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 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 Column from '../ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
 });
 
-const mapStateToProps = state => ({});
+// TODO: Pull dynamically
+const themes = {
+  cobalt: 'cobalt',
+  'gabsocial-light': 'Light',
+  default: 'Dark',
+  contrast: 'High contrast',
+  halloween: 'Halloween',
+  neenster: 'neenster',
+  glinner: 'glinner',
+  lime: 'lime',
+};
+
+const mapStateToProps = state => ({
+  settings: state.get('settings'),
+});
 
 export default @connect(mapStateToProps)
 @injectIntl
@@ -18,17 +34,61 @@ class Preferences extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = { isLoading: false };
+  }
+
   componentWillMount() {
     // this.props.dispatch(fetchPreferences());
   }
 
+  getFormData = (form) => {
+    return Object.fromEntries(
+      Array.from(form).map(i => [i.name, i.value])
+    );
+  }
+
+  onThemeChange = e => {
+    const { dispatch } = this.props;
+    dispatch(changeSetting(['theme'], e.target.value));
+  }
+
   render() {
-    const { intl } = this.props;
+    const { settings, intl } = this.props;
 
     return (
-      <Column icon='users' heading={intl.formatMessage(messages.heading)} backBtnSlim />
+      <Column icon='users' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <form className='simple_form' onSubmit={this.handleSubmit}>
+          <fieldset disabled={this.state.isLoading}>
+            <div className='fields-group'>
+              <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>
+                  <div className='label_input__wrapper'>
+                    <select
+                      className='select optional'
+                      name='user[setting_theme]'
+                      id='user_setting_theme'
+                      onChange={this.onThemeChange}
+                      value={settings.get('theme')}
+                    >
+                      {Object.keys(themes).map(theme => (
+                        <option key={theme} value={theme}>
+                          {themes[theme]}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+      </Column>
     );
   }