Fix form options

3 files changed, 29 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/index.tsx b/src/settings/components/index.tsx
index bd99d52..586f0f0 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -32,7 +32,7 @@ class SettingsComponent extends React.Component<Props> {
     this.props.dispatch(settingActions.load());
   }
 
-  renderFormFields(form: any) {
+  renderFormFields(form: FormSettings) {
     return <div>
       <fieldset>
         <legend>Keybindings</legend>
@@ -53,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)}
         />
@@ -62,7 +62,7 @@ class SettingsComponent extends React.Component<Props> {
         <legend>Properties</legend>
         <PropertiesForm
           types={Properties.types()}
-          value={form.properties}
+          value={form.properties.toJSON()}
           onChange={this.bindPropertiesForm.bind(this)}
           onBlur={this.save.bind(this)}
         />
@@ -89,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 JSONTextSettings, this.props.error);
+      fields = this.renderJsonFields(this.props.json!!, this.props.error);
     }
     return (
       <div>
diff --git a/src/settings/reducers/setting.ts b/src/settings/reducers/setting.ts
index 89bf1cb..804853f 100644
--- a/src/settings/reducers/setting.ts
+++ b/src/settings/reducers/setting.ts
@@ -2,6 +2,7 @@ import * as actions from '../actions';
 import {
   JSONTextSettings, FormSettings, SettingSource,
 } from '../../shared/SettingData';
+import { DefaultSetting } from '../../shared/settings/Settings';
 
 export interface State {
   source: SettingSource;
@@ -13,6 +14,7 @@ export interface State {
 const defaultState: State = {
   source: SettingSource.JSON,
   json: JSONTextSettings.fromText(''),
+  form: FormSettings.fromSettings(DefaultSetting),
   error: '',
 };