function Documents()

in source/app/pages/documents/index.js [84:266]

• 151 lines of code
• 31 McCabe index (conditional complexity)

function Documents({
  documents,
  documentsNextToken,
  documentsTotal,
  dispatch,
  searchQuery,
  searchPersona,
  searchResults,
  kendraResults,
  kendraFilteredResults,
  searchStatus,
  searchTotalDocuments,
  searchTotalMatches,
  kendraQueryId,
  kendraFilteredQueryId,
  kendraResultCount,
  kendraFilteredResultCount,
  track,
  selectedSearch
}) {
  const [sentinelRef, isSentinelVisible] = useInView({ threshold: 1 })
  const { status } = useFetchDocuments({
    dispatch,
    nextToken: documentsNextToken,
    isSentinelVisible,
  })


  const doSearch = useSearchCallback(dispatch, searchPersona)

  useEffect(() => {
    dispatch(setSearchQuery(''))
  }, [])

  useEffect(() => {
    doSearch(searchQuery)
  }, [ searchQuery, doSearch ]);

  let files = documents.map(
    ({ documentId, documentName, documentStatus, documentCreatedOn, documentCompletedOn }) => {
      const uploadedTime = distanceInWordsToNow(`${documentCreatedOn}Z`, { addSuffix: true })
      const processedTime =
        documentCompletedOn && distanceInWords(`${documentCreatedOn}Z`, `${documentCompletedOn}Z`)
      return {
        id: documentId,
        title: documentName,
        link: makeDocumentLink(documentId),
        documentStatus : documentStatus,
        uploadedTime,
        processedTime,
      }
    }
  )

  const listDetailsClassNames = classNames(css.listDetails)
  const introClassNames = classNames(css.intro)

  useEffect(() => {
    dispatch(setHeaderProps({
      showNavigation: !!searchQuery
    }))
  }, [ searchQuery ])

  if (documentsTotal === 0 && status === 'success') {
    return (
      <div className={css.documents}>
        <p className="noContent">
          No documents found. <br />
          <Button link={{ href: '/select' }}>+ Add a new Document</Button>
        </p>
      </div>
    )
  }

  const isQueryLongEnough = searchQuery && searchQuery.length >= MIN_SEARCH_QUERY_LENGTH

  return (
    <div className={css.documents}>
      <div className={introClassNames}>
        {!searchQuery && <h3>
          Search through documents to find the information you are looking for
        </h3>}
        <SearchBar
          className={css.searchBar}
          light
          suggestions={ENABLE_KENDRA && [
            'What is diabetes?',
            'What are the types of diabetes?',
            'How many people have diabetes?',
            'How to manage kidney disease',
            'Does high blood pressure cause kidney disease?',
            'How to prevent kidney disease'
          ]}
        />
      </div>

      {status === 'pending' && !files.length && <Loading />}
      {(status === 'success' || !!files.length) && !searchQuery && (
        <Fragment>
          <div className={listDetailsClassNames}>
            <h3>Document list</h3>

            <p className={css.instructions}>
              {!!files.length && (
                <span className={css.fileCount}>
                  Showing {files.length} of {documentsTotal} document{documentsTotal !== 1 && 's'}
                </span>
              )}

              Analyze a document from the list of documents below, or <Link href="/select"><a>upload your own documents</a></Link>.
            </p>

          </div>
          <DocumentList items={files} className={css.list} />
          {status === 'pending' && !!files.length && (
            <Loading size={64} overlay={false} className={css.loadingItems} />
          )}
          {status === 'success' && documentsNextToken && (
            <div ref={sentinelRef} className={css.sentinel} />
          )}
        </Fragment>
      )}

      {status === 'error' && (
        <p className="noContent">Something went wrong, please refresh the page to try again.</p>
      )}

      {searchQuery && <>

        <div>
          { ENABLE_KENDRA ?
            <SearchTypeTabs />
          : null }
          <div className={css.searchResultContainer}>
            { !ENABLE_KENDRA || selectedSearch === 'es' || selectedSearch === 'both' ?
              <SearchResults
                results={searchResults}
                searchStatus={searchStatus}
                searchQuery={searchQuery}
                searchTotalDocuments={searchTotalDocuments}
                searchTotalMatches={searchTotalMatches}
                isComparing={selectedSearch === 'both'}
              />
            : null }

            {selectedSearch === 'both' &&
              <TooltipButton
                tooltip={<>
                  <p>In a traditional keyword search, the results are provided in a list. The user needs to go through the list, select a document that may have the answer, and then go find the answer within the document.</p>
                  <p>Amazon Kendra is automating all of that to parse the results. It shortens the cycle of opening the link and directly extracts suggested answers, as well as frequently asked questions related to the search query.</p>
                </>}
              >
                <div className={css.compareButton}>
                  <img src="/static/images/icon_tip.svg" />
                  What's the difference?
                </div>
              </TooltipButton>
            }

            { ENABLE_KENDRA && (selectedSearch === 'kendra' || selectedSearch === 'both') ?
              <KendraResults
                results={kendraResults}
                filteredResults={kendraFilteredResults}
                searchStatus={searchStatus}
                searchQuery={searchQuery}
                kendraQueryId={kendraQueryId}
                filteredQueryId={kendraFilteredQueryId}
                resultCount={kendraResultCount}
                filteredResultCount={kendraFilteredResultCount}
                searchPersona={searchPersona}
                showPersonaSelector={selectedSearch === 'kendra'}
                isComparing={selectedSearch === 'both'}
              />
            : null }

            {searchStatus === 'pending' && isQueryLongEnough && <Loading />}

          </div>
        </div>
      </> }
    </div>
  )
}