react-bootstrap#ButtonGroup JavaScript Examples

ViewDeck = ({ deck }) => {
    const dispatch = useDispatch();

    const handleDeleteClick = () => {
        dispatch(deleteDeck(deck));
    };
    const handleEditClick = () => {
        dispatch(navigate('/decks/edit'));
    };

    return (
        <Panel title={deck?.name}>
            <Col xs={12} className='text-center'>
                <ButtonGroup>
                    <button className='btn btn-primary' onClick={handleEditClick}>
                        Edit
                    </button>

                    <ConfirmButton onClick={handleDeleteClick}>
                        <Trans>Delete</Trans>
                    </ConfirmButton>
                </ButtonGroup>
            </Col>
            <DeckSummary deck={deck} />
        </Panel>
    );
}

NetworkSwitcher = ({ network, onClick }) => {
  return (
    <ButtonGroup size="lg" className="mb-2">
      {SUPPORTED_NETWORKS.map(net => {
        return (
          <Button
            key={net}
            value={net}
            variant={net === network ? "secondary" : "outline-secondary"}
            size="sm"
            onClick={onClick}
          >
            {net}
          </Button>
        )
      })}
    </ButtonGroup>
  )
}

render() {
    const {searchInput, isAllActive, isV1Active, isV2Active, } = this.state;
    const {currentViewPoolType} = this.props;

    return (
      <div>
      <Row className="toolbar-row">
        <Col lg={2}>
              <div className="h5 page-header left-align-text">View pools</div>
        </Col>
        <Col lg={6}>
          <Form.Control type="text" placeholder="search by pool token name or symbol" onChange={this.searchInputChanged} value={searchInput}/>
          <FontAwesomeIcon icon={faSearch} className="search-icon"/>
        </Col>
        <Col lg={4}>
          <ButtonGroup aria-label="Basic example">
              <Button className={`explore-toolbar-btn ${isAllActive}`} onClick={()=>this.setPoolTypeSelected('all')}>All Pools</Button>
              <Button className={`explore-toolbar-btn ${isV1Active}`} onClick={()=>this.setPoolTypeSelected('v1')}>V1 Pools</Button>
              <Button className={`explore-toolbar-btn ${isV2Active}`} onClick={()=>this.setPoolTypeSelected('v2')}>V2 Pools</Button>
            </ButtonGroup>
        </Col>
      </Row>
      </div>
      
      )
  }

function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
    return (
        <ButtonGroup className="pull-right">
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.addTab'}/></Tooltip>}>
                <Button
                    className="pull-right"
                    onClick={onNewTab}
                ><span className="glyphicon glyphicon-plus"></span>
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                <ConfirmButton
                    className="pull-right"
                    confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
                    onClick={onTabDelete}>
                    <Glyphicon glyph="trash" />
                </ConfirmButton>
            </OverlayTrigger>
        </ButtonGroup>
    );
}

export default function({
    loading, valid, onClear = () => {}, onSearch = () => {}
}) {
    return (<ButtonGroup style={{ margin: "10px", "float": "right" }}>
        {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
        <Button
            onClick={onClear}
        ><Message msgId={'cadastrapp.search.clear'}/> </Button>
        <Button
            disabled={loading || !valid}
            bsStyle="primary"
            onClick={onSearch}
        ><Glyphicon glyph="search"/> <Message msgId={'cadastrapp.search.title'}/></Button>
    </ButtonGroup>);
}

render() {
    let icon;

    if (this.state.flashOn === true) {
      icon = (<FontAwesomeIcon icon={faLightbulb} style={{ color: 'white', fontSize: '1em'}} />);
    } else {
      icon = (<FontAwesomeIcon icon={faLightbulb} style={{ color: 'black', fontSize: '1em'}} />);
    }

    return (
      <Grid style={ styles.container }>
        <ButtonGroup >
          <Button style={styles.button} bsSize="small" bsStyle="success" onClick={this.startStream}>Start</Button>
          <Button style={styles.button} bsSize="small" bsStyle="danger" onClick={this.stopStream}>Stop</Button>
          <Button style={styles.button} bsSize="small" bsStyle="primary" onClick={this.captureStill}>Screenshot</Button>
          <Button style={{...styles.button, ...{ paddingLeft: 10, paddingRight: 10}}} bsSize="small" bsStyle="danger" onClick={this.toggleLed}>{icon}</Button>
        </ButtonGroup>
        <img style = {styles.image} src={this.state.imgSrc} alt="" />
      </Grid>
    );
  }

render() {
        const {isAdvancedActive, isBasicActive} = this.state;
        return (
            <div>
              <Row className="toolbar-row">
                <Col lg={4} xs={4}>
                  <div className="h5 page-header left-align-text">Explore and Swap Tokens</div>
                </Col>
                <Col lg={8} xs={8}>
                 <ButtonGroup className={`explore-tokens-toolbar-btngroup`}>
                  <Button className={`explore-toolbar-btn ${isAdvancedActive}`} onClick={this.advancedViewSelected}>
                    Advanced
                  </Button>
                  <Button className={`explore-toolbar-btn ${isBasicActive}`} onClick={this.basicViewSelected}>
                    Basic
                  </Button>
                 </ButtonGroup>
                </Col>
              </Row>
            </div>
            )
    }

render() {
    const {poolCreationHeader} = this.props;
    const {isV2Active, isV1Active} = this.state;
    return (
      <div>
        <Row className="toolbar-row">
          <Col lg={8} xs={8}>
            <div className="h5 page-header left-align-text">
              {poolCreationHeader}
            </div>
          </Col>
          <Col lg={4} xs={4}>
             <ButtonGroup className={`explore-tokens-toolbar-btngroup`}>
              <Button className={`explore-toolbar-btn ${isV2Active}`} onClick={this.v2PoolSelected}>
               V2 Pool
              </Button>             
              <Button className={`explore-toolbar-btn ${isV1Active}`} onClick={this.v1PoolSelected}>
                V1 Pool
              </Button>
             </ButtonGroup>
          </Col>
        </Row>
      </div>
      )
  }

export default function BuildingsButtons({
    setShowDescription = () => {},
    selected = [],
    data = [],
    dnubat,
    parcelle

}) {
    let [propertiesSelected, setPropertiesSelected] = useState(false);
    let [bundleSelected, setBundleSelected] = useState(false);

    const onPropertiesClick = () => {
        setBundleSelected(false);
        setPropertiesSelected(!propertiesSelected);
    };

    const onBundleClick = () => {
        setPropertiesSelected(false);
        setBundleSelected(!bundleSelected);
    };
    // auto close panel if no row has been selected
    useEffect(() => {
        if (selected.length === 0) {
            setPropertiesSelected(false);
        }
    }, [selected]);

    return (<>
        <ButtonGroup className="pull-right">
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.releve.depropriete'}/></Tooltip>}>
                <Button
                    disabled={selected.length === 0}
                    bsStyle={propertiesSelected ? "primary" : "default"}
                    onClick={onPropertiesClick}>
                    <Glyphicon glyph="th-list" />
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_descriptif'}/></Tooltip>}>
                <Button
                    onClick={() => setShowDescription(true)}
                    disabled={selected.length === 0}>
                    <Glyphicon glyph="info-sign" />
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_bundle'}/></Tooltip>}>
                <Button
                    bsStyle={bundleSelected ? "primary" : "default"}
                    onClick={onBundleClick}>
                    <Glyphicon glyph="compressed" /></Button>
            </OverlayTrigger>
        </ButtonGroup>
        <PropertiesRadio parcelle={parcelle} expanded={propertiesSelected} data={data} selected={selected} />
        <BundleRadio
            dnubat={dnubat}
            parcelle={parcelle}
            show={bundleSelected} />
    </>);
}

render() {
    const {pool: {currentSelectedPool}} = this.props;
    const {selectedTokenToAdd, selectedTokenToLiquidate, amountTokenToAdd, amountTokenToLiquidate} = this.state;
    const self = this;
    let reservesList = 
    <div>
    <ButtonGroup aria-label="Add Liquidity Token">{
    currentSelectedPool.reserves.map(function(item, idx){
    let btnIsActive = '';
    
    if (item.address === selectedTokenToAdd.address) {
      btnIsActive = 'active-select-btn';
    }

      return (<Button key={`add-liquidity-token-${idx}`} onClick={()=>self.addLiquidityTokenSelected(item)} className={`${btnIsActive}`}>
      {item.symbol}
      </Button>)
    })}
    </ButtonGroup>
    <InputGroup>
     <FormControl type="text" value={amountTokenToAdd}  onChange={this.addLiquidityAmountChanged}/>
      <InputGroup.Append>
        <InputGroup.Text id="btnGroupAddon2">{selectedTokenToAdd.symbol}</InputGroup.Text>
      </InputGroup.Append>
    </InputGroup>
    <Button onClick={this.addPoolLiquidity}>Add</Button>
    </div>;
    
    let removeLiquidityReserveList = 
    <div>
    <ButtonGroup aria-label="Remove liquidity token">{
    currentSelectedPool.reserves.map(function(item, idx){
    let btnIsActive = '';
    if (item.address === selectedTokenToLiquidate.address) {
      btnIsActive = 'active-select-btn';
    }
      return (<Button key={`remove-liquidity-token-${idx}`} onClick={()=>self.removeLiquidityTokenSelected(item)} className={`${btnIsActive}`}>
      {item.symbol}
      </Button>)
    })}
    </ButtonGroup>
    <InputGroup>
        <FormControl type="text" value={amountTokenToLiquidate} onChange={this.removeLiquidityAmountChanged}/>
        <InputGroup.Append>
        <InputGroup.Text id="btnGroupAddon2">{selectedTokenToLiquidate.symbol}</InputGroup.Text>
      </InputGroup.Append>
    </InputGroup>
    <Button onClick={this.removePoolLiquidity}>Remove</Button>
    </div>;
    
    return (
      <div>
      <Col lg={12}>
      <Row>
      <Col lg={6}>
      <div>
        Select Reserve to stake
        {reservesList}
      </div>
      </Col>
      <Col lg={6}>
        Remove Liquidity
         {removeLiquidityReserveList}
      </Col>
      </Row>
      </Col>
      </div>
      )
  }

render() {
    return (
      <Layout user={this.props.user}>
        {this.props.user ? (
          <UserPageComponent user={this.props.user} />
        ) : (
          <Container>
            <br />
            <Row>
              <Col md="5">
                <Jumbotron>
                  <ChartFormComponent
                    handleFormUpdate={this.handleFormUpdate.bind(this)}
                  />
                  <br />
                  <ButtonToolbar>
                    <ButtonGroup className="mr-2">
                      <Button
                        variant="secondary"
                        onClick={this.handleResetUpdate}
                      >
                        Reset
                      </Button>
                    </ButtonGroup>

                    <ButtonGroup className="mr-2">
                      <DropdownButton id="dropdown-item-button" title="Graphs">
                        <Dropdown.Item as="button" onClick={this.handleBar}>
                          Bar Graph
                        </Dropdown.Item>
                        <Dropdown.Item
                          as="button"
                          onClick={this.handlePieIncome}
                        >
                          Income Pie Chart
                        </Dropdown.Item>
                        <Dropdown.Item
                          as="button"
                          onClick={this.handlePieExpense}
                        >
                          Expenses Pie Chart
                        </Dropdown.Item>
                        <Dropdown.Item as="button" onClick={this.handleRadar}>
                          Expense Variance Chart
                        </Dropdown.Item>
                      </DropdownButton>
                    </ButtonGroup>
                  </ButtonToolbar>
                  <br />
                  <Form.Switch
                    checked={this.state.colorMode}
                    id="custom-switch"
                    label="Colorblind Mode"
                    onChange={this.handleSwitchChange}
                  />
                </Jumbotron>
              </Col>
              <Col md="7">
                <TableComponent
                  category={this.state.labels}
                  price={this.state.data}
                />
              </Col>
            </Row>

            <CardColumns>
              <Card
                border="none"
                style={
                  this.state.barActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handleBar={this.handleBar}
                  labels={this.state.labels}
                  data={this.state.data}
                  Component={"BarChart"}
                />
              </Card>
              <Card
                border="none"
                style={
                  this.state.incomePieActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handlePieIncome={this.handlePieIncome}
                  labels={this.state.labels}
                  data={this.state.data}
                  color={this.state.colorMode}
                  Component={"IncomePie"}
                />
              </Card>
              <Card
                style={
                  this.state.expensePieActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handlePieExpense={this.handlePieExpense}
                  labels={this.state.labels}
                  data={this.state.data}
                  color={this.state.colorMode}
                  Component={"ExpensePie"}
                />
              </Card>

              <Card
                style={
                  this.state.radarActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handleRadar={this.handleRadar}
                  labels={this.state.labels}
                  data={this.state.data}
                  Component={"RadarPie"}
                />
              </Card>
            </CardColumns>
          </Container>
        )}
      </Layout>
    );
  }

render() {
    return (
      <Container>
        {this.state.dataLoaded ? (
          <div>
            {this.state.dataFound ? (
              <div>
                <br />
                <Form.Row>
                  <Form.Group as={Col} md="2" controlId="Month">
                    <Form.Control
                      as="select"
                      name="Month"
                      onChange={this.handleChange}
                      value={this.state.selectMonth}
                    >
                      <option value="1">January</option>
                      <option value="2">February</option>
                      <option value="3">March</option>
                      <option value="4">April</option>
                      <option value="5">May</option>
                      <option value="6">June</option>
                      <option value="7">July</option>
                      <option value="8">August</option>
                      <option value="9">September</option>
                      <option value="10">October</option>
                      <option value="11">November</option>
                      <option value="12">December</option>
                    </Form.Control>
                  </Form.Group>
                  <Form.Group as={Col} md="2" controlId="Year">
                    <Form.Control
                      as="select"
                      name="Year"
                      onChange={this.handleChange2}
                      value={this.state.selectYear}
                    >
                      <option value="2020">2020</option>
                      <option value="2019">2019</option>
                      <option value="2018">2018</option>
                      <option value="2017">2017</option>
                      <option value="2016">2016</option>
                      <option value="2015">2015</option>
                      <option value="2014">2014</option>
                      <option value="2013">2013</option>
                      <option value="2012">2012</option>
                      <option value="2011">2011</option>
                      <option value="2010">2010</option>
                    </Form.Control>
                  </Form.Group>
                </Form.Row>
                {this.state.dataModify ? (
                  <div>
                    <Row>
                      <Col md="6">
                        <Jumbotron>
                          <UserPageUpdateComponent
                            user={this.props.user}
                            month={this.state.selectMonth}
                            year={this.state.selectYear}
                            update={this.update}
                            currData={this.state.data}
                          />
                          <br />
                          <Button onClick={this.cancelModifyBudget}>
                            Cancel
                          </Button>
                        </Jumbotron>
                      </Col>
                      <Col md="6">
                        <TableComponent
                          category={this.state.data.labels}
                          price={this.state.data.data}
                        />
                      </Col>
                    </Row>
                  </div>
                ) : (
                  <div>
                    <ButtonToolbar>
                      <ButtonGroup className="mr-2">
                        <Button variant="danger" onClick={this.deleteBudget}>
                          Delete Month's Finances
                        </Button>
                      </ButtonGroup>
                      <ButtonGroup className="mr-2">
                        <Button onClick={this.modifyBudget}>
                          Modify Month's Finances
                        </Button>
                      </ButtonGroup>
                      <ButtonGroup className="mr-2">
                        <DropdownButton
                          id="dropdown-item-button"
                          title="Graphs"
                        >
                          <Dropdown.Item as="button" onClick={this.handleBar}>
                            Bar Graph
                          </Dropdown.Item>
                          <Dropdown.Item
                            as="button"
                            onClick={this.handlePieIncome}
                          >
                            Income Pie Chart
                          </Dropdown.Item>
                          <Dropdown.Item
                            as="button"
                            onClick={this.handlePieExpense}
                          >
                            Expenses Pie Chart
                          </Dropdown.Item>
                          <Dropdown.Item
                            as="button"
                            onClick={this.handleBarGoals}
                          >
                            Goal Chart
                          </Dropdown.Item>
                          <Dropdown.Item as="button" onClick={this.handleRadar}>
                            Expense Variance Chart
                          </Dropdown.Item>
                        </DropdownButton>
                      </ButtonGroup>
                    </ButtonToolbar>
                    <Form.Switch
                      checked={this.state.colorMode}
                      id="custom-switch"
                      label="Colorblind Mode"
                      onChange={this.handleSwitchChange}
                    />
                    <br />
                    {this.state.showTable ? (
                      <div>
                        <Button onClick={this.toggleTable}>
                          Hide Finances Table
                        </Button>
                        <br />
                        <br />
                        <TableComponent
                          category={this.state.data.labels}
                          price={this.state.data.data}
                        />
                      </div>
                    ) : (
                      <div>
                        <Button onClick={this.toggleTable}>
                          Show Finances Table
                        </Button>
                        <br />
                        <br />
                      </div>
                    )}
                  </div>
                )}

                <CardColumns>
                  <Card
                    border="none"
                    style={
                      this.state.barActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handleBar={this.handleBar}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      Component={"BarChart"}
                    />
                  </Card>

                  <Card
                    border="none"
                    style={
                      this.state.incomePieActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handlePieIncome={this.handlePieIncome}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      color={this.state.colorMode}
                      Component={"IncomePie"}
                    />
                  </Card>

                  <Card
                    border="none"
                    style={
                      this.state.expensePieActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handlePieExpense={this.handlePieExpense}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      color={this.state.colorMode}
                      Component={"ExpensePie"}
                    />
                  </Card>

                  <Card
                    border="none"
                    style={
                      this.state.barGoalsPieActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handleBarGoals={this.handleBarGoals}
                      data={this.state.data.data}
                      goal={this.state.data.goal}
                      color={this.state.colorMode}
                      Component={"BarGoal"}
                    />
                  </Card>
                  <Card
                    style={
                      this.state.radarActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handleRadar={this.handleRadar}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      Component={"RadarPie"}
                    />
                  </Card>
                </CardColumns>
              </div>
            ) : (
              <div>
                <br />
                <Form.Row>
                  <Form.Group as={Col} md="2" controlId="Month2">
                    <Form.Control
                      as="select"
                      name="Month"
                      onChange={this.handleChange}
                      value={this.state.selectMonth}
                    >
                      <option value="1">January</option>
                      <option value="2">February</option>
                      <option value="3">March</option>
                      <option value="4">April</option>
                      <option value="5">May</option>
                      <option value="6">June</option>
                      <option value="7">July</option>
                      <option value="8">August</option>
                      <option value="9">September</option>
                      <option value="10">October</option>
                      <option value="11">November</option>
                      <option value="12">December</option>
                    </Form.Control>
                  </Form.Group>
                  <Form.Group as={Col} md="2" controlId="Year2">
                    <Form.Control
                      as="select"
                      name="Year"
                      onChange={this.handleChange2}
                      value={this.state.selectYear}
                    >
                      <option value="2020">2020</option>
                      <option value="2019">2019</option>
                      <option value="2018">2018</option>
                      <option value="2017">2017</option>
                      <option value="2016">2016</option>
                      <option value="2015">2015</option>
                      <option value="2014">2014</option>
                      <option value="2013">2013</option>
                      <option value="2012">2012</option>
                      <option value="2011">2011</option>
                      <option value="2010">2010</option>
                    </Form.Control>
                  </Form.Group>
                </Form.Row>

                <h3>No Data for this month :(</h3>
                <br />
                <h4>Would you like to add some?</h4>
                <Jumbotron>
                  <UserPageFormComponent
                    user={this.props.user}
                    month={this.state.selectMonth}
                    year={this.state.selectYear}
                    update={this.update}
                  />
                </Jumbotron>
              </div>
            )}
            <LineGraphComponent
              year={this.state.selectYear}
              user={this.props.user}
            />
          </div>
        ) : (
          <Spinner animation="border" variant="primary">
            <span className="sr-only">Loading...</span>
          </Spinner>
        )}
      </Container>
    );
  }

EditLayoutModal = props => {
  const [show, setShow] = useState(false);
  const handleClose = () => {
    setShow(false);
    setTimeout(() => {
      props.onClose();
    }, 500);
  };
  const handleShow = () => setShow(true);

  return (
    <>
      <Button onClick={handleShow} variant="outlined" color="primary">
        Edit Layout
      </Button>

      <Modal
        size="lg"
        show={show}
        onHide={handleClose}
        style={{ background: "rgba(0, 0, 0,0.5)" }}
      >
        <Modal.Header closeButton>
          <Modal.Title>Edit Layout</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Row>
            <Col lg={6}>
              <center>
                <h5>Layout options</h5>
              </center>
              <Table size="sm">
                <tbody>
                  {props.layoutOptions.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{item}</td>
                        <th style={{ textAlign: "right" }}>
                          <Button
                            variant="outlined"
                            color="primary"
                            size="small"
                            onClick={() => {
                              props.onAddLayoutItem(index);
                            }}
                          >
                            <Add fontSize="small"/>
                          </Button>
                        </th>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Col>
            <Col lg={6}>
              <center>
                <h5>Current Layout</h5>
              </center>
              <Table size="sm">
                <tbody>
                  {props.layout.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{item}</td>
                        <th style={{ textAlign: "right" }}>
                          <Button
                            variant="outlined"
                            color="secondary"
                            size="small"
                            onClick={() => {
                              props.onRemoveLayoutItem(index);
                            }}
                          >
                            <Remove fontSize="small"/>
                          </Button>
                          &nbsp;
                          <ButtonGroup>
                            <Button
                              size="small"
                              onClick={() => {
                                props.onMoveUp(index);
                              }}
                            >
                              <ArrowUpward fontSize="small"/>
                            </Button>
                            <Button
                              size="small"
                              onClick={() => {
                                props.onMoveDown(index);
                              }}
                            >
                              <ArrowDownward fontSize="small"/>
                            </Button>
                          </ButtonGroup>
                        </th>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Col>
          </Row>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose}>
            Close
          </Button>
          &emsp;
          <Button
            variant="outlined"
            color="primary"
            onClick={() => {
              setShow(false);
              props.onSaveLayout();
            }}
          >
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render() {

    const {baseReserveWeight, tokenArrayList, poolType, poolSymbolDefault, detailsVisible} = this.state;
    const { isError, pool: {relayConverterStatus}} = this.props;
    const {poolName, poolSymbol, poolDecimals} = this.state;

    const self = this;
    let isCreationStepPending = false;
    if (relayConverterStatus && relayConverterStatus.type === 'pending') {
      isCreationStepPending = true;
    }
    let relaySelectButton = '';
    let ercSelectButton = '';

    if (poolType === 'relay') {
      relaySelectButton = 'button-active';
      ercSelectButton = '';
    } else {
      ercSelectButton = 'button-active';
    }

    let tokenArrayListDisplay = tokenArrayList.map(function(item, idx){
      return <TokenFormRow key={`token-form-row-${idx}`} address={item.address}
      symbol={item.symbol} name={item.name}
      weight={item.weight ? item.weight : 0} idx={idx}
      weightChanged={self.weightChanged} addressChanged={self.addressChanged} getTokenDetail={self.getTokenNameAndSymbol}
      removeTokenRow={self.removeTokenRow} poolType={poolType}/>;
    });

    let relayTokenRow = <span/>;
    if (poolType === 'relay') {
      relayTokenRow = (
      <Row>
        <Col lg={8}>
        <Form.Group controlId="formBasicEmail">
         <Form.Label>Select network hub token.
           <OverlayTrigger
              placement="top"
              delay={{ show: 250, hide: 400 }}
              overlay={renderNetworkHubTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
            </Form.Label>
          <Form.Control as="select" onChange={this.baseReserveChanged} selected={this.baseReserveSelected}>
            <option>BNT</option>
            <option>USDB</option>
          </Form.Control>
        </Form.Group>
        </Col>
        <Col lg={4} className="no-pad-col">
          <div className="slidecontainer">
          <Row>
            <Col lg={8}>
            Token Reserve Ratio
           <OverlayTrigger
              placement="right"
              delay={{ show: 250, hide: 400 }}
              overlay={reserveRatioTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
            </Col>
            <Col lg={4}>
            <Form.Control type="number" value={baseReserveWeight} onChange={this.baseWeightValueChanged} className="amount-row"/>
            </Col>
            </Row>
            <input type="range" min="0" max="100" value={baseReserveWeight} className="slider"
            id="myRange" onChange={this.baseWeightValueChanged}/>
          </div>
        </Col>
        </Row>
        )
    }

function reserveRatioTooltip(props) {
   return <Tooltip {...props}>
    <div>
    Reserve ratio defines the ratio between the total value of the reserves & the market cap of the pool token.
    </div>
    <div>
    While most pools have a network hub token and a pool token kept in a 50/50 reserve ratio,
    </div>
    <div>
     You can also create pools with an array of reserves in any arbitrary reserve ratio.
    </div>
    <div>
    Provided the sum of all reserves is less than or equal to 100.
    </div>

    </Tooltip>;
}

function renderNameTooltip(props) {
  return <Tooltip {...props} className="wizard-tooltip">
    <div className="wizard-tooltip-text">
    <div>Pool name should be descriptive of the pool reserves to allow for easy searching and indexing.</div>
    <div>For instance, a pool name like Link Bat Smart Relay Token could refer to a pool with LINK, BAT, BNT in a 33/33/33 reserve ratio.</div>
    </div>
    </Tooltip>;
}


function renderSymbolTooltip(props) {
  return <Tooltip {...props} className="wizard-tooltip">
    <div className="wizard-tooltip-text">
    <div>Pool symbol should contain the symbols of pool reserves to allow for easy searching and indexing.</div>
    <div>For instance, a pool symbol like LINKBATBNT could refer to a pool with LINK, BAT, BNT in a 33/33/33 reserve ratio.</div>
    </div>
    </Tooltip>;
}

function renderDecimalTooltip(props) {
  return <Tooltip {...props} className="wizard-tooltip">
    <div className="wizard-tooltip-text">
    <div>Decimal precision of pool token.</div>
    <div>The standard is 18 for most ERC20 tokens.</div>
    <div>If you are unsure of what value to enter leave it at 18.</div>
    </div>
    </Tooltip>;
}

function renderNetworkHubTooltip(props) {
  return <Tooltip {...props}>
    <div>A network hub token is a token which allows interconversion of tokens between pools.</div>
    <div>For instance any token XXX can be converted to token YYY provided pool XXXBNT and YYYBNT exists.</div>
    <div>This is done by following a conversion path as XXX -> XXXBNT -> BNT -> YYYBNT -> YYY</div>
    </Tooltip>;
}
function renderFeeTooltip(props) {
  return <Tooltip {...props}>
    <div>Low fee will encourage more conversions whereas a higher fee will encourage more liquidity to the pool.</div>
    <div>Most pools follow a standard 0.1% conversion fees.</div>
    </Tooltip>;
}

function renderConvertibleTokenTooltip(props) {
  return <Tooltip {...props}>
    <div>Convertible tokens are ERC20 tokens </div>
    <div>which can be converted to other tokens in the pool</div>
    <div>or to other tokens via the intermediary network hub token.</div>
    <div>(provided pool contains at least 1 network hub token)</div>
    </Tooltip>;
}

    let isFormInComplete = true;
    if (poolName.length > 0 && poolSymbol.length > 0) {
      isFormInComplete = false;
    }

    let isSubmitBtnDisabled = isCreationStepPending || isFormInComplete;
    let numTransactions = tokenArrayList.length + 3;
    let transactionDetails = <span/>;
    if (detailsVisible) {
      transactionDetails = (
        <div>
          <div>1 transction for Pool token contract deployment.</div>
          <div>1 transaction for Pool converter deployment.</div>
          <div>1 transaction for setting pool conversion fees.</div>
          <div>{tokenArrayList.length} transactions for adding connectors for each of the ERC20 tokens</div>
        </div>
        )
    }
    return (
        <div className="create-pool-form-container">

        <div className="create-form-container">
          <Container className="add-pool-converter-form">
          <Row className="add-pool-form-header">
          <Col lg={6}>
          <div className="header">
            Pool Reserve Ratio<div className="help-link-text">
            <a href="https://katanapools.com/help/reserveratio" target="_blank">What is reserve ratio</a></div>
          </div>
          </Col>
          <Col lg={6} className="btn-toggle-container no-pad-col">
            <ButtonGroup aria-label="Basic example">
              <Button variant="primary" onClick={()=>this.togglePooltype("relay")} className={`toggle-btn ${relaySelectButton}`}>Require network hub token</Button>
              <Button variant="secondary" onClick={()=>this.togglePooltype("any")} className={`toggle-btn ${ercSelectButton}`}>Any ERC20 token</Button>
            </ButtonGroup>
          </Col>
        </Row>
        </Container>
        <Container className="add-pool-converter-form">
        <Form onSubmit={this.onSubmit}>
        {relayTokenRow}
        <div className="sub-form-header">
            Add convertible tokens
            <OverlayTrigger
              placement="top"
              delay={{ show: 250, hide: 400 }}
              overlay={renderConvertibleTokenTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
        </div>
        {tokenArrayListDisplay}
        <Button onClick={this.addReserveTokenRow} className="row-add-btn">Add another reserve token <FontAwesomeIcon icon={faPlus} /></Button>
          <Row className="add-pool-form-header pool-detail-header">
            <Col lg={6}>
            <div className="header">
              Pool Details
            </div>
            </Col>
          </Row>
        <Row>
          <Col lg={6}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>
              Pool Name
              <OverlayTrigger
                placement="top"
                delay={{ show: 250, hide: 400 }}
                overlay={renderNameTooltip}>
                <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
              </OverlayTrigger>
            </Form.Label>
            <Form.Control type="text" placeholder="name" onChange={this.formNameChanged} value={poolName}/>
            <Form.Text className="text-muted" >
              Enter the pool name eg. XXX Smart Relay Token
            </Form.Text>
          </Form.Group>
          </Col>
          <Col lg={6}>
          <Form.Group controlId="formBasicPassword">
            <Form.Label>Pool Symbol
                <OverlayTrigger
                placement="top"
                delay={{ show: 250, hide: 400 }}
                overlay={renderSymbolTooltip}>
                <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
              </OverlayTrigger>
              </Form.Label>
            <Form.Control type="text" placeholder="symbol" value={poolSymbol} onChange={this.formSymbolChanged} defaultValue={poolSymbolDefault}/>
            <Form.Text className="text-muted" >
              Enter the pool symbol eg. XXXYYY for pool with XXX and YYY.
            </Form.Text>
          </Form.Group>
          </Col>
        </Row>
        <Row>
        <Col lg={6} xs={12}>
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Pool Decimals
            <OverlayTrigger
              placement="top"
              delay={{ show: 250, hide: 400 }}
              overlay={renderDecimalTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
          </Form.Label>
          <Form.Control type="text" placeholder="decimals" value={poolDecimals} onChange={this.formDecimalsChanged}/>
        </Form.Group>
        </Col>
        </Row>
        <Row>
        <Col lg={4}>
        {isError ?

        <Button className="pool-wizard-submit-btn" type="submit" variant="primary">
          Resume
        </Button>
        :
        <Button variant="primary" disabled={isSubmitBtnDisabled} type="submit" className="pool-wizard-submit-btn">
          Next
        </Button>
        }
        </Col>
        <Col lg={8}>

        </Col>
        </Row>
      </Form>
        </Container>
        </div>
      </div>
    )
  }

Header = ({
  algorithm,
  animationSpeed,
  device,
  fenceToggle,
  ready,
  resizeGrid,
  resetFences,
  resetVisited,
  run: propRun,
  setAlgorithm,
  speed: propsSpeed,
  setNodeSize: propsNodeSize,
}) => {
  const mobile = device === "mobile";

  const [nodeSize, setNodeSize] = useState(defaultNodeSize);

  const [screenWidth, screenHeight] = getDimensions();
  const defaultDimensions = [
    maxFill(window.innerWidth, nodeSize),
    mobile ? maxFill(window.innerHeight, nodeSize) : screenHeight,
  ];
  const [maxDimensions, setMaxDimensions] = useState(defaultDimensions);

  const [maxWidth, maxHeight] = maxDimensions;

  // form value display
  const [width, setWidth] = useState(Math.ceil(screenWidth));
  const [height, setHeight] = useState(Math.ceil(screenHeight));
  const [speed, setSpeed] = useState(propsSpeed);

  // bootstrap
  const [show, setShow] = useState();
  const [expanded, setExpanded] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const collapseNav = () => setExpanded(false);

  const run = () => {
    if (algorithm === "") alert("Please select an algorithm");

    if (!ready)
      alert(
        "Please choose a start and finish point before running by clicking on the desired squares"
      );

    if (ready && algorithm) {
      if (mobile) {
        setTimeout(() => propRun(), 200);
        collapseNav();
        scroll.scrollToBottom({
          duration: 1200,
          delay: 100,
          smooth: true,
        });
      } else setTimeout(() => propRun(), 200);
    }
  };

  const nodeSizeHandler = (e) => {
    // for display
    setNodeSize(e.target.value);
    // for visualizer to change node inline style
    propsNodeSize(e.target.value);

    let [width, height] = getDimensions(e.target.value);

    resizeGrid([width, height]);
    setMaxDimensions([
      maxFill(window.innerWidth, nodeSize),
      mobile ? maxFill(window.innerWidth, e.target.value) : height,
    ]);
    setWidth(width);
    setHeight(height);
  };

  const gitHubImage = (
    <Image
      src="/images/github.png"
      className={"github-img"}
      alt={"Github"}
      fluid
    />
  );

  const linkedInImage = (
    <Image
      src="/images/linkedin.png"
      alt={"LinkedIn"}
      className={"linkedin-img"}
      fluid
    />
  );

  const algorithmDropdowns = algorithmInfo.map((alg, i) => {
    return (
      <OverlayTrigger
        key={i}
        trigger={["hover", "focus"]}
        placement={mobile ? "bottom" : "right"}
        overlay={
          <Popover id={`${alg.id}-popover`}>
            <Popover.Title as="h2" children={`${alg.name}`} />
            <Popover.Content>
              <p>
                <strong>{`${alg.header}`}</strong>
              </p>
              <p style={{ whiteSpace: "pre-line" }}>{`${alg.content}`}</p>
              <p>{`${alg.footer}`}</p>
            </Popover.Content>
          </Popover>
        }
      >
        <NavDropdown.Item
          id={`set-${alg.id}`}
          onClick={() => setAlgorithm(`${alg.name}`)}
          children={`${alg.name}`}
          active={algorithm === `${alg.name}`}
        />
      </OverlayTrigger>
    );
  });

  const howToUse = (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>How To Use</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Container>
          <Row>
            1. Place a start and end point by clicking on the grid! (You can
            remove them by clicking on them again)
          </Row>
          <Row>
            {" "}
            2. Then place fences by checking "Fence Mode" and clicking on the
            grid.{" "}
          </Row>
          <Row>3. Choose an algorithm via the "Algorithms" dropdown. </Row>
          <Row>4. Run it via pressing the green "Run Algorithm" button. </Row>
          <Row>5. Enjoy!</Row>
        </Container>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );

  const settings = (
    <DropdownButton title="Settings" size="sm" variant="dark">
      <Container variant="dark">
        <Row>
          <Form variant="dark" inline>
            <Col>
              Node Size
              <FormControl
                size="sm"
                type="text"
                placeholder={`Currently ${nodeSize})`}
                onChange={(e) => {
                  setNodeSize(e.target.value);
                }}
              />
              <Form.Control
                type="range"
                size="sm"
                min="10"
                max="100"
                value={nodeSize}
                onChange={nodeSizeHandler}
                custom
              />
              Grid Size
              <FormControl
                size="sm"
                type="text"
                placeholder={`Width (Currently ${width})`}
                onChange={(e) => {
                  setWidth(e.target.value);
                }}
              />
              <Form.Control
                type="range"
                size="sm"
                min="1"
                max={maxWidth}
                value={width}
                onChange={(e) => {
                  setWidth(e.target.value);
                  resizeGrid([e.target.value, height]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <FormControl
                type="text"
                size="sm"
                placeholder={`Height (Currently ${height})`}
                onChange={(e) => {
                  setHeight(e.target.value);
                }}
                className="Row-Input"
              />
              <Form.Control
                type="range"
                min="1"
                max={maxHeight}
                value={height}
                onChange={(e) => {
                  setHeight(e.target.value);
                  resizeGrid([width, e.target.value]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <Form.Label children={"Draw Square"} />
              <Form.Control
                type="range"
                size="sm"
                min="1"
                max={mobile ? maxWidth : maxHeight}
                value={(height, width)}
                onChange={(e) => {
                  setWidth(e.target.value);
                  setHeight(e.target.value);
                  resizeGrid([e.target.value, e.target.value]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <Form.Label children={"Animation Speed"} />
              <Form.Control
                type="range"
                min="1"
                max="5"
                value={speed}
                onChange={(e) => {
                  setSpeed(e.target.value);
                  animationSpeed(e.target.value);
                }}
                custom
              />
            </Col>
          </Form>
        </Row>
      </Container>
    </DropdownButton>
  );

  const contactInfo = (
    <DropdownButton title=" Contact The Creators" size="sm" id="contact-info">
      <Container>
        <Row>
          <NavDropdown.Item id={"bassel"} children={"Bassel"} />
          <a
            className={"image-link"}
            href="https://github.com/basselalsayed"
            children={gitHubImage}
          />
          <a
            className={"image-link"}
            href="https://www.linkedin.com/in/bsas/"
            children={linkedInImage}
          />
        </Row>
        <Row>
          <NavDropdown.Item id={"tom"} children={"Tom"} />
          <a
            className={"image-link"}
            href="https://github.com/Walker-TW"
            children={gitHubImage}
          />
          <a
            className={"image-link"}
            href="https://www.linkedin.com/in/thomas-w-walker"
            children={linkedInImage}
          />
        </Row>
      </Container>
    </DropdownButton>
  );

  return (
    <Navbar
      expanded={expanded}
      expand="lg"
      bg="dark"
      variant="dark"
      collapseOnSelect
    >
      <Navbar.Brand
        href="https://github.com/Walker-TW/Algorithm-Visualizer"
        children={"Algo-Visualiser"}
      />
      <Navbar.Toggle
        onClick={() => setExpanded(expanded ? false : "lg")}
        aria-controls="responsive-navbar-nav"
      />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Container fluid>
          <Col md={{ span: 2 }}>
            <Nav className="mr-auto">
              <NavDropdown title="Algorithms" id="collapsible-nav-dropdown">
                {algorithmDropdowns}
              </NavDropdown>
            </Nav>
          </Col>
          <Col md={{ span: 4 }}>
            <Nav>
              <Button
                id="info-btn"
                style={{ border: "2px solid cyan", color: "cyan" }}
                variant="dark"
                children={"How To Use"}
                onClick={handleShow}
              />
              {howToUse}
              <Button
                id="run-btn"
                style={{ border: "2px solid chartreuse", color: "chartreuse" }}
                variant="dark"
                onClick={run}
                children={
                  algorithm
                    ? `Let's Run ${algorithm}`
                    : "Please Select Algorithm"
                }
                disabled={!ready || algorithm === ""}
              />
              <Dropdown as={ButtonGroup}>
                <Button
                  id="reset-btn"
                  variant="dark"
                  style={{ border: "2px solid red", color: "red" }}
                  children={"Reset Visited"}
                  onClick={resetVisited}
                />
                <Dropdown.Toggle
                  split
                  variant="dark"
                  style={{ border: "2px solid red", color: "red" }}
                  id="dropdown-custom-2"
                />
                <Dropdown.Menu>
                  <Dropdown.Item
                    id="fence-reset-btn"
                    onClick={resetFences}
                    variant="dark"
                    children={"Reset Fences"}
                  />
                </Dropdown.Menu>
              </Dropdown>
            </Nav>
          </Col>
          <Col md={{ span: 4 }}>
            <Nav navbar="true">
              <Container>
                <Form inline>
                  <Form.Check
                    type="switch"
                    id="fence-check"
                    name="fences"
                    label="Fence mode"
                    style={{ color: "white" }}
                    onChange={fenceToggle}
                  />
                </Form>
              </Container>
              {settings}
              {contactInfo}
            </Nav>
          </Col>
        </Container>
      </Navbar.Collapse>
    </Navbar>
  );
}

RCreateForm = () => {
  const [formValues, setFormValues] = useState([
    { label: "", value: "", type: "text", min: "", max: "", required: false },
  ]);
  const [isSwitchOn, setIsSwitchOn] = useState(false);
  const [show, setShow] = useState(false);
  const [title, setTitle] = useState("Form Title");

  async function addForm() {
    const toPost = {
      title: title,
      formQs: formValues,
    };
    let path = getStrapiURL();

    try {
      const sendForm = await fetch(`${path}/forms`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(toPost),
      });

      if (sendForm.ok) {
        return sendForm;
      }
    } catch (error) {
      console.log("Error" + error);
    }
  }

  let handleChange = (e, i) => {
    let newFormValues = [...formValues];
    newFormValues[i][e.target.name] = e.target.value;
    setFormValues(newFormValues);
  };

  let addFormFields = () => {
    setFormValues([
      ...formValues,
      { label: "", value: "", type: "text", min: "", max: "", required: false },
    ]);
  };

  let removeFormFields = (i) => {
    let newFormValues = [...formValues];
    newFormValues.splice(i, 1);
    setFormValues(newFormValues);
  };

  let handleSubmit = (event) => {
    event.preventDefault();
    setShow(true);
    addForm();
  };

  const handleSelect = (e, i) => {
    let newFormValues = [...formValues];
    newFormValues[i][e.target.name] = e.target.value;
    setFormValues(newFormValues);
  };

  const handleSwitch = (e, i) => {
    let newFormValues = [...formValues];
    newFormValues[i][e.target.name] = !isSwitchOn;
    setFormValues(newFormValues);
    setIsSwitchOn(!isSwitchOn);
  };

  const handleClose = () => {
    setShow(false);
    setFormValues([
      { label: "", value: "", type: "text", min: "", max: "", required: false },
    ]);
  };

  const handleTitle = (e) => {
    setTitle(e);
  };

  return (
    <Card className={styles.createCard}>
      <Card.Title>
        <div
          suppressContentEditableWarning={true}
          contentEditable={true}
          className={styles.formTitle}
          onInput={(e) => handleTitle(e.currentTarget.textContent)}
        >
          {title}
        </div>
      </Card.Title>
      <Card.Body>
        <Card.Subtitle className="mb-2 text-muted">Required</Card.Subtitle>
        <form onSubmit={handleSubmit}>
          {formValues.map((element, index) => (
            <div className={styles.formRow} key={index}>
              <InputGroup>
                <Form.Check
                  type="switch"
                  name="required"
                  id="custom-switch"
                  inline={true}
                  className={styles.radio}
                  onChange={(e) => handleSwitch(e, index)}
                />

                <Form.Select
                  className={styles.select}
                  name="type"
                  onChange={(e) => handleSelect(e, index)}
                  value={element.type}
                  aria-label="Default select example"
                >
                  <option value="text">Text</option>
                  <option value="number">Number</option>
                  <option value="email">E-mail</option>
                </Form.Select>
                <FormControl
                  required
                  aria-label="Text input with dropdown button"
                  name="value"
                  type="text"
                  placeholder="Enter the question"
                  onChange={(e) => handleChange(e, index)}
                />
                {element.type == "number" && (
                  <FormControl
                    required
                    aria-label="Min. Value"
                    name="min"
                    type="number"
                    placeholder="Min. Value"
                    onChange={(e) => handleChange(e, index)}
                  />
                )}
                {element.type == "number" && (
                  <FormControl
                    required
                    aria-label="Max. Value"
                    name="max"
                    type="number"
                    placeholder="Max. Value"
                    onChange={(e) => handleChange(e, index)}
                  />
                )}

                {index ? (
                  <Button
                    onClick={() => removeFormFields(index)}
                    variant="danger"
                    id="button-addon1"
                  >
                    <MdDeleteOutline />
                  </Button>
                ) : null}
              </InputGroup>
            </div>
          ))}
          <ButtonGroup className={styles.submitGroup} aria-label="Card buttons">
            <Button variant="light" onClick={() => addFormFields()}>
              Add
            </Button>
            <Button color="#0083ffd4" variant="success" type="submit">
              Generate
            </Button>
          </ButtonGroup>
        </form>
      </Card.Body>
      <ShowForm
        formVal={formValues}
        show={show}
        title={title}
        handleClose={handleClose}
      />
    </Card>
  );
}

Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => {
  const apiRef = useRef();
  const [logItems, updateLog] = useState([]);
  const [knockingParticipants, updateKnockingParticipants] = useState([]);
  const [mute, setMute] = useState(true);
  const [name, setName] = useState(null);
  const dataArr = [
    { speaker: "A", hour: "10" },
    { speaker: "B", hour: "20" },
    { speaker: "C", hour: "30" },
    { speaker: "D", hour: "40" },
    { speaker: "Z", hour: "50" },
  ];

  const handleDisplayName = async (hr) => {
    const tar = dataArr.find((o) => o.hour === hr);
    if (!tar || tar.speaker == name) {
      return;
    }
    setName(tar.speaker);
    await apiRef.current.executeCommand("displayName", tar.speaker);
  };

  useEffect(() => {
    setInterval(() => {
      const tada = new Date();
      handleDisplayName(tada.getHours().toString());
    }, 900000);
  }, []);

  const printEventOutput = (payload) => {
    updateLog((items) => [...items, JSON.stringify(payload)]);
  };

  const handleAudioStatusChange = (payload, feature) => {
    if (payload.muted) {
      updateLog((items) => [...items, `${feature} off`]);
    } else {
      updateLog((items) => [...items, `${feature} on`]);
    }
  };

  const handleChatUpdates = (payload, ref) => {
    if (payload.isOpen || !payload.unreadCount) {
      return;
    }
    ref.current.executeCommand("toggleChat");
    updateLog((items) => [
      ...items,
      `you have ${payload.unreadCount} unread messages`,
    ]);
  };

  const handleKnockingParticipant = (payload) => {
    updateLog((items) => [...items, JSON.stringify(payload)]);
    updateKnockingParticipants((participants) => [
      ...participants,
      payload?.participant,
    ]);
  };

  const resolveKnockingParticipants = (ref, condition) => {
    knockingParticipants.forEach((participant) => {
      ref.current.executeCommand(
        "answerKnockingParticipant",
        participant?.id,
        condition(participant)
      );
      updateKnockingParticipants((participants) =>
        participants.filter((item) => item.id === participant.id)
      );
    });
  };

  const handleJitsiIFrameRef1 = (iframeRef) => {
    iframeRef.style.border = "10px solid cadetblue";
    iframeRef.style.background = "cadetblue";
    iframeRef.style.height = "25em";
    iframeRef.style.width = "75%";
  };

  const showDevices = async (ref) => {
    const videoInputs = [];
    // get all available video input
    const devices = await ref.current.getAvailableDevices();

    for (const [key, value] of Object.entries(devices)) {
      if (key == "videoInput") {
        value.forEach((vid) => {
          videoInputs.push(vid.label);
        });
      }
    }
    // log for debug
    updateLog((items) => [...items, JSON.stringify(videoInputs)]);

    let nextDevice = "";
    let devs = await ref.current.getCurrentDevices();

    for (const [key, value] of Object.entries(devs)) {
      if (key == "videoInput") {
        updateLog((items) => [...items, "found " + JSON.stringify(value)]);
        let devLabel = value.label;
        let idx = 0;
        videoInputs.forEach((vid) => {
          if (devLabel == vid) {
            let cur = idx + 1;
            if (cur >= videoInputs.length) {
              nextDevice = videoInputs[0];
            } else {
              nextDevice = videoInputs[cur];
              updateLog((items) => [...items, "next is " + nextDevice]);
            }
          }
          idx++;
        });
      }
    }
    updateLog((items) => [...items, "switching to " + nextDevice]);

    await ref.current.setVideoInputDevice(nextDevice);
  };

  const showAudioOutDevices = async (ref) => {
    const audioOutputs = [];
    // get all available audio output
    const devices = await ref.current.getAvailableDevices();

    for (const [key, value] of Object.entries(devices)) {
      if (key == "audioOutput") {
        value.forEach((vid) => {
          audioOutputs.push(vid.label);
        });
      }
    }
    // log for debug
    updateLog((items) => [...items, JSON.stringify(audioOutputs)]);

    let nextDevice = "";
    let devs = await ref.current.getCurrentDevices();

    for (const [key, value] of Object.entries(devs)) {
      if (key == "audioOutput") {
        updateLog((items) => [...items, "found " + JSON.stringify(value)]);
        let devLabel = value.label;
        let idx = 0;
        audioOutputs.forEach((vid) => {
          if (devLabel == vid) {
            let cur = idx + 1;
            if (cur >= audioOutputs.length) {
              nextDevice = audioOutputs[0];
            } else {
              nextDevice = audioOutputs[cur];
              updateLog((items) => [...items, "next is " + nextDevice]);
            }
          }
          idx++;
        });
      }
    }
    updateLog((items) => [...items, "switching to " + nextDevice]);

    await ref.current.setAudioOutputDevice(nextDevice);
  };

  const showAudioDevice = async (ref) => {
    const audioInputs = [];
    // get all available audio input
    const devices = await ref.current.getAvailableDevices();

    for (const [key, value] of Object.entries(devices)) {
      if (key == "audioInput") {
        value.forEach((vid) => {
          audioInputs.push(vid.label);
        });
      }
    }
    // log for debug
    updateLog((items) => [...items, JSON.stringify(audioInputs)]);

    let nextDevice = "";
    let devs = await ref.current.getCurrentDevices();

    for (const [key, value] of Object.entries(devs)) {
      if (key == "audioInput") {
        updateLog((items) => [...items, "found " + JSON.stringify(value)]);
        let devLabel = value.label;
        let idx = 0;
        audioInputs.forEach((vid) => {
          if (devLabel == vid) {
            let cur = idx + 1;
            if (cur >= audioInputs.length) {
              nextDevice = audioInputs[0];
            } else {
              nextDevice = audioInputs[cur];
              updateLog((items) => [...items, "next is " + nextDevice]);
            }
          }
          idx++;
        });
      }
    }
    updateLog((items) => [...items, "switching to " + nextDevice]);
    await ref.current.setAudioInputDevice(nextDevice);
  };

  const handleApiReady = async (apiObj, ref) => {
    ref.current = apiObj;
    await ref.current.addEventListeners({
      // Listening to events from the external API
      audioMuteStatusChanged: (payload) =>
        handleAudioStatusChange(payload, "audio"),
      videoMuteStatusChanged: (payload) =>
        handleAudioStatusChange(payload, "video"),
      raiseHandUpdated: printEventOutput,
      tileViewChanged: printEventOutput,
      chatUpdated: (payload) => handleChatUpdates(payload, ref),
      knockingParticipant: handleKnockingParticipant,
    });

    await ref.current.executeCommand("toggleFilmStrip");
  };

  // Multiple instances demo
  const showUsers = async (ref, which) => {
    try {
      const pinfo = await ref.current.getParticipantsInfo();
      updateLog((items) => [
        ...items,
        "participantes " + JSON.stringify(pinfo),
      ]);
      await ref.current.executeCommand("setTileView", false);
      await ref.current.setLargeVideoParticipant(pinfo[which].participantId);
    } catch (e) {
      console.error("Participant not found!");
      return;
    }
  };

  const makeTile = (ref) => {
    ref.current.executeCommand("setTileView", true);
  };

  const renderStream = (key) => (
    <div className={styles.streamButton}>
      <ButtonGroup className="m-auto">
        <Button
          variant="warning"
          title="Click to start streaming"
          onClick={() =>
            apiRef.current.executeCommand("startRecording", {
              mode: "stream",
              rtmpStreamKey: key,
              youtubeStreamKey: "",
            })
          }
        >
          Go live!
        </Button>
      </ButtonGroup>
    </div>
  );

  const toggleDevice = () => (
    <div className={styles.device}>
      <Button disabled variant="light">
        <AiFillSetting size={20} />
      </Button>
      <ButtonGroup vertical className="m-auto">
        <OverlayTrigger
          overlay={<Tooltip id="tooltip-disabled">Microphone Device</Tooltip>}
        >
          <Button
            title="Click to switch audio devices"
            onClick={() => showAudioDevice(apiRef)}
          >
            <RiMic2Line size={20} />
          </Button>
        </OverlayTrigger>
        <OverlayTrigger
          overlay={<Tooltip id="tooltip-disabled">Camera Device</Tooltip>}
        >
          <Button
            title="Click to switch video devices"
            onClick={() => showDevices(apiRef)}
          >
            <MdCameraswitch size={20} />
          </Button>
        </OverlayTrigger>
        <OverlayTrigger
          overlay={<Tooltip id="tooltip-disabled">Audio Device</Tooltip>}
        >
          <Button
            title="Click to switch audio devices"
            onClick={() => showAudioOutDevices(apiRef)}
          >
            <MdHeadset size={20} />
          </Button>
        </OverlayTrigger>
      </ButtonGroup>
    </div>
  );

  const toggleView = () => (
    <div className={styles.view}>
      <Button variant="light" disabled>
        <AiFillEye size={20} />
      </Button>
      <ButtonGroup vertical className="m-auto">
        <OverlayTrigger
          overlay={<Tooltip id="tooltip-disabled">Tile View</Tooltip>}
        >
          <Button
            variant="secondary"
            onClick={() => makeTile(apiRef)}
            title="Click to toggle tile view"
          >
            <HiViewGridAdd size={20} />
          </Button>
        </OverlayTrigger>
        <OverlayTrigger
          overlay={<Tooltip id="tooltip-disabled">First User</Tooltip>}
        >
          <Button onClick={() => showUsers(apiRef, 0)} variant="secondary">
            <BiUserPin size={20} />
          </Button>
        </OverlayTrigger>
        <OverlayTrigger
          overlay={<Tooltip id="tooltip-disabled">Second User</Tooltip>}
        >
          <Button onClick={() => showUsers(apiRef, 1)} variant="secondary">
            <FiUsers size={20} />
          </Button>
        </OverlayTrigger>
      </ButtonGroup>
    </div>
  );

  const toolButton = () => (
    <div className={styles.deviceButton}>
      <ButtonGroup className="m-auto">
        <Button
          variant="success"
          title="Click to toogle audio"
          onClick={() => {
            apiRef.current.executeCommand("toggleAudio");
            setMute(!mute);
          }}
        >
          {mute ? <BiMicrophoneOff /> : <BiMicrophone />}
        </Button>
        <DropdownButton variant="danger" as={ButtonGroup} title="End">
          <Dropdown.Item
            as="button"
            onClick={() => apiRef.current.executeCommand("hangup")}
          >
            Leave Meet
          </Dropdown.Item>
          <Dropdown.Item
            variant="danger"
            as="button"
            onClick={() => apiRef.current.stopRecording("stream")}
          >
            End for everyone!
          </Dropdown.Item>
        </DropdownButton>
        <Button color="#f5455c" onClick={handleChat}>
          <FaRocketchat />
        </Button>
      </ButtonGroup>
    </div>
  );

  const renderLog = () =>
    logItems.map((item, index) => (
      <div
        style={{
          fontFamily: "monospace",
          padding: "5px",
        }}
        key={index}
      >
        {item}
      </div>
    ));

  const renderSpinner = () => (
    <div
      style={{
        fontFamily: "sans-serif",
        textAlign: "center",
      }}
    >
      Loading..
    </div>
  );

  return (
    <>
      {rtmp ? renderStream(rtmp) : rtmpSrc && renderStream(rtmpSrc)}
      <div className={styles.jitsiContainer}>
        {toggleDevice()}

        <JitsiMeeting
          domain="meet.jit.si"
          roomName={room}
          spinner={renderSpinner}
          onApiReady={(externalApi) => handleApiReady(externalApi, apiRef)}
          getIFrameRef={handleJitsiIFrameRef1}
          configOverwrite={{
            startWithAudioMuted: true,
            disableModeratorIndicator: true,
            startScreenSharing: false,
            enableEmailInStats: false,
            toolbarButtons: [],
            enableWelcomePage: false,
            prejoinPageEnabled: false,
            startWithVideoMuted: false,
            liveStreamingEnabled: true,
            disableSelfView: false,
            disableSelfViewSettings: true,
            disableShortcuts: true,
            disable1On1Mode: true,
            p2p: {
              enabled: false,
            },
          }}
          interfaceConfigOverwrite={{
            DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
            FILM_STRIP_MAX_HEIGHT: 0,
            TILE_VIEW_MAX_COLUMNS: 0,
            VIDEO_QUALITY_LABEL_DISABLED: true,
          }}
          userInfo={{
            displayName: disName,
          }}
        />
        {toggleView()}
      </div>
      {toolButton()}
      <div className={styles.log}>{renderLog()}</div>
    </>
  );
}

render() {
    return (
      <div>
        <div className="page-header">
          <h3 className="page-title">
            Dropdowns
          </h3>
          <nav aria-label="breadcrumb">
            <ol className="breadcrumb">
              <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>UI Elements</a></li>
              <li className="breadcrumb-item active" aria-current="page">Dropdowns</li>
            </ol>
          </nav>
        </div>
        <div className="row">
          <div className="col-lg-12 grid-margin">
            <div className="card">
              <div className="card-body">
                <h4 className="card-title">Gradient Dropdown</h4>
                <p className="card-description">
                  Add class <code>.btn-gradient-&#123;color&#125;</code> to the button inside <code>.dropdown</code>
                </p>
                <div className="template-demo">
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-gradient-primary" id="dropdownMenuOutlineButton1">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-gradient-secondary" id="dropdownMenuOutlineButton2">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-gradient-danger" id="dropdownMenuOutlineButton3">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-gradient-warning" id="dropdownMenuOutlineButton4">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-gradient-success" id="dropdownMenuOutlineButton5">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-gradient-info" id="dropdownMenuOutlineButton6">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
              </div>
              <div className="card-body">
                <h4 className="card-title">Basic dropdown</h4>
                <p className="card-description">
                  Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>
                </p>
                <div className="template-demo">
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-primary" id="dropdownMenuButton1">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-secondary" id="dropdownMenuButton2">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-danger" id="dropdownMenuButton3">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-warning" id="dropdownMenuButton4">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-success" id="dropdownMenuButton5">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-info" id="dropdownMenuButton6">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
              </div>
              <div className="card-body">
                <h4 className="card-title">Dropdown outline</h4>
                <p className="card-description">
                  Add class <code>.btn-outline-&#123;color&#125;</code> to the button inside <code>.dropdown</code>
                </p>
                <div className="template-demo">
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-outline-primary" id="dropdownMenuOutlineButton1">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-outline-secondary" id="dropdownMenuOutlineButton2">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-outline-danger" id="dropdownMenuOutlineButton3">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-outline-warning" id="dropdownMenuOutlineButton4">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-outline-success" id="dropdownMenuOutlineButton5">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-outline-info" id="dropdownMenuOutlineButton6">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-6 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
                <h4 className="card-title">Split button dropdowns</h4>
                <p className="card-description">
                  Wrap two buttons in <code>.btn-group</code> and add <code>.dropdown-toggle-split</code> to the toggling button
                </p>
                <div className="template-demo">
                  <Dropdown as={ButtonGroup}>
                    <button type="button" className="btn btn-primary">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-primary dropdown-toggle-split" id="dropdownMenuSplitButton1">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown as={ButtonGroup}>
                    <button type="button" className="btn btn-danger">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-danger dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton2">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown as={ButtonGroup}>
                    <button type="button" className="btn btn-success">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-success dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton3">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown as={ButtonGroup}>
                    <button type="button" className="btn btn-secondary">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton4">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown as={ButtonGroup}>
                    <button type="button" className="btn btn-info">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-info dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton5">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown as={ButtonGroup}>
                    <button type="button" className="btn btn-warning">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-warning dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton6">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-6 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
                <h4 className="card-title">Icon dropdowns</h4>
                <p className="card-description">
                  Add icon tags instead of text
                </p>
                <div className="row">
                  <div className="col-12">
                    <div className="template-demo d-flex flex-wrap justify-content-between">
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-warning" id="dropdownMenuIconButton1">
                          <i className="mdi mdi-earth"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-danger" id="dropdownMenuIconButton2">
                          <i className="mdi mdi-trophy-outline"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-outline-info" id="dropdownMenuIconButton3">
                          <i className="mdi mdi-clock"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-success" id="dropdownMenuIconButton4">
                          <i className="mdi mdi-heart"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-warning" id="dropdownMenuIconButton5">
                          <i className="mdi mdi-logout"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-primary" id="dropdownMenuIconButton6">
                          <i className="mdi mdi-security"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-dark" id="dropdownMenuIconButton7">
                          <i className="mdi mdi-account"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-info" id="dropdownMenuIconButton8">
                          <i className="mdi mdi-bell"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                      <Dropdown>
                        <Dropdown.Toggle variant="btn btn-gradient-success" id="dropdownMenuIconButton7">
                          <i className="mdi mdi-account"></i>
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                          <Dropdown.Header>Settings</Dropdown.Header>
                          <Dropdown.Item>Action</Dropdown.Item>
                          <Dropdown.Item>Another action</Dropdown.Item>
                          <Dropdown.Item>Something else here</Dropdown.Item>
                          <Dropdown.Divider></Dropdown.Divider>
                          <Dropdown.Item>Separated link</Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-6 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
                <h4 className="card-title">Dropup variation</h4>
                <p className="card-description">
                  Add class <code>.dropup</code>
                </p>
                <div className="template-demo">
                  <Dropdown drop="up" as={ButtonGroup}>
                    <button type="button" className="btn btn-primary">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-primary" id="dropupMenuSplitButton1">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown drop="up" as={ButtonGroup}>
                    <button type="button" className="btn btn-danger">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-danger" id="dropupMenuSplitButton2">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown drop="up" as={ButtonGroup}>
                    <button type="button" className="btn btn-success">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-success" id="dropupMenuSplitButton3">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown drop="up" as={ButtonGroup}>
                    <button type="button" className="btn btn-secondary">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-secondary" id="dropupMenuSplitButton4">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown drop="up" as={ButtonGroup}>
                    <button type="button" className="btn btn-info">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-info" id="dropupMenuSplitButton5">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown drop="up" as={ButtonGroup}>
                    <button type="button" className="btn btn-warning">Dropdown</button>
                    <Dropdown.Toggle variant="btn btn-warning" id="dropupMenuSplitButton6">
                      <span className="sr-only">Toggle Dropdown</span>
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-6 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
                <h4 className="card-title">Dropdown sizes</h4>
                <p className="card-description">
                  Add class <code>.btn-&#123;size&#125;</code> to dropdown buttons
                </p>
                <div className="template-demo mt-5">
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-danger btn-lg" id="dropdownMenuSizeButton1">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-danger" id="dropdownMenuSizeButton2">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                  <Dropdown>
                    <Dropdown.Toggle variant="btn btn-danger btn-sm" id="dropdownMenuSizeButton3">
                      Dropdown
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Header>Settings</Dropdown.Header>
                      <Dropdown.Item>Action</Dropdown.Item>
                      <Dropdown.Item>Another action</Dropdown.Item>
                      <Dropdown.Item>Something else here</Dropdown.Item>
                      <Dropdown.Divider></Dropdown.Divider>
                      <Dropdown.Item>Separated link</Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

export default function CreateClass() {
        const [show, setShow] = useState(false);
      
        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);

        const [formState, setFormState] = useState({
            className:'',
            classDescription:'',
            classCost:'',
            classEquipment:'',
            miami:false,
            la:false,
            ny:false,
            cardio:false,
            weights:false,
            crossFit:false,
            classSize:'',
            classLength:'',
            easy:false,
            medium:false,
            hard:false,
            classArrivalTime:'',
            classKnowledge:'',
            startTime:'',
            endTime:'',
            sunday:false,
            monday:false,
            tuesday:false,
            wednesday:false,
            thurday:false,
            friday:false,
            saturday:false,
            sunday:false
        })

        const changeHandelerString = (event) => {
            setFormState({
                ...formState, 
                [event.target.name]:event.target.value
            })
        }

        const changeHandelerBool = (event) => {
            setFormState({
                ...formState,
                [event.target.name]:event.target.checked
            })
        }

        const submitHandeler = (event) => {
            event.preventDefault();
            console.log(`
            Class Name:${formState.className},
            Class Description:${formState.classDescription},
            Cost:${formState.classCost},
            Class Equipment:${formState.classEquipment},
            Location: Miami - ${formState.miami}; New York - ${formState.ny}; Los Angeles - ${formState.la},
            Type: Cardio - ${formState.cardio}; Weights - ${formState.weights}; Cross Fit - ${formState.crossFit},
            Class Size:${formState.classSize},
            Class Length:${formState.classLength},
            Mode: Easy - ${formState.easy}; Medium - ${formState.medium}; Hard - ${formState.hard}
            Arrival Time: ${formState.classArrivalTime},
            What to Know: ${formState.classKnowledge},
            Class Time: Start Time ${formState.startTime} - End Time ${formState.endTime},
            Class Day(s): Monday: ${formState.monday} ;Tuesday: ${formState.tuesday} ;Wednesday: ${formState.wednesday} ;Thursday: ${formState.thursday} ;Friday: ${formState.friday} ;Saturday: ${formState.saturday} ;Sunday: ${formState.sunday}
            `)
            setFormState({
                className:'',
                classDescription:'',
                classCost:'',
                classEquipment:'',
                miami:false,
                la:false,
                ny:false,
                cardio:false,
                weights:false,
                crossFit:false,
                classSize:'',
                classLength:'',
                easy:false,
                medium:false,
                hard:false,
                classArrivalTime:'',
                classKnowledge:'',
                startTime:'',
                endTime:'',
                sunday:false,
                monday:false,
                tuesday:false,
                wednesday:false,
                thurday:false,
                friday:false,
                saturday:false,
                sunday:false
            })
        }
      
        return (
          <div style={{margin:'auto 5rem'}}>
            <button style={{backgroundColor:'#FF6900', border:'none', outline:'none',color:'black'}} onClick={handleShow}>
              Create a Class
            </button>
            
            <Modal show={show} onHide={handleClose} dialogClassName='modal-container' size='lg'>
                <Modal.Header closeButton >
                    <Modal.Title>Create a Class</Modal.Title>
                </Modal.Header>
                <Form onSubmit={submitHandeler}>
                    <Modal.Body dialogClassName='modal-body'>
    
                        <Form.Group controlId="className" style={{paddingLeft:'5%'}}>
                            <label htmlFor='className'>Class Name</label>
                            <Form.Control onChange={changeHandelerString} name='className' value={formState.className} type="name" style={{width:'50%'}}  />                    
                        </Form.Group>
    
                        <Form.Group controlId="classDescription" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classDescription'>Class Description</label>
                            <Form.Control onChange={changeHandelerString} name='classDescription' value={formState.classDescription} type="text" style={{width:'50%', height:'7.5rem'}}  />                    
                        </Form.Group>
    
                        <Form.Group controlId="classCost" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classCost'>Cost of Class</label>
                            <Form.Control onChange={changeHandelerString} name='classCost' value={formState.classCost} type="text" style={{width:'50%'}}  />                    
                        </Form.Group>
    
                        <Form.Group controlId="classEquipment" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classEquipment'>Class Equipment Requirements</label>
                            <Form.Control onChange={changeHandelerString} name='classEquipment' value={formState.classEquipment} type="text" style={{width:'50%', height:'3.5rem'}}  />                    
                        </Form.Group> 
    
                        <Form.Group controlId="classAddress" style={{paddingLeft:'5%' ,width:'25%'}}>
                            <label htmlFor='classAddress'>Class Address</label>
                                <Form.Control onChange={changeHandelerBool} as='select' name='cities' value={formState.cities}>
                                    <option name='miami' value='miami'>Miami, FL</option>
                                    <option name='la' value='la' >Los Angeles, CA</option>
                                    <option name='ny' value='ny' >New York, NY</option>
                                </Form.Control>                 
                        </Form.Group>     
    
                        <Form.Group controlId="classType" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classType'>Class Type</label>
                            <Dropdown>
                                <Dropdown.Toggle style={{backgroundColor:'#FF6900', border:'none', outline:'0'}} id="dropdown-basic">
                                    Type
                                </Dropdown.Toggle>
    
                                <Dropdown.Menu>
                                    <Dropdown.Item onSelect={changeHandelerBool} name='cardio' value={formState.cardio} >Cardio</Dropdown.Item>
                                    <Dropdown.Item onChange={changeHandelerBool} name='weights' value={formState.weights} >Weight Training</Dropdown.Item>
                                    <Dropdown.Item onChange={changeHandelerBool} name='crossFit' value={formState.crossFit} >Cross Fit</Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown>                   
                        </Form.Group>
    
                        <Form.Group controlId="classSize" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classSize'>Class Size</label>
                            <Form.Control onChange={changeHandelerString} name='classSize' value={formState.classSize} type="text" style={{width:'15%'}}  />                    
                        </Form.Group>
    
                        <Form.Group controlId="classLength" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classLength'>Class Length(in minutes)</label>
                            <Form.Control onChange={changeHandelerString} name='classLength' value={formState.classLength} type="number" style={{width:'25%'}}  />                    
                        </Form.Group>
    
                        <Form.Group controlId="classLevel" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classLevel'>Class Type</label>
                            <Dropdown>
                                <Dropdown.Toggle style={{backgroundColor:'#FF6900', border:'none'}} id="dropdown-basic">
                                    Class Level
                                </Dropdown.Toggle>
    
                                <Dropdown.Menu>
                                    <Dropdown.Item onChange={changeHandelerBool} name='easy' value={formState.easy} >Easy</Dropdown.Item>
                                    <Dropdown.Item onChange={changeHandelerBool} name='medium' value={formState.medium} >Medium</Dropdown.Item>
                                    <Dropdown.Item onChange={changeHandelerBool} name='hard' value={formState.hard} >Hard</Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown>                   
                        </Form.Group>
    
                        <Form.Group controlId="classArrivalTime" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classArrivalTime'>When to Arrive</label>
                            <Form.Control onChange={changeHandelerString} name='classArrivalTime' value={formState.classArrivalTime} type="text" style={{width:'35%', height:'3.5rem'}}  />                    
                        </Form.Group>
    
                        <Form.Group controlId="classKnowledge" style={{paddingLeft:'5%'}}>
                            <label htmlFor='classKnowledge'>What You Need to Know</label>
                            <Form.Control onChange={changeHandelerString} name='classKnowledge' value={formState.classKnowledge} type="text" style={{width:'35%', height:'6rem'}}  />                    
                        </Form.Group>
    
                        <Form style={{paddingLeft:'5%'}}>
                            <label htmlFor='classTime'>Class Time</label>
                            <Form.Row name='classTime'>
                                <Form.Control onChange={changeHandelerString} type="text" name='startTime' value={formState.startTime} style={{width:'20%', marginRight:'1rem' }} placeholder="Start Time" />
                                <h6 style={{margin:'auto 0'}}> to </h6>
                                <Form.Control onChange={changeHandelerString} type='text' name='endTime' value={formState.endTime} style={{width:'20%', marginLeft:'1rem'}} placeholder="End Time" />
                            </Form.Row>
                        </Form>
    
                        <Form style={{paddingLeft:'5%', marginTop:'1rem'}}>
                            <label>Class Day(s)</label>
                            <ButtonGroup aria-label="Basic example">
                                <Button onChange={changeHandelerBool} name='sunday' value={formState.sunday} style={{fontSize:'.8rem',margin:'auto', backgroundColor:'#FF6900'}} variant="secondary">Sunday</Button>
                                <Button onChange={changeHandelerBool} name='monday' value={formState.monday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Monday</Button>
                                <Button onChange={changeHandelerBool} name='tuesday' value={formState.tuesday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Tuesday</Button>
                                <Button onChange={changeHandelerBool} name='wednesday' value={formState.wednesday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Wednesday</Button>
                                <Button onChange={changeHandelerBool} name='thursday' value={formState.thursday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Thursday</Button>
                                <Button onChange={changeHandelerBool} name='friday' value={formState.friday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Friday</Button>
                                <Button onChange={changeHandelerBool} name='saturday' value={formState.saturday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Saturday</Button>
                            </ButtonGroup>
                        </Form>
    
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onSubmit={submitHandeler} type='submit' style={{backgroundColor:'#FF6900', border:'none'}} onClick={handleClose}>
                        Create Class
                        </Button>
                    </Modal.Footer>
                </Form>
            </Modal>
          </div>
        );
    }