Forecast routing

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Weather App",
+  "name": "Weather Forecast App",
   "icons": [
     {
       "src": "favicon.ico",

src/App.css

@@ -15,7 +15,7 @@ body {
 
 .App {
     background: linear-gradient(to left, #f2fcfe, #1c92d2);
-    height: 100vh;
+    min-height: 100vh;
 }
 /* HEADER */
 /* HEADER */

src/App.js

@@ -2,45 +2,48 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import 'normalize.css';
 import './App.css';
-import api  from './utils/api';
 import PropTypes from 'prop-types';
 import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
+
+// components
 import Home from './Home';
 import Forecast from './Forecast';
 import LocationInput from './LocationInput';
+import api  from './utils/api';
+
 
 class App extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            location: '',
-        };
 
         this.handleSubmit = this.handleSubmit.bind(this);
     }
     handleSubmit(location) {
-        console.log('location: ' + location);
-
-        // api.fetchCurrentWeather(location);
-        api.fetchFiveDayForecast(location);
+        this.props.history.push({
+            pathname: 'forecast',
+            search: '?city=' + location,
+        });
     }
-
     render() {
         return (
-            <div className="App">
-                <header>
-                    <div className="header-logo">
-                        <a href="#" >Forecast</a>
-                    </div>
-                    <LocationInput style={{flexDirection: "row"}} />
-                </header>
-                <Router>
+            <Router>
+                <div className="App">
+                    <header>
+                        <div className="header-logo">
+                            <a href="/" >Forecast</a>
+                        </div>
+
+                        <LocationInput
+                            style={{flexDirection: "row"}}
+                            onSubmit={this.handleSubmit}
+                        />
+                    </header>
                     <Switch>
                         <Route exact path="/" component={Home} />
                         <Route exact path="/forecast" component={Forecast} />
                     </Switch>
-                </Router>
-            </div>
+                </div>
+            </Router>
         );
     }
 }

src/Forecast.js

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

src/Home.js

@@ -1,10 +1,26 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import LocationInput from './LocationInput';
 import PropTypes from 'prop-types';
-import api  from './utils/api';
+
+// components
+import LocationInput from './LocationInput';
+import api from './utils/api';
 
 class Home extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            location: '',
+        };
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+    handleSubmit(location) {
+        this.props.history.push({
+            pathname: 'forecast',
+            search: '?city=' + location,
+        });
+    }
     render() {
         return (
             <div className="container">

src/LocationInput.js

@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+// components
 import api  from './utils/api';
 
+
 class LocationInput extends Component {
     constructor(props) {
         super(props);
@@ -13,49 +18,45 @@ class LocationInput extends Component {
         this.handleSubmit = this.handleSubmit.bind(this);
     }
     handleChange(event) {
-        var value = event.target.value;
+        var location = event.target.value;
 
         this.setState(_ => {
             return {
-                location: value,
+                location: location,
             }
         });
     }
     handleSubmit(event) {
         event.preventDefault();
 
-        this.props.onSubmit(
-            this.state.location,
-        );
+        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 className="getweather" 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="button"
+                    disabled={!this.state.location}
+                    onClick={this.handleSubmit}>
+                        Get Weather
+                </button>
             </div>
         )
     }
 }
 
-// LocationInput.propTypes = {
-//     location: PropTypes.string.isRequired,
-// }
+LocationInput.propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+}
 
 export default LocationInput;