render()

in src/agentAssist/AgentAssist.js [104:194]
90 lines of code
11 McCabe index (conditional complexity)

  render() {
    let data = [];
    if (this.shouldMergeTranscript()) {
      const latestCall = this.state.transcript.reduce(
        (acc, curr) => (acc !== null && acc.LoggedOn > curr.LoggedOn ? acc : curr),
        null
      );
      const currentTransactionId = latestCall === null ? null : latestCall.TransactionId;
      data = [].concat(
        this.state.transcript.filter(
          e => e.TransactionId === currentTransactionId && e.EndTime !== null
        )
      );
      data = mergeAndComprehendTranscript(data).map((item, i) => (
        <tr key={i}>
          <td>{item.StartTime.toFixed(3)}</td>
          <td>{item.Speaker && item.Speaker === 'spk_0' ? 'agent' : 'caller'}</td>
          <td className={item.SentimentClass ? item.SentimentClass : 's-none'}>
            {item.Sentiment ? item.Sentiment : ''}
          </td>
          <td>
            {item.Action && item.Action === 'ClientSnapshot' ? (
              <a href="#modal2" className="action">
                Client Snapshot
              </a>
            ) : (
              ''
            )}
          </td>
          <td className="transcript-note">{item.Transcript}</td>
        </tr>
      ));
    }
    return (
      <div className="AssistAgent" hidden={this.props.value !== this.props.index}>
        <table id="ttlist" className="transcript">
          <thead className="transcript">
            <tr>
              <th>Start</th>
              <th>Speaker</th>
              <th style={{ width: '3em' }}>&plusmn;</th>
              <th>Action</th>
              <th style={{ width: '60%' }}>
                Transcript
                <a
                  href="#a"
                  onClick={e => {
                    this.setState({ transcript: [] });
                    e.preventDefault();
                  }}
                  title="Clear transcript"
                >
                  &empty;
                </a>
              </th>
            </tr>
          </thead>
          <tbody>{data}</tbody>
        </table>

        <div id="modal1" className="overlay">
          <a className="cancel" href="#a" title="Close modal">
            {' '}
          </a>
          <div className="modal">
            <h1>Connection Doctor</h1>
            <div className="content">
              <table>
                <tbody>
                  <tr>
                    <td>PNR: </td>
                    <td>CJK1Z3</td>
                  </tr>
                  <tr>
                    <td>PAX: </td>
                    <td>Johnson/Jonas</td>
                  </tr>
                  <tr>
                    <td>Itinerary: </td>
                    <td>
                      LGA/MIA NA 1211 1219/1531 (now 1600/1912)
                      <br />
                      CONN 134 min (now *MISSED*)
                      <br />
                      MIA/SJU NA 2561 1745/2026
                    </td>
                  </tr>
                  <tr>
                    <td>Remediation</td>
                    <td>
                      <span className="opt" onClick={() => console.log('Internal')}>