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

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

class FlagDetails extends Component {
  render() {
    const { comment: { actions }, more, data, root, comment } = this.props;

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

    const reasons = Object.keys(summaries);
    const queryData = {
      root,
      comment,
    };

    return (
      <CommentDetail
        icon={'flag'}
        header={`${t('talk-plugin-flag-details.flags')} (${
          Object.keys(summaries).length
        })`}
        info={
          <ul className={styles.info}>
            {reasons.map(reason => (
              <li key={reason} className={styles.lessDetail}>
                {t(`flags.reasons.comment.${reason.toLowerCase()}`)}{' '}
                {summaries[reason].userFlagged &&
                  `(${summaries[reason].count})`}
              </li>
            ))}
          </ul>
        }
      >
        {more && (
          <IfSlotIsNotEmpty
            slot="adminCommentMoreFlagDetails"
            queryData={queryData}
          >
            <Slot
              fill="adminCommentMoreFlagDetails"
              data={data}
              queryData={queryData}
            />
          </IfSlotIsNotEmpty>
        )}
      </CommentDetail>
    );
  }
}

FlagDetails.propTypes = {
  more: PropTypes.bool,
  data: PropTypes.object,
  root: PropTypes.object,
  comment: PropTypes.shape({
    actions: PropTypes.arrayOf(
      PropTypes.shape({
        message: PropTypes.string,
        user: PropTypes.shape({ username: PropTypes.string }),
      })
    ).isRequired,
  }).isRequired,
};

export default FlagDetails;