Merge pull request #1825 from HSLdevcom/DT-2187

DT-2187 Make sure popups receive updated time
HSLdevcom · Sep 14, 2017 · 94a828e · 94a828e
2 parents c0f621e + 27eda21
commit 94a828e
Showing 1 changed file with 30 additions and 23 deletions.
diff --git a/app/component/map/tile-layer/TileLayerContainer.js b/app/component/map/tile-layer/TileLayerContainer.js
@@ -86,14 +86,10 @@ const LocationPopupWithContext = provideContext(LocationPopup, {
   config: PropTypes.object.isRequired,
 });
 
-const PopupOptions = {
-  offset: [110, 16],
-  closeButton: false,
-  minWidth: 260,
-  maxWidth: 260,
-  autoPanPaddingTopLeft: [5, 125],
-  className: 'popup',
-  ref: 'popup',
+const initialState = {
+  selectableTargets: undefined,
+  coords: undefined,
+  showSpinner: true,
 };
 
 // TODO eslint doesn't know that TileLayerContainer is a react component,
@@ -118,8 +114,8 @@ class TileLayerContainer extends GridLayer {
   };
 
   state = {
-    stops: undefined,
-    coords: undefined,
+    ...initialState,
+    currentTime: this.context.getStore('TimeStore').getCurrentTime().unix(),
   };
 
   componentWillMount() {
@@ -142,6 +138,8 @@ class TileLayerContainer extends GridLayer {
     let activeTiles;
 
     if (e.currentTime) {
+      this.setState({ currentTime: e.currentTime.unix(), showSpinner: false });
+
       /* eslint-disable no-underscore-dangle */
       activeTiles = lodashFilter(
         this.leafletElement._tiles,
@@ -177,6 +175,19 @@ class TileLayerContainer extends GridLayer {
     /* eslint-enable no-underscore-dangle */
   };
 
+  onPopupclose = () => this.setState(initialState);
+
+  PopupOptions = {
+    offset: [110, 16],
+    closeButton: false,
+    minWidth: 260,
+    maxWidth: 260,
+    autoPanPaddingTopLeft: [5, 125],
+    className: 'popup',
+    ref: 'popup',
+    onClose: this.onPopupclose,
+  };
+
   createLeafletElement(props) {
     const Layer = L.GridLayer.extend({ createTile: this.createTile });
     const leafletElement = new Layer(this.getOptions(props));
@@ -207,13 +218,15 @@ class TileLayerContainer extends GridLayer {
       this.setState({
         selectableTargets,
         coords,
+        showSpinner: true,
       });
     };
 
     return tile.el;
   };
 
-  selectRow = option => this.setState({ selectableTargets: [option] });
+  selectRow = option =>
+    this.setState({ selectableTargets: [option], showSpinner: true });
 
   render() {
     let popup = null;
@@ -236,20 +249,14 @@ class TileLayerContainer extends GridLayer {
                 this.state.selectableTargets[0].feature.properties.stops
                   ? new TerminalRoute({
                       terminalId: id,
-                      currentTime: this.context
-                        .getStore('TimeStore')
-                        .getCurrentTime()
-                        .unix(),
+                      currentTime: this.state.currentTime,
                     })
                   : new StopRoute({
                       stopId: id,
-                      currentTime: this.context
-                        .getStore('TimeStore')
-                        .getCurrentTime()
-                        .unix(),
+                      currentTime: this.state.currentTime,
                     })
               }
-              renderLoading={loadingPopup}
+              renderLoading={this.state.showSpinner ? loadingPopup : undefined}
               renderFetched={data =>
                 <StopMarkerPopupWithContext {...data} context={this.context} />}
             />
@@ -327,15 +334,15 @@ class TileLayerContainer extends GridLayer {
           );
         }
         popup = (
-          <Popup {...PopupOptions} key={id} position={this.state.coords}>
+          <Popup {...this.PopupOptions} key={id} position={this.state.coords}>
             {contents}
           </Popup>
         );
       } else if (this.state.selectableTargets.length > 1) {
         popup = (
           <Popup
             key={this.state.coords.toString()}
-            {...PopupOptions}
+            {...this.PopupOptions}
             maxHeight={220}
             position={this.state.coords}
           >
@@ -350,7 +357,7 @@ class TileLayerContainer extends GridLayer {
         popup = (
           <Popup
             key={this.state.coords.toString()}
-            {...PopupOptions}
+            {...this.PopupOptions}
             maxHeight={220}
             position={this.state.coords}
           >