setting as redux

jh-changes
Shin'ya Ueoka 7 years ago
parent 709fa95aa3
commit 61806a4e7f
  1. 5
      src/actions/index.js
  2. 27
      src/actions/setting.js
  3. 31
      src/components/setting.js
  4. 29
      src/pages/settings.js
  5. 17
      src/reducers/setting.js
  6. 22
      test/reducers/setting.test.js

@ -13,5 +13,8 @@ export default {
// Completion // Completion
COMPLETION_SET_ITEMS: 'completion.set.items', COMPLETION_SET_ITEMS: 'completion.set.items',
COMPLETION_SELECT_NEXT: 'completions.select.next', 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',
}; };

@ -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 };

@ -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;
}
}

@ -1,22 +1,15 @@
import './settings.scss'; 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', () => { const settingStore = store.createStore(settingReducer);
let form = document.getElementById('vimvixen-settings-form'); let settingComponent = null;
form.addEventListener('submit', (e) => {
e.preventDefault(); settingStore.subscribe(() => {
browser.storage.local.set({ settingComponent.update();
settings: { });
json: e.target.elements['plain-json'].value
}
}).then(() => {
return browser.runtime.sendMessage({
type: messages.SETTINGS_RELOAD
});
});
});
browser.storage.local.get('settings').then((value) => { document.addEventListener('DOMContentLoaded', () => {
form.elements['plain-json'].value = value.settings.json; settingComponent = new SettingComponent(document.body, settingStore);
}, console.error);
}); });

@ -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;
}
}

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