This repository has been archived by the owner on Apr 16, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 26
/
ForecastTile.jsx
99 lines (84 loc) · 2.52 KB
/
ForecastTile.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react';
import { connect } from 'react-redux';
import api from 'services';
import classes from './ForecastTile.scss';
import RaisedButton from 'material-ui/RaisedButton';
import { palette } from 'styles/muiTheme';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
const styles = {
wrapper: {
maxHeight: '400px',
overflow: 'hidden',
},
meta: {
color: palette.textColor,
},
column: {
padding: '0rem',
height: '30px',
},
};
// Use named export for unconnected component (for tests)
export class ForecastTile extends React.PureComponent {
componentWillMount = () => {
this.getWeatherForecast();
}
componentDidUpdate = () => {
this.getWeatherForecast();
}
// TOOD: Use redux
getWeatherForecast = () => {
if (!this.props.token) return;
if (this.props.address && !this.props.address.weather) {
const address = this.props.address;
api.getWeatherObservations(this.props.token, address.longitude, address.latitude)
.then((json) => {
console.log('Got weather for ', address);
console.log('json: ', json);
this.props.address.weather = json.forecasts;
if (this.props.address.weather) this.forceUpdate();
}
);
}
}
render() {
return (
<Table wrapperStyle={styles.wrapper}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
<TableHeaderColumn style={styles.header}>Day</TableHeaderColumn>
<TableHeaderColumn style={styles.header}>Summary</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false} >
{ this.props.address.weather && this.props.address.weather.map((forecast, i) =>
<TableRow key={i}>
<TableRowColumn style={styles.column}>{forecast.dow}</TableRowColumn>
<TableRowColumn style={styles.column}>
{forecast.day ? forecast.day.phrase_22char : forecast.night.phrase_22char}
</TableRowColumn>
</TableRow>
)}
</TableBody>
</Table>
);
}
}
ForecastTile.propTypes = {
token: React.PropTypes.string.isRequired,
address: React.PropTypes.object.isRequired,
};
// ------------------------------------
// Connect Component to Redux
// ------------------------------------
const mapStateToProps = (state) => ({
token: state.demoSession.token,
});
export default connect(mapStateToProps, {})(ForecastTile);