address autocomplete with react-places-autocomplete; relates to #34
This commit is contained in:
viktor
parent
f58bf9ce08
commit
c836b5f46e
|
|
@ -6561,6 +6561,11 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash.cond/-/lodash.cond-4.5.2.tgz",
|
||||
"integrity": "sha1-9HGh2khr5g9quVXRcRVSPdHSVdU="
|
||||
},
|
||||
"lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
||||
},
|
||||
"lodash.defaults": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
|
||||
|
|
@ -9301,6 +9306,15 @@
|
|||
"prop-types": "15.6.0"
|
||||
}
|
||||
},
|
||||
"react-places-autocomplete": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-5.4.3.tgz",
|
||||
"integrity": "sha512-NXTYVLyYESsW5LgYlOP3+7Bs+mWeXK8KAqrht2X48+cPYFHmT/S8BNnIRUxpmZyS036s1wuItuwpCJ53nYR/zQ==",
|
||||
"requires": {
|
||||
"lodash.debounce": "4.0.8",
|
||||
"prop-types": "15.6.0"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
"react": "^16.2.0",
|
||||
"react-dev-utils": "^4.2.1",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-places-autocomplete": "^5.4.3",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-select": "^1.1.0",
|
||||
"style-loader": "0.19.0",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>POA Network Governance DApp</title>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD97qDOBYZ2fH86Wq1vzhDOiSUsZGVqbVQ&libraries=places"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,61 @@
|
|||
import React from 'react';
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Select from 'react-select';
|
||||
import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete';
|
||||
|
||||
@inject("validatorStore")
|
||||
@observer
|
||||
export class Validator extends React.Component {
|
||||
onSelectAutocomplete = async (data) => {
|
||||
const { validatorStore } = this.props;
|
||||
let place = await geocodeByAddress(data)
|
||||
console.log(place);
|
||||
let address_components = {
|
||||
postal_code: "",
|
||||
street_number: "",
|
||||
route: "",
|
||||
locality: "",
|
||||
administrative_area_level_1: ""
|
||||
};
|
||||
for (let i = 0; i < place[0].address_components.length; i++) {
|
||||
let address_component = place[0].address_components[i];
|
||||
let addressType = address_component.types[0];
|
||||
switch(addressType) {
|
||||
case "postal_code":
|
||||
address_components.postal_code = Number(address_component.short_name);
|
||||
break;
|
||||
case "street_number":
|
||||
address_components.street_number = address_component.short_name;
|
||||
break;
|
||||
case "route":
|
||||
address_components.route = address_component.short_name;
|
||||
break;
|
||||
case "locality":
|
||||
address_components.locality = address_component.short_name;
|
||||
break;
|
||||
case "administrative_area_level_1":
|
||||
address_components.administrative_area_level_1 = address_component.long_name;
|
||||
break;
|
||||
}
|
||||
validatorStore.address = `${address_components.street_number} ${address_components.route} ${address_components.locality}`;
|
||||
validatorStore.state = address_components.administrative_area_level_1;
|
||||
validatorStore.zipCode = address_components.postal_code;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { validatorStore } = this.props;
|
||||
const inputProps = {
|
||||
value: validatorStore.address,
|
||||
onChange: (e) => validatorStore.changeValidatorMetadata(e, "address"),
|
||||
id: 'address'
|
||||
}
|
||||
const AutocompleteItem = ({ formattedSuggestion }) => (
|
||||
<div className="custom-container">
|
||||
<strong>{ formattedSuggestion.mainText }</strong>{' '}
|
||||
<small>{ formattedSuggestion.secondaryText }</small>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<div className="hidden">
|
||||
|
|
@ -25,9 +74,8 @@ export class Validator extends React.Component {
|
|||
<div className="right">
|
||||
<div className="form-el">
|
||||
<label htmlFor="address">Address</label>
|
||||
<input type="text" id="address"
|
||||
value={validatorStore.address}
|
||||
onChange={e => validatorStore.changeValidatorMetadata(e, "address")}
|
||||
<PlacesAutocomplete
|
||||
onSelect={this.onSelectAutocomplete} inputProps={inputProps} autocompleteItem={AutocompleteItem}
|
||||
/>
|
||||
<p className="hint">
|
||||
Proposed validator's registration address. Example: 110 Wall St., New York.
|
||||
|
|
@ -91,7 +139,7 @@ export class Validator extends React.Component {
|
|||
{ value: "Washington", label: "Washington" },
|
||||
{ value: "West Virginia", label: "West Virginia" },
|
||||
{ value: "Wisconsin", label: "Wisconsin" },
|
||||
{ value: "Wyomi", label: "Wyomi" }
|
||||
{ value: "Wyoming", label: "Wyoming" }
|
||||
]}
|
||||
>
|
||||
</Select>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ class ValidatorStore {
|
|||
|
||||
@action("change validator metadata")
|
||||
changeValidatorMetadata = (e, field) => {
|
||||
this[field] = e?(e.target?e.target.value:e.value):"";
|
||||
this[field] = e ? (e.target ? e.target.value : e.value ? e.value : e) : "";
|
||||
console.log("validator metadata", field, this[field])
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue