diff --git a/public/manifest.json b/public/manifest.json index 1f2f141..d1814fb 100755 --- a/public/manifest.json +++ b/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", diff --git a/src/App.css b/src/App.css index e17d1c8..93d6e40 100755 --- a/src/App.css +++ b/src/App.css @@ -15,7 +15,7 @@ body { .App { background: linear-gradient(to left, #f2fcfe, #1c92d2); - height: 100vh; + min-height: 100vh; } /* HEADER */ /* HEADER */ diff --git a/src/App.js b/src/App.js index ca76a2f..c219fdc 100755 --- a/src/App.js +++ b/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 ( -
-
-
- Forecast -
- -
- + +
+
+
+ Forecast +
+ + +
- -
+
+ ); } } diff --git a/src/Forecast.js b/src/Forecast.js index 53f2120..712ff30 100644 --- a/src/Forecast.js +++ b/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 (
diff --git a/src/Home.js b/src/Home.js index fd73184..1bbd65e 100644 --- a/src/Home.js +++ b/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 (
diff --git a/src/LocationInput.js b/src/LocationInput.js index 98c5259..051d737 100644 --- a/src/LocationInput.js +++ b/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 ( -
-
- - -
- +
+ +
) } } -// LocationInput.propTypes = { -// location: PropTypes.string.isRequired, -// } +LocationInput.propTypes = { + onSubmit: PropTypes.func.isRequired, +} export default LocationInput;