From 22f8f3b9b1e8c089c09f2044cb0e3e8a63c08b15 Mon Sep 17 00:00:00 2001
From: viktor <baranov.viktor.27@gmail.com>
Date: Thu, 28 Dec 2017 16:56:57 +0300
Subject: [PATCH 1/2] date & time input for endTime field; relates to #35

---
 src/components/BallotKeysMetadata.jsx         | 2 +-
 src/components/BallotMinThresholdCard.jsx     | 2 +-
 src/components/BallotMinThresholdMetadata.jsx | 2 +-
 src/components/BallotProxyCard.jsx            | 2 +-
 src/components/BallotProxyMetadata.jsx        | 2 +-
 src/index.js                                  | 8 --------
 6 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/BallotKeysMetadata.jsx b/src/components/BallotKeysMetadata.jsx
index 1ab9e15..0fdf94d 100644
--- a/src/components/BallotKeysMetadata.jsx
+++ b/src/components/BallotKeysMetadata.jsx
@@ -36,7 +36,7 @@ export class BallotKeysMetadata extends React.Component {
           <div className="left">
             <div className="form-el">
               <label htmlFor="key">Ballot End</label>
-              <input type="date" id="key" 
+              <input type="datetime-local" id="key" 
                 value={ballotStore.endTime} 
                 onChange={e => ballotStore.changeBallotMetadata(e, "endTime")} 
               />
diff --git a/src/components/BallotMinThresholdCard.jsx b/src/components/BallotMinThresholdCard.jsx
index 91f86c8..3c9ff0e 100644
--- a/src/components/BallotMinThresholdCard.jsx
+++ b/src/components/BallotMinThresholdCard.jsx
@@ -215,7 +215,7 @@ export class BallotMinThresholdCard extends React.Component {
   }
 
   render () {
-    let { commonStore, contractsStore } = this.props;
+    let { contractsStore } = this.props;
     let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
     return (
       <div className={ballotClass}>
diff --git a/src/components/BallotMinThresholdMetadata.jsx b/src/components/BallotMinThresholdMetadata.jsx
index 639bdb3..79acc77 100644
--- a/src/components/BallotMinThresholdMetadata.jsx
+++ b/src/components/BallotMinThresholdMetadata.jsx
@@ -24,7 +24,7 @@ export class BallotMinThresholdMetadata extends React.Component {
           <div className="right">
             <div className="form-el">
               <label htmlFor="key">Ballot End</label>
-              <input type="date" id="key" 
+              <input type="datetime-local" id="key" 
                 value={ballotStore.endTime} 
                 onChange={e => ballotStore.changeBallotMetadata(e, "endTime")} 
               />
diff --git a/src/components/BallotProxyCard.jsx b/src/components/BallotProxyCard.jsx
index f0d0a40..515d693 100644
--- a/src/components/BallotProxyCard.jsx
+++ b/src/components/BallotProxyCard.jsx
@@ -225,7 +225,7 @@ export class BallotProxyCard extends React.Component {
   }
 
   render () {
-    const { commonStore, contractsStore, ballotStore } = this.props;
+    const { contractsStore, ballotStore } = this.props;
     let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
     return (
       <div className={ballotClass}>
diff --git a/src/components/BallotProxyMetadata.jsx b/src/components/BallotProxyMetadata.jsx
index ddb49f6..b733272 100644
--- a/src/components/BallotProxyMetadata.jsx
+++ b/src/components/BallotProxyMetadata.jsx
@@ -46,7 +46,7 @@ export class BallotProxyMetadata extends React.Component {
           <div className="left">
             <div className="form-el">
               <label htmlFor="key">Ballot End</label>
-              <input type="date" id="key" 
+              <input type="datetime-local" id="key" 
                 value={ballotStore.endTime} 
                 onChange={e => ballotStore.changeBallotMetadata(e, "endTime")} 
               />
diff --git a/src/index.js b/src/index.js
index 89c2edc..4f55981 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,14 +20,6 @@ const routingStore = new RouterStore();
 const stores = { commonStore, contractsStore, ballotStore, ballotsStore, validatorStore, routing: routingStore };
 const history = syncHistoryWithStore(browserHistory, routingStore);
 
-function generateElement(msg){
-  let errorNode = document.createElement("div");
-  errorNode.innerHTML = `<div>
-    ${msg}
-  </div>`;
-  return errorNode;
-}
-
 class AppMainRouter extends Component {
 
   constructor(props) {

From c836b5f46eedf8bf0ba0aa3c1e42639957fe8f7d Mon Sep 17 00:00:00 2001
From: viktor <baranov.viktor.27@gmail.com>
Date: Thu, 28 Dec 2017 18:08:13 +0300
Subject: [PATCH 2/2] address autocomplete with react-places-autocomplete;
 relates to #34

---
 package-lock.json            | 14 +++++++++
 package.json                 |  1 +
 public/index.html            |  1 +
 src/components/Validator.jsx | 56 +++++++++++++++++++++++++++++++++---
 src/stores/ValidatorStore.js |  2 +-
 5 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 39261f2..33e64fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index b7c9142..2baa388 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/public/index.html b/public/index.html
index 0e1ce2e..742c4c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
diff --git a/src/components/Validator.jsx b/src/components/Validator.jsx
index b814013..b38d715 100644
--- a/src/components/Validator.jsx
+++ b/src/components/Validator.jsx
@@ -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>
diff --git a/src/stores/ValidatorStore.js b/src/stores/ValidatorStore.js
index f4acfa1..07915ca 100644
--- a/src/stores/ValidatorStore.js
+++ b/src/stores/ValidatorStore.js
@@ -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])
 	}
 }