Fix routes to have basic info before rendering channel_view

components/channel_layout/center_channel/center_channel.jsx

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import {Route, Switch, Redirect} from 'react-router-dom';
 import classNames from 'classnames';
 
+import * as UserAgent from 'utils/user_agent.jsx';
 import PermalinkView from 'components/permalink_view';
 import Navbar from 'components/navbar';
 import ChannelIdentifierRouter from 'components/channel_layout/channel_identifier_router';
@@ -28,6 +29,23 @@ export default class CenterChannel extends React.PureComponent {
  };
  }
 
+ componentDidMount() {
+ document.body.classList.add('app__body');
+
+ // IE Detection
+ if (UserAgent.isInternetExplorer() || UserAgent.isEdge()) {
+ document.body.classList.add('browser--ie');
+ }
+ }
+
+ componentWillUnmount() {
+ document.body.classList.remove('app__body');
+
+ if (UserAgent.isInternetExplorer() || UserAgent.isEdge()) {
+ document.body.classList.remove('browser--ie');
+ }
+ }
+
  UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
  if (this.props.location.pathname !== nextProps.location.pathname && nextProps.location.pathname.includes('/pl/')) {
  this.setState({returnTo: this.props.location.pathname});
@@ -65,7 +83,13 @@ export default class CenterChannel extends React.PureComponent {
  />
  <Route
  path={'/:team/:path(channels|messages)/:identifier'}
- component={ChannelIdentifierRouter}
+ render={(props, match, history) => (
+ <ChannelIdentifierRouter
+ match={match}
+ history={history}
+ {...props}
+ />
+ )}
  />
  <Redirect to={lastChannelPath}/>
  </Switch>

components/channel_layout/channel_group_route.jsx

@@ -0,0 +1,125 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {joinChannel} from 'mattermost-redux/actions/channels';
+
+import * as GlobalActions from 'actions/global_actions.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
+import store from 'stores/redux_store.jsx';
+import {Constants} from 'utils/constants.jsx';
+import ChannelView from 'components/channel_view/index';
+import LoadingScreen from 'components/loading_screen.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+const dispatch = store.dispatch;
+const getState = store.getState;
+
+export default class ChannelAndGroupRoute extends React.PureComponent {
+ static propTypes = {
+ byName: PropTypes.bool,
+ byId: PropTypes.bool,
+ asGroup: PropTypes.bool,
+
+ /*
+ * Object from react-router
+ */
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ identifier: PropTypes.string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ basicViewInfo: null,
+ };
+ }
+
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if (nextProps.match.params.identifier !== prevState.identifier) {
+ return {
+ basicViewInfo: null,
+ identifier: nextProps.match.params.identifier,
+ };
+ }
+ return null;
+ }
+
+ componentDidMount() {
+ this.goToChannelOrGroup();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.match.params.identifier !== this.props.match.params.identifier) {
+ this.goToChannelOrGroup();
+ }
+ }
+
+ handleError = (match) => {
+ const {team} = match.params;
+ this.props.history.push(team ? `/${team}/channels/${Constants.DEFAULT_CHANNEL}` : '/');
+ }
+
+ simulateChannelClick(channel) {
+ GlobalActions.emitChannelClickEvent(channel);
+ }
+
+ goToChannelOrGroup = async () => {
+ // console.log(match, history);
+ let basicViewInfo;
+ let basicViewInfoResponse;
+ const {team, identifier} = this.props.match.params;
+ if (this.props.byName) {
+ const channelName = identifier.toLowerCase();
+ basicViewInfo = ChannelStore.getByName(channelName);
+ if (!basicViewInfo) {
+ basicViewInfoResponse = await joinChannel(UserStore.getCurrentId(), TeamStore.getCurrentId(), null, channelName)(dispatch, getState);
+ }
+ } else if (this.props.byId) {
+ const channelId = identifier.toLowerCase();
+ basicViewInfo = ChannelStore.get(channelId);
+ if (!basicViewInfo) {
+ basicViewInfoResponse = await joinChannel(UserStore.getCurrentId(), TeamStore.getCurrentId(), channelId, null)(dispatch, getState);
+ }
+ } else if (this.props.asGroup) {
+ const groupName = identifier.toLowerCase();
+ basicViewInfo = ChannelStore.getByName(groupName);
+ if (!basicViewInfo) {
+ basicViewInfoResponse = await joinChannel(UserStore.getCurrentId(), TeamStore.getCurrentId(), null, groupName)(dispatch, getState);
+ }
+ }
+
+ basicViewInfo = basicViewInfo || basicViewInfoResponse.data.channel;
+
+ if (basicViewInfoResponse && basicViewInfoResponse.error) {
+ this.handleError(this.props.match);
+ return;
+ }
+
+ if (basicViewInfo.type === Constants.DM_CHANNEL) {
+ this.props.history.replace(`/${team}/messages/${Utils.getUserIdFromChannelId(basicViewInfo.name)}`);
+ } else if (this.props.byId) {
+ this.props.history.replace(`/${team}/channels/${basicViewInfo.name}`);
+ }
+
+ this.simulateChannelClick(basicViewInfo);
+
+ this.setState({
+ basicViewInfo,
+ });
+ }
+
+ render() {
+ if (!this.state.basicViewInfo) {
+ return <LoadingScreen/>;
+ }
+ return <ChannelView/>;
+ }
+}