Let emoji_store.jsx use Client APIs to resolve URLs (#5302)

4 files changed, 141 insertions, 130 deletions

diff --git a/webapp/client/browser_web_client.jsx b/webapp/client/browser_web_client.jsx
new file mode 100644
index 000000000..f5d7f6c80
--- /dev/null
+++ b/webapp/client/browser_web_client.jsx
@@ -0,0 +1,133 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Client from './client.jsx';
+
+import TeamStore from 'stores/team_store.jsx';
+import BrowserStore from 'stores/browser_store.jsx';
+
+import * as GlobalActions from 'actions/global_actions.jsx';
+import {reconnect} from 'actions/websocket_actions.jsx';
+
+import request from 'superagent';
+
+const HTTP_UNAUTHORIZED = 401;
+
+const mfaPaths = [
+    '/mfa/setup',
+    '/mfa/confirm'
+];
+
+class WebClientClass extends Client {
+    constructor() {
+        super();
+        this.enableLogErrorsToConsole(true);
+        this.hasInternetConnection = true;
+        TeamStore.addChangeListener(this.onTeamStoreChanged.bind(this));
+    }
+
+    onTeamStoreChanged() {
+        this.setTeamId(TeamStore.getCurrentId());
+    }
+
+    track(category, action, label, property, value) {
+        if (global.window && global.window.analytics) {
+            global.window.analytics.track(action, {category, label, property, value});
+        }
+    }
+
+    trackPage() {
+        if (global.window && global.window.analytics) {
+            global.window.analytics.page();
+        }
+    }
+
+    handleError(err, res) {
+        if (res && res.body && res.body.id === 'api.context.mfa_required.app_error') {
+            if (mfaPaths.indexOf(window.location.pathname) === -1) {
+                window.location.reload();
+            }
+            return;
+        }
+
+        if (err.status === HTTP_UNAUTHORIZED && res.req.url !== this.getUsersRoute() + '/login') {
+            GlobalActions.emitUserLoggedOutEvent('/login');
+        }
+
+        if (err.status == null) {
+            this.hasInternetConnection = false;
+        }
+    }
+
+    handleSuccess = (res) => { // eslint-disable-line no-unused-vars
+        if (res && !this.hasInternetConnection) {
+            reconnect();
+            this.hasInternetConnection = true;
+        }
+    }
+
+    // not sure why but super.login doesn't work if using an () => arrow functions.
+    // I think this might be a webpack issue.
+    webLogin(loginId, password, token, success, error) {
+        this.login(
+            loginId,
+            password,
+            token,
+            (data) => {
+                this.track('api', 'api_users_login_success', '', 'login_id', loginId);
+                BrowserStore.signalLogin();
+
+                if (success) {
+                    success(data);
+                }
+            },
+            (err) => {
+                this.track('api', 'api_users_login_fail', '', 'login_id', loginId);
+                if (error) {
+                    error(err);
+                }
+            }
+        );
+    }
+
+    webLoginByLdap(loginId, password, token, success, error) {
+        this.loginByLdap(
+            loginId,
+            password,
+            token,
+            (data) => {
+                this.track('api', 'api_users_login_success', '', 'login_id', loginId);
+                BrowserStore.signalLogin();
+
+                if (success) {
+                    success(data);
+                }
+            },
+            (err) => {
+                this.track('api', 'api_users_login_fail', '', 'login_id', loginId);
+                if (error) {
+                    error(err);
+                }
+            }
+        );
+    }
+
+    getYoutubeVideoInfo(googleKey, videoId, success, error) {
+        request.get('https://www.googleapis.com/youtube/v3/videos').
+        query({part: 'snippet', id: videoId, key: googleKey}).
+        end((err, res) => {
+            if (err) {
+                return error(err);
+            }
+
+            if (!res.body) {
+                console.error('Missing response body for getYoutubeVideoInfo'); // eslint-disable-line no-console
+            }
+
+            return success(res.body);
+        });
+    }
+}
+
+var WebClient = new WebClientClass();
+export default WebClient;
diff --git a/webapp/client/web_client.jsx b/webapp/client/web_client.jsx
index f5d7f6c80..925b53522 100644
--- a/webapp/client/web_client.jsx
+++ b/webapp/client/web_client.jsx
@@ -1,133 +1,10 @@
-// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import Client from './client.jsx';
-
-import TeamStore from 'stores/team_store.jsx';
-import BrowserStore from 'stores/browser_store.jsx';
-
-import * as GlobalActions from 'actions/global_actions.jsx';
-import {reconnect} from 'actions/websocket_actions.jsx';
-
-import request from 'superagent';
-
-const HTTP_UNAUTHORIZED = 401;
-
-const mfaPaths = [
-    '/mfa/setup',
-    '/mfa/confirm'
-];
-
-class WebClientClass extends Client {
-    constructor() {
-        super();
-        this.enableLogErrorsToConsole(true);
-        this.hasInternetConnection = true;
-        TeamStore.addChangeListener(this.onTeamStoreChanged.bind(this));
-    }
-
-    onTeamStoreChanged() {
-        this.setTeamId(TeamStore.getCurrentId());
-    }
-
-    track(category, action, label, property, value) {
-        if (global.window && global.window.analytics) {
-            global.window.analytics.track(action, {category, label, property, value});
-        }
-    }
-
-    trackPage() {
-        if (global.window && global.window.analytics) {
-            global.window.analytics.page();
-        }
-    }
-
-    handleError(err, res) {
-        if (res && res.body && res.body.id === 'api.context.mfa_required.app_error') {
-            if (mfaPaths.indexOf(window.location.pathname) === -1) {
-                window.location.reload();
-            }
-            return;
-        }
+// This file is only for testing on non-browser environments.
+// See browser_web_client.jsx for the actual implementation for browsers.
 
-        if (err.status === HTTP_UNAUTHORIZED && res.req.url !== this.getUsersRoute() + '/login') {
-            GlobalActions.emitUserLoggedOutEvent('/login');
-        }
-
-        if (err.status == null) {
-            this.hasInternetConnection = false;
-        }
-    }
-
-    handleSuccess = (res) => { // eslint-disable-line no-unused-vars
-        if (res && !this.hasInternetConnection) {
-            reconnect();
-            this.hasInternetConnection = true;
-        }
-    }
-
-    // not sure why but super.login doesn't work if using an () => arrow functions.
-    // I think this might be a webpack issue.
-    webLogin(loginId, password, token, success, error) {
-        this.login(
-            loginId,
-            password,
-            token,
-            (data) => {
-                this.track('api', 'api_users_login_success', '', 'login_id', loginId);
-                BrowserStore.signalLogin();
-
-                if (success) {
-                    success(data);
-                }
-            },
-            (err) => {
-                this.track('api', 'api_users_login_fail', '', 'login_id', loginId);
-                if (error) {
-                    error(err);
-                }
-            }
-        );
-    }
-
-    webLoginByLdap(loginId, password, token, success, error) {
-        this.loginByLdap(
-            loginId,
-            password,
-            token,
-            (data) => {
-                this.track('api', 'api_users_login_success', '', 'login_id', loginId);
-                BrowserStore.signalLogin();
-
-                if (success) {
-                    success(data);
-                }
-            },
-            (err) => {
-                this.track('api', 'api_users_login_fail', '', 'login_id', loginId);
-                if (error) {
-                    error(err);
-                }
-            }
-        );
-    }
-
-    getYoutubeVideoInfo(googleKey, videoId, success, error) {
-        request.get('https://www.googleapis.com/youtube/v3/videos').
-        query({part: 'snippet', id: videoId, key: googleKey}).
-        end((err, res) => {
-            if (err) {
-                return error(err);
-            }
-
-            if (!res.body) {
-                console.error('Missing response body for getYoutubeVideoInfo'); // eslint-disable-line no-console
-            }
-
-            return success(res.body);
-        });
-    }
-}
+import Client from './client.jsx';
 
-var WebClient = new WebClientClass();
+var WebClient = new Client();
 export default WebClient;
diff --git a/webapp/package.json b/webapp/package.json
index 672e15957..b667a187c 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -1,5 +1,6 @@
 {
   "name": "mattermost-webapp",
+  "browser": {"./client/web_client.jsx": "./client/browser_web_client.jsx"},
   "version": "0.0.1",
   "private": true,
   "dependencies": {
diff --git a/webapp/stores/emoji_store.jsx b/webapp/stores/emoji_store.jsx
index a178ff6ae..212583ea8 100644
--- a/webapp/stores/emoji_store.jsx
+++ b/webapp/stores/emoji_store.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import Client from '../client/web_client.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import Constants from 'utils/constants.jsx';
 import EventEmitter from 'events';
@@ -148,8 +149,7 @@ class EmojiStore extends EventEmitter {
 
     getEmojiImageUrl(emoji) {
         if (emoji.id) {
-            // must match Client.getCustomEmojiImageUrl
-            return `/api/v3/emoji/${emoji.id}`;
+            return Client.getCustomEmojiImageUrl(emoji.id);
         }
 
         const filename = emoji.filename || emoji.aliases[0];