add hotkey for historical view

src/components/HelpModal.jsx

@@ -32,6 +32,7 @@ const HelpModal = () => (
     <p className="modaltext">Click a color in palette to select</p>
     <p className="modaltext">Press <kbd>G</kbd> to toggle grid</p>
     <p className="modaltext">Press <kbd>X</kbd> to toggle showing of pixel activity</p>
+    <p className="modaltext">Press <kbd>H</kbd> to toggle historical view</p>
     <p className="modaltext">Press <kbd>R</kbd> to copy coordinates</p>
     <p className="modaltext">Press <kbd>Q</kbd> or <kbd>E</kbd> to zoom</p>
     <p className="modaltext">Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
@@ -45,6 +46,7 @@ const HelpModal = () => (
     <h3 className="modaltitle">3D Controls</h3>
     <p className="modaltext">Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
     <p className="modaltext">Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
+    <p className="modaltext">Press <kbd>E</kbd> and <kbd>C</kbd> to fly up and down</p>
     <p className="modaltext">Scroll mouse wheel to zoom</p>
     <p className="modaltext">Left click and drag mouse to rotate</p>
     <p className="modaltext">Middle click and drag mouse to zoom</p>

src/components/HistorySelect.jsx

@@ -14,10 +14,18 @@ function dateToString(date) {
   // YYYYMMDD
   return timeString;
 }
+function stringToDate(timeString) {
+  // YYYYMMDD
+  // eslint-disable-next-line max-len
+  const date = `${timeString.substr(0, 4)}-${timeString.substr(4, 2)}-${timeString.substr(6, 2)}`;
+  // YYYY-MM-DD
+  return date;
+}
 
 async function getTimes(day, canvasId) {
   try {
-    const response = await fetch(`./api/history?day=${day}&id=${canvasId}`);
+    const date = dateToString(day);
+    const response = await fetch(`./api/history?day=${date}&id=${canvasId}`);
     if (response.status !== 200) {
       return [];
     }
@@ -48,6 +56,7 @@ class HistorySelect extends React.Component {
       submitting: false,
       selectedDate: null,
       selectedTime: null,
+      times: [],
       max,
     };
     this.dateSelect = null;
@@ -75,7 +84,7 @@ class HistorySelect extends React.Component {
       canvasId,
       setTime,
     } = this.props;
-    const date = dateToString(evt.target.value);
+    const date = evt.target.value;
     const times = await getTimes(date, canvasId);
     if (times.length === 0) {
       this.setState({
@@ -117,6 +126,7 @@ class HistorySelect extends React.Component {
     if (!selectedTime || times.length === 0) {
       return;
     }
+
     const {
       setTime,
       canvasId,
@@ -129,7 +139,7 @@ class HistorySelect extends React.Component {
       } else {
         this.dateSelect.stepUp(1);
       }
-      selectedDate = dateToString(this.dateSelect.value);
+      selectedDate = this.dateSelect.value;
       this.setState({
         submitting: true,
         times: [],
@@ -162,18 +172,42 @@ class HistorySelect extends React.Component {
     const {
       canvasStartDate,
     } = this.props;
+
     const {
       submitting,
+      max,
+    } = this.state;
+    let {
       times,
       selectedDate,
       selectedTime,
-      max,
     } = this.state;
+
+    if (!selectedDate) {
+      const {
+        historicalDate,
+        historicalTime,
+      } = this.props;
+
+      if (historicalDate && historicalTime) {
+        selectedDate = stringToDate(historicalDate);
+        selectedTime = historicalTime;
+        times = [historicalTime];
+
+        this.setState({
+          selectedDate,
+          selectedTime,
+          times,
+        });
+      }
+    }
+
     return (
       <div id="historyselect">
         <input
           type="date"
           requiredPattern="\d{4}-\d{2}-\d{2}"
+          value={selectedDate}
           min={canvasStartDate}
           max={max}
           ref={(ref) => { this.dateSelect = ref; }}
@@ -193,7 +227,12 @@ class HistorySelect extends React.Component {
                   onChange={this.handleTimeChange}
                 >
                   {times.map((value) => (
-                    <option value={value}>{value}</option>
+                    <option
+                      value={value}
+                      selected={value === selectedTime}
+                    >
+                      {value}
+                    </option>
                   ))}
                 </select>
                 <button
@@ -217,7 +256,8 @@ function mapDispatchToProps(dispatch) {
   return {
     setTime(date: string, time: string) {
       const timeString = time.substr(0, 2) + time.substr(-2, 2);
-      dispatch(selectHistoricalTime(date, timeString));
+      const dateString = dateToString(date);
+      dispatch(selectHistoricalTime(dateString, timeString));
     },
   };
 }
@@ -226,8 +266,12 @@ function mapStateToProps(state: State) {
   const {
     canvasId,
     canvasStartDate,
+    historicalDate,
+    historicalTime,
   } = state.canvas;
-  return { canvasId, canvasStartDate };
+  return {
+    canvasId, canvasStartDate, historicalDate, historicalTime,
+  };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(HistorySelect);

src/components/SettingsModal.jsx

@@ -178,6 +178,7 @@ function SettingsModal({
             title="Historical View"
             description="Check out past versions of the canvas."
             value={isHistoricalView}
+            keyBind="H"
             onToggle={onToggleHistoricalView}
           />
         ) : null }

src/controls/keypress.js

@@ -8,6 +8,7 @@ import store from '../ui/store';
 import copy from '../utils/clipboard';
 import {
   toggleGrid,
+  toggleHistoricalView,
   togglePixelNotify,
   toggleMute,
   notify,
@@ -26,6 +27,9 @@ function onKeyPress(event: KeyboardEvent) {
     case 'g':
       store.dispatch(toggleGrid());
       break;
+    case 'h':
+      store.dispatch(toggleHistoricalView());
+      break;
     case 'x':
       store.dispatch(togglePixelNotify());
       break;