From be900aa25ca205c467dcbbab9c284ef680441996 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 29 Apr 2019 15:27:23 +0900
Subject: [PATCH] Clean settings components

---
 src/settings/actions/setting.js               |  5 +-
 .../{blacklist-form.jsx => BlacklistForm.jsx} |  8 +--
 ...blacklist-form.scss => BlacklistForm.scss} |  0
 src/settings/components/form/KeymapsForm.jsx  | 47 ++++++++++++++++
 .../{keymaps-form.scss => KeymapsForm.scss}   |  0
 ...properties-form.jsx => PropertiesForm.jsx} |  2 +-
 ...operties-form.scss => PropertiesForm.scss} |  0
 .../form/{search-form.jsx => SearchForm.jsx}  |  8 +--
 .../{search-form.scss => SearchForm.scss}     |  0
 src/settings/components/index.jsx             | 12 ++--
 .../ui/{add-button.jsx => AddButton.jsx}      |  2 +-
 .../ui/{add-button.scss => AddButton.scss}    |  0
 .../{delete-button.jsx => DeleteButton.jsx}   |  2 +-
 .../{delete-button.scss => DeleteButton.scss} |  0
 .../components/ui/{input.jsx => Input.jsx}    |  2 +-
 .../components/ui/{input.scss => Input.scss}  |  0
 src/settings/index.jsx                        |  7 ++-
 .../form/keymaps-form.jsx => keymaps.js}      | 56 ++-----------------
 18 files changed, 77 insertions(+), 74 deletions(-)
 rename src/settings/components/form/{blacklist-form.jsx => BlacklistForm.jsx} (87%)
 rename src/settings/components/form/{blacklist-form.scss => BlacklistForm.scss} (100%)
 create mode 100644 src/settings/components/form/KeymapsForm.jsx
 rename src/settings/components/form/{keymaps-form.scss => KeymapsForm.scss} (100%)
 rename src/settings/components/form/{properties-form.jsx => PropertiesForm.jsx} (97%)
 rename src/settings/components/form/{properties-form.scss => PropertiesForm.scss} (100%)
 rename src/settings/components/form/{search-form.jsx => SearchForm.jsx} (93%)
 rename src/settings/components/form/{search-form.scss => SearchForm.scss} (100%)
 rename src/settings/components/ui/{add-button.jsx => AddButton.jsx} (88%)
 rename src/settings/components/ui/{add-button.scss => AddButton.scss} (100%)
 rename src/settings/components/ui/{delete-button.jsx => DeleteButton.jsx} (88%)
 rename src/settings/components/ui/{delete-button.scss => DeleteButton.scss} (100%)
 rename src/settings/components/ui/{input.jsx => Input.jsx} (98%)
 rename src/settings/components/ui/{input.scss => Input.scss} (100%)
 rename src/settings/{components/form/keymaps-form.jsx => keymaps.js} (70%)

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index 0277159..8844252 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -1,8 +1,8 @@
 import actions from 'settings/actions';
 import * as validator from 'shared/settings/validator';
-import KeymapsForm from '../components/form/keymaps-form';
 import * as settingsValues from 'shared/settings/values';
 import * as settingsStorage from 'shared/settings/storage';
+import keymaps from '../keymaps';
 
 const load = async() => {
   let settings = await settingsStorage.loadRaw();
@@ -29,8 +29,7 @@ const save = async(settings) => {
 const switchToForm = (json) => {
   try {
     validator.validate(JSON.parse(json));
-    // AllowdOps filters operations, this is dirty dependency
-    let form = settingsValues.formFromJson(json, KeymapsForm.AllowdOps);
+    let form = settingsValues.formFromJson(json, keymaps.allowedOps);
     return {
       type: actions.SETTING_SWITCH_TO_FORM,
       form,
diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/BlacklistForm.jsx
similarity index 87%
rename from src/settings/components/form/blacklist-form.jsx
rename to src/settings/components/form/BlacklistForm.jsx
index 492c3af..13571f1 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/BlacklistForm.jsx
@@ -1,6 +1,6 @@
-import './blacklist-form.scss';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
+import './BlacklistForm.scss';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
 import React from 'react';
 
 class BlacklistForm extends React.Component {
@@ -23,7 +23,7 @@ class BlacklistForm extends React.Component {
           </div>;
         })
       }
-      <AddButton name='add' style='float:right'
+      <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
     </div>;
   }
diff --git a/src/settings/components/form/blacklist-form.scss b/src/settings/components/form/BlacklistForm.scss
similarity index 100%
rename from src/settings/components/form/blacklist-form.scss
rename to src/settings/components/form/BlacklistForm.scss
diff --git a/src/settings/components/form/KeymapsForm.jsx b/src/settings/components/form/KeymapsForm.jsx
new file mode 100644
index 0000000..25a3710
--- /dev/null
+++ b/src/settings/components/form/KeymapsForm.jsx
@@ -0,0 +1,47 @@
+import './KeymapsForm.scss';
+import React from 'react';
+import Input from '../ui/Input';
+import keymaps from '../../keymaps';
+
+class KeymapsForm extends React.Component {
+
+  render() {
+    let values = this.props.value;
+    if (!values) {
+      values = {};
+    }
+    return <div className='form-keymaps-form'>
+      {
+        keymaps.fields.map((group, index) => {
+          return <div key={index} className='form-keymaps-form-field-group'>
+            {
+              group.map((field) => {
+                let name = field[0];
+                let label = field[1];
+                let value = values[name];
+                return <Input
+                  type='text' id={name} name={name} key={name}
+                  label={label} value={value}
+                  onChange={this.bindValue.bind(this)}
+                />;
+              })
+            }
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let next = { ...this.props.value };
+    next[e.target.name] = e.target.value;
+
+    this.props.onChange(next);
+  }
+}
+
+export default KeymapsForm;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/KeymapsForm.scss
similarity index 100%
rename from src/settings/components/form/keymaps-form.scss
rename to src/settings/components/form/KeymapsForm.scss
diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/PropertiesForm.jsx
similarity index 97%
rename from src/settings/components/form/properties-form.jsx
rename to src/settings/components/form/PropertiesForm.jsx
index 7d591d5..77991fc 100644
--- a/src/settings/components/form/properties-form.jsx
+++ b/src/settings/components/form/PropertiesForm.jsx
@@ -1,4 +1,4 @@
-import './properties-form.scss';
+import './PropertiesForm.scss';
 import React from 'react';
 
 class PropertiesForm extends React.Component {
diff --git a/src/settings/components/form/properties-form.scss b/src/settings/components/form/PropertiesForm.scss
similarity index 100%
rename from src/settings/components/form/properties-form.scss
rename to src/settings/components/form/PropertiesForm.scss
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/SearchForm.jsx
similarity index 93%
rename from src/settings/components/form/search-form.jsx
rename to src/settings/components/form/SearchForm.jsx
index 81204f3..f52fd5f 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/SearchForm.jsx
@@ -1,7 +1,7 @@
-import './search-form.scss';
+import './SearchForm.scss';
 import React from 'react';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
 
 class SearchForm extends React.Component {
 
@@ -40,7 +40,7 @@ class SearchForm extends React.Component {
           </div>;
         })
       }
-      <AddButton name='add' style='float:right'
+      <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
     </div>;
   }
diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/SearchForm.scss
similarity index 100%
rename from src/settings/components/form/search-form.scss
rename to src/settings/components/form/SearchForm.scss
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 9dae25e..affa2e9 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,11 +1,11 @@
 import './site.scss';
 import React from 'react';
 import { connect } from 'react-redux';
-import Input from './ui/input';
-import SearchForm from './form/search-form';
-import KeymapsForm from './form/keymaps-form';
-import BlacklistForm from './form/blacklist-form';
-import PropertiesForm from './form/properties-form';
+import Input from './ui/Input';
+import SearchForm from './form/SearchForm';
+import KeymapsForm from './form/KeymapsForm';
+import BlacklistForm from './form/BlacklistForm';
+import PropertiesForm from './form/PropertiesForm';
 import * as properties from 'shared/settings/properties';
 import * as settingActions from 'settings/actions/setting';
 
@@ -136,7 +136,7 @@ class SettingsComponent extends React.Component {
       this.props.dispatch(settingActions.switchToForm(this.props.json));
     }
 
-    let settings = this.props.getState();
+    let settings = this.props.store.getState();
     this.props.dispatch(settingActions.save(settings));
   }
 }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/AddButton.jsx
similarity index 88%
rename from src/settings/components/ui/add-button.jsx
rename to src/settings/components/ui/AddButton.jsx
index 031d28b..185a03b 100644
--- a/src/settings/components/ui/add-button.jsx
+++ b/src/settings/components/ui/AddButton.jsx
@@ -1,4 +1,4 @@
-import './add-button.scss';
+import './AddButton.scss';
 import React from 'react';
 
 class AddButton extends React.Component {
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/AddButton.scss
similarity index 100%
rename from src/settings/components/ui/add-button.scss
rename to src/settings/components/ui/AddButton.scss
diff --git a/src/settings/components/ui/delete-button.jsx b/src/settings/components/ui/DeleteButton.jsx
similarity index 88%
rename from src/settings/components/ui/delete-button.jsx
rename to src/settings/components/ui/DeleteButton.jsx
index 3dfe14a..75811cd 100644
--- a/src/settings/components/ui/delete-button.jsx
+++ b/src/settings/components/ui/DeleteButton.jsx
@@ -1,4 +1,4 @@
-import './delete-button.scss';
+import './DeleteButton.scss';
 import React from 'react';
 
 class DeleteButton extends React.Component {
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/DeleteButton.scss
similarity index 100%
rename from src/settings/components/ui/delete-button.scss
rename to src/settings/components/ui/DeleteButton.scss
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/Input.jsx
similarity index 98%
rename from src/settings/components/ui/input.jsx
rename to src/settings/components/ui/Input.jsx
index 2f42b62..d090f5b 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/Input.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import './input.scss';
+import './Input.scss';
 
 class Input extends React.Component {
 
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/Input.scss
similarity index 100%
rename from src/settings/components/ui/input.scss
rename to src/settings/components/ui/Input.scss
diff --git a/src/settings/index.jsx b/src/settings/index.jsx
index 9df1073..6aec7a0 100644
--- a/src/settings/index.jsx
+++ b/src/settings/index.jsx
@@ -1,4 +1,5 @@
-import { render } from 'react';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import SettingsComponent from './components';
 import reducer from './reducers/setting';
 import { Provider } from 'react-redux';
@@ -12,9 +13,9 @@ const store = createStore(
 
 document.addEventListener('DOMContentLoaded', () => {
   let wrapper = document.getElementById('vimvixen-settings');
-  render(
+  ReactDOM.render(
     <Provider store={store}>
-      <SettingsComponent />
+      <SettingsComponent store={store} />
     </Provider>,
     wrapper
   );
diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/keymaps.js
similarity index 70%
rename from src/settings/components/form/keymaps-form.jsx
rename to src/settings/keymaps.js
index 8c0a83f..ccfc74c 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/keymaps.js
@@ -1,8 +1,4 @@
-import './keymaps-form.scss';
-import React from 'react';
-import Input from '../ui/input';
-
-const KeyMapFields = [
+const fields = [
   [
     ['scroll.vertically?{"count":1}', 'Scroll down'],
     ['scroll.vertically?{"count":-1}', 'Scroll up'],
@@ -70,49 +66,9 @@ const KeyMapFields = [
   ]
 ];
 
-const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
-
-class KeymapsForm extends React.Component {
-
-  render() {
-    let values = this.props.value;
-    if (!values) {
-      values = {};
-    }
-    return <div className='form-keymaps-form'>
-      {
-        KeyMapFields.map((group, index) => {
-          return <div key={index} className='form-keymaps-form-field-group'>
-            {
-              group.map((field) => {
-                let name = field[0];
-                let label = field[1];
-                let value = values[name];
-                return <Input
-                  type='text' id={name} name={name} key={name}
-                  label={label} value={value}
-                  onChange={this.bindValue.bind(this)}
-                />;
-              })
-            }
-          </div>;
-        })
-      }
-    </div>;
-  }
-
-  bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
-    let next = { ...this.props.value };
-    next[e.target.name] = e.target.value;
-
-    this.props.onChange(next);
-  }
-}
-
-KeymapsForm.AllowdOps = AllowdOps;
+const allowedOps = [].concat(...fields.map(group => group.map(e => e[0])));
 
-export default KeymapsForm;
+export default {
+  fields,
+  allowedOps,
+};