export default function ExportPane()

in app/src/components/ExportPane.js [168:240]
65 lines of code
4 McCabe index (conditional complexity)

export default function ExportPane({ transcriptChunks, resultChunks, visible, excludedItems, soapSummary }) {
  const [sections, setSections] = React.useState(() =>
    getExportSections({ excludedItems, resultChunks, soapSummary, transcriptChunks }),
  );
  const [lang, setLang] = React.useState('en');
  const [isLoadingTranslation, setIsLoadingTranslation] = React.useState(false);

  React.useEffect(() => {
    if (!visible) return;

    const englishSections = getExportSections({ excludedItems, resultChunks, soapSummary, transcriptChunks });

    if (lang === 'en') {
      setSections(englishSections);
      return;
    }

    setIsLoadingTranslation(true);

    Auth.currentSession()
      .then((session) => session.getIdToken().getJwtToken())
      .then((token) => translateSections(englishSections, lang, token))
      .then(setSections)
      .finally(() => setIsLoadingTranslation(false));
  }, [visible, excludedItems, resultChunks, soapSummary, transcriptChunks, lang]);

  return (
    <div className={cs(s.base, visible && s.visible)}>
      <div className={s.pageContainer}>
        <Flex alignItems='center' p={4}>
          <Heading as='div' size='md' mr={4}>
            Translate Summary
          </Heading>
          <SupportedLanguagesMenu currentLang={lang} onLangClick={setLang} disabled={isLoadingTranslation} />
        </Flex>
        <div className={s.page}>
          {isLoadingTranslation ? (
            <Flex width='100%' height='100%' justifyContent='center' alignItems='center'>
              <Spinner size='xl' />
            </Flex>
          ) : (
            <>
              <header>
                <div className={s.logo} />
              </header>

              <main>
                {sections.map(({ header, content }) => (
                  <React.Fragment key={header.content}>
                    <ExportPaneHeader content={header.content} type={header.type} />
                    {content.map((paragraph, i) => (
                      <p key={i}>{paragraph}</p>
                    ))}
                  </React.Fragment>
                ))}
              </main>
            </>
          )}
        </div>
      </div>

      <div className={s.actions}>
        <button
          className={s.ehr}
          onClick={() =>
            alert(
              'You can take the transcription, detected entities, and generated summaries and integrate them into your EHR system, where you can continue editing or commit it to the patient record.',
            )
          }
        >
          Export to EHR system
        </button>
        <button className={s.pdf} onClick={() => window.print()}>