Merge pull request #19 from ueokande/content-and-background-redux-completely

Refactor: full redux on content and background

7 files changed, 56 insertions, 36 deletions

diff --git a/src/components/background-input.js b/src/components/background-input.js
index 4735d5a..bd6ecf9 100644
--- a/src/components/background-input.js
+++ b/src/components/background-input.js
@@ -1,5 +1,5 @@
-import * as inputActions from '../actions/input';
-import * as operationActions from '../actions/operation';
+import * as inputActions from 'actions/input';
+import * as operationActions from 'actions/operation';
 
 export default class BackgroundInputComponent {
   constructor(store) {
diff --git a/src/components/background.js b/src/components/background.js
index 0585a04..487e3af 100644
--- a/src/components/background.js
+++ b/src/components/background.js
@@ -1,9 +1,8 @@
-import messages from '../content/messages';
-import * as commandActions from '../actions/command';
-import * as consoleActions from '../actions/console';
-import * as inputActions from '../actions/input';
-import * as settingsActions from '../actions/setting';
-import * as tabActions from '../actions/tab';
+import messages from 'content/messages';
+import * as inputActions from 'actions/input';
+import * as settingsActions from 'actions/setting';
+import * as tabActions from 'actions/tab';
+import * as commands from 'shared/commands';
 
 export default class BackgroundComponent {
   constructor(store) {
@@ -12,9 +11,12 @@ export default class BackgroundComponent {
 
     browser.runtime.onMessage.addListener((message, sender) => {
       try {
-        this.onMessage(message, sender);
+        return this.onMessage(message, sender);
       } catch (e) {
-        this.store.dispatch(consoleActions.showError(e.message), sender);
+        return browser.tabs.sendMessage(sender.tab.id, {
+          type: messages.CONSOLE_SHOW_ERROR,
+          text: e.message,
+        });
       }
     });
   }
@@ -44,14 +46,18 @@ export default class BackgroundComponent {
       return this.store.dispatch(
         tabActions.openToTab(message.url, sender.tab), sender);
     case messages.CONSOLE_BLURRED:
-      return this.store.dispatch(
-        consoleActions.hide(), sender);
+      return browser.tabs.sendMessage(sender.tab.id, {
+        type: messages.CONSOLE_HIDE,
+      });
     case messages.CONSOLE_ENTERED:
-      return this.store.dispatch(
-        commandActions.exec(message.text, this.settings), sender);
-    case messages.CONSOLE_CHANGEED:
-      return this.store.dispatch(
-        commandActions.complete(message.text, this.settings), sender);
+      return commands.exec(message.text, this.settings).catch((e) => {
+        return browser.tabs.sendMessage(sender.tab.id, {
+          type: messages.CONSOLE_SHOW_ERROR,
+          text: e.message,
+        });
+      });
+    case messages.CONSOLE_QUERY_COMPLETIONS:
+      return commands.complete(message.text, this.settings);
     case messages.SETTINGS_RELOAD:
       this.store.dispatch(settingsActions.load());
     }
diff --git a/src/components/completion.js b/src/components/completion.js
index 489061c..f527a84 100644
--- a/src/components/completion.js
+++ b/src/components/completion.js
@@ -6,15 +6,15 @@ export default class Completion {
   }
 
   update() {
-    let state = this.store.getState();
+    let state = this.store.getState().console;
     if (JSON.stringify(this.prevState) === JSON.stringify(state)) {
       return;
     }
 
     this.wrapper.innerHTML = '';
 
-    for (let i = 0; i < state.groups.length; ++i) {
-      let group = state.groups[i];
+    for (let i = 0; i < state.completions.length; ++i) {
+      let group = state.completions[i];
       let title = this.createCompletionTitle(group.name);
       this.wrapper.append(title);
 
diff --git a/src/components/console.js b/src/components/console.js
index 9580dcf..12341c1 100644
--- a/src/components/console.js
+++ b/src/components/console.js
@@ -1,5 +1,5 @@
-import messages from '../content/messages';
-import * as completionActions from '../actions/completion';
+import messages from 'content/messages';
+import * as consoleActions from 'actions/console';
 
 export default class ConsoleComponent {
   constructor(wrapper, store) {
@@ -36,12 +36,12 @@ export default class ConsoleComponent {
       return browser.runtime.sendMessage({
         type: messages.CONSOLE_ENTERED,
         text: e.target.value
-      });
+      }).then(this.onBlur);
     case KeyboardEvent.DOM_VK_TAB:
       if (e.shiftKey) {
-        this.store.dispatch(completionActions.selectPrev());
+        this.store.dispatch(consoleActions.completionPrev());
       } else {
-        this.store.dispatch(completionActions.selectNext());
+        this.store.dispatch(consoleActions.completionNext());
       }
       e.stopPropagation();
       e.preventDefault();
@@ -63,13 +63,15 @@ export default class ConsoleComponent {
 
     this.prevValue = e.target.value;
     return browser.runtime.sendMessage({
-      type: messages.CONSOLE_CHANGEED,
+      type: messages.CONSOLE_QUERY_COMPLETIONS,
       text: e.target.value
+    }).then((completions) => {
+      this.store.dispatch(consoleActions.setCompletions(completions));
     });
   }
 
-  // TODO use store/reducer to update state.  
-  update(state) {
+  update() {
+    let state = this.store.getState().console;
     if (!this.prevState.commandShown && state.commandShown) {
       this.showCommand(state.commandText);
     } else if (!state.commandShown) {
@@ -83,6 +85,18 @@ export default class ConsoleComponent {
       this.hideError();
     }
 
+    if (state.groupSelection >= 0 && state.itemSelection >= 0) {
+      let group = state.completions[state.groupSelection];
+      let item = group.items[state.itemSelection];
+      this.setCommandValue(item.content);
+    } else if (state.completions.length > 0 &&
+      JSON.stringify(this.prevState.completions) ===
+        JSON.stringify(state.completions)) {
+      // Reset input only completion groups not changed (unselected an item in
+      // completion) in order to avoid to override previous input
+      this.setCommandCompletionOrigin();
+    }
+
     this.prevState = state;
   }
 
diff --git a/src/components/content-input.js b/src/components/content-input.js
index 10c785b..38d57fd 100644
--- a/src/components/content-input.js
+++ b/src/components/content-input.js
@@ -1,4 +1,4 @@
-import messages from '../content/messages';
+import messages from 'content/messages';
 
 export default class ContentInputComponent {
   constructor(target) {
diff --git a/src/components/follow.js b/src/components/follow.js
index 4fe4c58..9221759 100644
--- a/src/components/follow.js
+++ b/src/components/follow.js
@@ -1,7 +1,7 @@
-import * as followActions from '../actions/follow';
-import messages from '../content/messages';
-import Hint from '../content/hint';
-import HintKeyProducer from '../content/hint-key-producer';
+import * as followActions from 'actions/follow';
+import messages from 'content/messages';
+import Hint from 'content/hint';
+import HintKeyProducer from 'content/hint-key-producer';
 
 const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';
 
@@ -44,7 +44,7 @@ export default class FollowComponent {
 
   update() {
     let prevState = this.state;
-    this.state = this.store.getState();
+    this.state = this.store.getState().follow;
     if (!prevState.enabled && this.state.enabled) {
       this.create();
     } else if (prevState.enabled && !this.state.enabled) {
diff --git a/src/components/setting.js b/src/components/setting.js
index 1f3b3fe..c2f99b6 100644
--- a/src/components/setting.js
+++ b/src/components/setting.js
@@ -1,5 +1,5 @@
-import * as settingActions from '../actions/setting';
-import { validate } from '../shared/validators/setting';
+import * as settingActions from 'actions/setting';
+import { validate } from 'shared/validators/setting';
 
 export default class SettingComponent {
   constructor(wrapper, store) {