react-bootstrap#FormControl JavaScript Examples

FieldGroup = ({ id, label, help, error, ...props }) => {
    return (
        <FormGroup controlId={id} validationState={error ? 'error' : null}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl {...props} />
            {help && <HelpBlock>{help}</HelpBlock>}
            {error && <div className="alert alert-danger">{error}</div>}
        </FormGroup>
    );
}

Input = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className} style={inputStyle}>
        {props.title}
      </FormLabel>
      <FormControl
        isInvalid={props.errors && errorsArr}
        type={props.type}
        id={props.name}
        name={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.handleChange}
      />

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}

TextAreaInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>
      <FormControl
        isInvalid={props.errors && errorsArr}
        type={props.type}
        as={props.as}
        rows={3}
        id={props.name}
        name={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.handleChange}
      />

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}

enterUsername() {
    return (
      <div>
        <Form onSubmit={this.handleLogin}>
          <InputGroup>
            <FormControl
              ref={input => {
                this.usernameInput = input;
              }}
              placeholder="Enter your alias here"
              name="username"
              aria-label="username"
              aria-describedby="text"
              onChange={this.handleUsernameChange}
            />
            <InputGroup.Append>
              <Button>Submit</Button>
            </InputGroup.Append>
          </InputGroup>
        </Form>
      </div>
    );
  }

function InputText(props) {
  return (
    <InputGroup className={props.style}>
      <InputGroup.Prepend>
        <InputGroup.Text id={props.id}>{props.name}</InputGroup.Text>
      </InputGroup.Prepend>
      <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        placeholder={props.placeholder}
      />
    </InputGroup>
  );
}

SelectFieldGroup = ({ id, label, options, help, error, ...props }) => {
    return (
        <FormGroup controlId={id} validationState={error ? 'error' : null}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl componentClass="select"  {...props}>
                {options.map(option=>{
                    return <option key={option.value} value={option.value}>{option.text}</option>;
                })}
            </FormControl>
            {help && <HelpBlock>{help}</HelpBlock>}
            {error && <div className="alert alert-danger">{error}</div>}
        </FormGroup>
    );
}

render() {
    return (
      <Navbar.Form>
        <Form onSubmit={this.handleSubmit}>
          <FormGroup style={formGroupStyle}>
            <FormControl
              type="text"
              name="email"
              placeholder="Email"
              onChange={this.handleInputChange}
            />
            <FormControl
              type="password"
              name="password"
              placeholder="Password"
              onChange={this.handleInputChange}
              style={passwordStyle}
            />
            <Button type="submit" bsStyle="success" style={logInButtonStyle}>
              LOGIN
            </Button>
          </FormGroup>
        </Form>
      </Navbar.Form>
    );
  }

export function StrList({items = [], onAdd, onRemove, onSetValue}) {

    return (
        <>
            <div style={{ width: "100%", "float": "left" }}>

                <Button
                    onClick={() => onAdd()}
                    className="pull-left">
                    <Glyphicon glyph="plus"/>

                </Button>
                <span
                    style={{ marginLeft: 6, marginTop: 4 }}
                    className="pull-left"><Message msgId={'cadastrapp.proprietaire.proprietaires.addMoreProprietaire'}/>
                </span>
            </div>
            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "auto" }}>
                {items.map((v, index) => (
                    <div style={{ width: "100%", "float": "left" }}>
                        <FormControl
                            value={v}
                            className="pull-left"
                            style={{ width: 240, marginTop: 5, marginRight: 5 }}
                            onChange={e => onSetValue(index, e.target.value)}
                        />
                        <Button
                            style={{ marginTop: 5, marginRight: 5 }}
                            className="pull-right"
                            onClick={() => onRemove(index)}
                        >
                            <Glyphicon glyph="trash"/>
                        </Button>
                    </div>
                ))}
            </div>
        </>
    );
}

createNewFolderExample = props => {
	return <div>
		<h5 className={'mb-0'}>Create new folder</h5>
		<div>To create folder we need URI of parent folder</div>
		<div>For this example we'll use metadataRoot folder's details above</div>
		<code>createNewFolder(parentUri, folderName, options)</code>
		<div>
			<label className={'mr-2'}>parentFolderUri:</label><span className={'comment'}>{props.state.folderDetails ?
			Utils.getSelfUri(props.state.folderDetails.links) :
			<Button
				bsstyle={'btn-sm btn-primary mr-2'}
				onClick={props.getFolderDetails}>Get
			</Button>}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						type={'text'}
						placeholder={'folderName'}
						value={props.state.newFolder}
						onChange={e => props.setState({newFolder: e.target.value})}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<Button
					bsstyle={'btn btn-primary mr-2 btn-loading'}
					onClick={props.createNewFolder}
					disabled={!props.state.folderDetails || !props.state.newFolder || props.state.creatingNewFolder}
				>
					{props.state.creatingNewFolder && <i className={'fas fa-spinner fa-spin'}/>} Create
				</Button>
			</Col>
		</Row>
		<hr/>
	</div>
}

SearchTokenInput = ({ value, onChange, inputRef }) => {
  return (
    <div className="mt-1 flex flex-row w-100">
      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Text className="search-icon border-right-0">
            <BsSearch />
          </InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl
          ref={inputRef}
          placeholder="Search"
          className={'shadow-none border-left-0 search-box'}
          value={value}
          onChange={onChange}
        />
      </InputGroup>
    </div>
  );
}

render() {

    return (
      <div style={{...styles.container}}>
        <Col mdHidden styles={styles.toolbarColumn} md={12} >
          <Row xs={12}>
            <Col xs={2}>
              {this.renderConnectButton()}
            </Col>
            <Col xs={3}>
              <FormControl
                type="text"
                value={this.state.ipAddress}
                placeholder="Enter IP Address"
                onChange={this.handleChange}
                disabled={this.props.isConnected}
              />
            </Col>
            <Col xs={3}>
              <Button
                bsStyle='primary'
                onClick={this.props.onModeSwitch}
                >
                <FontAwesomeIcon icon={faGamepad} style={styles.toolbarIcon} />
              </Button>
            </Col>
          </Row>
        </Col>
      </div>
    );
  }

export default function CoownershipSearch({ loading, onSearch = () => { }, onOwnersSearch = () => {} }) {
    const [searchState, setFormState, resetFormState] = useFormState();
    const values = searchState[SEARCH_TYPES.COOWNER];
    const setValue = (k, v) => setFormState(SEARCH_TYPES.COOWNER, k, v);
    return (
        <div className="coownership-search">
            <h3><Message msgId={'cadastrapp.search.copropriete.title'}/></h3>
            <div style={{padding: "10px", height: 242}}>
                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.parcelle.city'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                        <div className="text-muted"><Message msgId={'cadastrapp.parcelle.cityExample'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.proprietaire.name.title'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <ProprietaireCombo
                            value={values?.proprietaire}
                            disabled={!values?.commune}
                            cgocommune={values?.commune?.cgocommune}
                            onSelect={v => setValue('proprietaire', v)}
                            onChange={v => setValue('proprietaire', v)}
                        />
                        <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.name.example'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.search.copropriete.parcelle.ident'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <FormControl value={values?.parcelle ?? ""} onChange={e => setValue('parcelle', e.target.value)} type="text" bsSize="sm"/>
                        <div className="text-muted"><Message msgId={'cadastrapp.parcelle.ident.example'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.search.copropriete.comptecommunal.ident'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <FormControl value={values?.comptecommunal ?? ""} onChange={e => setValue('comptecommunal', e.target.value)} type="text" bsSize="sm"/>
                        <div className="text-muted"><Message msgId={'cadastrapp.search.copropriete.comptecommunal.example'}/></div>
                    </div>
                </div>
            </div>
            <SearchButtons
                loading={loading}
                valid={isSearchValid(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER])}
                onClear={() => resetFormState(SEARCH_TYPES.COOWNER)}
                onSearch={() => {
                    if (isString(searchState[SEARCH_TYPES.COOWNER]?.proprietaire) && !values?.parcelle) {
                        onOwnersSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
                    } else {
                        // plot search
                        onSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
                    }
                }}/>
        </div>
    );
}

SearchBar = () => {
  const [animeName, setAnimeName] = useState("");

  const handleChange = (event) => {
    setAnimeName(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // directing to a new page, that is routed to cards' component
    window.location = `/anime/cards/${animeName}`;
  };

  const onClick = (event) => {
    event.preventDefault();
    window.location = "/";
  };

  return (
    <div className={styles.container}>
      <Navbar className={styles.nav}>
        <span className={styles.span} onClick={onClick}>
          Anime Tracker App
        </span>
        <div className={styles.searchBar}>
          <Form inline onSubmit={handleSubmit}>
            <FormControl
              onChange={handleChange}
              type="text"
              placeholder="Anime"
              className=" mr-sm-2"
            />
            <Button className={styles.button} type="submit">
              Enter
            </Button>
          </Form>
        </div>
      </Navbar>
    </div>
  );
}

export default function Lot({ values = {}, setValue = () => {}}) {
    const onDrop = files => {
        setValue('parcelle', undefined); // mutual exclusion
        setValue("file", files[0]);
    };
    const removeFile = (event) => {
        setValue("file", undefined);
        event.stopPropagation();
        event.preventDefault();
    };
    const setParcelle = (parcelle) => {
        setValue("file", undefined); // mutual exclusion
        setValue('parcelle', parcelle);
    };
    const fileName = values.file?.name;
    // const dropMessage = "Drag and drop the CSV file here or click to select";
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.lot.title'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl componentClassName="textarea"
                    type="text" bsSize="sm" value={values?.parcelle ?? ""} onChange={v => setParcelle(v.target.value)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.lot.example'}/></div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel/>
            </div>
            <div className="form-col">
                <div style={{ textAlign: "center" }} className="text-muted">or</div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.file.title'}/></ControlLabel>
            </div>
            <div className="form-col" style={{position: 'relative'}}>
                <DropZone
                    accept={["text/csv", "text/plain", ".csv"]}
                    style={dropZoneStyle}
                    activeStyle={dropZoneActiveStyle}
                    multiple={false}
                    onDrop={onDrop}>
                    {fileName ? <span><Glyphicon glyph="remove" onClick={removeFile} /> {fileName} </span> : <Message msgId={'cadastrapp.parcelle.file.example'}/>}
                </DropZone>
                <div
                    style={{ width: "100%", "float": "left" }}
                    className="text-muted"><Message msgId={'cadastrapp.parcelle.file.explanation'}/></div>
            </div>
        </div>
    </>);
}

export default function Address({values, setValue = () => {}}) {
    useEffect(()=> {isEmpty(values) && setValue('dindic', '');}, [values]);
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.city'}/></ControlLabel>
            </div>
            <div className="form-col">
                <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.cityExample'}/></div>
            </div>
        </div>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.town'}/></ControlLabel>
            </div>
            <div className="form-col">
                <RoadCombo value={values?.road} disabled={!values?.commune} cgocommune={values?.commune?.cgocommune} onSelect={v => setValue('road', v)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.townExample'}/></div>
            </div>
        </div>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.street'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl value={values?.dnvoiri ?? ""} style={{ height: 34, width: 100, "float": "left" }} type="text" bsSize="sm" onChange={v => setValue('dnvoiri', v.target.value)}/>
                <div className="pull-left">
                    <DropdownList
                        style={{ width: 100, marginLeft: 5 }}
                        valueField="value"
                        textField="label"
                        value={values?.dindic}
                        onSelect={(v) => {
                            setValue('dindic', v.value);
                        }}
                        data={options}
                    />
                </div>
                <div style={{ "float": "left", marginLeft: 5, marginTop: 5 }} className="text-muted "><Message msgId={'cadastrapp.parcelle.streetExample'}/></div>
            </div>
        </div>
    </>);
}

AppSearchField = () => {
  const { chain } = useContext(Store);
  const [value, setValue] = useState('');
  const history = useHistory();

  useEffect(() => {
    setValue('');
  }, [chain]);

  const handleSearch = async (event) => {
    event.preventDefault();
    const target = value.trim().toLocaleLowerCase();
    const reg = new RegExp(chain, 'gi');

    if (target.length === 64) {
      const resp = await API.getTransactionDetails(target);
      if (resp.data.hash) {
        history.push(`/${chain.value}/transaction/${target}`, resp.data);
        setValue('');
      }
    } else if (
      reg.test(target) &&
      target.replace(chain.value, '').length === 39
    ) {
      const resp = await API.getAccountDetails(target);

      history.push(`/${chain.value}/account/${target}`, resp.data);
      setValue('');
    } else if (Number(target)) {
      const resp = await API.getBlockDetails(target);

      if (resp.data.hash) {
        history.push(`/${chain.value}/block/${target}`, resp.data);
        setValue('');
      }
    }
  };

  return (
    <SearchFieldStyled>
      <Container>
        <Form onSubmit={handleSearch}>
          <InputGroup className="mt-2 mb-2">
            <Btn type="submit">
              <FontAwesomeIcon icon={['fa', 'search']} />
            </Btn>
            <FormControl
              placeholder="Search by Address, TxHash, Block Height"
              aria-label="Username"
              aria-describedby="basic-addon1"
              // onChange={handleSearch}
              onChange={(e) => setValue(e.target.value)}
              value={value}
            />
            {value && (
              <Btn onClick={() => setValue('')}>
                <FontAwesomeIcon icon={['fa', 'times']} />
              </Btn>
            )}
          </InputGroup>
        </Form>
      </Container>
    </SearchFieldStyled>
  );
}

render() {

        const {tokens: {convertibleTokens, fromPathListWithRate, toPathListWithRate, fromPathLoading, toPathLoading}} = this.props;

        const {selectedFromIdx, selectedToIdx, searchFromToken, searchToToken, fromConvertibleTokens,
        toConvertibleTokens, fromToken, toToken} = this.state;

        const self = this;
        let fromTokenSelector = <span/>;
        let toTokenSelector = <span/>;
        if (convertibleTokens && convertibleTokens.length > 0) {
        fromTokenSelector = <div>
        
        <FormControl type="text" placeHolder="Search" value={searchFromToken} onChange={this.searchFromTokenChanged}/>
         <ListGroup className="token-selector-list">
        {fromConvertibleTokens.map(function(item, idx){
            let itemActive = "";
            if (idx === selectedFromIdx) {
                itemActive = "cell-active";
            }
            let itemName =  item.name.length > 10 ? item.name.substr(0, 10) + "..." :  item.name;
            return (<ListGroupItem key={`from-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.fromTokenChanged.bind(self, idx)}>
            <div>
            <img src={item.imageURI} className="symbol-image"/>
            <div className="item-symbol">{item.symbol}</div>
            </div>
            <div className="">
               {itemName}
            </div>
            </ListGroupItem>)
        })}
        </ListGroup>
        </div>;

         toTokenSelector = <div>
        <FormControl type="text" placeHolder="Search" value={searchToToken} onChange={this.searchToTokenChanged}/>
         <ListGroup className="token-selector-list">{toConvertibleTokens.map(function(item, idx){
            let itemActive = "";
            if (idx === selectedToIdx) {
                itemActive = "cell-active";
            }
            let itemName =  item.name.length > 10 ? item.name.substr(0, 10) + "..." :  item.name;
            return (<ListGroupItem key={`to-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.toTokenChanged.bind(self, idx)}>
            <div>
            <img src={item.imageURI} className="symbol-image"/>
            <div className="item-symbol">{item.symbol}</div>
            </div>
            <div>
               {itemName}
            </div>
            </ListGroupItem>)
        })}</ListGroup>
        </div>
        }

        return (
             <Row className="explore-token-container">
             <Col lg={2} xs={2} className="left-list-group">
               {fromTokenSelector}
             </Col>
             <Col lg={8} xs={8} className="explore-paths-container">
               <ViewPaths
               fromToken={fromToken} toToken={toToken} fromPathLoading={fromPathLoading} toPathLoading={toPathLoading}
               fromPathListWithRate={fromPathListWithRate}
               toPathListWithRate={toPathListWithRate} transferAmountChanged={this.transferAmountChanged}
               submitSwap={this.props.submitSwap} setProviderNotification={this.props.setProviderNotification}/>
             </Col>
             <Col lg={2} xs={2} style={{'paddingLeft': 0}} className="right-list-group">
                {toTokenSelector}
             </Col>
            </Row>
            )
    }

function SocialModal() {
	return (
		<Social>
			<Container>
				<SocialIcons>
					<Icon label='github'>
						<AiOutlineGithub size={35} />
						<CustomLink href='https://github.com/pranjaljain0' target='_blank'>
							@pranjaljain0
						</CustomLink>
					</Icon>
					<Icon label='linkedin'>
						<AiOutlineLinkedin size={35} />
						<CustomLink
							href='https://www.linkedin.com/in/pranjaljain0/'
							target='_blank'>
							@pranjaljain0
						</CustomLink>
					</Icon>
				</SocialIcons>

				<InputGroup className='mb-3'>
					<FormControl
						placeholder='Full name'
						aria-label='Name'
						aria-describedby='basic-addon1'
					/>
				</InputGroup>

				<InputGroup className='mb-3'>
					<FormControl
						placeholder='Email address'
						aria-label='Email'
						aria-describedby='basic-addon1'
					/>
				</InputGroup>

				<InputGroup>
					<FormControl
						as='textarea'
						aria-label='With textarea'
						placeholder='Write some description'
						style={{
							resize: 'none',
							height: 100,
						}}
					/>
				</InputGroup>

				<ButtonForm>
					<Button variant='outline-secondary' className='float-right'>
						Submit
					</Button>
				</ButtonForm>
			</Container>
		</Social>
	)
}

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>
      )
  }

DropDownInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>

      <FormControl
        isInvalid={props.errors && errorsArr}
        as={props.as}
        id={props.name}
        name={props.name}
        value={props.value}
        onChange={props.handleChange}
        multiple={props.multiple && "multiple"}
      >
        {!props.multiple && (
          <option value="" disabled>
            Select
          </option>
        )}
        {props.options.map((option) => {
          return (
            <option key={option.id} value={option.name}>
              {option.name}
            </option>
          );
        })}
      </FormControl>

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}

ContentUpgradeLayout = ({
    onClick,
    libraries,
    showConfirm,
    onConfirm,
    upgradeComplete,
    onToggleConfirm,
    onUndoUpgrade,
    percentProgress,
    inProgress,
    translations,
    selectedLibraryId,
}) => {
    return (
        <div className="upgradeVersionContainer">
            {(upgradeComplete !== true && inProgress !== true) && (
                <>
                    <FormGroup controlId="formControlsSelect">
                        <FormControl
                            componentClass="select"
                            onChange={onClick}
                            value={selectedLibraryId}
                        >
                            <option value="">{translations.selectVersion}</option>
                            {libraries.map((library, index) => {
                                return (
                                    <option key={index} value={library.id}>{library.version}</option>
                                );
                            })}
                        </FormControl>
                    </FormGroup>
                    <ModalWindow
                        show={showConfirm}
                        onHide={onToggleConfirm}
                        header={
                            <div>
                                {translations.confirmation}
                            </div>
                        }
                        footer={
                            <div>
                                <Button onClick={onConfirm} bsStyle="success">
                                    {translations.yes}
                                </Button>
                                <Button onClick={onToggleConfirm} bsStyle="danger">
                                    {translations.no}
                                </Button>
                            </div>
                        }
                    >
                        {translations.upgradeConfirmation}
                    </ModalWindow>
                </>
            )}
            {(inProgress === true || upgradeComplete === true) && (
                <>
                    <ControlLabel>{translations.progress}</ControlLabel>
                    <ProgressBar
                        now={percentProgress}
                        label={`${percentProgress}%`}
                    />
                </>
            )}
            {upgradeComplete === true && (
                <div className="contentupgrade-complete">
                    <div>{translations.undoTextHTML}</div>
                    <Button
                        bsStyle="danger"
                        onClick={onUndoUpgrade}
                    >
                        {translations.undo}
                    </Button>
                </div>
            )}
        </div>
    );
}

export function TopShotNav() {
  const [error, setError] = useState(null)
  const [accountAddress, setAccountAddress] = useState("")
  const [seriesSets, setSeriesSets] = useState(null)
  useEffect(() => {
    getTopshotOverview()
      .then((d) => {
        console.log(d)
        setSeriesSets(splitSets(d.sets))
      })
      .catch(setError)
  }, [])
  return (
    <Navbar bg="dark" variant="dark" expand="md" sticky="top">
      <Navbar.Brand href="/">
        {error ? <Red>Topshot Explorer</Red> : "Topshot Explorer"}
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/plays">Plays</Nav.Link>
          {seriesSets && Object.entries(seriesSets).map(
            ([series, sets],i) => {
              return (
                <NavDropdown key={series} title={`s${series} sets`} id="basic-nav-dropdown">
                {sets.map((s) => {
                    return (
                      <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                        {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                      </NavDropdown.Item>
                    )
                  })}
              </NavDropdown>
                  )
            }
          )
          }
          {/* <NavDropdown title="Sets" id="basic-nav-dropdown">
            {topshotOverview &&
              topshotOverview.sets.map((s) => {
                return (
                  <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                    {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                  </NavDropdown.Item>
                )
              })}
          </NavDropdown> */}
        </Nav>
        <Form inline>
          <FormControl
            type="text"
            placeholder="0xAccountID"
            onChange={(event) => {
              setAccountAddress(event.target.value)
            }}
            className="mr-sm-2"
          />
          <Button variant="outline-success" href={"/account/" + accountAddress}>
            Get Account
          </Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  )
}

render() {
    const { roomId } = this.state;

    return (
      <div>
        <h2>Create New Room</h2>
        <Form onSubmit={this.handleSubmit}>
          <InputGroup>
            <FormControl
              readOnly
              name="roomId"
              value={roomId}
              aria-label="roomId"
              aria-describedby="text"
            />
          </InputGroup>
          <br />
          <h6>Add password to keep it exclusive</h6>
          <InputGroup>
            <FormControl
              ref={input => {
                this.roomIdInput = input;
              }}
              placeholder="Optional: Enter room password"
              name="password"
              aria-label="password"
              aria-describedby="password"
              onChange={this.handleDataChange}
            />
          </InputGroup>
          <br />
          <br />
          <h4>Game Settings</h4>
          <br />
          <h6>Max Time per chance </h6>
          <InputGroup>
            <FormControl
              type="number"
              placeholder="Default: 120"
              name="max-timer-limit"
              aria-label="max-timer-limit"
              aria-describedby="max-timer-limit"
              onChange={this.handleDataChange}
            />
            <InputGroup.Append>
              <InputGroup.Text id="time-prefiz">seconds</InputGroup.Text>
            </InputGroup.Append>
          </InputGroup>
          <br />
          <h6>Max Players Per Team</h6>
          <InputGroup>
            <FormControl
              type="number"
              placeholder="Default: 14"
              name="max-players-limit"
              aria-label="max-players-limit"
              aria-describedby="max-players-limit"
              onChange={this.handleDataChange}
            />
            <InputGroup.Append>
              <InputGroup.Text id="players-prefix">players</InputGroup.Text>
            </InputGroup.Append>
          </InputGroup>
          <br />
          <InputGroup>
            <InputGroup.Append>
              <Button variant="light" type="submit">
                Create
              </Button>
            </InputGroup.Append>
          </InputGroup>
        </Form>
      </div>
    );
  }

render() {
    return (
      <div>
        <h2>Enter Room ID</h2>
        <div>
          <Form onSubmit={this.handleSubmit}>
            <InputGroup>
              <FormControl
                ref={input => {
                  this.roomIdInput = input;
                }}
                placeholder="Enter the RoomID here"
                aria-label="roomId"
                name="roomId"
                aria-describedby="text"
                onChange={this.handleDataChange}
              />
            </InputGroup>
            <br />
            Leave blank if no password
            <InputGroup>
              <FormControl
                placeholder="Enter room password"
                name="password"
                aria-label="password"
                aria-describedby="password"
                onChange={this.handleDataChange}
              />
            </InputGroup>
            <br />
            <InputGroup>
              <InputGroup.Append>
                <Button variant="light" type="submit">
                  Join
                </Button>
              </InputGroup.Append>
            </InputGroup>
          </Form>
        </div>
      </div>
    );
  }

Home = () => (
  <>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Comfortaa"
    />
    <div style={globalFont}>
      <section style={titleSection}>
        <img src={gourmetLogo} style={headerLogoStyle} alt="Gourmet Inc Logo" />
        <h1 style={headwelcome}>
          Welcome to the Gourmet Inc. Promotions Manager Website
        </h1>
      </section>
      <section style={servicesSection}>
        <Grid style={servicesGrid}>
          <Row style={servicesTitle}>
            <h2 style={servicesGridH2}>Services:</h2>
            <h2 style={servicesGridSub}>What we offer</h2>
          </Row>
          <Row>
            <Col md={4}>
              <img src={cloud} alt="cloud icon" style={cloudIcon} />
              <h4 style={serviceTitle}>Platforms</h4>
              <p style={serviceDescription}>
                We support all social media platforms
              </p>
            </Col>
            <Col md={4}>
              <img src={gear} alt="gear icon" />
              <h4 style={serviceTitle}>Functionality</h4>
              <p style={serviceDescription}>We have many awesome features</p>
            </Col>
            <Col md={4}>
              <img src={heart} alt="heart icon" style={heartIcon} />
              <h4 style={serviceTitle}>Passion</h4>
              <p style={serviceDescription}>
                Made with love by passionate marketers
              </p>
            </Col>
          </Row>
        </Grid>
      </section>
      <section style={pricingDiv}>
        <h1 style={pricingHeader}>Pricing:</h1>
        <h3>We offer the most competitive pricing</h3>
      </section>
      <section style={signUpSection}>
        <Grid style={signUpDiv}>
          <Row>
            <Col style={signUpSectionCol}>
              <h2 style={signUpHeader}>Sign up for a FREE trial</h2>
              <p style={signUpText}>
                The Promotions Manager is launching soon. Leave your email at
                the bottom to get a FREE 60 days trial when we launch
              </p>
              <Form inline>
                <FormControl type="text" placeholder="Enter your email" />
                <div style={btnCtaStyle}>
                  <Button bsStyle="success" style={signUpButtonStyle}>
                    SIGN ME UP
                  </Button>
                </div>
              </Form>
            </Col>
          </Row>
        </Grid>
      </section>
    </div>
  </>
)

render() {
    // Renders the chat messages
    const messages = this.state.messages;
    const message = messages.map(item => {
        return (
            <Grid>
                {message}
                <Row className="show-grid">
                    <Col xs={12}>
                        <div className="chatmessage-container">
                            <div key={item.id} className="message-box">
                                <p><strong>{item.username}</strong></p>
                                <p>{item.message}</p>
                                </div>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            })
            // Renders the input form where the message to be sent is typed.
            return (
                <Grid>
                    <Row className="show-grid">
                        <Col xs={12}>
                        {message}
                        <div className="chat-container">
                            <form onSubmit={this.sendMessage}>
                                <Col xs={5} xsOffset={3}>
                                    <FormControl
                                        type="text"
                                        value={this.state.value}
                                        placeholder="Enter message here"
                                        onChange={this.handleChange}
                                    />
                                </Col>
                                <Col xs={4}>
                                    <input className="btn btn-primary" value="Send" type="submit" />
                                    </Col>
                                    </form>
                                    <h4 className="text-center">Welcome, {this.state.username}</h4>
                                    <h5 className="text-center">Begin chatting here.</h5>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            }

editFileExample = props => {
	const file = props.state.editFile
	const content = (file && file.content) || ''
	return <div>
		<h5 className={'mb-0'}>Update file</h5>
		<code>updateFile(fileName, fileBlob, lastModified, overwrite, options)</code>
		<div>If overwrite = <span className={'text-danger'}>false</span> you will be notified if file was edited in the
			meantime
		</div>
		<div>
			<label className={'mr-2'}>file:</label><span className={'comment'}>{file && file.name + '.txt'}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						as="textarea" rows="3"
						value={content}
						onChange={e => {
							let v = e.target.value
							const editFile = props.state.editFile
							editFile.content = v
							props.setState({editFile})
						}}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<button
					className={'btn btn-primary mr-2 btn-loading'}
					onClick={props.updateFile}
					disabled={!file || !file.name || !file.content}
				>
					{props.state.updatingFile && <i className={'fas fa-spinner fa-spin'}/>} Update
				</button>
			</Col>
		</Row>
		{props.state.editFileError && <div className={'text-danger'}>props.state.editFileError</div>}
	</div>
}

createNewFileExample = props => {
	return <div>
		<h3 className={'mb-3'}>Files methods examples</h3>
		<h5 className={'mb-0'}>Create new file</h5>
		<code>createNewFile(fileName, fileBlob, parentFolderUri, options)</code>
		<Row>
			<Col md={1}>fileName: </Col>
			<Col md={4} className={'comment'}>{props.state.newFileName ? props.state.newFileName + '.txt' : 'unknown'}</Col>
		</Row>
		<Row>
			<Col md={1}>fileBlob: </Col>
			<Col md={4} className={'comment'}>{<pre
				className={'text-inline'}>{JSON.stringify(props.fileContent, null, 2)}</pre>}</Col>
		</Row>
		<div>
			<label className={'mr-2'}>parentFolderUri:</label><span className={'comment'}>{props.state.folderDetails ?
			Utils.getSelfUri(props.state.folderDetails.links) :
			<Button
				bsstyle={'btn-sm btn-primary mr-2'}
				onClick={props.getFolderDetails}>Get
			</Button>}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						type={'text'}
						placeholder={'fileName'}
						value={props.state.newFileName}
						onChange={e => props.setState({newFileName: e.target.value})}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<Button
					bsstyle={'btn btn-primary mr-2 btn-loading'}
					onClick={props.createNewFile}
					disabled={!props.state.folderDetails || !props.state.newFileName || props.state.creatingNewFile}
				>
					{props.state.creatingNewFile && <i className={'fas fa-spinner fa-spin'}/>} Create
				</Button>
			</Col>
		</Row>
	</div>
}

NewReservationPage = () => {
  const { getAccessTokenSilently } = useAuth0();

  //added useState hook
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  // used to send user to next page on create success
  const [eventCreated, setEventCreated] = useState(false);
  const [nextUrl, setNextUrl] = useState('');
  // used to handle errors on the page
  const [showError, setShowError] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const displayError = (message) => {
    setShowError(true);
    setErrorMessage(message);
  };

  const saveNewReservation = async (event) => {
    event.preventDefault();

    const token = await getAccessTokenSilently();

    // set the error back to false when the component refresh
    setShowError(false);

    // validate title
    if (!title) return displayError('Please, enter a valid title');

    // validate description
    if (!description)
      return displayError('Please enter a valid description');

    // validate time
    if (!time) return displayError('Please enter a valid time');

    // validate date
    if (!date) return displayError('Please enter a valid date');

    var data = qs.stringify({
      title: title,
      description: description,
      date: date,
      time: time,
    });
    var config = {
      method: 'post',
      url: '/api/weddings',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: `Bearer ${token}`,
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        setNextUrl(`/events/`);
        setEventCreated(true);
      })
      .catch(function (error) {
        setShowError(true);
        setErrorMessage(error);
        console.log(error);
      });
  };

  return (
    <Container className="pt-5 mb-5 fixed-margin">
      {eventCreated && <Redirect to={nextUrl} />}

      <Row className="d-flex flex-wrap flex-column mb-5 p-md-5 shadow-lg mb-3 card-custom-style">
        <h3 className="title-style text-center">
          Create Event Reservation
        </h3>
        <hr></hr>
        <Col className="col-sm-12">
          <InputGroup className="mb-3 vertical-align">
            <InputGroup.Append>
              <InputGroup.Text id="TitleOfWedding">
                Title
              </InputGroup.Text>
            </InputGroup.Append>
            <FormControl
              placeholder="Wedding Title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </InputGroup>
          <InputGroup className="mb-3 vertical-align">
            <InputGroup.Append>
              <InputGroup.Text id="StartTimeOfWedding">
                Start Time
              </InputGroup.Text>
            </InputGroup.Append>
            <FormControl
              placeholder="Wedding Start Time"
              value={time}
              onChange={(e) => setTime(e.target.value)}
            />
          </InputGroup>
          <InputGroup className="mb-3 vertical-align">
            <InputGroup.Append>
              <InputGroup.Text id="DescriptionTimeOfWedding">
                Description
              </InputGroup.Text>
            </InputGroup.Append>
            <FormControl
              placeholder="Wedding Description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
          </InputGroup>
          <h6 className="title-style text-center ont-weight-bold">
            Select Date for the Event
          </h6>
        </Col>
        <Col className="center col-sm-12">
          <Calendar
            className="calendar"
            onClickDay={(value, event) => setDate(value)}
          />
        </Col>
      </Row>
      <Row className="text-center">
        <Col className="col-sm-12">
          {showError && (
            <h5 className="text-danger">{errorMessage}</h5>
          )}{' '}
        </Col>
      </Row>
      <Row>
        <BtnComponent
          className="create-btn-style"
          name="Make Reservation"
          onClick={saveNewReservation}
        />
      </Row>
    </Container>
  );
}