Added TestComponent

movel · Jun 4, 2017 · 72c8847 · 72c8847
1 parent a65cfc4
commit 72c8847
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
 
 Commit & deploy :recycle:
 
-npm run build
-git add .
-git commit -m "Start with create-react-app"
-git push heroku master
+1. npm run build
+2. git add .
+3. git commit -m "Start with create-react-app"
+4. git push heroku master
+5. git push master +HEAD
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.5.4",
+    "react-fetch": "0.0.9",
     "react-highcharts": "^12.0.0"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/partly-cloudy-day-icon.png">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/public/partly-cloudy-day-icon.png b/public/partly-cloudy-day-icon.png
diff --git a/src/App.js b/src/App.js
@@ -1,38 +1,94 @@
 import React, { Component } from 'react';
+import Fetch from 'react-fetch';
 import "bootswatch/cerulean/bootstrap.css";
 import { Grid, Row, Col, Navbar } from "react-bootstrap";
 import './App.css';
 import LocalWeather from './LocalWeather';
 import HighChartsPlot from './HighChartsPlot';
+import TestComponent from './TestComponent';
 import Background from './img/SUN-min-min.jpeg';
 
 class App extends Component {
   constructor() {
     super();
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.state = {
-      localIP: null,
+        localIP: null,
+        city: '',
+        country: '',
+        text: ''
     };
   }
 
-  componentDidMount() {
+  getInitialState() {
+    return {
+      text: '',
+      value: ''
+    };
+  }
+
+  componentWillMount() {
     fetch("http://ipinfo.io/json", {method: "GET"})
       .then(res => res.json())
       .then(json => {this.setState({ localIP: json })});
   }
 
+  componentDidMount() {
+    const localIP = this.state.localIP;
+
+    if (!localIP) return console.log(this.state.localIP);
+    this.setState({ city: localIP.city });
+    this.setState({ country: localIP.country });
+
+    console.log(this.state.city);
+  }
+
+  handleChange(e) {
+    this.setState({ text: e.target.value });
+    // console.log(this.state.city);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    let local = {};
+    local.city = this.state.newCity;
+    local.country = '';
+    this.setState({ localIP: local });
+    this.setState({ text: '' });
+  }
+
+  // handleSubmit(e) {
+  //   e.preventDefault();
+  //   var newItem = {
+  //     text: this.state.text,
+  //     id: Date.now()
+  //   };
+  //   this.setState((prevState) => ({
+  //     items: prevState.items.concat(newItem),
+  //     text: ''
+  //   }));
+  // }
+
+  onError(error){
+    console.log(error);
+  }
+
   render() {
     // const activePlace = this.state.activePlace;
     const localIP = this.state.localIP;
     if (!localIP) return <div>Loading data...</div>;
 
+    console.log(this.state.city);
+
     let style = {
       backgroundImage: `url(${Background})`,
       backgroundSize: 'cover'
-    }
+    };
 
     let styleChart = {
       opacity: '0.8'
-    }
+    };
 
     return (
       <div style={style}>
@@ -46,15 +102,30 @@ class App extends Component {
         <Grid>
           <Row>
             <Col md={4} sm={4}>
-              <LocalWeather city_name={localIP.city} country_code={localIP.country} />
+              <LocalWeather city={localIP.city} country={localIP.country} />
             </Col>
             <Col md={8} sm={8} style={styleChart}>
-              <HighChartsPlot city_name={localIP.city} country_code={localIP.country} />
+              <HighChartsPlot city={localIP.city} country={localIP.country} />
             </Col>
           </Row>
           <Row>
-            <br></br>
+            <Col md={12} sm={12}>
+              <br />
+                <form onSubmit={this.handleSubmit}>
+                  <input 
+                    onChange={this.handleChange} 
+                    value={this.state.text} 
+                  />
+                  <button>New City</button>
+                </form>
+              <br />
+              <Fetch url="http://httpbin.org/headers" onError={this.onError}>
+                <TestComponent/>
+              </Fetch>
+            </Col>
           </Row>
+
+
         </Grid>
       </div>
     );

diff --git a/src/HighChartsPlot.js b/src/HighChartsPlot.js
@@ -9,20 +9,20 @@ class HighChartsPlot extends Component {
     super();
     this.state = {
       weatherData: null,
-      city_name: '',
-      country_code: ''
+      city: '',
+      country: ''
     };
   }
 
   componentDidMount() {
-    const city_name = this.props.city_name;
-    this.setState({ city_name: city_name });
-    const country_code = this.props.country_code;
-    this.setState({ country_code: country_code });
+    let city = this.props.city;
+    this.setState({ city: city });
+    let country = this.props.country;
+    this.setState({ country: country });
     const URL = "http://api.openweathermap.org/data/2.5/forecast?q=" 
-                + city_name 
+                + city 
                 + "," 
-                + country_code 
+                + country 
                 + "&appid=ea60d6923551d551e93f9a69210c0440"
                 + "&units=metric"
                 + "&cnt=12";
@@ -56,7 +56,7 @@ class HighChartsPlot extends Component {
         zoomType: 'xy'
       },
       title: {
-          text: `Weather and Forecast Data for ${this.state.city_name}, ${this.state.country_code}`
+          text: `Weather and Forecast Data for ${this.state.city}, ${this.state.country}`
       },
       subtitle: {
           text: 'Source: <a>http://openweathermap.org/</a>'

diff --git a/src/LocalWeather.js b/src/LocalWeather.js
@@ -2,17 +2,10 @@ import React, { Component } from 'react';
 import WeatherDisplay from './WeatherDisplay';
 
 class LocalWeather extends Component {
-  constructor() {
-    super();
-    this.state = {
-      localIP: null,
-    };
-  }
-
   render() {
     return (
       <div>
-        <WeatherDisplay name={this.props.city_name} country={this.props.country_code} />
+        <WeatherDisplay name={this.props.city} country={this.props.country} />
       </div>
     );
   }

diff --git a/src/TestComponent.jsx b/src/TestComponent.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class TestComponent extends React.Component{
+  render(){
+
+    return (
+      <div>
+      {this.props.headers ? <div>Your User-Agent: {this.props.headers['User-Agent']}</div>: 'loading'}
+      </div>
+    );
+  }
+}
+
+export default TestComponent;