Logic for deep linking to go to the right tab and channel based on domain

src/browser/components/MainPage.jsx

@@ -14,6 +14,8 @@ const HoveringURL = require('./HoveringURL.jsx');
 
 const NewTeamModal = require('./NewTeamModal.jsx');
 
+const Utils = require('../../utils/util.js');
+
 const MainPage = createReactClass({
   propTypes: {
     onUnreadCountChange: PropTypes.func.isRequired,
@@ -25,14 +27,25 @@ const MainPage = createReactClass({
   },
 
   getInitialState() {
+    const deeplinkingUrl = remote.getCurrentWindow().deeplinkingUrl;
+    let key = this.props.initialIndex;
+    if (deeplinkingUrl !== null) {
+      for (var i = 0; i < this.props.teams.length; i++) {
+        if (deeplinkingUrl.includes(this.props.teams[i].url)) {
+          key = i;
+          break;
+        }
+      }
+    }
     return {
-      key: this.props.initialIndex,
+      key,
       unreadCounts: new Array(this.props.teams.length),
       mentionCounts: new Array(this.props.teams.length),
       unreadAtActive: new Array(this.props.teams.length),
       mentionAtActiveCounts: new Array(this.props.teams.length),
       loginQueue: [],
-      targetURL: ''
+      targetURL: '',
+      deeplinkingUrl
     };
   },
   componentDidMount() {
@@ -108,6 +121,20 @@ const MainPage = createReactClass({
     ipcRenderer.on('focus-on-webview', () => {
       this.focusOnWebView();
     });
+
+    ipcRenderer.on('protocol-deeplink', (event, lastUrl) => {
+      const mattermostViews = document.getElementsByClassName('mattermostView mattermostView-with-tab');
+      const lastUrlDomain = Utils.getDomain(lastUrl);
+      for (var i = 0; i < mattermostViews.length; i++) {
+        if (lastUrlDomain === Utils.getDomain(mattermostViews[i].src)) {
+          self.refs[`mattermostView${i}`].handleDeepLink(lastUrl.replace(lastUrlDomain, ''));
+          if (this.state.key !== i) {
+            this.handleSelect(i);
+          }
+          break;
+        }
+      }
+    });
   },
   componentDidUpdate(prevProps, prevState) {
     if (prevState.key !== this.state.key) { // i.e. When tab has been changed
@@ -247,6 +274,13 @@ const MainPage = createReactClass({
       }
       var id = 'mattermostView' + index;
       var isActive = self.state.key === index;
+
+      let teamUrl = team.url;
+      const deeplinkingUrl = this.state.deeplinkingUrl;
+      if (deeplinkingUrl !== null && deeplinkingUrl.includes(teamUrl)) {
+        teamUrl = deeplinkingUrl;
+      }
+
       return (
         <MattermostView
           key={id}
@@ -254,7 +288,8 @@ const MainPage = createReactClass({
           withTab={this.props.teams.length > 1}
           useSpellChecker={this.props.useSpellChecker}
           onSelectSpellCheckerLocale={this.props.onSelectSpellCheckerLocale}
-          team={team}
+          src={teamUrl}
+          name={team.name}
           onTargetURLChange={self.handleTargetURLChange}
           onUnreadCountChange={handleUnreadCountChange}
           onNotificationClick={handleNotificationClick}

src/browser/components/MattermostView.jsx

@@ -15,10 +15,11 @@ const preloadJS = `file://${remote.app.getAppPath()}/browser/webview/mattermost_
 
 const MattermostView = createReactClass({
   propTypes: {
+    name: PropTypes.string,
     id: PropTypes.string,
     onTargetURLChange: PropTypes.func,
     onUnreadCountChange: PropTypes.func,
-    team: PropTypes.object,
+    src: PropTypes.string,
     active: PropTypes.bool,
     withTab: PropTypes.bool,
     useSpellChecker: PropTypes.bool,
@@ -43,18 +44,8 @@ const MattermostView = createReactClass({
     var self = this;
     var webview = findDOMNode(this.refs.webview);
 
-    ipcRenderer.on('protocol-deeplink', (event, lastUrl) => {
-      webview.executeJavaScript(
-        'history.pushState(null, null, "/' +
-        lastUrl.replace(lastUrl.match(/(?:[^/]*\/){3}/), '') + '");'
-      );
-      webview.executeJavaScript(
-        'dispatchEvent(new PopStateEvent("popstate", null));'
-      );
-    });
-
     webview.addEventListener('did-fail-load', (e) => {
-      console.log(self.props.team.name, 'webview did-fail-load', e);
+      console.log(self.props.name, 'webview did-fail-load', e);
       if (e.errorCode === -3) { // An operation was aborted (due to user action).
         return;
       }
@@ -148,7 +139,7 @@ const MattermostView = createReactClass({
     });
 
     webview.addEventListener('console-message', (e) => {
-      const message = `[${this.props.team.name}] ${e.message}`;
+      const message = `[${this.props.name}] ${e.message}`;
       switch (e.level) {
       case 0:
         console.log(message);
@@ -214,6 +205,16 @@ const MattermostView = createReactClass({
     webview.getWebContents().goForward();
   },
 
+  handleDeepLink(relativeUrl) {
+    const webview = findDOMNode(this.refs.webview);
+    webview.executeJavaScript(
+      'history.pushState(null, null, "/' + relativeUrl + '");'
+    );
+    webview.executeJavaScript(
+      'dispatchEvent(new PopStateEvent("popstate", null));'
+    );
+  },
+
   render() {
     const errorView = this.state.errorInfo ? (
       <ErrorView
@@ -233,9 +234,6 @@ const MattermostView = createReactClass({
       classNames.push('mattermostView-hidden');
     }
 
-    const deeplinkingUrl = remote.getCurrentWindow().deeplinkingUrl;
-    const lastUrl = (deeplinkingUrl === null ? this.props.team.url : deeplinkingUrl);
-
     return (
       <div>
         { errorView }
@@ -243,7 +241,7 @@ const MattermostView = createReactClass({
           id={this.props.id}
           className={classNames.join(' ')}
           preload={preloadJS}
-          src={lastUrl}
+          src={this.props.src}
           ref='webview'
         />
       </div>);

src/utils/util.js

@@ -0,0 +1,6 @@
+const REGEXP_DOMAIN = /(?:[^/]*\/){3}/;
+
+export function getDomain(url) {
+  const matched = url.match(REGEXP_DOMAIN);
+  return matched ? matched[0] : null;
+}