talk/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { t } from 'plugin-api/beta/client/services';
import styles from './UserFlagDetails.css';

class UserFlagDetails extends Component {
  render() {
    const { comment: { actions }, viewUserDetail } = this.props;

    const flagActions =
      actions && actions.filter(a => a.__typename === 'FlagAction');
    const summaries = flagActions.reduce((sum, action) => {
      if (!action.user) {
        return sum;
      }
      if (!(action.reason in sum)) {
        sum[action.reason] = { count: 0, actions: [] };
      }
      sum[action.reason].count++;
      sum[action.reason].actions.push(action);
      return sum;
    }, {});

    return (
      <ul className={styles.detail}>
        {Object.keys(summaries).map(reason => (
          <li key={reason}>
            {t(`flags.reasons.comment.${reason.toLowerCase()}`)} ({
              summaries[reason].count
            })
            <ul className={styles.subDetail}>
              {summaries[reason].actions.map(action => (
                <li key={action.user.id}>
                  {action.user && (
                    <a
                      className={styles.username}
                      onClick={() => viewUserDetail(action.user.id)}
                    >
                      {action.user.username}
                    </a>
                  )}
                  {action.message}
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    );
  }
}

UserFlagDetails.propTypes = {
  comment: PropTypes.shape({
    actions: PropTypes.arrayOf(
      PropTypes.shape({
        message: PropTypes.string,
        user: PropTypes.shape({ username: PropTypes.string }),
      })
    ).isRequired,
  }).isRequired,
  viewUserDetail: PropTypes.func.isRequired,
};

export default UserFlagDetails;