added react-router-dom, spun out Home, LocationInput, Forecast compon…

…ents

package.json

@@ -8,6 +8,7 @@
     "normalize.css": "^8.0.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3"
   },
   "scripts": {

src/App.js

@@ -4,64 +4,10 @@ import 'normalize.css';
 import './App.css';
 import api  from './utils/api';
 import PropTypes from 'prop-types';
-
-class LocationInput extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            location: '',
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-    handleChange(event) {
-        var value = event.target.value;
-
-        this.setState(_ => {
-            return {
-                location: value,
-            }
-        });
-    }
-    handleSubmit(event) {
-        event.preventDefault();
-
-        this.props.onSubmit(
-            this.state.location,
-        );
-    }
-    render() {
-        return (
-            <div className="loc-container">
-                <form className="getweather" onSubmit={this.handleSubmit} style={this.props.style}>
-                    <input
-                        id="location"
-                        placeholder="San Francisco, CA"
-                        type="text"
-                        className="locinput"
-                        autoComplete="off"
-                        value={this.state.location}
-                        onChange={this.handleChange}
-                    />
-                    <button
-                        className="btn"
-                        type="submit"
-                        disabled={!this.state.location}>
-                            Get Weather
-                    </button>
-                </form>
-            </div>
-        )
-    }
-}
-
-// LocationInput.propTypes = {
-//     location: PropTypes.string.isRequired,
-// }
-
-
+import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
+import Home from './Home';
+import Forecast from './Forecast';
+import LocationInput from './LocationInput';
 
 class App extends Component {
     constructor(props) {
@@ -75,10 +21,8 @@ class App extends Component {
     handleSubmit(location) {
         console.log('location: ' + location);
 
-        api.fetchCurrentWeather(location);
-        // this.setState(_ => {
-        //
-        // });
+        // api.fetchCurrentWeather(location);
+        api.fetchFiveDayForecast(location);
     }
 
     render() {
@@ -90,13 +34,12 @@ class App extends Component {
                     </div>
                     <LocationInput style={{flexDirection: "row"}} />
                 </header>
-                <div className="container">
-                    <h1 className="text-center">Enter a City and State</h1>
-                    <LocationInput
-                        style={{flexDirection: "column"}}
-                        onSubmit={this.handleSubmit}
-                    />
-                </div>
+                <Router>
+                    <Switch>
+                        <Route exact path="/" component={Home} />
+                        <Route exact path="/forecast" component={Forecast} />
+                    </Switch>
+                </Router>
             </div>
         );
     }

src/Forecast.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+class Forecast extends React.Component {
+    render() {
+        return (
+            <div className="container">
+                Forecast Component
+            </div>
+        )
+    }
+}
+
+export default Forecast;

src/Home.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import api  from './utils/api';
+
+class Home extends Component {
+    render() {
+        return (
+            <div className="container">
+                <h1 className="text-center">Enter a City and State</h1>
+                <LocationInput
+                    style={{flexDirection: "column"}}
+                    onSubmit={this.handleSubmit}
+                />
+            </div>
+        )
+    }
+}
+
+export default Home;

src/LocationInput.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import api  from './utils/api';
+
+class LocationInput extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            location: '',
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+    handleChange(event) {
+        var value = event.target.value;
+
+        this.setState(_ => {
+            return {
+                location: value,
+            }
+        });
+    }
+    handleSubmit(event) {
+        event.preventDefault();
+
+        this.props.onSubmit(
+            this.state.location,
+        );
+    }
+    render() {
+        return (
+            <div className="loc-container">
+                <form className="getweather" onSubmit={this.handleSubmit} style={this.props.style}>
+                    <input
+                        id="location"
+                        placeholder="San Francisco, CA"
+                        type="text"
+                        className="locinput"
+                        autoComplete="off"
+                        value={this.state.location}
+                        onChange={this.handleChange}
+                    />
+                    <button
+                        className="btn"
+                        type="submit"
+                        disabled={!this.state.location}>
+                            Get Weather
+                    </button>
+                </form>
+
+            </div>
+        )
+    }
+}
+
+// LocationInput.propTypes = {
+//     location: PropTypes.string.isRequired,
+// }
+
+export default LocationInput;

src/utils/api.js

@@ -1,14 +1,23 @@
 var axios = require('axios');
 
+var baseURL = "http://api.openweathermap.org/data/2.5/";
 var apikey = "8fad34166684286360dc6d77073bd5e5";
 var params = "&APPID=" + apikey;
 
 module.exports = {
     fetchCurrentWeather: function(location) {
-        var link = window.encodeURI("http://api.openweathermap.org/data/2.5/weather?q=" + location + params);
+        var link = window.encodeURI(baseURL + "weather?q=" + location + params);
         return axios.get(link)
             .then(function(results) {
-                console.log('results: ' + results);
+                console.log('current weather results: ' + results);
+                console.log(JSON.stringify(results["data"]["weather"]));
+            });
+    },
+    fetchFiveDayForecast: function(location) {
+        var link = window.encodeURI(baseURL + "forecast?q=" + location + ",us" + params);
+        return axios.get(link)
+            .then(function(results) {
+                console.log('forecast results: ' + results);
                 console.log(JSON.stringify(results));
             });
     }