Use plugin:prettier/recommended

9 files changed, 418 insertions, 326 deletions

diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 51c32f4..859cb9f 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -1,8 +1,8 @@
-import './BlacklistForm.scss';
-import AddButton from '../ui/AddButton';
-import DeleteButton from '../ui/DeleteButton';
-import React from 'react';
-import Blacklist, { BlacklistItem } from '../../../shared/settings/Blacklist';
+import "./BlacklistForm.scss";
+import AddButton from "../ui/AddButton";
+import DeleteButton from "../ui/DeleteButton";
+import React from "react";
+import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
 interface Props {
   value: Blacklist;
@@ -18,45 +18,56 @@ class BlacklistForm extends React.Component<Props> {
   };
 
   render() {
-    return <div className='form-blacklist-form'>
-      {
-        this.props.value.items.map((item, index) => {
+    return (
+      <div className="form-blacklist-form">
+        {this.props.value.items.map((item, index) => {
           if (item.partial) {
             return null;
           }
-          return <div key={index} className='form-blacklist-form-row'>
-            <input data-index={index} type='text' name='url'
-              className='column-url' value={item.pattern}
-              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)} />
-    </div>;
+          return (
+            <div key={index} className="form-blacklist-form-row">
+              <input
+                data-index={index}
+                type="text"
+                name="url"
+                className="column-url"
+                value={item.pattern}
+                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)}
+        />
+      </div>
+    );
   }
 
   bindValue(e: any) {
     const name = e.target.name;
-    const index = e.target.getAttribute('data-index');
+    const index = e.target.getAttribute("data-index");
     const items = this.props.value.items;
 
-    if (name === 'url') {
+    if (name === "url") {
       items[index] = new BlacklistItem(e.target.value, false, []);
-    } else if (name === 'add') {
-      items.push(new BlacklistItem('', false, []));
-    } else if (name === 'delete') {
+    } else if (name === "add") {
+      items.push(new BlacklistItem("", false, []));
+    } else if (name === "delete") {
       items.splice(index, 1);
     }
 
     this.props.onChange(new Blacklist(items));
-    if (name === 'delete') {
+    if (name === "delete") {
       this.props.onBlur();
     }
   }
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index dc74de3..b9af0df 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,8 +1,8 @@
-import './KeymapsForm.scss';
-import React from 'react';
-import Input from '../ui/Input';
-import keymaps from '../../keymaps';
-import { FormKeymaps } from '../../../shared/SettingData';
+import "./KeymapsForm.scss";
+import React from "react";
+import Input from "../ui/Input";
+import keymaps from "../../keymaps";
+import { FormKeymaps } from "../../../shared/SettingData";
 
 interface Props {
   value: FormKeymaps;
@@ -19,25 +19,31 @@ class KeymapsForm extends React.Component<Props> {
 
   render() {
     const values = this.props.value.toJSON();
-    return <div className='form-keymaps-form'>
-      {
-        keymaps.fields.map((group, index) => {
-          return <div key={index} className='form-keymaps-form-field-group'>
-            {
-              group.map(([name, label]) => {
-                const value = values[name] || '';
-                return <Input
-                  type='text' id={name} name={name} key={name}
-                  label={label} value={value}
-                  onValueChange={this.bindValue.bind(this)}
-                  onBlur={this.props.onBlur}
-                />;
-              })
-            }
-          </div>;
-        })
-      }
-    </div>;
+    return (
+      <div className="form-keymaps-form">
+        {keymaps.fields.map((group, index) => {
+          return (
+            <div key={index} className="form-keymaps-form-field-group">
+              {group.map(([name, label]) => {
+                const value = values[name] || "";
+                return (
+                  <Input
+                    type="text"
+                    id={name}
+                    name={name}
+                    key={name}
+                    label={label}
+                    value={value}
+                    onValueChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
   bindValue(name: string, value: string) {
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 1807e28..95beee8 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -1,8 +1,8 @@
-import './PartialBlacklistForm.scss';
-import AddButton from '../ui/AddButton';
-import DeleteButton from '../ui/DeleteButton';
-import React from 'react';
-import Blacklist, { BlacklistItem } from '../../../shared/settings/Blacklist';
+import "./PartialBlacklistForm.scss";
+import AddButton from "../ui/AddButton";
+import DeleteButton from "../ui/DeleteButton";
+import React from "react";
+import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
 interface Props {
   value: Blacklist;
@@ -18,59 +18,77 @@ class PartialBlacklistForm extends React.Component<Props> {
   };
 
   render() {
-    return <div className='form-partial-blacklist-form'>
-      <div className='form-partial-blacklist-form-header'>
-        <div className='column-url'>URL</div>
-        <div className='column-keys'>Keys</div>
-      </div>
-      {
-        this.props.value.items.map((item, index) => {
+    return (
+      <div className="form-partial-blacklist-form">
+        <div className="form-partial-blacklist-form-header">
+          <div className="column-url">URL</div>
+          <div className="column-keys">Keys</div>
+        </div>
+        {this.props.value.items.map((item, index) => {
           if (!item.partial) {
             return null;
           }
-          return <div key={index} className='form-partial-blacklist-form-row'>
-            <input data-index={index} type='text' name='url'
-              className='column-url' value={item.pattern}
-              onChange={this.bindValue.bind(this)}
-              onBlur={this.props.onBlur}
-            />
-            <input data-index={index} type='text' name='keys'
-              className='column-keys' value={item.keys.join(',')}
-              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)} />
-    </div>;
+          return (
+            <div key={index} className="form-partial-blacklist-form-row">
+              <input
+                data-index={index}
+                type="text"
+                name="url"
+                className="column-url"
+                value={item.pattern}
+                onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
+              />
+              <input
+                data-index={index}
+                type="text"
+                name="keys"
+                className="column-keys"
+                value={item.keys.join(",")}
+                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)}
+        />
+      </div>
+    );
   }
 
   bindValue(e: any) {
     const name = e.target.name;
-    const index = e.target.getAttribute('data-index');
+    const index = e.target.getAttribute("data-index");
     const items = this.props.value.items;
 
-    if (name === 'url') {
+    if (name === "url") {
       const current = items[index];
       items[index] = new BlacklistItem(e.target.value, true, current.keys);
-    } else if (name === 'keys') {
+    } else if (name === "keys") {
       const current = items[index];
       items[index] = new BlacklistItem(
-        current.pattern, true, e.target.value.split(','));
-    } else if (name === 'add') {
-      items.push(new BlacklistItem('', true, []));
-    } else if (name === 'delete') {
+        current.pattern,
+        true,
+        e.target.value.split(",")
+      );
+    } else if (name === "add") {
+      items.push(new BlacklistItem("", true, []));
+    } else if (name === "delete") {
       items.splice(index, 1);
     }
 
     this.props.onChange(new Blacklist(items));
-    if (name === 'delete') {
+    if (name === "delete") {
       this.props.onBlur();
     }
   }
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
index e648971..aebd9b1 100644
--- a/src/settings/components/form/PropertiesForm.tsx
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -1,9 +1,9 @@
-import './PropertiesForm.scss';
-import React from 'react';
+import "./PropertiesForm.scss";
+import React from "react";
 
 interface Props {
-  types: {[key: string]: string};
-  value: {[key: string]: any};
+  types: { [key: string]: string };
+  value: { [key: string]: any };
   onChange: (value: any) => void;
   onBlur: () => void;
 }
@@ -20,18 +20,18 @@ class PropertiesForm extends React.Component<Props> {
     const types = this.props.types;
     const values = this.props.value;
 
-    return <div className='form-properties-form'>
-      {
-        Object.keys(types).map((name) => {
+    return (
+      <div className="form-properties-form">
+        {Object.keys(types).map((name) => {
           const type = types[name];
-          let inputType = '';
+          let inputType = "";
           let onChange = this.bindValue.bind(this);
-          if (type === 'string') {
-            inputType = 'text';
-          } else if (type === 'number') {
-            inputType = 'number';
-          } else if (type === 'boolean') {
-            inputType = 'checkbox';
+          if (type === "string") {
+            inputType = "text";
+          } else if (type === "number") {
+            inputType = "number";
+          } else if (type === "boolean") {
+            inputType = "checkbox";
 
             // Settings are saved onBlur, but checkbox does not fire it
             onChange = (e) => {
@@ -41,29 +41,33 @@ class PropertiesForm extends React.Component<Props> {
           } else {
             return null;
           }
-          return <div key={name} className='form-properties-form-row'>
-            <label>
-              <span className='column-name'>{name}</span>
-              <input type={inputType} name={name}
-                className='column-input'
-                value={values[name] ? values[name] : ''}
-                onChange={onChange}
-                onBlur={this.props.onBlur}
-                checked={values[name]}
-              />
-            </label>
-          </div>;
-        })
-      }
-    </div>;
+          return (
+            <div key={name} className="form-properties-form-row">
+              <label>
+                <span className="column-name">{name}</span>
+                <input
+                  type={inputType}
+                  name={name}
+                  className="column-input"
+                  value={values[name] ? values[name] : ""}
+                  onChange={onChange}
+                  onBlur={this.props.onBlur}
+                  checked={values[name]}
+                />
+              </label>
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
   bindValue(e: React.ChangeEvent<HTMLInputElement>) {
     const name = e.target.name;
     const next = { ...this.props.value };
-    if (e.target.type.toLowerCase() === 'checkbox') {
+    if (e.target.type.toLowerCase() === "checkbox") {
       next[name] = e.target.checked;
-    } else if (e.target.type.toLowerCase() === 'number') {
+    } else if (e.target.type.toLowerCase() === "number") {
       next[name] = Number(e.target.value);
     } else {
       next[name] = e.target.value;
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index 5dc786b..a4d923d 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -1,8 +1,8 @@
-import './SearchForm.scss';
-import React from 'react';
-import AddButton from '../ui/AddButton';
-import DeleteButton from '../ui/DeleteButton';
-import { FormSearch } from '../../../shared/SettingData';
+import "./SearchForm.scss";
+import React from "react";
+import AddButton from "../ui/AddButton";
+import DeleteButton from "../ui/DeleteButton";
+import { FormSearch } from "../../../shared/SettingData";
 
 interface Props {
   value: FormSearch;
@@ -12,68 +12,88 @@ interface Props {
 
 class SearchForm extends React.Component<Props> {
   public static defaultProps: Props = {
-    value: FormSearch.fromJSON({ default: '', engines: []}),
+    value: FormSearch.fromJSON({ default: "", engines: [] }),
     onChange: () => {},
     onBlur: () => {},
   };
 
   render() {
     const value = this.props.value.toJSON();
-    return <div className='form-search-form'>
-      <div className='form-search-form-header'>
-        <div className='column-name'>Name</div>
-        <div className='column-url'>URL</div>
-        <div className='column-option'>Default</div>
-      </div>
-      {
-        value.engines.map((engine, index) => {
-          return <div key={index} className='form-search-form-row'>
-            <input data-index={index} type='text' name='name'
-              className='column-name' value={engine[0]}
-              onChange={this.bindValue.bind(this)}
-              onBlur={this.props.onBlur}
-            />
-            <input data-index={index} type='text' name='url'
-              placeholder='http://example.com/?q={}'
-              className='column-url' value={engine[1]}
-              onChange={this.bindValue.bind(this)}
-              onBlur={this.props.onBlur}
-            />
-            <div className='column-option'>
-              <input data-index={index} type='radio' name='default'
-                checked={value.default === engine[0]}
-                onChange={this.bindValue.bind(this)} />
-              <DeleteButton data-index={index} name='delete'
-                onClick={this.bindValue.bind(this)} />
+    return (
+      <div className="form-search-form">
+        <div className="form-search-form-header">
+          <div className="column-name">Name</div>
+          <div className="column-url">URL</div>
+          <div className="column-option">Default</div>
+        </div>
+        {value.engines.map((engine, index) => {
+          return (
+            <div key={index} className="form-search-form-row">
+              <input
+                data-index={index}
+                type="text"
+                name="name"
+                className="column-name"
+                value={engine[0]}
+                onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
+              />
+              <input
+                data-index={index}
+                type="text"
+                name="url"
+                placeholder="http://example.com/?q={}"
+                className="column-url"
+                value={engine[1]}
+                onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
+              />
+              <div className="column-option">
+                <input
+                  data-index={index}
+                  type="radio"
+                  name="default"
+                  checked={value.default === engine[0]}
+                  onChange={this.bindValue.bind(this)}
+                />
+                <DeleteButton
+                  data-index={index}
+                  name="delete"
+                  onClick={this.bindValue.bind(this)}
+                />
+              </div>
             </div>
-          </div>;
-        })
-      }
-      <AddButton name='add' style={{ float: 'right' }}
-        onClick={this.bindValue.bind(this)} />
-    </div>;
+          );
+        })}
+        <AddButton
+          name="add"
+          style={{ float: "right" }}
+          onClick={this.bindValue.bind(this)}
+        />
+      </div>
+    );
   }
 
   // eslint-disable-next-line max-statements
   bindValue(e: any) {
     const value = this.props.value.toJSON();
     const name = e.target.name;
-    const index = Number(e.target.getAttribute('data-index'));
+    const index = Number(e.target.getAttribute("data-index"));
     const next: typeof value = {
       default: value.default,
       engines: value.engines.slice(),
     };
 
-    if (name === 'name') {
+    if (name === "name") {
       next.engines[index][0] = e.target.value;
       next.default = value.engines[index][0];
-    } else if (name === 'url') {
+    } else if (name === "url") {
       next.engines[index][1] = e.target.value;
-    } else if (name === 'default') {
+    } else if (name === "default") {
       next.default = value.engines[index][0];
-    } else if (name === 'add') {
-      next.engines.push(['', '']);
-    } else if (name === 'delete' && value.engines.length > 1) {
+    } else if (name === "add") {
+      next.engines.push(["", ""]);
+    } else if (name === "delete" && value.engines.length > 1) {
       next.engines.splice(index, 1);
       if (value.engines[index][0] === value.default) {
         const nextIndex = Math.min(index, next.engines.length - 1);
@@ -82,7 +102,7 @@ class SearchForm extends React.Component<Props> {
     }
 
     this.props.onChange(FormSearch.fromJSON(next));
-    if (name === 'delete' || name === 'default') {
+    if (name === "delete" || name === "default") {
       this.props.onBlur();
     }
   }
diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
index f4f0326..5793a8f 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -1,32 +1,36 @@
-import './site.scss';
-import React from 'react';
-import { connect } from 'react-redux';
-import Input from './ui/Input';
-import SearchForm from './form/SearchForm';
-import KeymapsForm from './form/KeymapsForm';
-import BlacklistForm from './form/BlacklistForm';
-import PropertiesForm from './form/PropertiesForm';
-import PartialBlacklistForm from './form/PartialBlacklistForm';
-import * as settingActions from '../../settings/actions/setting';
+import "./site.scss";
+import React from "react";
+import { connect } from "react-redux";
+import Input from "./ui/Input";
+import SearchForm from "./form/SearchForm";
+import KeymapsForm from "./form/KeymapsForm";
+import BlacklistForm from "./form/BlacklistForm";
+import PropertiesForm from "./form/PropertiesForm";
+import PartialBlacklistForm from "./form/PartialBlacklistForm";
+import * as settingActions from "../../settings/actions/setting";
 import SettingData, {
-  FormKeymaps, FormSearch, FormSettings, JSONTextSettings,
-} from '../../shared/SettingData';
-import { State as AppState } from '../reducers/setting';
-import Properties from '../../shared/settings/Properties';
-import Blacklist from '../../shared/settings/Blacklist';
+  FormKeymaps,
+  FormSearch,
+  FormSettings,
+  JSONTextSettings,
+} from "../../shared/SettingData";
+import { State as AppState } from "../reducers/setting";
+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.  ' +
-  'Do you want to continue?';
+  "Some settings in JSON can be lost when migrating.  " +
+  "Do you want to continue?";
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 interface DispatchProps {
-  dispatch: (action: any) => void,
+  dispatch: (action: any) => void;
 }
-type Props = StateProps & DispatchProps & {
-  // FIXME
-  store: any;
-};
+type Props = StateProps &
+  DispatchProps & {
+    // FIXME
+    store: any;
+  };
 
 class SettingsComponent extends React.Component<Props> {
   componentDidMount() {
@@ -34,97 +38,103 @@ class SettingsComponent extends React.Component<Props> {
   }
 
   renderFormFields(form: FormSettings) {
-    return <div>
-      <fieldset>
-        <legend>Keybindings</legend>
-        <KeymapsForm
-          value={form.keymaps}
-          onChange={this.bindKeymapsForm.bind(this)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Search Engines</legend>
-        <SearchForm
-          value={form.search}
-          onChange={this.bindSearchForm.bind(this)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Blacklist</legend>
-        <BlacklistForm
-          value={form.blacklist}
-          onChange={this.bindBlacklistForm.bind(this)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Partial blacklist</legend>
-        <PartialBlacklistForm
-          value={form.blacklist}
-          onChange={this.bindBlacklistForm.bind(this)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Properties</legend>
-        <PropertiesForm
-          types={Properties.types()}
-          value={form.properties.toJSON()}
-          onChange={this.bindPropertiesForm.bind(this)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-    </div>;
+    return (
+      <div>
+        <fieldset>
+          <legend>Keybindings</legend>
+          <KeymapsForm
+            value={form.keymaps}
+            onChange={this.bindKeymapsForm.bind(this)}
+            onBlur={this.save.bind(this)}
+          />
+        </fieldset>
+        <fieldset>
+          <legend>Search Engines</legend>
+          <SearchForm
+            value={form.search}
+            onChange={this.bindSearchForm.bind(this)}
+            onBlur={this.save.bind(this)}
+          />
+        </fieldset>
+        <fieldset>
+          <legend>Blacklist</legend>
+          <BlacklistForm
+            value={form.blacklist}
+            onChange={this.bindBlacklistForm.bind(this)}
+            onBlur={this.save.bind(this)}
+          />
+        </fieldset>
+        <fieldset>
+          <legend>Partial blacklist</legend>
+          <PartialBlacklistForm
+            value={form.blacklist}
+            onChange={this.bindBlacklistForm.bind(this)}
+            onBlur={this.save.bind(this)}
+          />
+        </fieldset>
+        <fieldset>
+          <legend>Properties</legend>
+          <PropertiesForm
+            types={Properties.types()}
+            value={form.properties.toJSON()}
+            onChange={this.bindPropertiesForm.bind(this)}
+            onBlur={this.save.bind(this)}
+          />
+        </fieldset>
+      </div>
+    );
   }
 
   renderJsonFields(json: JSONTextSettings, error: string) {
-    return <div>
-      <Input
-        type='textarea'
-        name='json'
-        label='Plain JSON'
-        spellCheck={false}
-        error={error}
-        onValueChange={this.bindJson.bind(this)}
-        onBlur={this.save.bind(this)}
-        value={json.toJSONText()}
-      />
-    </div>;
+    return (
+      <div>
+        <Input
+          type="textarea"
+          name="json"
+          label="Plain JSON"
+          spellCheck={false}
+          error={error}
+          onValueChange={this.bindJson.bind(this)}
+          onBlur={this.save.bind(this)}
+          value={json.toJSONText()}
+        />
+      </div>
+    );
   }
 
   render() {
     let fields = null;
     const disabled = this.props.error.length > 0;
-    if (this.props.source === 'form') {
+    if (this.props.source === "form") {
       fields = this.renderFormFields(this.props.form!!);
-    } else if (this.props.source === 'json') {
+    } else if (this.props.source === "json") {
       fields = this.renderJsonFields(this.props.json!!, this.props.error);
     }
     return (
       <div>
         <h1>Configure Vim-Vixen</h1>
-        <form className='vimvixen-settings-form'>
+        <form className="vimvixen-settings-form">
           <Input
-            type='radio'
-            id='setting-source-form'
-            name='source'
-            label='Use form'
-            checked={this.props.source === 'form'}
-            value='form'
+            type="radio"
+            id="setting-source-form"
+            name="source"
+            label="Use form"
+            checked={this.props.source === "form"}
+            value="form"
             onValueChange={this.bindSource.bind(this)}
-            disabled={disabled} />
+            disabled={disabled}
+          />
 
           <Input
-            type='radio'
-            name='source'
-            label='Use plain JSON'
-            checked={this.props.source === 'json'}
-            value='json'
+            type="radio"
+            name="source"
+            label="Use plain JSON"
+            checked={this.props.source === "json"}
+            value="json"
             onValueChange={this.bindSource.bind(this)}
-            disabled={disabled} />
-          { fields }
+            disabled={disabled}
+          />
+          {fields}
         </form>
       </div>
     );
@@ -142,7 +152,8 @@ class SettingsComponent extends React.Component<Props> {
     const data = new SettingData({
       source: this.props.source,
       form: (this.props.form as FormSettings).buildWithSearch(
-        FormSearch.fromJSON(value)),
+        FormSearch.fromJSON(value)
+      ),
     });
     this.props.dispatch(settingActions.set(data));
   }
@@ -159,7 +170,8 @@ class SettingsComponent extends React.Component<Props> {
     const data = new SettingData({
       source: this.props.source,
       form: (this.props.form as FormSettings).buildWithProperties(
-        Properties.fromJSON(value))
+        Properties.fromJSON(value)
+      ),
     });
     this.props.dispatch(settingActions.set(data));
   }
@@ -174,27 +186,29 @@ class SettingsComponent extends React.Component<Props> {
 
   bindSource(_name: string, value: string) {
     const from = this.props.source;
-    if (from === 'form' && value === 'json') {
-      this.props.dispatch(settingActions.switchToJson(
-        this.props.form as FormSettings));
+    if (from === "form" && value === "json") {
+      this.props.dispatch(
+        settingActions.switchToJson(this.props.form as FormSettings)
+      );
       this.save();
-    } else if (from === 'json' && value === 'form') {
+    } else if (from === "json" && value === "form") {
       const b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
       if (!b) {
         this.forceUpdate();
         return;
       }
       this.props.dispatch(
-        settingActions.switchToForm(this.props.json as JSONTextSettings));
+        settingActions.switchToForm(this.props.json as JSONTextSettings)
+      );
       this.save();
     }
   }
 
   save() {
     const { source, json, form } = this.props.store.getState();
-    this.props.dispatch(settingActions.save(
-      new SettingData({ source, json, form }),
-    ));
+    this.props.dispatch(
+      settingActions.save(new SettingData({ source, json, form }))
+    );
   }
 }
 
diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx
index bb76d08..c15a732 100644
--- a/src/settings/components/ui/AddButton.tsx
+++ b/src/settings/components/ui/AddButton.tsx
@@ -1,13 +1,18 @@
-import './AddButton.scss';
-import React from 'react';
+import "./AddButton.scss";
+import React from "react";
 
 type Props = React.AllHTMLAttributes<HTMLInputElement>;
 
 class AddButton extends React.Component<Props> {
   render() {
-    return <input
-      className='ui-add-button' type='button' value='&#x271a;'
-      {...this.props} />;
+    return (
+      <input
+        className="ui-add-button"
+        type="button"
+        value="&#x271a;"
+        {...this.props}
+      />
+    );
   }
 }
 
diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx
index e666426..df8976e 100644
--- a/src/settings/components/ui/DeleteButton.tsx
+++ b/src/settings/components/ui/DeleteButton.tsx
@@ -1,13 +1,18 @@
-import './DeleteButton.scss';
-import React from 'react';
+import "./DeleteButton.scss";
+import React from "react";
 
 type Props = React.AllHTMLAttributes<HTMLInputElement>;
 
 class DeleteButton extends React.Component<Props> {
   render() {
-    return <input
-      className='ui-delete-button' type='button' value='&#x2716;'
-      {...this.props} />;
+    return (
+      <input
+        className="ui-delete-button"
+        type="button"
+        value="&#x2716;"
+        {...this.props}
+      />
+    );
   }
 }
 
diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx
index 69c14b3..6819ddb 100644
--- a/src/settings/components/ui/Input.tsx
+++ b/src/settings/components/ui/Input.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import './Input.scss';
+import React from "react";
+import "./Input.scss";
 
 interface Props extends React.AllHTMLAttributes<HTMLElement> {
   name: string;
@@ -13,66 +13,75 @@ interface Props extends React.AllHTMLAttributes<HTMLElement> {
 
 class Input extends React.Component<Props> {
   renderText(props: Props) {
-    const inputClassName = props.error ? 'input-error' : '';
+    const inputClassName = props.error ? "input-error" : "";
     const pp = { ...props };
     delete pp.onValueChange;
-    return <div className='settings-ui-input'>
-      <label htmlFor={props.id}>{ props.label }</label>
-      <input
-        type='text' className={inputClassName}
-        onChange={this.bindOnChange.bind(this)}
-        { ...pp } />
-    </div>;
+    return (
+      <div className="settings-ui-input">
+        <label htmlFor={props.id}>{props.label}</label>
+        <input
+          type="text"
+          className={inputClassName}
+          onChange={this.bindOnChange.bind(this)}
+          {...pp}
+        />
+      </div>
+    );
   }
 
   renderRadio(props: Props) {
-    const inputClassName = props.error ? 'input-error' : '';
+    const inputClassName = props.error ? "input-error" : "";
     const pp = { ...props };
     delete pp.onValueChange;
-    return <div className='settings-ui-input'>
-      <label>
-        <input
-          type='radio' className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          { ...pp } />
-        { props.label }
-      </label>
-    </div>;
+    return (
+      <div className="settings-ui-input">
+        <label>
+          <input
+            type="radio"
+            className={inputClassName}
+            onChange={this.bindOnChange.bind(this)}
+            {...pp}
+          />
+          {props.label}
+        </label>
+      </div>
+    );
   }
 
   renderTextArea(props: Props) {
-    const inputClassName = props.error ? 'input-error' : '';
+    const inputClassName = props.error ? "input-error" : "";
     const pp = { ...props };
     delete pp.onValueChange;
-    return <div className='settings-ui-input'>
-      <label
-        htmlFor={props.id}
-      >{ props.label }</label>
-      <textarea
-        className={inputClassName}
-        onChange={this.bindOnChange.bind(this)}
-        { ...pp } />
-      <p className='settings-ui-input-error'>{ this.props.error }</p>
-    </div>;
+    return (
+      <div className="settings-ui-input">
+        <label htmlFor={props.id}>{props.label}</label>
+        <textarea
+          className={inputClassName}
+          onChange={this.bindOnChange.bind(this)}
+          {...pp}
+        />
+        <p className="settings-ui-input-error">{this.props.error}</p>
+      </div>
+    );
   }
 
   render() {
     const { type } = this.props;
 
     switch (this.props.type) {
-    case 'text':
-      return this.renderText(this.props);
-    case 'radio':
-      return this.renderRadio(this.props);
-    case 'textarea':
-      return this.renderTextArea(this.props);
-    default:
-      console.warn(`Unsupported input type ${type}`);
+      case "text":
+        return this.renderText(this.props);
+      case "radio":
+        return this.renderRadio(this.props);
+      case "textarea":
+        return this.renderTextArea(this.props);
+      default:
+        console.warn(`Unsupported input type ${type}`);
     }
     return null;
   }
 
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) {
+  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
     if (this.props.onValueChange) {
       this.props.onValueChange(e.target.name, e.target.value);
     }