Add webapp/utils/url.jsx (#5285)

webapp/utils/utils.jsx got big and that caused a potential circular dependency with webapp/stores/team_store.jsx. This change solves the issue by introducing webapp/utils/url.jsx and moving URL-related functions, which is not likely to depend on actions and stores, from webapp/utils/utils.jsx.
mattermost · Feb 7, 2017 · a2a71fc · a2a71fc
1 parent 4bdbebf
commit a2a71fc
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 63 deletions.
diff --git a/actions/websocket_actions.jsx b/actions/websocket_actions.jsx
@@ -17,6 +17,7 @@ import WebSocketClient from 'client/web_websocket_client.jsx';
 import * as WebrtcActions from './webrtc_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 import {handleNewPost, loadPosts, loadProfilesForPosts} from 'actions/post_actions.jsx';
@@ -36,7 +37,7 @@ export function initialize() {
  return;
  }
 
- let connUrl = Utils.getSiteURL();
+ let connUrl = getSiteURL();
 
  // replace the protocol with a websocket one
  if (connUrl.startsWith('https:')) {

diff --git a/components/change_url_modal.jsx b/components/change_url_modal.jsx
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import Constants from 'utils/constants.jsx';
 import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap';
 import TeamStore from 'stores/team_store.jsx';
-import * as Utils from 'utils/utils.jsx';
+import * as URL from 'utils/url.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -105,7 +105,7 @@ export default class ChangeUrlModal extends React.Component {
  e.preventDefault();
 
  const url = ReactDOM.findDOMNode(this.refs.urlinput).value;
- const cleanedURL = Utils.cleanUpUrlable(url);
+ const cleanedURL = URL.cleanUpUrlable(url);
  if (cleanedURL !== url || url.length < 2 || url.indexOf('__') > -1) {
  this.setState({urlError: this.getURLError(url)});
  return;
@@ -136,7 +136,7 @@ export default class ChangeUrlModal extends React.Component {
  }
 
  const fullTeamUrl = TeamStore.getCurrentTeamUrl();
- const teamURL = Utils.getShortenedTeamURL(TeamStore.getCurrentTeamUrl());
+ const teamURL = URL.getShortenedTeamURL(TeamStore.getCurrentTeamUrl());
  const urlTooltip = (
  <Tooltip id='urlTooltip'>{fullTeamUrl}</Tooltip>
  );

diff --git a/components/channel_header.jsx b/components/channel_header.jsx
@@ -28,6 +28,7 @@ import * as WebrtcActions from 'actions/webrtc_actions.jsx';
 import * as ChannelActions from 'actions/channel_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as ChannelUtils from 'utils/channel_utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import {getFlaggedPosts} from 'actions/post_actions.jsx';
 
@@ -582,7 +583,7 @@ export default class ChannelHeader extends React.Component {
 
  let headerText;
  if (this.state.enableFormatting) {
- headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: Utils.getSiteURL()});
+ headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()});
  } else {
  headerText = channel.header;
  }

diff --git a/components/create_team/components/display_name.jsx b/components/create_team/components/display_name.jsx
@@ -3,8 +3,8 @@
 
 import {track} from 'actions/analytics_actions.jsx';
 
-import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
+import {cleanUpUrlable} from 'utils/url.jsx';
 
 import logoImage from 'images/logo.png';
 
@@ -50,7 +50,7 @@ export default class TeamSignupDisplayNamePage extends React.Component {
 
  this.props.state.wizard = 'team_url';
  this.props.state.team.display_name = displayName;
- this.props.state.team.name = Utils.cleanUpUrlable(displayName);
+ this.props.state.team.name = cleanUpUrlable(displayName);
  this.props.updateParent(this.props.state);
  }
 

diff --git a/components/create_team/components/team_url.jsx b/components/create_team/components/team_url.jsx
@@ -1,11 +1,10 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as Utils from 'utils/utils.jsx';
-
 import {checkIfTeamExists, createTeam} from 'actions/team_actions.jsx';
 import {track} from 'actions/analytics_actions.jsx';
 import Constants from 'utils/constants.jsx';
+import * as URL from 'utils/url.jsx';
 
 import logoImage from 'images/logo.png';
 
@@ -38,7 +37,7 @@ export default class TeamUrl extends React.Component {
  e.preventDefault();
 
  const name = ReactDOM.findDOMNode(this.refs.name).value.trim();
- const cleanedName = Utils.cleanUpUrlable(name);
+ const cleanedName = URL.cleanUpUrlable(name);
  const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g;
 
  if (!name) {
@@ -136,7 +135,7 @@ export default class TeamUrl extends React.Component {
  nameDivClass += ' has-error';
  }
 
- const title = `${Utils.getSiteURL()}/`;
+ const title = `${URL.getSiteURL()}/`;
  const urlTooltip = (
  <Tooltip id='urlTooltip'>{title}</Tooltip>
  );

diff --git a/components/integrations/components/installed_incoming_webhook.jsx b/components/integrations/components/installed_incoming_webhook.jsx
@@ -4,7 +4,7 @@
 import React from 'react';
 
 import ChannelStore from 'stores/channel_store.jsx';
-import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -116,7 +116,7 @@ export default class InstalledIncomingWebhook extends React.Component {
  id='installed_integrations.url'
  defaultMessage='URL: {url}'
  values={{
- url: Utils.getSiteURL() + '/hooks/' + incomingWebhook.id
+ url: getSiteURL() + '/hooks/' + incomingWebhook.id
  }}
  />
  </span>

diff --git a/components/message_wrapper.jsx b/components/message_wrapper.jsx
@@ -3,6 +3,7 @@
 
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import React from 'react';
 
@@ -15,7 +16,7 @@ export default class MessageWrapper extends React.Component {
  render() {
  if (this.props.message) {
  const options = Object.assign({}, this.props.options, {
- siteURL: Utils.getSiteURL()
+ siteURL: getSiteURL()
  });
 
  return (

diff --git a/components/new_channel_flow.jsx b/components/new_channel_flow.jsx
@@ -4,6 +4,7 @@
 import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+import {cleanUpUrlable} from 'utils/url.jsx';
 
 import NewChannelModal from './new_channel_modal.jsx';
 import ChangeURLModal from './change_url_modal.jsx';
@@ -165,7 +166,7 @@ class NewChannelFlow extends React.Component {
  channelHeader: data.header
  });
  if (!this.state.nameModified) {
- this.setState({channelName: Utils.cleanUpUrlable(data.displayName.trim())});
+ this.setState({channelName: cleanUpUrlable(data.displayName.trim())});
  }
  }
  render() {

diff --git a/components/post_view/components/post_message_view.jsx b/components/post_view/components/post_message_view.jsx
@@ -8,6 +8,7 @@ import Constants from 'utils/constants.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import {renderSystemMessage} from './system_message_helpers.jsx';
 
@@ -103,7 +104,7 @@ export default class PostMessageView extends React.Component {
 
  const options = Object.assign({}, this.props.options, {
  emojis: this.props.emojis,
- siteURL: Utils.getSiteURL(),
+ siteURL: getSiteURL(),
  mentionKeys: this.props.mentionKeys,
  usernameMap: this.props.usernameMap,
  channelNamesMap: this.props.channelNamesMap,

diff --git a/components/rename_channel_modal.jsx b/components/rename_channel_modal.jsx
@@ -4,6 +4,7 @@
 import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
+import {cleanUpUrlable} from 'utils/url.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 import {updateChannel} from 'actions/channel_actions.jsx';
@@ -145,7 +146,7 @@ export class RenameChannelModal extends React.Component {
  state.nameError = formatMessage(holders.maxLength);
  state.invalid = true;
  } else {
- const cleanedName = Utils.cleanUpUrlable(channel.name);
+ const cleanedName = cleanUpUrlable(channel.name);
  if (cleanedName === channel.name) {
  state.nameError = '';
  } else {

diff --git a/stores/team_store.jsx b/stores/team_store.jsx
@@ -6,6 +6,7 @@ import EventEmitter from 'events';
 import UserStore from 'stores/user_store.jsx';
 
 import Constants from 'utils/constants.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 const ActionTypes = Constants.ActionTypes;
 
 const CHANGE_EVENT = 'change';
@@ -122,10 +123,7 @@ class TeamStoreClass extends EventEmitter {
  const current = this.getCurrent();
 
  if (current) {
- // can't call Utils.getSiteURL here because that introduces a circular dependency
- const origin = window.mm_config.SiteURL || window.location.origin;
-
- return origin + '/signup_user_complete/?id=' + current.invite_id;
+ return getSiteURL() + '/signup_user_complete/?id=' + current.invite_id;
  }
 
  return '';
@@ -138,10 +136,7 @@ class TeamStoreClass extends EventEmitter {
  return '';
  }
 
- // can't call Utils.getSiteURL here because that introduces a circular dependency
- const origin = window.mm_config.SiteURL || window.location.origin;
-
- return origin + '/' + team.name;
+ return getSiteURL() + '/' + team.name;
  }
 
  getCurrentStats() {

diff --git a/utils/url.jsx b/utils/url.jsx
@@ -0,0 +1,29 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export function cleanUpUrlable(input) {
+ var cleaned = input.trim().replace(/-/g, ' ').replace(/[^\w\s]/gi, '').toLowerCase().replace(/\s/g, '-');
+ cleaned = cleaned.replace(/-{2,}/, '-');
+ cleaned = cleaned.replace(/^-+/, '');
+ cleaned = cleaned.replace(/-+$/, '');
+ return cleaned;
+}
+
+export function getShortenedTeamURL(teamURL = '') {
+ if (teamURL.length > 35) {
+ return teamURL.substring(0, 10) + '...' + teamURL.substring(teamURL.length - 12, teamURL.length) + '/';
+ }
+ return teamURL + '/';
+}
+
+export function getSiteURL() {
+ if (global.mm_config.SiteURL) {
+ return global.mm_config.SiteURL;
+ }
+
+ if (window.location.origin) {
+ return window.location.origin;
+ }
+
+ return window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+}
diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -27,14 +27,6 @@ export function isEmail(email) {
  return (/^.+@.+$/).test(email);
 }
 
-export function cleanUpUrlable(input) {
- var cleaned = input.trim().replace(/-/g, ' ').replace(/[^\w\s]/gi, '').toLowerCase().replace(/\s/g, '-');
- cleaned = cleaned.replace(/-{2,}/, '-');
- cleaned = cleaned.replace(/^-+/, '');
- cleaned = cleaned.replace(/-+$/, '');
- return cleaned;
-}
-
 export function isMac() {
  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }
@@ -996,17 +988,6 @@ export function fileSizeToString(bytes) {
  return bytes + 'B';
 }
 
-// Converts a filename (like those attached to Post objects) to a url that can be used to retrieve attachments from the server.
-export function getFileUrl(filename) {
- return Client.getFilesRoute() + '/get' + filename;
-}
-
-// Gets the name of a file (including extension) from a given url or file path.
-export function getFileName(path) {
- var split = path.split('/');
- return split[split.length - 1];
-}
-
 // Gets the websocket port to use. Configurable on the server.
 export function getWebsocketPort(protocol) {
  if ((/^wss:/).test(protocol)) { // wss:https://
@@ -1078,13 +1059,6 @@ export function importSlack(file, success, error) {
  Client.importSlack(formData, success, error);
 }
 
-export function getShortenedTeamURL(teamURL = '') {
- if (teamURL.length > 35) {
- return teamURL.substring(0, 10) + '...' + teamURL.substring(teamURL.length - 12, teamURL.length) + '/';
- }
- return teamURL + '/';
-}
-
 export function windowWidth() {
  return $(window).width();
 }
@@ -1274,18 +1248,6 @@ export function isValidPassword(password) {
  return errorMsg;
 }
 
-export function getSiteURL() {
- if (global.mm_config.SiteURL) {
- return global.mm_config.SiteURL;
- }
-
- if (window.location.origin) {
- return window.location.origin;
- }
-
- return window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
-}
-
 export function handleFormattedTextClick(e) {
  const mentionAttribute = e.target.getAttributeNode('data-mention');
  const hashtagAttribute = e.target.getAttributeNode('data-hashtag');