convert to hooks

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
@@ -9,60 +9,54 @@ import ColumnSettings from './components/column_settings';
 
 import ActivityPubVisualization from 'activity-pub-visualization';
 
-export default class ActivityLog extends React.PureComponent {
+export default function ActivityLog({ multiColumn }) {
 
-  state = {
-    logs: dummy_data,
-  };
-
-  static propTypes = {
-    multiColumn: PropTypes.bool,
-  };
-
-
-  componentDidMount() {
-    this.eventSource = new EventSource('/api/v1/activity_log');
-    this.eventSource.onmessage = (event) => {
-      this.setState({ logs: [...this.state.logs, JSON.parse(event.data)] });
-    };
-  }
-
-  componentWillUnmount() {
-    if (this.eventSource) {
-      this.eventSource.close();
+  const [logs, dispatch] = useReducer((state, [type, data]) => {
+    switch (type) {
+    case 'add-log-event':
+      return [...state, data];
+    case 'reset-logs':
+      return [];
+    default:
+      return state;
     }
-  }
+  }, dummy_data);
 
-  handleHeaderClick = () => {
-    this.column.scrollTop();
-  }
+  const columnElement = useRef(null);
 
-  clearLog = () => {
-    this.setState({ logs: [] });
-  }
+  useEffect(() => {
+    const eventSource = new EventSource('/api/v1/activity_log');
+    eventSource.onmessage = (event) => {
+      dispatch(['add-log-event', JSON.parse(event.data)]);
+    };
 
-  render () {
-    const darkMode = !(document.body && document.body.classList.contains('theme-mastodon-light'));
+    return function() {
+      eventSource.close();
+    };
+  }, []);
 
-    const { multiColumn } = this.props;
 
-    return (
-      <Column bindToDocument={!multiColumn} ref={this.setRef} label='Activity Log'>
-        <ColumnHeader
-          icon='comments'
-          title='Activity Log'
-          onClick={this.handleHeaderClick}
-          multiColumn={multiColumn}
-        >
-          <ColumnSettings clearLog={this.clearLog} />
-        </ColumnHeader>
+  const darkMode = !(document.body && document.body.classList.contains('theme-mastodon-light'));
 
-        <div className={`${darkMode ? 'dark' : ''}`}>
-          <ActivityPubVisualization logs={this.state.logs} />
-        </div>
+  return (
+    <Column bindToDocument={!multiColumn} ref={columnElement} label='Activity Log'>
+      <ColumnHeader
+        icon='comments'
+        title='Activity Log'
+        onClick={() => { columnElement.current.scrollTop() }}
+        multiColumn={multiColumn}
+      >
+        <ColumnSettings clearLog={() => dispatch(['reset-logs'])} />
+      </ColumnHeader>
 
-      </Column>
-    );
-  }
+      <div className={`${darkMode ? 'dark' : ''}`}>
+        <ActivityPubVisualization logs={logs} />
+      </div>
 
+    </Column>
+  );
 }
+
+ActivityLog.propTypes = {
+  multiColumn: PropTypes.bool,
+};