Use pure redux on console

jh-changes
Shin'ya Ueoka 6 years ago
parent 4fa93663d7
commit 85b4bd5b07
  1. 30
      src/console/actions/console.js
  2. 61
      src/console/components/console.js
  3. 8
      src/console/index.js
  4. 25
      test/console/actions/console.test.js

@ -1,3 +1,4 @@
import messages from 'shared/messages';
import actions from 'console/actions'; import actions from 'console/actions';
const hide = () => { const hide = () => {
@ -34,11 +35,30 @@ const showInfo = (text) => {
}; };
const hideCommand = () => { const hideCommand = () => {
window.top.postMessage(JSON.stringify({
type: messages.CONSOLE_UNFOCUS,
}), '*');
return { return {
type: actions.CONSOLE_HIDE_COMMAND, type: actions.CONSOLE_HIDE_COMMAND,
}; };
}; };
const enterCommand = async(text) => {
await browser.runtime.sendMessage({
type: messages.CONSOLE_ENTER_COMMAND,
text,
});
return hideCommand(text);
};
const enterFind = (text) => {
window.top.postMessage(JSON.stringify({
type: messages.CONSOLE_ENTER_FIND,
text,
}), '*');
return hideCommand();
};
const setConsoleText = (consoleText) => { const setConsoleText = (consoleText) => {
return { return {
type: actions.CONSOLE_SET_CONSOLE_TEXT, type: actions.CONSOLE_SET_CONSOLE_TEXT,
@ -46,11 +66,15 @@ const setConsoleText = (consoleText) => {
}; };
}; };
const setCompletions = (completionSource, completions) => { const getCompletions = async(text) => {
let completions = await browser.runtime.sendMessage({
type: messages.CONSOLE_QUERY_COMPLETIONS,
text,
});
return { return {
type: actions.CONSOLE_SET_COMPLETIONS, type: actions.CONSOLE_SET_COMPLETIONS,
completionSource,
completions, completions,
completionSource: text,
}; };
}; };
@ -68,5 +92,5 @@ const completionPrev = () => {
export { export {
hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText, hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText,
setCompletions, completionNext, completionPrev enterCommand, enterFind, getCompletions, completionNext, completionPrev
}; };

@ -1,4 +1,3 @@
import messages from 'shared/messages';
import * as consoleActions from 'console/actions/console'; import * as consoleActions from 'console/actions/console';
const inputShownMode = (state) => { const inputShownMode = (state) => {
@ -26,15 +25,22 @@ export default class ConsoleComponent {
onBlur() { onBlur() {
let state = this.store.getState(); let state = this.store.getState();
if (state.mode === 'command') { if (state.mode === 'command' || state.mode === 'find') {
this.hideCommand(); return this.store.dispatch(consoleActions.hideCommand());
} }
} }
doEnter(e) { doEnter(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
return this.onEntered(e.target.value);
let state = this.store.getState();
let value = e.target.value;
if (state.mode === 'command') {
return this.store.dispatch(consoleActions.enterCommand(value));
} else if (state.mode === 'find') {
return this.store.dispatch(consoleActions.enterFind(value));
}
} }
selectNext(e) { selectNext(e) {
@ -51,11 +57,11 @@ export default class ConsoleComponent {
onKeyDown(e) { onKeyDown(e) {
if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
return this.hideCommand(); this.store.dispatch(consoleActions.hideCommand());
} }
switch (e.keyCode) { switch (e.keyCode) {
case KeyboardEvent.DOM_VK_ESCAPE: case KeyboardEvent.DOM_VK_ESCAPE:
return this.hideCommand(); return this.store.dispatch(consoleActions.hideCommand());
case KeyboardEvent.DOM_VK_RETURN: case KeyboardEvent.DOM_VK_RETURN:
return this.doEnter(e); return this.doEnter(e);
case KeyboardEvent.DOM_VK_TAB: case KeyboardEvent.DOM_VK_TAB:
@ -69,7 +75,7 @@ export default class ConsoleComponent {
break; break;
case KeyboardEvent.DOM_VK_OPEN_BRACKET: case KeyboardEvent.DOM_VK_OPEN_BRACKET:
if (e.ctrlKey) { if (e.ctrlKey) {
return this.hideCommand(); return this.store.dispatch(consoleActions.hideCommand());
} }
break; break;
case KeyboardEvent.DOM_VK_M: case KeyboardEvent.DOM_VK_M:
@ -90,32 +96,10 @@ export default class ConsoleComponent {
} }
} }
onEntered(value) { onInput(e) {
let state = this.store.getState(); let text = e.target.value;
if (state.mode === 'command') { this.store.dispatch(consoleActions.setConsoleText(text));
browser.runtime.sendMessage({ this.store.dispatch(consoleActions.getCompletions(text));
type: messages.CONSOLE_ENTER_COMMAND,
text: value,
});
this.hideCommand();
} else if (state.mode === 'find') {
this.hideCommand();
window.top.postMessage(JSON.stringify({
type: messages.CONSOLE_ENTER_FIND,
text: value,
}), '*');
}
}
async onInput(e) {
this.store.dispatch(consoleActions.setConsoleText(e.target.value));
let source = e.target.value;
let completions = await browser.runtime.sendMessage({
type: messages.CONSOLE_QUERY_COMPLETIONS,
text: source,
});
this.store.dispatch(consoleActions.setCompletions(source, completions));
} }
onInputShown(state) { onInputShown(state) {
@ -126,17 +110,12 @@ export default class ConsoleComponent {
window.focus(); window.focus();
if (state.mode === 'command') { if (state.mode === 'command') {
this.onInput({ target: input }); let text = state.consoleText;
input.value = text;
this.store.dispatch(consoleActions.getCompletions(text));
} }
} }
hideCommand() {
this.store.dispatch(consoleActions.hideCommand());
window.top.postMessage(JSON.stringify({
type: messages.CONSOLE_UNFOCUS,
}), '*');
}
update() { update() {
let state = this.store.getState(); let state = this.store.getState();

@ -3,10 +3,14 @@ import messages from 'shared/messages';
import CompletionComponent from 'console/components/completion'; import CompletionComponent from 'console/components/completion';
import ConsoleComponent from 'console/components/console'; import ConsoleComponent from 'console/components/console';
import reducers from 'console/reducers'; import reducers from 'console/reducers';
import { createStore } from 'shared/store'; import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import * as consoleActions from 'console/actions/console'; import * as consoleActions from 'console/actions/console';
const store = createStore(reducers); const store = createStore(
reducers,
applyMiddleware(promise),
);
window.addEventListener('load', () => { window.addEventListener('load', () => {
let wrapper = document.querySelector('#vimvixen-console-completion'); let wrapper = document.querySelector('#vimvixen-console-completion');

@ -23,14 +23,6 @@ describe("console actions", () => {
}); });
}); });
describe("showInfo", () => {
it('create CONSOLE_SHOW_INFO action', () => {
let action = consoleActions.showInfo('an info');
expect(action.type).to.equal(actions.CONSOLE_SHOW_INFO);
expect(action.text).to.equal('an info');
});
});
describe("showError", () => { describe("showError", () => {
it('create CONSOLE_SHOW_ERROR action', () => { it('create CONSOLE_SHOW_ERROR action', () => {
let action = consoleActions.showError('an error'); let action = consoleActions.showError('an error');
@ -39,6 +31,14 @@ describe("console actions", () => {
}); });
}); });
describe("showInfo", () => {
it('create CONSOLE_SHOW_INFO action', () => {
let action = consoleActions.showInfo('an info');
expect(action.type).to.equal(actions.CONSOLE_SHOW_INFO);
expect(action.text).to.equal('an info');
});
});
describe("hideCommand", () => { describe("hideCommand", () => {
it('create CONSOLE_HIDE_COMMAND action', () => { it('create CONSOLE_HIDE_COMMAND action', () => {
let action = consoleActions.hideCommand(); let action = consoleActions.hideCommand();
@ -54,15 +54,6 @@ describe("console actions", () => {
}); });
}); });
describe("setCompletions", () => {
it('create CONSOLE_SET_COMPLETIONS action', () => {
let action = consoleActions.setCompletions('query', [1, 2, 3]);
expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS);
expect(action.completionSource).to.deep.equal('query');
expect(action.completions).to.deep.equal([1, 2, 3]);
});
});
describe("completionPrev", () => { describe("completionPrev", () => {
it('create CONSOLE_COMPLETION_PREV action', () => { it('create CONSOLE_COMPLETION_PREV action', () => {
let action = consoleActions.completionPrev(); let action = consoleActions.completionPrev();