From 61806a4e7ff01e8b5fdfdcef0308a2c41fc98778 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 1 Oct 2017 10:59:47 +0900 Subject: [PATCH] setting as redux --- src/actions/index.js | 5 ++++- src/actions/setting.js | 27 +++++++++++++++++++++++++++ src/components/setting.js | 31 +++++++++++++++++++++++++++++++ src/pages/settings.js | 29 +++++++++++------------------ src/reducers/setting.js | 17 +++++++++++++++++ test/reducers/setting.test.js | 22 ++++++++++++++++++++++ 6 files changed, 112 insertions(+), 19 deletions(-) create mode 100644 src/actions/setting.js create mode 100644 src/components/setting.js create mode 100644 src/reducers/setting.js create mode 100644 test/reducers/setting.test.js diff --git a/src/actions/index.js b/src/actions/index.js index 2aa28fa..63c36d2 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -13,5 +13,8 @@ export default { // Completion COMPLETION_SET_ITEMS: 'completion.set.items', COMPLETION_SELECT_NEXT: 'completions.select.next', - COMPLETION_SELECT_PREV: 'completions.select.prev' + COMPLETION_SELECT_PREV: 'completions.select.prev', + + // Settings + SETTING_SET_SETTINGS: 'setting.set.settings', }; diff --git a/src/actions/setting.js b/src/actions/setting.js new file mode 100644 index 0000000..d8e889e --- /dev/null +++ b/src/actions/setting.js @@ -0,0 +1,27 @@ +import actions from '../actions'; +import messages from '../content/messages'; + +const load = () => { + return browser.storage.local.get('settings').then((value) => { + return set(value.settings); + }, console.error); +}; + +const save = (settings) => { + return browser.storage.local.set({ + settings + }).then(() => { + return browser.runtime.sendMessage({ + type: messages.SETTINGS_RELOAD + }); + }); +}; + +const set = (settings) => { + return { + type: actions.SETTING_SET_SETTINGS, + settings, + }; +}; + +export { load, save, set }; diff --git a/src/components/setting.js b/src/components/setting.js new file mode 100644 index 0000000..afbd56c --- /dev/null +++ b/src/components/setting.js @@ -0,0 +1,31 @@ +import * as settingActions from '../actions/setting'; + +export default class SettingComponent { + constructor(wrapper, store) { + this.wrapper = wrapper; + this.store = store; + + let doc = wrapper.ownerDocument; + let form = doc.getElementById('vimvixen-settings-form'); + form.addEventListener('submit', this.onSubmit.bind(this)); + + store.dispatch(settingActions.load()); + } + + onSubmit(e) { + let settings = { + json: e.target.elements['plain-json'].value, + }; + this.store.dispatch(settingActions.save(settings)); + e.preventDefault(); + } + + update() { + let { settings } = this.store.getState(); + + let doc = this.wrapper.ownerDocument; + let form = doc.getElementById('vimvixen-settings-form'); + let plainJsonInput = form.elements['plain-json']; + plainJsonInput.value = settings.json; + } +} diff --git a/src/pages/settings.js b/src/pages/settings.js index 6e00ed3..9bad967 100644 --- a/src/pages/settings.js +++ b/src/pages/settings.js @@ -1,22 +1,15 @@ import './settings.scss'; -import messages from '../content/messages'; +import SettingComponent from '../components/setting'; +import settingReducer from '../reducers/setting'; +import * as store from '../store'; -document.addEventListener('DOMContentLoaded', () => { - let form = document.getElementById('vimvixen-settings-form'); - form.addEventListener('submit', (e) => { - e.preventDefault(); - browser.storage.local.set({ - settings: { - json: e.target.elements['plain-json'].value - } - }).then(() => { - return browser.runtime.sendMessage({ - type: messages.SETTINGS_RELOAD - }); - }); - }); +const settingStore = store.createStore(settingReducer); +let settingComponent = null; + +settingStore.subscribe(() => { + settingComponent.update(); +}); - browser.storage.local.get('settings').then((value) => { - form.elements['plain-json'].value = value.settings.json; - }, console.error); +document.addEventListener('DOMContentLoaded', () => { + settingComponent = new SettingComponent(document.body, settingStore); }); diff --git a/src/reducers/setting.js b/src/reducers/setting.js new file mode 100644 index 0000000..735d4fb --- /dev/null +++ b/src/reducers/setting.js @@ -0,0 +1,17 @@ +import actions from '../actions'; + +const defaultState = { + settings: {} +}; + +export default function reducer(state = defaultState, action = {}) { + switch (action.type) { + case actions.SETTING_SET_SETTINGS: + return Object.assign({}, state, { + settings: action.settings, + }); + default: + return state; + } +} + diff --git a/test/reducers/setting.test.js b/test/reducers/setting.test.js new file mode 100644 index 0000000..7261be6 --- /dev/null +++ b/test/reducers/setting.test.js @@ -0,0 +1,22 @@ +import { expect } from "chai"; +import actions from '../../src/actions'; +import settingReducer from '../../src/reducers/setting'; + +describe("setting reducer", () => { + it('return the initial state', () => { + let state = settingReducer(undefined, {}); + expect(state).to.have.deep.property('settings', {}); + }); + + it('return next state for SETTING_SET_SETTINGS', () => { + let action = { + type: actions.SETTING_SET_SETTINGS, + settings: { value1: 'hello', value2: 'world' }, + }; + let state = settingReducer(undefined, action); + expect(state).to.have.deep.property('settings', { + value1: 'hello', + value2: 'world', + }); + }); +});