Get location

.env-example

@@ -10,3 +10,4 @@ OKC_DB_USER=blaine
 OKC_DB_PASS=complicatedPassword
 
 OKC_SESSION_SECRET_KEY=someGobbledygookThatIsAtLeast32CharactersLong
+GOOGLE_API_KEY=google_api_key

api/controllers/GeolocationController.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const Controller = require('trails-controller');
+const fetch = require('isomorphic-fetch');
+const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY;
+const geocodingUrl = 'https://maps.googleapis.com/maps/api/geocode/json';
+
+/**
+ * @module GeolocationController
+ * @description A controller for handling Geolocation requests.
+ */
+module.exports = class GeolocationController extends Controller {
+
+    get(request, reply) {
+        const address = JSON.stringify(request.query.address);
+
+        fetch(`${geocodingUrl}?address=${address}&key=${GOOGLE_API_KEY}`)
+            .then((response) => response.json())
+            .then((response) => {
+                reply(response);
+            })
+            .catch((error) => {
+                reply(error);
+            });
+    }
+
+};
+

api/controllers/SurveyController.js

@@ -11,7 +11,7 @@ module.exports = class SurveyController extends Controller {
 
     getSurveyByLatLng(request, reply) {
 
-        const coordinates = request.query.coordinates;
+        const coordinates = JSON.parse(request.query.coordinates);
 
         this.app.services.SurveyService.getSurveyByLatLng(coordinates.latitude,
                                                           coordinates.longitude)

api/controllers/index.js

@@ -8,3 +8,4 @@ exports.CategoryController = require('./CategoryController');
 exports.QuestionController = require('./QuestionController');
 exports.SurveyResultController = require('./SurveyResultController');
 exports.SurveyController = require('./SurveyController');
+exports.GeolocationController = require('./GeolocationController');

config/routes.js

@@ -111,5 +111,10 @@ module.exports = [
         method: ['GET'],
         path: '/api/v1/default/info',
         handler: 'DefaultController.info'
+    },
+    {
+        method: ['GET'],
+        path: '/api/v1/geolocation',
+        handler: 'GeolocationController.get'
     }
 ];

frontend/js/components/atoms/Hr.js

@@ -0,0 +1,25 @@
+'use strict';
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Hr extends Component {
+    render() {
+        return (
+            <div className="hr">
+                <div className="hr-line"></div>
+                {
+                    this.props.label &&
+                    <label className="hr-label">{this.props.label}</label>
+                }
+            </div>
+        );
+    }
+}
+
+Hr.propTypes = {
+    label: PropTypes.string,
+    color: PropTypes.string
+};
+
+export default Hr;

frontend/js/components/ecosystems/LocationForm.js

@@ -0,0 +1,84 @@
+'use strict';
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Hr from './../atoms/hr';
+import Alert from './../organisms/Alert';
+import TextField from './../organisms/TextField';
+
+import {
+    getLocationByGPS,
+    getLocationByAddress
+} from './../../redux/actions/pick-survey-actions';
+
+class LocationForm extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {address: ''};
+    }
+
+    updateAddress(event) {
+        const address = event.target.value;
+        this.setState({
+            address: address
+        });
+    }
+
+    search(event) {
+        event && event.preventDefault();
+        this.props.dispatch(getLocationByAddress(this.state.address), () => {
+            this.setState({address: ''});
+        });
+    }
+
+    geolocate() {
+        this.props.dispatch(getLocationByGPS());
+    }
+
+    render() {
+        return (
+            <form className="location-form" onSubmit={this.search.bind(this)}>
+                <section>
+                    {this.props.status.message &&
+                        <Alert
+                            level={this.props.status.level}
+                            message={this.props.status.message} />
+                    }
+                </section>
+                <section className="by-address">
+                    <TextField
+                        label="Locate Using Address"
+                        name="address"
+                        value={this.state.value}
+                        onChange={this.updateAddress.bind(this)}
+                        button={
+                            <button
+                                type="button"
+                                onClick={this.search.bind(this)}>
+                                Search
+                            </button>
+                        }/>
+                </section>
+                <Hr label="or" />
+                <section className="by-gps">
+                    <label htmlFor="gps">Or use GPS</label>
+                    <button
+                        type="button"
+                        id="gps"
+                        onClick={this.geolocate.bind(this)}>
+                        Use GPS
+                    </button>
+                </section>
+            </form>
+        );
+    }
+}
+
+LocationForm.propTypes = {
+    dispatch: PropTypes.func,
+    addressError: PropTypes.string,
+    status: PropTypes.object
+};
+
+export default LocationForm;

frontend/js/components/environments/Home.js

@@ -1,7 +1,10 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import { connect } from 'react-redux';
+
 import Card from './../atoms/Card';
+import LocationForm from './../ecosystems/LocationForm';
 
 class Home extends Component {
 
@@ -15,6 +18,10 @@ class Home extends Component {
           <div className="twelve columns">
             <Card>
               <pre>OKCandidate Home Screen</pre>
+              <LocationForm
+                addressError={this.props.pickSurvey.addressError}
+                status={this.props.pickSurvey.status}
+                dispatch={this.props.dispatch} />
             </Card>
           </div>
     );
@@ -24,12 +31,14 @@ class Home extends Component {
 }
 
 Home.propTypes = {
-    user: PropTypes.object
+    user: PropTypes.object,
+    pickSurvey: PropTypes.object,
+    dispatch: PropTypes.func
 };
 
 export default connect(
   state => ({
-      survey: state.survey,
+      pickSurvey: state.pickSurvey,
       ui: state.ui
   })
 )(Home);

frontend/js/components/environments/SurveySelector.js

@@ -0,0 +1,35 @@
+'use strict';
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { connect } from 'react-redux';
+
+import Card from './../atoms/Card';
+
+class SurveySelector extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <section>
+                <Card>
+                    <pre>Survey Selector</pre>
+                </Card>
+            </section>
+        );
+    }
+}
+
+SurveySelector.propTypes = {
+    surveys: PropTypes.array
+};
+
+export default connect(
+    state => ({
+        pickSurvey: state.pickSurvey,
+        ui: state.ui
+    })
+)(SurveySelector);

frontend/js/components/organisms/TextField.js

@@ -0,0 +1,45 @@
+'use strict';
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class TextField extends Component {
+    render() {
+        return (
+            <div className="text-field">
+                {
+                    this.props.label &&
+                    <label htmlFor={this.props.name}>
+                        {this.props.label}
+                    </label>
+                }
+                <div className={`text-field-input ${this.props.button && 'has-button'}`}>
+                    <input
+                        id={this.props.name}
+                        type={this.props.type || 'text'}
+                        value={this.props.value}
+                        onChange={this.props.onChange} />
+                    { this.props.button }
+                </div>
+                {
+                    this.props.error &&
+                    <div className="text-field-error">
+                        <span>{this.props.error}</span>
+                    </div>
+                }
+            </div>
+        );
+    }
+}
+
+TextField.propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string,
+    label: PropTypes.string,
+    error: PropTypes.string,
+    onChange: PropTypes.func,
+    type: PropTypes.string,
+    button: PropTypes.element
+};
+
+export default TextField;