renderMain()

in addons/addon-base-ui/packages/base-ui/src/parts/api-keys/ApiKeysList.js [94:190]

• 97 lines of code
• 1 McCabe index (conditional complexity)

  renderMain() {
    const apiKeys = _.orderBy(this.getStore().list, ['createdAt', 'status'], ['desc', 'asc']);
    const renderTotal = () => {
      const count = apiKeys.length;
      return (
        <div className="flex mb3">
          <Header as="h2" color="grey" className="flex-auto ml3">
            You have{' '}
            <Label circular size="huge">
              {count}
            </Label>{' '}
            API Keys
          </Header>
          <Button color="blue" size="medium" basic onClick={this.handleCreateApiKey}>
            Create New API Key
          </Button>
        </div>
      );
    };
    const renderRow = (rowNum, apiKey) => {
      const panels = [
        {
          key: `panel-${rowNum}`,
          title: {
            content: <Label color="blue" content={`Key ${rowNum}`} />,
          },
          content: {
            content: (
              <div>
                <textarea style={{ minWidth: '400px' }} rows={7} disabled value={apiKey.key} />
              </div>
            ),
          },
        },
      ];
      return (
        <Table.Row key={rowNum} className="fit animated fadeIn">
          <Table.Cell textAlign="left" collapsing>
            {rowNum}
          </Table.Cell>
          <Table.Cell textAlign="left">
            <Accordion defaultActiveIndex={1} panels={panels} />
          </Table.Cell>
          <Table.Cell textAlign="center" collapsing>
            <TimeAgo date={apiKey.createdAt} />
          </Table.Cell>
          <Table.Cell textAlign="center" collapsing>
            <Label color={apiKey.effectiveStatus === 'active' ? 'green' : 'red'} size="small">
              {_.capitalize(apiKey.effectiveStatus)}
            </Label>
          </Table.Cell>
          <Table.Cell textAlign="center" collapsing>
            <Button
              size="small"
              color="red"
              disabled={!apiKey.isActive}
              onClick={() => this.handleRevokeApiKey(apiKey.id)}
            >
              Revoke
            </Button>
          </Table.Cell>
        </Table.Row>
      );
    };
    const renderTableBody = () => {
      let rowNum = 0;
      return _.map(apiKeys, apiKey => {
        ++rowNum;
        return renderRow(rowNum, apiKey);
      });
    };
    return (
      <Container text className="mt4 center">
        {renderTotal()}
        <div>
          <Table celled striped stackable selectable size="small">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell textAlign="left" collapsing>
                  #
                </Table.HeaderCell>
                <Table.HeaderCell textAlign="left">Key</Table.HeaderCell>
                <Table.HeaderCell textAlign="center" collapsing>
                  Issued
                </Table.HeaderCell>
                <Table.HeaderCell textAlign="center" collapsing>
                  Status
                </Table.HeaderCell>
                <Table.HeaderCell textAlign="center" collapsing />
              </Table.Row>
            </Table.Header>
            <Table.Body>{renderTableBody()}</Table.Body>
          </Table>
        </div>
      </Container>
    );
  }