function SignalDetailsCell()

in hasher-matcher-actioner/webapp/src/components/ContentMatchTable.tsx [23:102]

• 78 lines of code
• 5 McCabe index (conditional complexity)

function SignalDetailsCell({match}: SignalDetailsCellProps): JSX.Element {
  const notifications = useContext(NotificationsContext);
  // Elected to keep this component in same file for now as it is subject to a fair amout of thrash
  // as TE signals are refactored to use banks.
  return (
    <>
      {match.te_signal_details && match.te_signal_details.length ? (
        <>
          <h5>Dataset Membership</h5>
          <Table title="Datasets">
            <thead>
              <tr>
                <th>Dataset ID</th>
                <th>Opinion</th>
                <th>Tags</th>
              </tr>
            </thead>
            {match.te_signal_details.map(details => (
              <tbody key={match.signal_id + details.privacy_group_id}>
                <tr>
                  <td>
                    <Link to="/settings/threatexchange">
                      {details.privacy_group_id}
                    </Link>
                  </td>
                  <td>
                    <OpinionTableCell
                      privacyGroupId={details.privacy_group_id}
                      signalId={match.signal_id}
                      signalSource={match.signal_source}
                      opinion={details.opinion}
                      pendingOpinionChange={details.pending_opinion_change}
                      setShowToast={() =>
                        notifications.success({
                          header: 'Submitted',
                          message:
                            'Please wait for the requested change to propagate',
                        })
                      }
                    />
                  </td>
                  <td>{details.tags.join(', ')}</td>
                </tr>
              </tbody>
            ))}
          </Table>
        </>
      ) : null}
      {match.banked_signal_details && match.banked_signal_details.length ? (
        <>
          <h5>Bank Membership</h5>
          <Table title="Banks">
            <thead>
              <tr>
                <th>Bank ID</th>
                <th>Member ID</th>
              </tr>
            </thead>
            {match.banked_signal_details.map(details => (
              <tbody key={match.signal_id + details.bank_member_id}>
                <tr>
                  <td>
                    <Link to={`/banks/bank/${details.bank_id}/bank-details`}>
                      {details.bank_id}
                    </Link>
                  </td>
                  <td>
                    <Link to={`/banks/member/${details.bank_member_id}`}>
                      {details.bank_member_id}
                    </Link>
                  </td>
                </tr>
              </tbody>
            ))}
          </Table>
        </>
      ) : null}
    </>
  );
}