Merge pull request #654 from ueokande/settings-as-a-class

Refactor settings on shared logics

5 files changed, 44 insertions, 44 deletions

diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 637bc1e..f352e41 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -2,10 +2,11 @@ import './BlacklistForm.scss';
 import AddButton from '../ui/AddButton';
 import DeleteButton from '../ui/DeleteButton';
 import React from 'react';
+import { BlacklistJSON } from '../../../shared/settings/Blacklist';
 
 interface Props {
-  value: string[];
-  onChange: (value: string[]) => void;
+  value: BlacklistJSON;
+  onChange: (value: BlacklistJSON) => void;
   onBlur: () => void;
 }
 
@@ -19,19 +20,24 @@ class BlacklistForm extends React.Component<Props> {
   render() {
     return <div className='form-blacklist-form'>
       {
-        this.props.value.map((url, index) => {
-          return <div key={index} className='form-blacklist-form-row'>
-            <input data-index={index} type='text' name='url'
-              className='column-url' value={url}
-              onChange={this.bindValue.bind(this)}
-              onBlur={this.props.onBlur}
-            />
-            <DeleteButton data-index={index} name='delete'
-              onClick={this.bindValue.bind(this)}
-              onBlur={this.props.onBlur}
-            />
-          </div>;
-        })
+        this.props.value
+          .map((item, index) => {
+            if (typeof item !== 'string') {
+              // TODO support partial blacklist;
+              return null;
+            }
+            return <div key={index} className='form-blacklist-form-row'>
+              <input data-index={index} type='text' name='url'
+                className='column-url' value={item}
+                onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
+              />
+              <DeleteButton data-index={index} name='delete'
+                onClick={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
+              />
+            </div>;
+          })
       }
       <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
@@ -41,7 +47,7 @@ class BlacklistForm extends React.Component<Props> {
   bindValue(e: any) {
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
-    let next = this.props.value ? this.props.value.slice() : [];
+    let next = this.props.value.slice();
 
     if (name === 'url') {
       next[index] = e.target.value;
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index 3cba0c0..94934ae 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 class KeymapsForm extends React.Component<Props> {
   public static defaultProps: Props = {
-    value: FormKeymaps.valueOf({}),
+    value: FormKeymaps.fromJSON({}),
     onChange: () => {},
     onBlur: () => {},
   };
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
index ee98b7e..db8c8e5 100644
--- a/src/settings/components/form/PropertiesForm.tsx
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -18,7 +18,7 @@ class PropertiesForm extends React.Component<Props> {
 
   render() {
     let types = this.props.types;
-    let value = this.props.value;
+    let values = this.props.value;
 
     return <div className='form-properties-form'>
       {
@@ -46,10 +46,10 @@ class PropertiesForm extends React.Component<Props> {
               <span className='column-name'>{name}</span>
               <input type={inputType} name={name}
                 className='column-input'
-                value={value[name] ? value[name] : ''}
+                value={values[name] ? values[name] : ''}
                 onChange={onChange}
                 onBlur={this.props.onBlur}
-                checked={value[name]}
+                checked={values[name]}
               />
             </label>
           </div>;
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index 6ba6cfb..0aaf6fd 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 class SearchForm extends React.Component<Props> {
   public static defaultProps: Props = {
-    value: FormSearch.valueOf({ default: '', engines: []}),
+    value: FormSearch.fromJSON({ default: '', engines: []}),
     onChange: () => {},
     onBlur: () => {},
   };
@@ -81,7 +81,7 @@ class SearchForm extends React.Component<Props> {
       }
     }
 
-    this.props.onChange(FormSearch.valueOf(next));
+    this.props.onChange(FormSearch.fromJSON(next));
     if (name === 'delete' || name === 'default') {
       this.props.onBlur();
     }
diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
index eeac2cf..160dd9c 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -8,11 +8,11 @@ import BlacklistForm from './form/BlacklistForm';
 import PropertiesForm from './form/PropertiesForm';
 import * as settingActions from '../../settings/actions/setting';
 import SettingData, {
-  JSONSettings, FormKeymaps, FormSearch, FormSettings,
+  FormKeymaps, FormSearch, FormSettings, JSONTextSettings,
 } from '../../shared/SettingData';
 import { State as AppState } from '../reducers/setting';
-import * as settings from '../../shared/Settings';
-import * as PropertyDefs from '../../shared/property-defs';
+import Properties from '../../shared/settings/Properties';
+import Blacklist from '../../shared/settings/Blacklist';
 
 const DO_YOU_WANT_TO_CONTINUE =
   'Some settings in JSON can be lost when migrating.  ' +
@@ -32,12 +32,7 @@ class SettingsComponent extends React.Component<Props> {
     this.props.dispatch(settingActions.load());
   }
 
-  renderFormFields(form: any) {
-    let types = PropertyDefs.defs.reduce(
-      (o: {[key: string]: string}, def) => {
-        o[def.name] = def.type;
-        return o;
-      }, {});
+  renderFormFields(form: FormSettings) {
     return <div>
       <fieldset>
         <legend>Keybindings</legend>
@@ -58,7 +53,7 @@ class SettingsComponent extends React.Component<Props> {
       <fieldset>
         <legend>Blacklist</legend>
         <BlacklistForm
-          value={form.blacklist}
+          value={form.blacklist.toJSON()}
           onChange={this.bindBlacklistForm.bind(this)}
           onBlur={this.save.bind(this)}
         />
@@ -66,8 +61,8 @@ class SettingsComponent extends React.Component<Props> {
       <fieldset>
         <legend>Properties</legend>
         <PropertiesForm
-          types={types}
-          value={form.properties}
+          types={Properties.types()}
+          value={form.properties.toJSON()}
           onChange={this.bindPropertiesForm.bind(this)}
           onBlur={this.save.bind(this)}
         />
@@ -75,7 +70,7 @@ class SettingsComponent extends React.Component<Props> {
     </div>;
   }
 
-  renderJsonFields(json: JSONSettings, error: string) {
+  renderJsonFields(json: JSONTextSettings, error: string) {
     return <div>
       <Input
         type='textarea'
@@ -85,7 +80,7 @@ class SettingsComponent extends React.Component<Props> {
         error={error}
         onValueChange={this.bindJson.bind(this)}
         onBlur={this.save.bind(this)}
-        value={json.toJSON()}
+        value={json.toJSONText()}
       />
     </div>;
   }
@@ -94,10 +89,9 @@ class SettingsComponent extends React.Component<Props> {
     let fields = null;
     let disabled = this.props.error.length > 0;
     if (this.props.source === 'form') {
-      fields = this.renderFormFields(this.props.form);
+      fields = this.renderFormFields(this.props.form!!);
     } else if (this.props.source === 'json') {
-      fields = this.renderJsonFields(
-        this.props.json as JSONSettings, this.props.error);
+      fields = this.renderJsonFields(this.props.json!!, this.props.error);
     }
     return (
       <div>
@@ -139,7 +133,7 @@ class SettingsComponent extends React.Component<Props> {
     let data = new SettingData({
       source: this.props.source,
       form: (this.props.form as FormSettings).buildWithSearch(
-        FormSearch.valueOf(value)),
+        FormSearch.fromJSON(value)),
     });
     this.props.dispatch(settingActions.set(data));
   }
@@ -148,7 +142,7 @@ class SettingsComponent extends React.Component<Props> {
     let data = new SettingData({
       source: this.props.source,
       form: (this.props.form as FormSettings).buildWithBlacklist(
-        settings.blacklistValueOf(value)),
+        Blacklist.fromJSON(value)),
     });
     this.props.dispatch(settingActions.set(data));
   }
@@ -157,7 +151,7 @@ class SettingsComponent extends React.Component<Props> {
     let data = new SettingData({
       source: this.props.source,
       form: (this.props.form as FormSettings).buildWithProperties(
-        settings.propertiesValueOf(value)),
+        Properties.fromJSON(value))
     });
     this.props.dispatch(settingActions.set(data));
   }
@@ -165,7 +159,7 @@ class SettingsComponent extends React.Component<Props> {
   bindJson(_name: string, value: string) {
     let data = new SettingData({
       source: this.props.source,
-      json: JSONSettings.valueOf(value),
+      json: JSONTextSettings.fromText(value),
     });
     this.props.dispatch(settingActions.set(data));
   }
@@ -183,7 +177,7 @@ class SettingsComponent extends React.Component<Props> {
         return;
       }
       this.props.dispatch(
-        settingActions.switchToForm(this.props.json as JSONSettings));
+        settingActions.switchToForm(this.props.json as JSONTextSettings));
       this.save();
     }
   }