diff --git a/package-lock.json b/package-lock.json
index df2e92d..c8d297b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6404,6 +6404,28 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
+ "history": {
+ "version": "4.7.2",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+ "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+ "requires": {
+ "invariant": "^2.2.1",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^2.2.0",
+ "value-equal": "^0.4.0",
+ "warning": "^3.0.0"
+ },
+ "dependencies": {
+ "warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ }
+ }
+ },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6419,6 +6441,11 @@
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
},
+ "hoist-non-react-statics": {
+ "version": "2.5.5",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+ "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+ },
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -13291,6 +13318,48 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.2.tgz",
"integrity": "sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ=="
},
+ "react-router": {
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+ "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+ "requires": {
+ "history": "^4.7.2",
+ "hoist-non-react-statics": "^2.5.0",
+ "invariant": "^2.2.4",
+ "loose-envify": "^1.3.1",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.1",
+ "warning": "^4.0.1"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ },
+ "path-to-regexp": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+ "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+ "requires": {
+ "isarray": "0.0.1"
+ }
+ }
+ }
+ },
+ "react-router-dom": {
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+ "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+ "requires": {
+ "history": "^4.7.2",
+ "invariant": "^2.2.4",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.1",
+ "react-router": "^4.3.1",
+ "warning": "^4.0.1"
+ }
+ },
"react-scripts": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.3.tgz",
@@ -13965,6 +14034,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
+ "resolve-pathname": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+ "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+ },
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -15979,6 +16053,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "value-equal": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+ "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+ },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -16033,6 +16112,14 @@
"makeerror": "1.0.x"
}
},
+ "warning": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+ "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"watch": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",
diff --git a/package.json b/package.json
index b8a6b5f..4f77e84 100644
--- a/package.json
+++ b/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": {
diff --git a/src/App.js b/src/App.js
index 78d4a4a..ca76a2f 100755
--- a/src/App.js
+++ b/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 (
-
-
-
- )
- }
-}
-
-// 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 {
-
-
Enter a City and State
-
-
+
+
+
+
+
+
);
}
diff --git a/src/Forecast.js b/src/Forecast.js
new file mode 100644
index 0000000..53f2120
--- /dev/null
+++ b/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 (
+
+ Forecast Component
+
+ )
+ }
+}
+
+export default Forecast;
diff --git a/src/Home.js b/src/Home.js
new file mode 100644
index 0000000..f6a2c1d
--- /dev/null
+++ b/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 (
+
+
Enter a City and State
+
+
+ )
+ }
+}
+
+export default Home;
diff --git a/src/LocationInput.js b/src/LocationInput.js
new file mode 100644
index 0000000..98c5259
--- /dev/null
+++ b/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 (
+
+
+
+
+ )
+ }
+}
+
+// LocationInput.propTypes = {
+// location: PropTypes.string.isRequired,
+// }
+
+export default LocationInput;
diff --git a/src/utils/api.js b/src/utils/api.js
index d15ab45..1f9f571 100644
--- a/src/utils/api.js
+++ b/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));
});
}