react-bootstrap#FormLabel JavaScript Examples

CoopTypes = (props) => {
  const [tags, setTags] = React.useState(null);
  const [suggestions, setSuggestions] = React.useState(null);
  const handleAddition = props.handleAddition;
  const handleDeletion = props.handleDeletion;

  useEffect(() => {
    const s = props.suggestions
      ? props.suggestions.map((result) => ({
          id: result.name,
          text: result.name,
        }))
      : [];
    setSuggestions(s);
    const t = props.values
      ? props.values.map((result) => ({
          id: result.name,
          text: result.name,
        }))
      : [];
    setTags(t);
  }, [props]);

  return (
    <div className="form-group">
      <FormLabel className={props.className} style={inputStyle}>
        Coop Type(s)
      </FormLabel>
      <ReactTags
        tags={tags ? tags : []}
        suggestions={suggestions ? suggestions : []}
        handleDelete={handleDeletion}
        handleAddition={handleAddition}
        handleDrag={handleDrag}
        delimiters={delimiters}
      />
    </div>
  );
}

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

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

Search = (props) => {
  //store evolving search settings before search form is submitted
  const [coopSearchSettings, setCoopSearchSettings] = useState({ state: "IL", type: [] });

  // store finalized search url
  const [searchUrl, setSearchUrl] = useState("");

  const [coopTypes, setCoopTypes] = React.useState([]);
  const [provinces, setProvinces] = React.useState([]);
  const [searchResults, setSearchResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // Get all possible coop types to populate search form
    fetch(REACT_APP_PROXY + "/coop_types/")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const coopTypes = data.map((coopType) => {
          return coopType;
        });
        setCoopTypes(coopTypes.sort((a, b) => (a.name > b.name ? 1 : -1)));
      });
  }, []);

  useEffect(() => {
    // Get initial provinces (states)
    fetch(REACT_APP_PROXY + "/states/" + DEFAULT_COUNTRY_CODE)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const initialProvinces = data.map((province) => {
          return province;
        });
        setProvinces(initialProvinces);
      });
  }, []);

  useEffect(
    () => {
      // set searchResults to empty if searchUrl is empty
      if (searchUrl === "") {
        setSearchResults([]);
        return;
      } else {
        //Let the debounced function do it's thing
        const results = doSearchDebounced(
          coopSearchSettings,
          setSearchResults,
          setLoading,
          searchUrl
        );
        setSearchResults(results);
      }
    },
    // Only re-render page if searchUrl has changed.
    // coopSearchSettings is not a dependency because we do want not re-render page
    // every time users type a new character in search form.
    [searchUrl]
  );

  const handleInputChange = (event) => {
    // save user edits to individual form fields to coopSearchSettings
    const { target } = event;
    const { name, value } = target;
    event.persist();
    setCoopSearchSettings({ ...coopSearchSettings, [name]: value });
  };

  const handleFormSubmit = (e) => {
    // when the user finalizes search settings by pressing 'submit,'
    // built out search URL
    e.preventDefault();
    buildSearchUrl(coopSearchSettings, setSearchUrl);
  };

  const formatAddress = (obj) => {
    const streetAdd = obj.formatted;
    const cityName = obj.locality.name;
    const stateCode = obj.locality.state.code;
    const zip = obj.locality.postal_code;

    return streetAdd + ", " + cityName + ", " + stateCode + " " + zip;
  };

  const handleMultiSelect = (e) => {
    const { name, value } = e.target;
    const selected = coopSearchSettings[name]
    const index = selected.indexOf(value)

    if (index > -1) {
      selected.splice(index, 1)
    } else {
      selected.push(value)
    }
    setCoopSearchSettings({...coopSearchSettings, [name]: selected})
  }

  // same logic from Search.jsx
  const renderSearchResults = () => {
    if (searchResults && searchResults.length) {
      return (
        <>
          <br/>
          <ListGroup variant="flush">
            <ListGroupItem key="header">
              <h3 className="float-left font-weight-bold">
                Matching Entities
              </h3>
              <h3 className="float-right font-weight-bold">
                Edit
              </h3>
            </ListGroupItem>
            {searchResults.map((item) => (
              <ListGroupItem key={item.id} value={item.name}>
                <div className="float-left">
                  {item.name}
                  <br />
                  {formatAddress(item.addresses[0])}
                </div>
                <span className="float-right">
                  <Link to={"/directory-additions-updates/" + item.id}>
                    <PencilSquare color="royalblue" size={26} />
                  </Link>
                </span>
              </ListGroupItem>
            ))}
          </ListGroup>
        </>
      );
    }
  };

  return (
    <div className="form container-fluid">
      <form
          onSubmit={handleFormSubmit}
        >
        {/* FormGroup logic from FormContainer.jsx */}
        <FormGroup controlId="formBasicText">
          {/* FormLabel and FormControl logic from Input.jsx */}
          <div className="form-row">
            <div className="form-group col-md-6 col-lg-6 col-xl-6">
              <FormLabel class="formInputStyle">Name</FormLabel>
              <FormControl
                class="form-control"
                id={"name"}
                name={"name"}
                value={coopSearchSettings.name}
                placeholder="Enter cooperative name"
                onChange={handleInputChange}
                aria-label="Name"
              />{" "}
            </div>
            <div className="form-group col-md-6 col-lg-6 col-xl-6">
              <DropDownInput
                className={"formInputStyle"}
                type={"select"}
                as={"select"}
                title={"CoOp Type"}
                multiple={"multiple"}
                name={"type"}
                value={coopSearchSettings.type}
                handleChange={handleMultiSelect}
                options={coopTypes}
              />
            </div>
          </div>
          <div className="form-row">
            <div className="form-group col-md-6 col-lg-6 col-xl-6">
              <FormLabel class="formInputStyle">Street</FormLabel>
              <FormControl
                class="form-control"
                id={"street"}
                name={"street"}
                value={coopSearchSettings.street}
                placeholder="Enter address street"
                onChange={handleInputChange}
              />{" "}
            </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <FormLabel class="formInputStyle">City</FormLabel>
              <FormControl
                class="form-control"
                id={"city"}
                name={"city"}
                value={coopSearchSettings.city}
                placeholder="Enter address city"
                onChange={handleInputChange}
              />{" "}
              </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <FormLabel class="formInputStyle">Postal Code</FormLabel>
              <FormControl
                class="form-control"
                id={"zip"}
                name={"zip"}
                value={coopSearchSettings.zip}
                placeholder="Enter postal code"
                onChange={handleInputChange}
              />{" "}
            </div>
          </div>
          <div className="form-row">
            <div className="form-group col-md-3 col-lg-6 col-xl-6">
              <FormLabel class="formInputStyle">County</FormLabel>
              <FormControl
                class="form-control"
                id={"county"}
                name={"county"}
                value={coopSearchSettings.county}
                placeholder="Enter county"
                onChange={handleInputChange}
              />{" "}
            </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <Province
                title={"State"}
                className="formInputStyle"
                name={"state"}
                options={provinces}
                value={coopSearchSettings.state}
                placseholder={"Select state"}
                handleChange={(e) =>
                  setCoopSearchSettings({
                    ...coopSearchSettings,
                    [e.target.name]: e.target.value,
                  })
                }
              />{" "}
            </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <label class="form-label" class="formInputStyle">
                Enabled
              </label>
              <select
                name={"enabled"}
                value={coopSearchSettings.enabled}
                onChange={handleInputChange}
                className="form-control"
              >
                <option selected value="none">
                  None Selected
                </option>
                <option value="true">True</option>
                <option value="False">False</option>
              </select>
            </div>
          </div>
          <div className="form-group form-row">
            <div className="form-group col-md-6" align="center">
              <Button buttonType={"primary"} title={"Submit"} type={"submit"} />{" "}
            </div>
            <div className="form-group col-md-6" align="center">
              <CancelButton />
            </div>
          </div>
          <div>
            {renderSearchResults()}
            {loading && (
              <div class="loading">
                <div className="spinner-border" role="status">
                  <span className="sr-only">Loading...</span>
                </div>
              </div>
            )}
          </div>
        </FormGroup>
      </form>
    </div>
  );
}