Merge pull request #55 from pacificclimate/i52-set-default-date

Set default date to latest with data
pacificclimate · Sep 11, 2020 · 28ef8df · 28ef8df
2 parents f4ff436 + 1a76041
commit 28ef8df
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "classnames": "^2.2.5",
     "leaflet": "^1.2.0",
     "lodash": "^4.17.4",
+    "moment": "^2.27.0",
     "proj4": "^2.4.4",
     "proj4leaflet": "^1.0.2",
     "react": "^16.0.0",

diff --git a/src/components/DataViewer/DataViewer.js b/src/components/DataViewer/DataViewer.js
@@ -52,7 +52,7 @@ class DataViewer extends PureComponent {
         return (
             <div>
                 <DataLoader
-                    {...pick(this.props, 'variable year month')}
+                    {...pick(this.props, 'variable date')}
                     onDataWillLoad={this.handleDataWillLoad}
                     onDataDidLoad={this.handleDataDidLoad}
                     onDidCatch={this.handleDidCatch}
@@ -70,8 +70,7 @@ class DataViewer extends PureComponent {
 DataViewer.propTypes = {
     dataset: PropTypes.string.isRequired,
     variable: PropTypes.string.isRequired,
-    year: PropTypes.number.isRequired,
-    month: PropTypes.number.isRequired,
+    date: PropTypes.object.isRequired,
     onDataWillLoad: PropTypes.func,
     onDataDidLoad: PropTypes.func,
     onDataDidCatch: PropTypes.func,

diff --git a/src/components/DataViewer/__tests__/smoke.js b/src/components/DataViewer/__tests__/smoke.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import DataViewer from '../DataViewer';
+import moment from 'moment';
 
 jest.mock('../../../data-services/weather-anomaly-data-service');
 
@@ -10,8 +11,7 @@ it('renders without crashing', () => {
         <DataViewer
             dataset={'anomaly'}
             variable={'precip'}
-            year={2000}
-            month={1}
+            date={moment([2000, 1])}
         />,
         div
     );

diff --git a/src/components/FakeDataLoader/FakeDataLoader.js b/src/components/FakeDataLoader/FakeDataLoader.js
@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col } from 'react-bootstrap';
 
-import _ from 'lodash';
-
 import logger from '../../logger';
 import './FakeDataLoader.css';
 
@@ -43,7 +41,7 @@ function getFakeData(delay, failProb) {
 
 // TODO: Add error controls
 
-class FakeDataLoader extends Component {
+export default class FakeDataLoader extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -75,8 +73,10 @@ class FakeDataLoader extends Component {
 
     componentWillReceiveProps(nextProps) {
         logger.log(this, nextProps);
-        const checkKeys = 'variable year month'.split(' ');
-        if (!_.isEqual(_.pick(nextProps, checkKeys), _.pick(this.props, checkKeys))) {
+        if (
+          nextProps.variable !== this.props.variable ||
+          !nextProps.date.isSame(this.props.date)
+        ) {
             this.loadData();
         }
     }
@@ -113,8 +113,14 @@ class FakeDataLoader extends Component {
                     </Col>
                 </Row>
                 <Row>
-                    {this.state.loading ? <span>Loading... </span> : <span>Data: </span>}
-                    <span>{this.props.variable};{this.props.year}-{this.props.month}</span>
+                    {this.state.loading ?
+                      <span>Loading... </span> :
+                      <span>Data: </span>
+                    }
+                    <span>
+                        {this.props.variable};
+                        {this.props.date.year()}-{this.props.date.month()+1}
+                    </span>
                 </Row>
             </div>
         );
@@ -123,11 +129,8 @@ class FakeDataLoader extends Component {
 
 FakeDataLoader.propTypes = {
     variable: PropTypes.string.isRequired,
-    year: PropTypes.number.isRequired,
-    month: PropTypes.number.isRequired,
+    date: PropTypes.object.isRequired,
     onDataWillLoad: PropTypes.func.isRequired,
     onDataDidLoad: PropTypes.func.isRequired,
     onDidCatch: PropTypes.func.isRequired,
 };
-
-export default FakeDataLoader;
diff --git a/src/components/FakeDataLoader/__tests__/smoke.js b/src/components/FakeDataLoader/__tests__/smoke.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import FakeDataLoader from '../FakeDataLoader';
+import moment from 'moment';
 
 it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(
         <FakeDataLoader
             variable={'var'}
-            year={2000}
-            month={1}
+            date={moment([2000, 1])}
             onDataWillLoad={() => {}}
             onDataDidLoad={() => {}}
             onDidCatch={() => {}}

diff --git a/src/components/MonthSelector/MonthSelector.js b/src/components/MonthSelector/MonthSelector.js
@@ -10,7 +10,6 @@ import { bindFunctions, pick } from '../utils';
 import './MonthSelector.css';
 
 const monthNames = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ');
-const formatLabel = value => monthNames[value-1];
 
 class MonthSelector extends PureComponent {
     constructor(props) {
@@ -31,13 +30,15 @@ class MonthSelector extends PureComponent {
         }
     }
 
+    formatLabel = value => monthNames[value - this.props.start];
+
     render() {
         return (
             <InputRange
                 {...pick(this.props, 'className disabled')}
                 minValue={this.props.start}
                 maxValue={this.props.end}
-                formatLabel={formatLabel}
+                formatLabel={this.formatLabel}
                 value={this.state.value}
                 onChange={this.handleChange}
                 onChangeComplete={this.props.onChange}
@@ -61,8 +62,8 @@ MonthSelector.propTypes = {
 
 MonthSelector.defaultProps = {
     disabled: false,
-    start: 1,
-    end: 12,
+    start: 0,
+    end: 11,
 };
 
 

diff --git a/src/components/RealDataLoader/RealDataLoader.js b/src/components/RealDataLoader/RealDataLoader.js
@@ -2,15 +2,13 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Row } from 'react-bootstrap';
 
-import _ from 'lodash';
-
 import logger from '../../logger';
 import { bindFunctions } from '../utils';
 import { getBaselineData, getMonthlyData } from '../../data-services/weather-anomaly-data-service';
 
 import './RealDataLoader.css';
 
-class RealDataLoader extends PureComponent {
+export default class RealDataLoader extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
@@ -31,16 +29,18 @@ class RealDataLoader extends PureComponent {
         this.setState({loading: false});
     }
 
-    loadData({variable, year, month}) {
+    loadData({variable, date}) {
         logger.log(this, this.state, this.props);
 
         this.setState({loading: true});
         this.props.onDataWillLoad();
 
         // TODO: Don't reload baseline data when month doesn't change
-        const baselineP = getBaselineData(variable, this.props.errorTest && month === 12 ? 13: month);
-        const monthlyP = getMonthlyData(variable, year, month);
-        Promise.all([baselineP, monthlyP]).then(this.dataDidLoad).catch(this.dataLoadError);
+        const baselineP = getBaselineData(variable, date);
+        const monthlyP = getMonthlyData(variable, date);
+        Promise.all([baselineP, monthlyP])
+            .then(this.dataDidLoad)
+            .catch(this.dataLoadError);
     }
 
     componentDidMount() {
@@ -50,8 +50,10 @@ class RealDataLoader extends PureComponent {
 
     componentWillReceiveProps(nextProps) {
         logger.log(this, nextProps);
-        const checkKeys = 'variable year month'.split(' ');
-        if (!_.isEqual(_.pick(nextProps, checkKeys), _.pick(this.props, checkKeys))) {
+        if (
+          nextProps.variable !== this.props.variable ||
+          !nextProps.date.isSame(this.props.date)
+        ) {
             this.loadData(nextProps);
         }
     }
@@ -64,8 +66,14 @@ class RealDataLoader extends PureComponent {
                     Real Data Loader: Goes out to the WADS!
                 </Row>
                 <Row>
-                    {this.state.loading ? <span>Loading... </span> : <span>Data: </span>}
-                    <span>{this.props.variable};{this.props.year}-{this.props.month}</span>
+                    {this.state.loading ?
+                      <span>Loading... </span> :
+                      <span>Data: </span>
+                    }
+                    <span>
+                        {this.props.variable};
+                        {this.props.date.year()}-{this.props.date.month()+1}
+                    </span>
                 </Row>
             </div>
         );
@@ -74,8 +82,7 @@ class RealDataLoader extends PureComponent {
 
 RealDataLoader.propTypes = {
     variable: PropTypes.string.isRequired,
-    year: PropTypes.number.isRequired,
-    month: PropTypes.number.isRequired,
+    date: PropTypes.object.isRequired,
     render: PropTypes.bool,
     errorTest: PropTypes.bool,
     onDataWillLoad: PropTypes.func.isRequired,
@@ -88,5 +95,3 @@ RealDataLoader.defaultProps = {
     render: false,
     errorTest: false,
 };
-
-export default RealDataLoader;
diff --git a/src/components/RealDataLoader/__tests__/smoke.js b/src/components/RealDataLoader/__tests__/smoke.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import RealDataLoader from '../RealDataLoader';
+import moment from 'moment';
 
 jest.mock('../../../data-services/weather-anomaly-data-service');
 
@@ -9,8 +10,7 @@ it('renders without crashing', () => {
     ReactDOM.render(
         <RealDataLoader
             variable={'var'}
-            year={2000}
-            month={1}
+            date={moment([2000, 1])}
             onDataWillLoad={() => {}}
             onDataDidLoad={() => {}}
             onDidCatch={() => {}}

diff --git a/src/components/TestDataLoader/TestDataLoader.js b/src/components/TestDataLoader/TestDataLoader.js
@@ -9,7 +9,7 @@ import RealDataLoader from "../RealDataLoader";
 
 import './TestDataLoader.css';
 
-class TestDataLoader extends Component {
+export default class TestDataLoader extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -18,11 +18,17 @@ class TestDataLoader extends Component {
     }
 
     render() {
-        const dataLoaderProps = pick(this.props, 'variable month year onDataWillLoad onDataDidLoad onDidCatch');
+        const dataLoaderProps = pick(
+          this.props,
+          'variable date onDataWillLoad onDataDidLoad onDidCatch'
+        );
         return (
             <Row>
                 <Col lg={2}>
-                    <DataLoaderMode value={this.state.mode} onChange={mode => { this.setState({mode}); }}/>
+                    <DataLoaderMode
+                      value={this.state.mode}
+                      onChange={mode => { this.setState({mode}); }}
+                    />
                 </Col>
                 <Col lg={10}>
                     {
@@ -38,11 +44,8 @@ class TestDataLoader extends Component {
 
 TestDataLoader.propTypes = {
     variable: PropTypes.string.isRequired,
-    year: PropTypes.number.isRequired,
-    month: PropTypes.number.isRequired,
+    date: PropTypes.object.isRequired,
     onDataWillLoad: PropTypes.func.isRequired,
     onDataDidLoad: PropTypes.func.isRequired,
     onDidCatch: PropTypes.func.isRequired,
 };
-
-export default TestDataLoader;
diff --git a/src/components/TestDataLoader/__tests__/smoke.js b/src/components/TestDataLoader/__tests__/smoke.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestDataLoader from '../TestDataLoader';
+import moment from 'moment';
 
 jest.mock('../../../data-services/weather-anomaly-data-service');
 
@@ -9,8 +10,7 @@ it('renders without crashing', () => {
     ReactDOM.render(
         <TestDataLoader
             variable={'precip'}
-            year={1990}
-            month={6}
+            date={moment([1990, 6])}
             onDataWillLoad={() => {}}
             onDataDidLoad={() => {}}
             onDidCatch={() => {}}