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

Refactor settings on shared logics

1 files changed, 22 insertions, 16 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;