abstract out MsgClient

2 files changed, 43 insertions, 37 deletions

diff --git a/src/App.js b/src/App.js
index f067250..e98e3d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-/* global chrome */
 import React from 'react';
 import PropTypes from 'prop-types';
 import 'typeface-roboto';
@@ -20,7 +19,7 @@ import AddCircleIcon from '@material-ui/icons/AddCircle';
 import IconButton from '@material-ui/core/IconButton';
 import Logo from './Logo';
 import * as gapi from './gapi';
-import { msgType, Msg } from './msg';
+import { msgType, Msg, MsgClient } from './msg';
 import { Pattern, PatternEntry } from './pattern';
 import PieChart from './Chart';
 import PatternTable from './PatternTable';
@@ -81,22 +80,11 @@ class Dashboard extends React.Component {
 
     constructor(props) {
         super(props);
-        let port = chrome.runtime.connect({name: 'main'});
-        const getCallBack = rcb => this.requestCallback;
-        port.onMessage.addListener(function(msg) {
-            console.log(msg);
-            let rcb = getCallBack(msg.type);
-            let cb = rcb.inFlight[msg.id];
-            console.assert(cb !== undefined);
-            rcb.ids.push(msg.id);
-            cb(msg);
-        });
-        this.port = port;
-        this.requestCallback = {inFlight: {}, ids: [], maxId: 0};
-        this.sendMsg({ type: msgType.getPatterns }).then(msg => {
+        this.msgClient = new MsgClient('main');
+        this.msgClient.sendMsg({ type: msgType.getPatterns }).then(msg => {
             this.setState({ patterns: msg.data.map(p => PatternEntry.revive(p)) });
         });
-        this.sendMsg({ type: msgType.getCalendars }).then(msg => {
+        this.msgClient.sendMsg({ type: msgType.getCalendars }).then(msg => {
             this.setState({ calendars: msg.data });
         });
     }
@@ -105,7 +93,7 @@ class Dashboard extends React.Component {
         let patterns = this.state.patterns;
         patterns[idx][field] = value;
         this.setState({ patterns });
-        this.sendMsg({ type: msgType.updatePatterns, data: patterns });
+        this.msgClient.sendMsg({ type: msgType.updatePatterns, data: patterns });
     };
 
     removePattern = idx => {
@@ -114,7 +102,7 @@ class Dashboard extends React.Component {
         for (let i = 0; i < patterns.length; i++)
             patterns[i].idx = i;
         this.setState({ patterns });
-        this.sendMsg({ type: msgType.updatePatterns, data: patterns });
+        this.msgClient.sendMsg({ type: msgType.updatePatterns, data: patterns });
     };
 
     newPattern = () => {
@@ -122,36 +110,21 @@ class Dashboard extends React.Component {
         for (let i = 1; i < patterns.length; i++)
             patterns[i].idx = i;
         this.setState({ patterns });
-        this.sendMsg({ type: msgType.updatePatterns, data: patterns });
+        this.msgClient.sendMsg({ type: msgType.updatePatterns, data: patterns });
     };
 
     loadPatterns = patterns => {
         this.setState({ patterns });
-        this.sendMsg({ type: msgType.updatePatterns, data: patterns });
+        this.msgClient.sendMsg({ type: msgType.updatePatterns, data: patterns });
     };
 
     loadCalendars = calendars => {
         this.setState({ calendars });
-        this.sendMsg({ type: msgType.updateCalendars, data: calendars });
+        this.msgClient.sendMsg({ type: msgType.updateCalendars, data: calendars });
     };
 
-    sendMsg = ({ type, data }) => {
-        let rcb = this.requestCallback;
-        let cb;
-        let pm = new Promise(resolve => { cb = resolve; });
-        let id;
-        if (rcb.ids.length > 0) {
-            id = rcb.ids.pop();
-        } else {
-            id = rcb.maxId++;
-        }
-        rcb.inFlight[id] = cb;
-        this.port.postMessage((new Msg(id, type, data)).deflate());
-        return pm;
-    }
-
     getCalEvents = (id, start, end) => {
-        return this.sendMsg({ type: msgType.getCalEvents, data: { id,
+        return this.msgClient.sendMsg({ type: msgType.getCalEvents, data: { id,
                     start: start.getTime(),
                     end: end.getTime() } })
             .then(({ data }) => data.map(e => {
diff --git a/src/msg.js b/src/msg.js
index c0aaf11..b6221ec 100644
--- a/src/msg.js
+++ b/src/msg.js
@@ -1,3 +1,4 @@
+/* global chrome */
 const _updatePatterns = "updatePatterns";
 const _getPatterns = "getPatterns";
 const _updateCalendars = "updateCalendars";
@@ -48,3 +49,35 @@ export class Msg {
     }
     static inflate = obj => new Msg(obj.id, parseMsgType(obj.type), obj.data);
 }
+
+export class MsgClient {
+    constructor(channelName) {
+        let port = chrome.runtime.connect({name: channelName});
+        const getCallBack = rcb => this.requestCallback;
+        port.onMessage.addListener(function(msg) {
+            console.log(msg);
+            let rcb = getCallBack(msg.type);
+            let cb = rcb.inFlight[msg.id];
+            console.assert(cb !== undefined);
+            rcb.ids.push(msg.id);
+            cb(msg);
+        });
+        this.port = port;
+        this.requestCallback = {inFlight: {}, ids: [], maxId: 0};
+    }
+
+    sendMsg = ({ type, data }) => {
+        let rcb = this.requestCallback;
+        let cb;
+        let pm = new Promise(resolve => { cb = resolve; });
+        let id;
+        if (rcb.ids.length > 0) {
+            id = rcb.ids.pop();
+        } else {
+            id = rcb.maxId++;
+        }
+        rcb.inFlight[id] = cb;
+        this.port.postMessage((new Msg(id, type, data)).deflate());
+        return pm;
+    }
+}