render()

in SRE - Operating applications and infrastructure in the cloud/SRE40/setup/src/frontend/src/ProductTable.js [101:161]
61 lines of code
3 McCabe index (conditional complexity)

  render() {
    return (
      <div className="table-container">
        <InfiniteLoader
          rowCount={this.state.totalSize}
          loadMoreRows={this.fetchRows}
          isRowLoaded={this.isRowLoaded}
        >
          {({ onRowsRendered, registerChild }) => (
            <AutoSizer>
              {({ height, width }) => (
                <Table
                  width={width}
                  height={height}
                  headerHeight={60}
                  rowHeight={60}
                  rowCount={this.state.rows.length}
                  ref={registerChild}
                  rowGetter={({ index }) => this.state.rows[index]}
                  onRowsRendered={data => {
                    this.modRowsShowing(data);
                    onRowsRendered(data);
                  }}
                  rowClassName={({ index }) =>
                    index % 2 ? "row-even" : "row-odd"
                  }
                  headerClassName="row-header"
                  onRowClick={this.handleRowClick}
                >
                  <Column width={100} label="ID" dataKey="id" />
                  <Column width={300} label="Name" dataKey="name" />
                  <Column width={300} label="SKU" dataKey="sku" />
                  <Column width={100} label="Price" dataKey="price" />
                  <Column width={200} label="Supplier" dataKey="supplierName" />
                  <Column width={200} label="Inventory" dataKey="inventory" />
                </Table>
              )}
            </AutoSizer>
          )}
        </InfiniteLoader>
        {!this.state.selectedRow ? null : (
          <Modal>
            <div
              role="none"
              onClick={this.handleModalClick}
              id="modal-interior"
            >
              <div>
                <ProductDetails {...this.state.selectedRow} />
                <div className="buttons">
                  <button className="exit-button" onClick={this.closeModal}>
                    Close
                  </button>
                </div>
              </div>
            </div>
          </Modal>
        )}
      </div>
    );
  }