render()

in frontends/web/src/containers/TaskOwnerPage.js [475:605]

• 130 lines of code
• 21 McCabe index (conditional complexity)

  render() {
    const navOptions = [
      {
        href: "#settings",
        buttonText: "Settings",
      },
      {
        href: "#advanced",
        buttonText: "Advanced",
      },
      {
        href: "#owners",
        buttonText: "Owners",
      },
      {
        href: "#rounds",
        buttonText: "Rounds",
      },
      {
        href: "#models",
        buttonText: "Models",
      },
      {
        href: "#datasets",
        buttonText: "Datasets",
      },
    ];

    return (
      <Container fluid>
        <Row>
          <Col lg={2} className="p-0 border">
            <Nav className="flex-lg-column sidebar-wrapper sticky-top">
              {navOptions.map((navOption) => (
                <Nav.Item key={navOption.href}>
                  <Nav.Link
                    href={navOption.href}
                    className={`gray-color p-4 px-lg-6 ${
                      this.props.location.hash === navOption.href
                        ? "active"
                        : ""
                    }`}
                  >
                    {navOption.buttonText}
                  </Nav.Link>
                </Nav.Item>
              ))}
            </Nav>
          </Col>
          <Col>
            {this.props.location.hash === "#settings" && this.state.task ? (
              <Settings
                task={this.state.task}
                handleTaskUpdate={this.handleTaskUpdate}
              />
            ) : null}
            {this.props.location.hash === "#advanced" && this.state.task ? (
              <Advanced
                task={this.state.task}
                handleTaskActivate={this.handleTaskActivate}
                handleTaskUpdate={this.handleTaskUpdate}
              />
            ) : null}
            {this.state.task?.active ? (
              <>
                {this.props.location.hash === "#owners" && this.state.owners ? (
                  <Owners
                    owners={this.state.owners}
                    handleOwnerUpdate={this.handleOwnerUpdate}
                  />
                ) : null}
                {this.props.location.hash === "#rounds" &&
                this.state.rounds &&
                this.state.model_identifiers_for_target_selection ? (
                  <Rounds
                    rounds={this.state.rounds}
                    task={this.state.task}
                    model_identifiers_for_target_selection={
                      this.state.model_identifiers_for_target_selection
                    }
                    createRound={this.createRound}
                    handleRoundUpdate={this.handleRoundUpdate}
                    exportData={this.exportData}
                    dataExporting={this.state.dataExporting}
                  />
                ) : null}
                {this.props.location.hash === "#models" &&
                this.state.model_identifiers ? (
                  <Models model_identifiers={this.state.model_identifiers} />
                ) : null}
                {this.props.location.hash === "#datasets" &&
                this.state.task &&
                this.state.datasets &&
                this.state.availableDatasetAccessTypes &&
                this.state.availableDatasetLogAccessTypes ? (
                  <Datasets
                    task={this.state.task}
                    datasets={this.state.datasets}
                    availableAccessTypes={
                      this.state.availableDatasetAccessTypes
                    }
                    availableLogAccessTypes={
                      this.state.availableDatasetLogAccessTypes
                    }
                    handleDatasetUpdate={this.handleDatasetUpdate}
                    handleUploadAndCreateDataset={
                      this.handleUploadAndCreateDataset
                    }
                    handleDatasetDelete={this.handleDatasetDelete}
                  />
                ) : null}
              </>
            ) : (
              this.props.location.hash !== "#settings" &&
              this.props.location.hash !== "#advanced" && (
                <Container className="mb-5 pb-5">
                  <Card className="my-4">
                    <Card.Body>
                      <Row className="justify-content-center">
                        Activate this task first.
                      </Row>
                    </Card.Body>
                  </Card>
                </Container>
              )
            )}
          </Col>
        </Row>
      </Container>
    );
  }