function MatchList()

in hasher-matcher-actioner/webapp/src/pages/Matches.tsx [129:213]
78 lines of code
6 McCabe index (conditional complexity)

function MatchList({
  selection,
  onSelect,
  filterAttribute = 'contentId',
  filterString = '',
}: MatchListProps) {
  const [matchesData, setMatchesData] = useState<MatchDetails[]>();

  useEffect(() => {
    let apiPromise;
    if (filterAttribute === 'contentId') {
      apiPromise = fetchMatchesFromContent(filterString);
    } else if (filterAttribute === 'signalId') {
      /** Hack alert. This expects strings like
       * "facebook/threatexchange|12312121" to be the filterString. A pipe
       * separates the source from the signal id */
      const parts = filterString.split('|');
      apiPromise = fetchMatchesFromSignal(parts[0], parts[1]);
    } else {
      apiPromise = fetchAllMatches();
    }

    apiPromise.then(matches => setMatchesData(matches.match_summaries));
    // .catch(err => console.log(err));
  }, [filterAttribute, filterString]);

  return (
    <>
      <Spinner
        hidden={matchesData !== undefined}
        animation="border"
        role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
      <Collapse in={matchesData !== undefined}>
        <Row>
          <Col>
            <table className="table table-hover small">
              <thead>
                {/* TODO: Undecided nomenclature */}
                <tr>
                  <th>Content Id</th>
                  <th>Matched in Dataset</th>
                  <th>Submitted</th>
                </tr>
              </thead>
              <tbody>
                {matchesData && matchesData.length ? (
                  matchesData.map(match => (
                    <tr
                      className={classNames('align-middle', {
                        'table-info':
                          match.content_id === selection.contentId &&
                          match.signal_id === selection.signalId,
                      })}
                      onClick={(e: any) =>
                        onSelect({
                          contentId: match.content_id,
                          signalId: match.signal_id,
                          signalSource: match.signal_source,
                          [e.target.name]: e.target.value,
                        })
                      }
                      key={`${match.signal_source}_${match.signal_id}_${match.content_id}`}>
                      <td className="align-middle">{match.content_id}</td>
                      <td className="align-middle">{match.signal_source}</td>
                      {/* <td className="align-middle">{match.signal_id}</td> */}
                      <td className="align-middle">
                        {timeAgo(match.updated_at)}
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={5}>No Matches Found.</td>
                  </tr>
                )}
              </tbody>
            </table>
          </Col>
        </Row>
      </Collapse>
    </>
  );
}