4 files changed, 28 insertions, 22 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();
     }