function searchResults()

in src/components/search/SearchResults.tsx [326:489]
163 lines of code
4 McCabe index (conditional complexity)

  function searchResults() {
    return (
      <Container
        header={
          <Header
            variant="h2"
            description=""
            actions={
              <SpaceBetween direction="horizontal" size="xl">
                <Toggle
                  onChange={({ detail }) =>
                    setPreviewPaneToggle(detail.checked)
                  }
                  checked={previewPaneToggle}
                >
                  Preview Pane
                </Toggle>
              </SpaceBetween>
            }
          >
            FHIR Search Result
          </Header>
        }
      >
        <div className={previewPaneToggle ? "flex-parent" : ""}>
          <div className={previewPaneToggle ? "flex-child" : ""}>
            <Table
              trackBy="id"
              ariaLabels={{
                selectionGroupLabel: "Items selection",
                allItemsSelectionLabel: ({ selectedItems }) => {
                  return "";
                },
                itemSelectionLabel: ({ selectedItems }, item) => {
                  return "itemSelectionLabel";
                },
              }}
              sortingDisabled={true}
              columnDefinitions={tableColumnDefinitions}
              items={items}
              loadingText="Loading resources"
              selectedItems={selectedItems}
              selectionType="single"
              resizableColumns
              visibleColumns={preferences.visibleContent}
              empty={
                <Box textAlign="center" color="inherit">
                  <b>No resources</b>
                  <Box padding={{ bottom: "s" }} variant="p" color="inherit">
                    No FHIR resources to display.
                  </Box>
                  <Button
                    onClick={() => {
                      history.push({
                        pathname: "/create",
                      });
                    }}
                  >
                    Create resource
                  </Button>
                </Box>
              }
              header={
                <Header
                  counter={`${tableItems.length}`}
                  actions={
                    <SpaceBetween direction="horizontal" size="xl">
                      <Button
                        variant="primary"
                        onClick={readResource}
                        loading={loadingReadResult}
                        disabled={selectedItems.length !== 1}
                      >
                        Read
                      </Button>
                      <Button
                        variant="normal"
                        onClick={updateResource}
                        disabled={selectedItems.length !== 1}
                      >
                        Update
                      </Button>
                      <Button
                        variant="normal"
                        onClick={(e) =>
                          window.confirm(
                            "Are you sure you wish to delete the resource with id: " +
                              selectedItems[0].id +
                              "?"
                          ) && deleteResource()
                        }
                        loading={loadingDeleteResult}
                        disabled={selectedItems.length !== 1}
                      >
                        Delete
                      </Button>
                    </SpaceBetween>
                  }
                >
                  Total FHIR Resources
                </Header>
              }
              pagination={
                <Pagination
                  {...paginationProps}
                  ariaLabels={{
                    nextPageLabel: "Next page",
                    previousPageLabel: "Previous page",
                    pageLabel: (pageNumber) =>
                      `Page ${pageNumber} of all pages`,
                  }}
                />
              }
              filter={
                <TextFilter
                  {...filterProps}
                  countText={getMatchesCountText(filteredItemsCount)}
                  filteringAriaLabel="Filter FHIR resource"
                />
              }
              preferences={
                <CollectionPreferences
                  title="Preferences"
                  onConfirm={({ detail }) => setPreferences(detail as any)}
                  confirmLabel="Confirm"
                  cancelLabel="Cancel"
                  preferences={preferences}
                  visibleContentPreference={{
                    title: "Visible Object Properties",
                    options: [
                      {
                        label: "",
                        options: visibleContentPreferenceOptions,
                      },
                    ],
                  }}
                />
              }
              onSelectionChange={({ detail }) => {
                setSelectedItems(detail.selectedItems);

                const entryList = apiResponse.body.entry;
                entryList.forEach((entry: any) => {
                  if (entry.resource.id === detail.selectedItems[0].id) {
                    setSelectedJSON(entry.resource);
                    return;
                  }
                });
              }}
            />
          </div>
          {previewPaneToggle ? previewPane() : null}
        </div>
        <Button
          id="back-button"
          onClick={() => {
            setApiResponse(defaultApiResponse);
          }}
        >
          Back
        </Button>
      </Container>
    );
  }