export default function PreHome()

in app/src/preHome.js [9:122]
73 lines of code
1 McCabe index (conditional complexity)

export default function PreHome() {
  const [patientId, setPatientId] = useState('');
  const [sessionId, setSessionId] = useState('');
  const [Patients, setPatients] = useState([]);
  const [HealthCareProfessionals, setHealthCareProfessionals] = useState([]);
  const [healthCareProfessionalId, setHealthCareProfessionalId] = useState('');
  const [healthCareProfessionalName] = useState('');
  const [Sessions, setSessions] = useState([]);
  const [Stage, setStage] = useState(1);
  const [show, setShow] = useState(false);
  const target = useRef(null);
  const [setSearchValidated] = useState(false);

  const ToolTipIcon = () => (
    <svg
      width='1em'
      height='1em'
      viewBox='0 0 16 16'
      class='bi bi-question-circle-fill'
      fill='currentColor'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path
        fill-rule='evenodd'
        d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.57 6.033H5.25C5.22 4.147 6.68 3.5 8.006 3.5c1.397 0 2.673.73 2.673 2.24 0 1.08-.635 1.594-1.244 2.057-.737.559-1.01.768-1.01 1.486v.355H7.117l-.007-.463c-.038-.927.495-1.498 1.168-1.987.59-.444.965-.736.965-1.371 0-.825-.628-1.168-1.314-1.168-.901 0-1.358.603-1.358 1.384zm1.251 6.443c-.584 0-1.009-.394-1.009-.927 0-.552.425-.94 1.01-.94.609 0 1.028.388 1.028.94 0 .533-.42.927-1.029.927z'
      />
    </svg>
  );

  const renderTooltip = (message, props) => (
    <Tooltip id='button-tooltip' {...props}>
      {message}
    </Tooltip>
  );

  const history = useHistory();

  const toRecordingPage = () => history.push('/home');

  async function listPatients() {
    const apiName = 'MTADemoAPI';
    const path = 'listPatients';
    const myInit = {
      headers: {
        Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}`,
      },
      response: true,
      queryStringParameters: { PatientId: '' },
    };
    const result = await API.get(apiName, path, myInit);
    setPatients(result.data);
    return result;
  }

  async function listHealthCareProfessionals() {
    const apiName = 'MTADemoAPI';
    const path = 'listHealthCareProfessionals';
    const myInit = {
      headers: {
        Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}`,
      },
      response: true,
      queryStringParameters: { HealthCareProfessionalId: '' },
    };

    const result = await API.get(apiName, path, myInit);
    setHealthCareProfessionals(result.data);
    return result;
  }

  const handleTableCellClick = (sessionId) => {
    window.open('/export/' + sessionId, '_blank');
  };

  const epochToDate = (e) => {
    return new Date(e * 1000).toLocaleString();
  };

  const SessionsTable = () => (
    <Table striped bordered hover responsive>
      <thead>
        <tr>
          <th>Session Name</th>
          <th>Session Id</th>
          <th>Patient Id</th>
          <th>Health Care Professional Id</th>
          <th>Timestamp Start</th>
          <th>Timestamp End</th>
        </tr>
      </thead>
      <tbody>
        {Sessions.map((session) => {
          return (
            <tr>
              <td id='sessionName' class='text-primary' onClick={() => handleTableCellClick(session.SessionId)}>
                {session.SessionName}
              </td>

              <td ref={target} onClick={() => setShow(!show)}>
                {session.SessionId}
              </td>

              <td>{session.PatientId}</td>
              <td>{session.HealthCareProfessionalId}</td>
              <td>{epochToDate(session.TimeStampStart)}</td>
              <td>{epochToDate(session.TimeStampEnd)}</td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  );

  const handleSearchSessions = (event) => {