details component

bdhsu · Jan 14, 2019 · 65b82e1 · 65b82e1
1 parent 46ab1c8
commit 65b82e1
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 32 deletions.
diff --git a/src/App.css b/src/App.css
@@ -125,3 +125,21 @@ header {
     font-size: 28px;
     font-weight: 300;
 }
+
+/* details */
+/* details */
+/* details */
+
+.details-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.details-container p {
+    display: block;
+    margin: 0 auto;
+    padding: 20px;
+    font-size: 28px;
+    font-weight: 300;
+}
diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,7 @@ import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
 import Home from './Home';
 import Forecast from './Forecast';
 import LocationInput from './LocationInput';
+import Details from './Details';
 import api  from './utils/api';
 
 
@@ -33,14 +34,15 @@ class App extends Component {
                             <a href="/" >Forecast</a>
                         </div>
 
-                        <LocationInput
+                        {/* <LocationInput
                             style={{flexDirection: "row"}}
                             onSubmit={this.handleSubmit}
-                        />
+                        /> */}
                     </header>
                     <Switch>
                         <Route exact path="/" component={Home} />
                         <Route exact path="/forecast" component={Forecast} />
+                        <Route path="/details/:city" component={Details} />
                     </Switch>
                 </div>
             </Router>

diff --git a/src/Day.js b/src/Day.js
@@ -1,11 +1,18 @@
 import React, {Component} from 'react';
+// component
+import dateHelper from './utils/dateHelper';
 
-class Day extends Component {
-    render() {
-        return (
-
-        )
-    }
+const Day = (props) => {
+    var date = props.day.dt;
+    var pic = props.day.weather["0"].icon;
+    return (
+        <div className="day-container">
+            <div className="day-item" onClick={props.onClick}>
+                <img className="day-pic" src={require("./img/weather-icons/" + pic + ".svg")} alt="" />
+                <p className="day-title">{dateHelper.convertTimestamp(date)}</p>
+            </div>
+        </div>
+    )
 }
 
 export default Day;
diff --git a/src/Details.js b/src/Details.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import Day from './Day';
+import dateHelper from './utils/dateHelper';
+
+class Details extends Component {
+    render() {
+        var day = this.props.location.state;
+        return (
+            <div>
+                <Day key={day.dt} day={day}/>
+                <div className="details-container">
+                    <p>{day.weather[0].description}</p>
+                    <p>min temp: {dateHelper.convertTemp(day.temp.min)}</p>
+                    <p>max temp: {dateHelper.convertTemp(day.temp.max)}</p>
+                    <p>humidity: {day.humidity}</p>
+                </div>
+                {/* {JSON.stringify(day.humidity)} */}
+            </div>
+        )
+    }
+}
+
+export default Details;
diff --git a/src/Forecast.js b/src/Forecast.js
@@ -3,17 +3,9 @@ import queryString from 'query-string';
 // components
 import api from './utils/api';
 import dateHelper from './utils/dateHelper';
+import Day from './Day';
+
 
-const Day = (props) => {
-    var date = props.day.dt;
-    var pic = props.day.weather["0"].icon;
-    return (
-        <div className="day-item">
-            <img className="day-pic" src={require("./img/weather-icons/" + pic + ".svg")} alt="" />
-            <p className="day-title">{dateHelper.convertTimestamp(date)}</p>
-        </div>
-    )
-}
 
 class Forecast extends Component {
     constructor(props) {
@@ -25,6 +17,8 @@ class Forecast extends Component {
             weather: null,
             loading: true,
         }
+
+        this.handleClick = this.handleClick.bind(this);
     }
     componentDidMount() {
         var location = queryString.parse(this.props.location.search);
@@ -50,14 +44,15 @@ class Forecast extends Component {
             }.bind(this));
     }
 
-    // handleClick(location) {
-    //     console.log(JSON.stringify(location));
-    //
-    //     this.props.history.push({
-    //         pathname: 'forecast',
-    //         search: '?city=' + location,
-    //     });
-    // }
+    handleClick(day) {
+        console.log('hi');
+        console.log(JSON.stringify(day));
+
+        this.props.history.push({
+            pathname: '/details/' + this.state.location,
+            state: day,
+        });
+    }
 
     render() {
         var error = this.state.error;
@@ -90,12 +85,9 @@ class Forecast extends Component {
                 {JSON.stringify(dateHelper.convertTimestamp(weather[6].dt))}
                 {JSON.stringify(dateHelper.convertTimestamp(weather[7].dt))}
                 {JSON.stringify(dateHelper.convertTimestamp(weather[8].dt))} */}
-                <div className="day-container">
-                    {weather.map(function(day) {
-                        return <Day day={day}/>
-                    }, this)}
-                </div>
-
+                {weather.map(function(day) {
+                    return <Day onClick={_ => this.handleClick(day)} key={day.dt} day={day}/>
+                }, this)}
             </div>
         )
     }

diff --git a/src/utils/dateHelper.js b/src/utils/dateHelper.js
@@ -35,6 +35,11 @@ function convertTimestamp(timestamp) {
     return week + ', ' + month + ' ' + day;
 }
 
+function convertTemp(kelvin) {
+  return parseInt(((kelvin - 273.15)* 1.8000 + 32.00), 10)
+}
+
 module.exports = {
     convertTimestamp: convertTimestamp,
+    convertTemp: convertTemp,
 }