mailspring-mirror/app/internal_packages/activity-list/lib/activity-list.jsx

import React from 'react';
import classnames from 'classnames';

import { Flexbox, ScrollRegion } from 'nylas-component-kit';
import ActivityListStore from './activity-list-store';
import ActivityListActions from './activity-list-actions';
import ActivityListItemContainer from './activity-list-item-container';
import ActivityListEmptyState from './activity-list-empty-state';

class ActivityList extends React.Component {
  static displayName = 'ActivityList';

  constructor() {
    super();
    this.state = this._getStateFromStores();
  }

  componentDidMount() {
    this._unsub = ActivityListStore.listen(this._onDataChanged);
  }

  componentWillUnmount() {
    ActivityListActions.resetSeen();
    this._unsub();
  }

  _onDataChanged = () => {
    this.setState(this._getStateFromStores());
  };

  _getStateFromStores() {
    const actions = ActivityListStore.actions();
    return {
      actions: actions,
      empty: actions instanceof Array && actions.length === 0,
      collapsedToggles: this.state ? this.state.collapsedToggles : {},
    };
  }

  _groupActions(actions) {
    const groupedActions = [];
    for (const action of actions) {
      if (groupedActions.length > 0) {
        const currentGroup = groupedActions[groupedActions.length - 1];
        if (
          action.messageId === currentGroup[0].messageId &&
          action.pluginId === currentGroup[0].pluginId
        ) {
          groupedActions[groupedActions.length - 1].push(action);
        } else {
          groupedActions.push([action]);
        }
      } else {
        groupedActions.push([action]);
      }
    }
    return groupedActions;
  }

  renderActions() {
    if (this.state.empty) {
      return <ActivityListEmptyState />;
    }

    const groupedActions = this._groupActions(this.state.actions);
    return groupedActions.map(group => {
      return (
        <ActivityListItemContainer
          key={`${group[0].messageId}-${group[0].timestamp}`}
          group={group}
        />
      );
    });
  }

  render() {
    if (!this.state.actions) return null;

    const classes = classnames({
      'activity-list-container': true,
      empty: this.state.empty,
    });
    return (
      <Flexbox direction="column" height="none" className={classes} tabIndex="-1">
        <ScrollRegion style={{ height: '100%' }}>{this.renderActions()}</ScrollRegion>
      </Flexbox>
    );
  }
}

export default ActivityList;