use react in settings

6 files changed, 97 insertions, 70 deletions

diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
new file mode 100644
index 0000000..e57b09d
--- /dev/null
+++ b/src/settings/components/index.jsx
@@ -0,0 +1,78 @@
+import './site.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as settingActions from 'settings/actions/setting';
+import { validate } from 'shared/validators/setting';
+
+class SettingsComponent extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      settings: {
+        json: '',
+      }
+    };
+    this.context.store.subscribe(this.stateChanged.bind(this));
+  }
+
+  componentDidMount() {
+    this.context.store.dispatch(settingActions.load());
+  }
+
+  stateChanged() {
+    let settings = this.context.store.getState();
+    this.setState({ settings });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Configure Vim-Vixen</h1>
+
+        <form id='vimvixen-settings-form' className='vimvixen-settings-form'
+          onSubmit={this.saveSettings.bind(this)}>
+          <label htmlFor='load-from-json'>Load from JSON:</label>
+          <textarea name='plain-json' spellCheck='false'
+            onInput={this.onPlainJsonChanged.bind(this)}
+            onChange={this.bindValue.bind(this)}
+            value={this.state.settings.json} />
+          <button type='submit'>Save</button>
+        </form>
+      </div>
+    );
+  }
+
+  saveSettings(e) {
+    let settings = {
+      json: e.target.elements['plain-json'].value,
+    };
+    this.context.store.dispatch(settingActions.save(settings));
+    e.preventDefault();
+  }
+
+  onPlainJsonChanged(e) {
+    try {
+      let settings = JSON.parse(e.target.value);
+      validate(settings);
+      e.target.setCustomValidity('');
+    } catch (err) {
+      e.target.setCustomValidity(err.message);
+    }
+  }
+
+  bindValue(e) {
+    let next = Object.assign({}, this.state, {
+      settings: {
+        'json': e.target.value,
+      }
+    });
+    this.setState(next);
+  }
+}
+
+SettingsComponent.contextTypes = {
+  store: PropTypes.any,
+};
+
+export default SettingsComponent;
diff --git a/src/settings/components/setting.js b/src/settings/components/setting.js
deleted file mode 100644
index cf1538f..0000000
--- a/src/settings/components/setting.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as settingActions from 'settings/actions/setting';
-import { validate } from 'shared/validators/setting';
-
-export default class SettingComponent {
-  constructor(wrapper, store) {
-    this.wrapper = wrapper;
-    this.store = store;
-
-    let doc = wrapper.ownerDocument;
-    let form = doc.getElementById('vimvixen-settings-form');
-    form.addEventListener('submit', this.onSubmit.bind(this));
-
-    let plainJson = form.elements['plain-json'];
-    plainJson.addEventListener('input', this.onPlainJsonChanged.bind(this));
-
-    store.dispatch(settingActions.load());
-  }
-
-  onSubmit(e) {
-    let settings = {
-      json: e.target.elements['plain-json'].value,
-    };
-    this.store.dispatch(settingActions.save(settings));
-    e.preventDefault();
-  }
-
-  onPlainJsonChanged(e) {
-    try {
-      let settings = JSON.parse(e.target.value);
-      validate(settings);
-      e.target.setCustomValidity('');
-    } catch (err) {
-      e.target.setCustomValidity(err.message);
-    }
-  }
-
-  update() {
-    let settings = this.store.getState();
-
-    let doc = this.wrapper.ownerDocument;
-    let form = doc.getElementById('vimvixen-settings-form');
-    let plainJsonInput = form.elements['plain-json'];
-    plainJsonInput.value = settings.json;
-
-  }
-}
diff --git a/src/settings/site.scss b/src/settings/components/site.scss
index 5707c8a..5707c8a 100644
--- a/src/settings/site.scss
+++ b/src/settings/components/site.scss
diff --git a/src/settings/index.html b/src/settings/index.html
index 99d6c6b..6fe00df 100644
--- a/src/settings/index.html
+++ b/src/settings/index.html
@@ -4,15 +4,7 @@
     <meta charset='utf-8'>
   </head>
   <body>
-    <h1>Configure</h1>
-
-    <h2>Home page</h2>
-    <form id='vimvixen-settings-form' class='vimvixen-settings-form'>
-      <label for='load-from-json'>Load from JSON:</label>
-      <textarea name='plain-json' spellcheck='false'></textarea>
-
-      <button type='submit'>Save</button>
-    </form>
+    <div id='vimvixen-settings'></div>
     <script src='settings.js'></script>
   </body>
 </html>
diff --git a/src/settings/index.js b/src/settings/index.js
deleted file mode 100644
index c8d6cc4..0000000
--- a/src/settings/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import './site.scss';
-import SettingComponent from 'settings/components/setting';
-import settingReducer from 'settings/reducers/setting';
-import { createStore } from 'shared/store';
-
-const store = createStore(settingReducer);
-let settingComponent = null;
-
-store.subscribe(() => {
-  settingComponent.update();
-});
-
-document.addEventListener('DOMContentLoaded', () => {
-  settingComponent = new SettingComponent(document.body, store);
-});
diff --git a/src/settings/index.jsx b/src/settings/index.jsx
new file mode 100644
index 0000000..7516fb7
--- /dev/null
+++ b/src/settings/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SettingsComponent from './components';
+import reducer from 'settings/reducers/setting';
+import Provider from 'shared/store/provider';
+import { createStore } from 'shared/store';
+
+const store = createStore(reducer);
+
+document.addEventListener('DOMContentLoaded', () => {
+  let wrapper = document.getElementById('vimvixen-settings');
+  ReactDOM.render(
+    <Provider store={store}>
+      <SettingsComponent />
+    </Provider>,
+    wrapper
+  );
+});