move event source to top level

this way, activities are always logged while the app is open, and the
activity log survives local navigations

app/javascript/mastodon/actions/activity_log.js

@@ -0,0 +1,11 @@
+export const ACTIVITY_LOG_RESET ='ACTIVITY_LOG_RESET';
+export const ACTIVITY_LOG_ADD = 'ACTIVITY_LOG_ADD';
+
+export const resetActivityLog = () => ({
+  type: ACTIVITY_LOG_RESET,
+});
+
+export const addActivityLog = value => ({
+  type: ACTIVITY_LOG_ADD,
+  value,
+});

app/javascript/mastodon/containers/mastodon.js

@@ -13,6 +13,7 @@ import { connectUserStream } from 'mastodon/actions/streaming';
 import ErrorBoundary from 'mastodon/components/error_boundary';
 import initialState, { title as siteTitle } from 'mastodon/initial_state';
 import { getLocale } from 'mastodon/locales';
+import { addActivityLog } from 'mastodon/actions/activity_log';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
@@ -61,6 +62,14 @@ export default class Mastodon extends React.PureComponent {
   componentDidMount() {
     if (this.identity.signedIn) {
       this.disconnect = store.dispatch(connectUserStream());
+
+      this.eventSource = new EventSource('/api/v1/activity_log');
+      this.eventSource.onmessage = (event) => {
+        const parsed = JSON.parse(event.data);
+        if (parsed.type !== 'keep-alive') {
+          store.dispatch(addActivityLog(parsed));
+        }
+      };
     }
   }
 
@@ -68,6 +77,7 @@ export default class Mastodon extends React.PureComponent {
     if (this.disconnect) {
       this.disconnect();
       this.disconnect = null;
+      this.eventSource.close();
     }
   }
 

app/javascript/mastodon/features/activity_log/index.js

@@ -1,4 +1,6 @@
-import React, { useEffect, useReducer, useRef } from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import Column from 'mastodon/components/column';
@@ -8,34 +10,31 @@ import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 import ActivityPubVisualization from 'activitypub-visualization';
 
-export default function ActivityLog({ multiColumn }) {
 
-  const [logs, dispatch] = useReducer((state, [type, data]) => {
-    switch (type) {
-    case 'add-log-event':
-      return [...state, data];
-    case 'reset-logs':
-      return [];
-    default:
-      return state;
-    }
-  }, []);
+const mapStateToProps = (state) => {
+  return {
+    logs: state.getIn(['activity_log', 'logs']),
+  };
+};
 
-  const columnElement = useRef(null);
+export default @connect(mapStateToProps)
+class ActivityLog extends ImmutablePureComponent {
 
-  useEffect(() => {
-    const eventSource = new EventSource('/api/v1/activity_log');
-    eventSource.onmessage = (event) => {
-      const parsed = JSON.parse(event.data);
-      if (parsed.type !== 'keep-alive') {
-        dispatch(['add-log-event', parsed]);
-      }
+  static propTypes = {
+    multiColumn: PropTypes.bool,
   };
 
-    return function() {
-      eventSource.close();
-    };
-  }, []);
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
+  setRef = c => {
+    this.column = c;
+  }
+
+  render() {
+
+    const { logs, multiColumn } = this.props;
 
     const darkMode = !(document.body && document.body.classList.contains('theme-mastodon-light'));
 
@@ -45,11 +44,11 @@ export default function ActivityLog({ multiColumn }) {
     };
 
     return (
-    <Column bindToDocument={!multiColumn} ref={columnElement} label='Activity Log'>
+      <Column bindToDocument={!multiColumn} ref={this.setRef} label='Activity Log'>
         <ColumnHeader
           icon='comments'
           title='Activity Log'
-        onClick={() => { columnElement.current.scrollTop() }}
+          onClick={this.handleHeaderClick}
           multiColumn={multiColumn}
         />
 
@@ -57,7 +56,7 @@ export default function ActivityLog({ multiColumn }) {
           <p>
             <FormattedMessage
               id='dismissable_banner.activity_log_information'
-            defaultMessage='Open Mastodon in another tab and interact with another instance (for example, follow an account on another instance). The resulting Activities will be shown here. You can find more information on my {blog}.'
+              defaultMessage='When you interact with another instance (for example, follow an account on another instance), the resulting Activities will be shown here. You can find more information on my {blog}.'
               values={{
                 blog: <a href='//seb.jambor.dev/' style={{ color: darkMode ? '#8c8dff' : '#3a3bff', textDecoration: 'none' }}>blog</a>,
               }}
@@ -66,7 +65,7 @@ export default function ActivityLog({ multiColumn }) {
           <p style={{ paddingTop: '5px' }}>
             <FormattedMessage
               id='dismissable_banner.activity_log_clear'
-            defaultMessage='Note: Activities will only be logged while this view is open. When you navigate elsewhere, the log will be cleared.'
+              defaultMessage='Note: Activities will only be logged while Mastodon is open. When you navigate elsewhere or reload the page, the log will be cleared.'
             />
           </p>
         </DismissableBanner>
@@ -79,8 +78,6 @@ export default function ActivityLog({ multiColumn }) {
 
       </Column>
     );
-}
+  }
 
-ActivityLog.propTypes = {
-  multiColumn: PropTypes.bool,
-};
+}

app/javascript/mastodon/reducers/activity_log.js

@@ -0,0 +1,17 @@
+import { Map as ImmutableMap } from 'immutable';
+import { ACTIVITY_LOG_ADD, ACTIVITY_LOG_RESET } from '../actions/activity_log';
+
+const initialState = ImmutableMap({
+  logs: [],
+});
+
+export default function activity_log(state = initialState, action) {
+  switch (action.type) {
+  case ACTIVITY_LOG_ADD:
+    return state.set('logs', [...state.get('logs'), action.value]);
+  case ACTIVITY_LOG_RESET:
+    return state.set('logs', []);
+  default:
+    return state;
+  }
+}

app/javascript/mastodon/reducers/index.js

@@ -9,6 +9,7 @@ import user_lists from './user_lists';
 import domain_lists from './domain_lists';
 import accounts from './accounts';
 import accounts_counters from './accounts_counters';
+import activity_log from './activity_log';
 import statuses from './statuses';
 import relationships from './relationships';
 import settings from './settings';
@@ -44,6 +45,7 @@ import followed_tags from './followed_tags';
 
 const reducers = {
   announcements,
+  activity_log,
   dropdown_menu,
   timelines,
   meta,