hackclub-archive · maxwofford · Mar 14, 2017
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@ Create a file called `.env` with the following contents, replacing "REPLACEME" w
 ```
 REACT_APP_API_BASE_URL=REPLACEME
 REACT_APP_SLACK_CLIENT_ID=REPLACEME
+REACT_APP_GOOGLE_MAPS_TOKEN=REPLACEME
 ```
 
     # Start development server

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.6.1"
+    "react-scripts": "^0.9.5"
   },
   "dependencies": {
     "better-react-spinkit": "^2.0.0-4",
@@ -15,6 +15,7 @@
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-helmet": "^3.1.0",
+    "react-places-autocomplete": "^4.0.5",
     "react-redux": "^4.4.5",
     "react-router": "^2.8.1",
     "react-router-redux": "^4.0.6",

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
+    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=%REACT_APP_GOOGLE_MAPS_TOKEN%"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/AddressField/AddressField.js b/src/components/AddressField/AddressField.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import Field from '../Field/Field'
+import PlacesAutocomplete from 'react-places-autocomplete'
+import colors from '../../styles/colors'
+
+const styles = {
+  fontFamily: 'inherit',
+  fontSize: '16px',
+  color: colors.userInput,
+  width: '100%',
+  boxSizing: 'border-box',
+  display: 'block',
+  paddingTop: '7px',
+  paddingLeft: '6px',
+  paddingRight: '6px',
+  paddingBottom: '6px',
+  borderRadius: '3px',
+  border: `1px solid ${colors.outline}`
+}
+
+class AddressField extends Field {
+  constructor(props) {
+    super(props)
+    this.state = {
+      address: '',
+      geocodeResults: null,
+      loading: false
+    }
+    this.update = address => this.setState({address})
+  }
+
+  renderInput() {
+    const { input, label, placeholder } = this.props
+
+    return (
+      <PlacesAutocomplete
+        value={this.state.address}
+        placeholder={placeholder === undefined ? label : placeholder}
+        onChange={this.update}
+        onSelect={this.update}
+        styles={{input: styles}}
+        inputName={input.name}
+      >
+      </PlacesAutocomplete>
+    )
+  }
+}
+
+export default AddressField
diff --git a/src/components/LeaderIntakeForm/LeaderIntakeForm.js b/src/components/LeaderIntakeForm/LeaderIntakeForm.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { reduxForm, Field } from 'redux-form'
 import { sortBy } from 'lodash'
-import { Button, Emoji, TextField, TextAreaField, SelectField } from '../../components'
+import { AddressField, Button, Emoji, TextField, SelectField } from '../../components'
 import leaderIntakeValidation from './leaderIntakeValidation'
 
 class LeaderIntakeForm extends Component {
@@ -64,7 +64,8 @@ class LeaderIntakeForm extends Component {
         <Field name="slack_username" label="Slack username" component={TextField} />
         <Field name="github_username" label="GitHub username" component={TextField} />
         <Field name="twitter_username" label="Twitter username (if you have one)" component={TextField} />
-        <Field name="address" label="Full address (include state and zip code)" component={TextAreaField} />
+        <Field name="address" label="Address (include state and zip code)" component={AddressField} />
+        <Field name="address_details" label="Apartment/suite/floor (optional)" component={TextField} />
         <Button type="form"
                 state={this.buttonState()}>{this.buttonText(status)}</Button>
       </form>

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as AddressField } from './AddressField/AddressField'
 export { default as Button } from './Button/Button'
 export { default as Card } from './Card/Card'
 export { default as Cloud9SetupForm } from './Cloud9SetupForm/Cloud9SetupForm'

diff --git a/src/config.js b/src/config.js
@@ -22,5 +22,6 @@ export default {
     }
   },
   apiBaseUrl: process.env.REACT_APP_API_BASE_URL,
-  slackClientId: process.env.REACT_APP_SLACK_CLIENT_ID
+  slackClientId: process.env.REACT_APP_SLACK_CLIENT_ID,
+  googleMapsToken: process.env.REACT_APP_GOOGLE_MAPS_TOKEN
 }