Merge pull request tidepool-org#600 from tidepool-org/time-check-copy

timezone copy updates and focus TZ selector on cancel

app/actions/sync.js

@@ -790,4 +790,11 @@ export function dismissedDeviceTimePromp() {
     type: actionTypes.DISMISS_DEVICE_TIME_PROMPT,
     meta: { source: actionSources[actionTypes.DISMISS_DEVICE_TIME_PROMPT] }
   };
+}
+
+export function timezoneBlur() {
+  return {
+    type: actionTypes.TIMEZONE_BLUR,
+    meta: { source: actionSources[actionTypes.TIMEZONE_BLUR] }
+  };
 }

app/components/DeviceTimeModal.js

@@ -70,7 +70,7 @@ export class DeviceTimeModal extends Component {
     }
     buttons.push(
       <button key='cancel' className={styles.button} onClick={this.handleCancel}>
-        Check time again
+        Cancel this upload
       </button>
     );
 
@@ -87,10 +87,9 @@ export class DeviceTimeModal extends Component {
             <div className={styles.body}>
             Is your pump time set correctly? If not:
             <br/>
-            <div><span className={styles.numeral}>1.</span> Update the time on your pump</div>
-            <div><span className={styles.numeral}>2.</span> Suspend your pump</div>
-            <div><span className={styles.numeral}>3.</span> Resume your pump</div>
-            <div><span className={styles.numeral}>4.</span> Try uploading again</div>
+            <div><span className={styles.numeral}>1.</span> Cancel the current upload</div>
+            <div><span className={styles.numeral}>2.</span> Check the time on your device</div>
+            <div><span className={styles.numeral}>3.</span> Check the time zone in the Uploader</div>
             </div>
           </div>
         );
@@ -101,9 +100,9 @@ export class DeviceTimeModal extends Component {
             <div className={styles.body}>
             Is your CGM time set correctly? If not:
             <br/>
-            <div><span className={styles.numeral}>1.</span> Update the time and date on your CGM</div>
-            <div><span className={styles.numeral}>2.</span> Wait for a new reading to appear</div>
-            <div><span className={styles.numeral}>3.</span> Try uploading again</div>
+            <div><span className={styles.numeral}>1.</span> Cancel the current upload</div>
+            <div><span className={styles.numeral}>2.</span> Check the time on your device</div>
+            <div><span className={styles.numeral}>3.</span> Check the time zone in the Uploader</div>
             </div>
           </div>
         );
@@ -114,9 +113,9 @@ export class DeviceTimeModal extends Component {
             <div className={styles.body}>
             Is your meter time set correctly? If not:
             <br/>
-            <div><span className={styles.numeral}>1.</span> Update the time and date on your meter</div>
-            <div><span className={styles.numeral}>2.</span> Test your blood glucose again</div>
-            <div><span className={styles.numeral}>3.</span> Try uploading again</div>
+            <div><span className={styles.numeral}>1.</span> Cancel the current upload</div>
+            <div><span className={styles.numeral}>2.</span> Check the time on your device</div>
+            <div><span className={styles.numeral}>3.</span> Check the time zone in the Uploader</div>
             </div>
           </div>
         );

app/components/TimezoneDropdown.js

@@ -25,6 +25,16 @@ var cx = require('classnames');
 var styles = require('../../styles/components/TimezoneDropdown.module.less');
 
 class TimezoneDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.timezoneSelect = null;
+
+    this.setTimezoneSelect = element => {
+      this.timezoneSelect = element;
+    };
+  }
+
   static propTypes = {
     onTimezoneChange: PropTypes.func.isRequired,
     selectorLabel: PropTypes.string.isRequired,
@@ -37,7 +47,9 @@ class TimezoneDropdown extends React.Component {
     dismissUpdateProfileError: PropTypes.func.isRequired,
     isClinicAccount: PropTypes.bool,
     userDropdownShowing: PropTypes.bool,
-    isUploadInProgress: PropTypes.bool.isRequired
+    isUploadInProgress: PropTypes.bool.isRequired,
+    onBlur: PropTypes.func.isRequired,
+    isTimezoneFocused: PropTypes.bool.isRequired
   };
 
   componentWillReceiveProps(nextProps) {
@@ -64,6 +76,12 @@ class TimezoneDropdown extends React.Component {
     clearInterval(this.updateSuggestedInterval);
   }
 
+  componentDidUpdate() {
+    if (this.timezoneSelect && this.props.isTimezoneFocused) {
+      this.timezoneSelect.focus();
+    }
+  }
+
   buildTzSelector = () => {
     function sortByOffset(timezones) {
       return _.sortBy(timezones, function(tz) {
@@ -80,12 +98,14 @@ class TimezoneDropdown extends React.Component {
     return (
       <Select clearable={false}
         name={'timezoneSelect'}
+        onBlur={this.props.onBlur}
         onChange={this.props.onTimezoneChange.bind(null, targetUser)}
         options={opts}
         simpleValue={true}
         placeholder={'Type to search...'}
         value={this.props.targetTimezone}
-        disabled={this.props.isUploadInProgress} />
+        disabled={this.props.isUploadInProgress}
+        ref={this.setTimezoneSelect} />
     );
   };
 

app/constants/actionSources.js

@@ -51,6 +51,7 @@ export const TOGGLE_ERROR_DETAILS = USER;
 export const DISMISS_UPDATE_PROFILE_ERROR = USER;
 export const DISMISS_CREATE_CUSTODIAL_ACCOUNT_ERROR = USER;
 export const SET_ALL_USERS = UNDER_THE_HOOD;
+export const TIMEZONE_BLUR = UNDER_THE_HOOD;
 
 /*
  * Asyncronous action types

app/constants/actionTypes.js

@@ -47,6 +47,7 @@ export const TOGGLE_ERROR_DETAILS = 'TOGGLE_ERROR_DETAILS';
 export const DISMISS_UPDATE_PROFILE_ERROR = 'DISMISS_UPDATE_PROFILE_ERROR';
 export const DISMISS_CREATE_CUSTODIAL_ACCOUNT_ERROR = 'DISMISS_CREATE_CUSTODIAL_ACCOUNT_ERROR';
 export const SET_ALL_USERS = 'SET_ALL_USERS';
+export const TIMEZONE_BLUR = 'TIMEZONE_BLUR';
 
 /*
  * Asyncronous action types

app/containers/MainPage.js

@@ -69,7 +69,9 @@ export class MainPage extends Component {
         targetTimezone={this.props.selectedTimezone}
         updateProfileErrorDismissed={this.props.updateProfileErrorDismissed}
         updateProfileErrorMessage={this.props.updateProfileErrorMessage}
-        userDropdownShowing={this.props.showingUserSelectionDropdown} />
+        userDropdownShowing={this.props.showingUserSelectionDropdown}
+        onBlur={this.props.sync.timezoneBlur}
+        isTimezoneFocused={this.props.isTimezoneFocused} />
     );
   }
 
@@ -228,6 +230,7 @@ export default connect(
       allUsers: state.allUsers,
       blipUrls: state.blipUrls,
       isClinicAccount: isClinicAccount(state),
+      isTimezoneFocused: state.isTimezoneFocused,
       page: state.page,
       selectedTimezone: getSelectedTimezone(state),
       showingUserSelectionDropdown: shouldShowUserSelectionDropdown(state),

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tidepool-uploader",
   "productName": "tidepool-uploader",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "description": "Tidepool Project Universal Uploader",
   "main": "./main.js",
   "author": {

app/reducers/misc.js

@@ -284,3 +284,15 @@ export function showingDeviceTimePrompt(state = null, action) {
       return state;
   }
 }
+
+export function isTimezoneFocused(state = false, action) {
+  switch (action.type) {
+    case actionTypes.UPLOAD_CANCELLED:
+      return true;
+    case actionTypes.TIMEZONE_BLUR:
+    case actionTypes.UPLOAD_REQUEST:
+      return false;
+    default:
+      return state;
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tidepool-uploader",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "description": "Tidepool Project Universal Uploader",
   "private": true,
   "main": "main.js",

styles/components/DeviceTimeModal.module.less

@@ -77,9 +77,11 @@
 .button {
   composes: btn btnPrimary from '../core/buttons.module.less';
   margin: 6px;
+  padding: 0 10px;
 }
 
 .buttonSecondary {
   composes: btn btnSecondary from '../core/buttons.module.less';
   margin: 6px;
+  padding: 0 10px;
 }

test/app/actions/sync.test.js

@@ -1363,4 +1363,20 @@ describe('Synchronous Actions', () => {
       expect(syncActions.dismissedDeviceTimePromp()).to.deep.equal(expectedAction);
     });
   });
+
+  describe('timezoneBlur', () => {
+    it('should be an FSA', () => {
+      let action = syncActions.timezoneBlur();
+      expect(isFSA(action)).to.be.true;
+    });
+
+    it('should create an action to indicate blur of timezone selector', () => {
+      const expectedAction = {
+        type: actionTypes.TIMEZONE_BLUR,
+        meta: {source: actionSources[actionTypes.TIMEZONE_BLUR]}
+      };
+      expect(syncActions.timezoneBlur()).to.deep.equal(expectedAction);
+    });
+  });
+
 });

test/app/reducers/misc.test.js

@@ -706,4 +706,28 @@ describe('misc reducers', () => {
       })).to.be.false;
     });
   });
+
+  describe('isTimezoneFocused', () => {
+    it('should return the initial state', () => {
+      expect(misc.isTimezoneFocused(undefined, {})).to.be.false;
+    });
+
+    it('should handle UPLOAD_CANCELLED', () => {
+      expect(misc.isTimezoneFocused(undefined, {
+        type: actionTypes.UPLOAD_CANCELLED,
+      })).to.be.true;
+    });
+
+    it('should handle TIMEZONE_BLUR', () => {
+      expect(misc.isTimezoneFocused(undefined, {
+        type: actionTypes.TIMEZONE_BLUR,
+      })).to.be.false;
+    });
+
+    it('should handle UPLOAD_REQUEST', () => {
+      expect(misc.isTimezoneFocused(undefined, {
+        type: actionTypes.UPLOAD_REQUEST,
+      })).to.be.false;
+    });
+  });
 });