Use official redux on content

src/content/actions/addon.js

@@ -1,15 +1,19 @@
+import messages from 'shared/messages';
 import actions from 'content/actions';
 
-const enable = () => {
+const enable = () => setEnabled(true);
-  return { type: actions.ADDON_ENABLE };
+
+const disable = () => setEnabled(false);
+
+const setEnabled = async(enabled) => {
+  await browser.runtime.sendMessage({
+    type: messages.ADDON_ENABLED_RESPONSE,
+    enabled,
+  });
+  return {
+    type: actions.ADDON_SET_ENABLED,
+    enabled,
+  };
 };
 
-const disable = () => {
+export { enable, disable, setEnabled };
-  return { type: actions.ADDON_DISABLE };
-};
-
-const toggleEnabled = () => {
-  return { type: actions.ADDON_TOGGLE_ENABLED };
-};
-
-export { enable, disable, toggleEnabled };

src/content/actions/index.js

@@ -1,8 +1,6 @@
 export default {
   // Enable/disable
-  ADDON_ENABLE: 'addon.enable',
+  ADDON_SET_ENABLED: 'addon.set.enabled',
-  ADDON_DISABLE: 'addon.disable',
-  ADDON_TOGGLE_ENABLED: 'addon.toggle.enabled',
 
   // Settings
   SETTING_SET: 'setting.set',

src/content/actions/operation.js

@@ -9,7 +9,7 @@ import * as addonActions from './addon';
 import * as properties from 'shared/settings/properties';
 
 // eslint-disable-next-line complexity, max-lines-per-function
-const exec = (operation, repeat, settings) => {
+const exec = (operation, repeat, settings, addonEnabled) => {
   let smoothscroll = settings.properties.smoothscroll ||
     properties.defaults.smoothscroll;
   switch (operation.type) {
@@ -18,7 +18,7 @@ const exec = (operation, repeat, settings) => {
   case operations.ADDON_DISABLE:
     return addonActions.disable();
   case operations.ADDON_TOGGLE_ENABLED:
-    return addonActions.toggleEnabled();
+    return addonActions.setEnabled(!addonEnabled);
   case operations.FIND_NEXT:
     window.top.postMessage(JSON.stringify({
       type: messages.FIND_NEXT,

src/content/actions/setting.js

@@ -34,4 +34,4 @@ const load = async() => {
   return set(settings);
 };
 
-export { load };
+export { set, load };

src/content/components/common/index.js

@@ -4,7 +4,6 @@ import FollowComponent from './follow';
 import * as settingActions from 'content/actions/setting';
 import messages from 'shared/messages';
 import * as addonActions from '../../actions/addon';
-import * as re from 'shared/utils/re';
 import * as blacklists from 'shared/blacklists';
 
 export default class Common {
@@ -24,44 +23,26 @@ export default class Common {
     this.reloadSettings();
 
     messages.onMessage(this.onMessage.bind(this));
-    store.subscribe(() => this.update());
   }
 
   onMessage(message) {
+    let { enabled } = this.store.getState().addon;
     switch (message.type) {
     case messages.SETTINGS_CHANGED:
       return this.reloadSettings();
     case messages.ADDON_TOGGLE_ENABLED:
-      return this.store.dispatch(addonActions.toggleEnabled());
+      this.store.dispatch(addonActions.setEnabled(!enabled));
-    }
-  }
-
-  update() {
-    let enabled = this.store.getState().addon.enabled;
-    if (enabled !== this.prevEnabled) {
-      this.prevEnabled = enabled;
-
-      browser.runtime.sendMessage({
-        type: messages.ADDON_ENABLED_RESPONSE,
-        enabled,
-      });
-    }
-
-    let blacklist = this.store.getState().setting.blacklist;
-    let str = JSON.stringify(blacklist)
-    if (blacklist !== str) {
-      this.prevBlacklist = str;
-      if (blacklists.includes(blacklist, this.win.location)) {
-        this.store.dispatch(addonActions.disable());
-      } else {
-        this.store.dispatch(addonActions.enable());
-      }
     }
   }
 
   reloadSettings() {
     try {
-      this.store.dispatch(settingActions.load());
+      this.store.dispatch(settingActions.load()).then(({ value: settings }) => {
+        let enabled = !blacklists.includes(
+          settings.blacklist, this.win.location.href
+        );
+        this.store.dispatch(addonActions.setEnabled(enabled));
+      });
     } catch (e) {
       // Sometime sendMessage fails when background script is not ready.
       console.warn(e);

src/content/components/common/keymapper.js

@@ -48,7 +48,9 @@ export default class KeymapperComponent {
       return true;
     }
     let operation = keymaps.get(matched[0]);
-    let act = operationActions.exec(operation, key.repeat, state.setting);
+    let act = operationActions.exec(
+      operation, key.repeat, state.setting, state.addon.enabled
+    );
     this.store.dispatch(act);
     this.store.dispatch(inputActions.clearKeys());
     return true;

src/content/index.js

@@ -10,7 +10,6 @@ const store = createStore(
   applyMiddleware(promise),
 );
 
-
 if (window.self === window.top) {
   new TopContentComponent(window, store); // eslint-disable-line no-new
 } else {

src/content/reducers/addon.js

@@ -6,15 +6,9 @@ const defaultState = {
 
 export default function reducer(state = defaultState, action = {}) {
   switch (action.type) {
-  case actions.ADDON_ENABLE:
+  case actions.ADDON_SET_ENABLED:
     return { ...state,
-      enabled: true, };
+      enabled: action.enabled, };
-  case actions.ADDON_DISABLE:
-    return { ...state,
-      enabled: false, };
-  case actions.ADDON_TOGGLE_ENABLED:
-    return { ...state,
-      enabled: !state.enabled, };
   default:
     return state;
   }

src/shared/blacklists.js

@@ -1,13 +1,13 @@
 import * as re from 'shared/utils/re';
 
 const includes = (blacklist, url) => {
-  let u = new URL(url)
+  let u = new URL(url);
   return blacklist.some((item) => {
     if (!item.includes('/')) {
       return re.fromWildcard(item).test(u.hostname);
     }
     return re.fromWildcard(item).test(u.hostname + u.pathname);
   });
-}
+};
 
 export { includes };

test/content/actions/addon.test.js

@@ -1,25 +0,0 @@
-import actions from 'content/actions';
-import * as addonActions from 'content/actions/addon';
-
-describe("addon actions", () => {
-  describe("enable", () => {
-    it('create ADDON_ENABLE action', () => {
-      let action = addonActions.enable();
-      expect(action.type).to.equal(actions.ADDON_ENABLE);
-    });
-  });
-
-  describe("disable", () => {
-    it('create ADDON_DISABLE action', () => {
-      let action = addonActions.disable();
-      expect(action.type).to.equal(actions.ADDON_DISABLE);
-    });
-  });
-
-  describe("toggle", () => {
-    it('create ADDON_TOGGLE_ENABLED action', () => {
-      let action = addonActions.toggleEnabled();
-      expect(action.type).to.equal(actions.ADDON_TOGGLE_ENABLED);
-    });
-  });
-});

test/content/reducers/addon.test.js

@@ -7,31 +7,11 @@ describe("addon reducer", () => {
     expect(state).to.have.property('enabled', true);
   });
 
-  it('return next state for ADDON_ENABLE', () => {
+  it('return next state for ADDON_SET_ENABLED', () => {
-    let action = { type: actions.ADDON_ENABLE};
+    let action = { type: actions.ADDON_SET_ENABLED, enabled: true };
     let prev = { enabled: false };
     let state = addonReducer(prev, action);
 
     expect(state.enabled).is.equal(true);
   });
-
-  it('return next state for ADDON_DISABLE', () => {
-    let action = { type: actions.ADDON_DISABLE};
-    let prev = { enabled: true };
-    let state = addonReducer(prev, action);
-
-    expect(state.enabled).is.equal(false);
-  });
-
-  it('return next state for ADDON_TOGGLE_ENABLED', () => {
-    let action = { type: actions.ADDON_TOGGLE_ENABLED };
-    let state = { enabled: false };
-
-    state = addonReducer(state, action);
-    expect(state.enabled).is.equal(true);
-
-    state = addonReducer(state, action);
-    expect(state.enabled).is.equal(false);
-  });
-
 });