Mastodon: conditionally disable chats

app/soapbox/features/ui/components/tabs_bar.js

@@ -15,6 +15,7 @@ import Icon from '../../../components/icon';
 import ThemeToggle from '../../ui/components/theme_toggle_container';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { isStaff } from 'soapbox/utils/accounts';
+import { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
   post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
@@ -32,6 +33,7 @@ class TabsBar extends React.PureComponent {
     dashboardCount: PropTypes.number,
     notificationCount: PropTypes.number,
     chatsCount: PropTypes.number,
+    features: PropTypes.object.isRequired,
   }
 
   state = {
@@ -52,7 +54,7 @@ class TabsBar extends React.PureComponent {
   }
 
   getNavLinks() {
-    const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount } = this.props;
+    const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount, features } = this.props;
     const links = [];
     if (logo) {
       links.push(
@@ -73,7 +75,7 @@ class TabsBar extends React.PureComponent {
           <span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
         </NavLink>);
     }
-    if (account) {
+    if (features.chats && account) {
       links.push(
         <NavLink key='chats' className='tabs-bar__link tabs-bar__link--chats' to='/chats' data-preview-title-id='column.chats'>
           <IconWithCounter icon='comment' count={chatsCount} />
@@ -155,12 +157,15 @@ const mapStateToProps = state => {
   const me = state.get('me');
   const reportsCount = state.getIn(['admin', 'openReports']).count();
   const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
+  const instance = state.get('instance');
+
   return {
     account: state.getIn(['accounts', me]),
     logo: getSoapboxConfig(state).get('logo'),
     notificationCount: state.getIn(['notifications', 'unread']),
     chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
     dashboardCount: reportsCount + approvalCount,
+    features: getFeatures(instance),
   };
 };
 

app/soapbox/features/ui/index.js

@@ -42,6 +42,7 @@ import Icon from 'soapbox/components/icon';
 import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import ProfileHoverCard from 'soapbox/components/profile_hover_card';
 import { getAccessToken } from 'soapbox/utils/auth';
+import { getFeatures } from 'soapbox/utils/features';
 
 import {
   Status,
@@ -115,6 +116,7 @@ const messages = defineMessages({
 const mapStateToProps = state => {
   const me = state.get('me');
   const account = state.getIn(['accounts', me]);
+  const instance = state.get('instance');
 
   return {
     dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
@@ -122,6 +124,7 @@ const mapStateToProps = state => {
     streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
     me,
     account,
+    features: getFeatures(instance),
   };
 };
 
@@ -158,6 +161,7 @@ class SwitchingColumnsArea extends React.PureComponent {
     children: PropTypes.node,
     location: PropTypes.object,
     onLayoutChange: PropTypes.func.isRequired,
+    features: PropTypes.object.isRequired,
   };
 
   state = {
@@ -186,7 +190,7 @@ class SwitchingColumnsArea extends React.PureComponent {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, features } = this.props;
 
     return (
       <Switch>
@@ -236,8 +240,10 @@ class SwitchingColumnsArea extends React.PureComponent {
 
         <WrappedRoute path='/search' publicRoute page={DefaultPage} component={Search} content={children} />
 
+        {features.chats && <>
           <WrappedRoute path='/chats' exact page={DefaultPage} component={ChatIndex} content={children} />
           <WrappedRoute path='/chats/:chatId' page={DefaultPage} component={ChatRoom} content={children} />
+        </>}
 
         <WrappedRoute path='/follow_requests' page={DefaultPage} component={FollowRequests} content={children} />
         <WrappedRoute path='/blocks' page={DefaultPage} component={Blocks} content={children} />
@@ -302,6 +308,7 @@ class UI extends React.PureComponent {
     me: SoapboxPropTypes.me,
     streamingUrl: PropTypes.string,
     account: PropTypes.object,
+    features: PropTypes.object.isRequired,
   };
 
   state = {
@@ -411,7 +418,7 @@ class UI extends React.PureComponent {
   });
 
   componentDidMount() {
-    const { account } = this.props;
+    const { account, features } = this.props;
     if (!account) return;
 
     window.addEventListener('resize', this.handleResize, { passive: true });
@@ -432,7 +439,10 @@ class UI extends React.PureComponent {
     if (account) {
       this.props.dispatch(expandHomeTimeline());
       this.props.dispatch(expandNotifications());
+
+      if (features.chats) {
         this.props.dispatch(fetchChats());
+      }
 
       if (isStaff(account)) {
         this.props.dispatch(fetchReports({ state: 'open' }));
@@ -577,7 +587,7 @@ class UI extends React.PureComponent {
   }
 
   render() {
-    const { streamingUrl } = this.props;
+    const { streamingUrl, features } = this.props;
     const { draggingOver, mobile } = this.state;
     const { intl, children, location, dropdownMenuIsOpen, me } = this.props;
 
@@ -624,7 +634,7 @@ class UI extends React.PureComponent {
       <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
         <div className={classnames} ref={this.setRef} style={style}>
           <TabsBar />
-          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
+          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} features={features}>
             {children}
           </SwitchingColumnsArea>
 
@@ -635,7 +645,7 @@ class UI extends React.PureComponent {
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
           {me && <SidebarMenu />}
-          {me && !mobile && (
+          {me && features.chats && !mobile && (
             <BundleContainer fetchComponent={ChatPanes}>
               {Component => <Component />}
             </BundleContainer>

app/soapbox/utils/features.js

@@ -16,6 +16,7 @@ export const getFeatures = createSelector([
     focalPoint: v.software === 'Mastodon' && gte(v.compatVersion, '2.3.0'),
     importMutes: v.software === 'Pleroma' && gte(v.version, '2.2.0'),
     emailList: f.includes('email_list'),
+    chats: v.software === 'Pleroma' && gte(v.version, '2.1.0'),
   };
 });