Fix form options

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;

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>

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: '',
 };
 

src/shared/SettingData.ts

@@ -141,13 +141,13 @@ export class JSONTextSettings {
 }
 
 export class FormSettings {
-  private keymaps: FormKeymaps;
+  public readonly keymaps: FormKeymaps;
 
-  private search: FormSearch;
+  public readonly search: FormSearch;
 
-  private properties: Properties;
+  public readonly properties: Properties;
 
-  private blacklist: Blacklist;
+  public readonly blacklist: Blacklist;
 
   constructor(
     keymaps: FormKeymaps,
@@ -210,7 +210,7 @@ export class FormSettings {
     keymaps: ReturnType<FormKeymaps['toJSON']>;
     search: ReturnType<FormSearch['toJSON']>;
     properties: ReturnType<Properties['toJSON']>;
-    blacklist: string[];
+    blacklist: ReturnType<Blacklist['toJSON']>;
     } {
     return {
       keymaps: this.keymaps.toJSON(),

src/shared/settings/Properties.ts

@@ -59,7 +59,7 @@ export default class Properties {
     hintchars?: string;
     smoothscroll?: boolean;
     complete?: string;
-  }) {
+  } = {}) {
     this.hintchars = hintchars || defaultValues.hintchars;
     this.smoothscroll = smoothscroll || defaultValues.smoothscroll;
     this.complete = complete || defaultValues.complete;