From e003e084e5e10764ca38ff26ec97c7a337cbe12b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 7 Apr 2020 20:11:37 -0500
Subject: [PATCH] Move connectUserStream to UI component

---
 app/gabsocial/containers/gabsocial.js | 28 +-------------------------
 app/gabsocial/features/ui/index.js    | 29 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/app/gabsocial/containers/gabsocial.js b/app/gabsocial/containers/gabsocial.js
index f6219840d..3e8066d3e 100644
--- a/app/gabsocial/containers/gabsocial.js
+++ b/app/gabsocial/containers/gabsocial.js
@@ -11,7 +11,6 @@ import UI from '../features/ui';
 import Introduction from '../features/introduction';
 import { fetchCustomEmojis } from '../actions/custom_emojis';
 import { hydrateStore } from '../actions/store';
-import { connectUserStream } from '../actions/streaming';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from '../locales';
 import initialState from '../initial_state';
@@ -39,9 +38,6 @@ const mapStateToProps = (state) => {
 
   return {
     showIntroduction,
-    me,
-    accessToken: state.getIn(['auth', 'user', 'access_token']),
-    streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
   }
 }
 
@@ -52,29 +48,7 @@ class GabSocialMount extends React.PureComponent {
     showIntroduction: PropTypes.bool,
   };
 
-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-
-  componentDidUpdate(prevProps) {
-    const keys = ['accessToken', 'streamingUrl'];
-    const credsSet = keys.every(p => this.props[p]);
-    if (!this.disconnect && credsSet) {
-      this.disconnect = store.dispatch(connectUserStream());
-    }
-  }
-
-  componentWillUnmount () {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
   render () {
-    const { me, streamingUrl } = this.props;
-    if (me == null || !streamingUrl) return null;
-
     // Disabling introduction for launch
     // const { showIntroduction } = this.props;
     //
@@ -85,7 +59,7 @@ class GabSocialMount extends React.PureComponent {
     return (
       <BrowserRouter basename='/web'>
         <ScrollContext>
-          <Route component={UI} />
+          <Route path='/' component={UI} />
         </ScrollContext>
       </BrowserRouter>
     );
diff --git a/app/gabsocial/features/ui/index.js b/app/gabsocial/features/ui/index.js
index 006528c91..ea3410bb4 100644
--- a/app/gabsocial/features/ui/index.js
+++ b/app/gabsocial/features/ui/index.js
@@ -31,6 +31,7 @@ import SearchPage from 'gabsocial/pages/search_page';
 import HomePage from 'gabsocial/pages/home_page';
 import GroupSidebarPanel from '../groups/sidebar_panel';
 import SidebarMenu from '../../components/sidebar_menu';
+import { connectUserStream } from '../../actions/streaming';
 
 import {
   Status,
@@ -87,6 +88,8 @@ const mapStateToProps = state => {
     hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
     dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
     me: state.get('me'),
+    accessToken: state.getIn(['auth', 'user', 'access_token']),
+    streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
   }
 };
 
@@ -353,6 +356,23 @@ class UI extends React.PureComponent {
     }
   }
 
+  connectStreaming = (prevProps) => {
+    const { dispatch } = this.props;
+    const keys = ['accessToken', 'streamingUrl'];
+    const credsSet = keys.every(p => this.props[p]);
+    if (!this.disconnect && credsSet) {
+      this.disconnect = dispatch(connectUserStream());
+    }
+  }
+
+  disconnectStreaming = () => {
+    if (this.disconnect) {
+      this.disconnect();
+      this.disconnect = null;
+    }
+  }
+
+
   componentWillMount () {
     const { me } = this.props;
     window.addEventListener('beforeunload', this.handleBeforeUnload, false);
@@ -387,6 +407,11 @@ class UI extends React.PureComponent {
     this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
       return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
     };
+    this.connectStreaming();
+  }
+
+  componentDidUpdate(prevProps) {
+    this.connectStreaming();
   }
 
   componentWillUnmount () {
@@ -396,6 +421,7 @@ class UI extends React.PureComponent {
     document.removeEventListener('drop', this.handleDrop);
     document.removeEventListener('dragleave', this.handleDragLeave);
     document.removeEventListener('dragend', this.handleDragEnd);
+    this.disconnectStreaming();
   }
 
   setRef = c => {
@@ -502,9 +528,12 @@ class UI extends React.PureComponent {
   }
 
   render () {
+    const { streamingUrl } = this.props;
     const { draggingOver } = this.state;
     const { intl, children, isComposing, location, dropdownMenuIsOpen, me } = this.props;
 
+    if (me == null || !streamingUrl) return null;
+
     const handlers = me ? {
       help: this.handleHotkeyToggleHelp,
       new: this.handleHotkeyNew,