From feed8ba955bfa0ac957e2757b18d6fa7fb45df47 Mon Sep 17 00:00:00 2001
From: Hannes Junnila <hannes.junnila@gmail.com>
Date: Wed, 13 Sep 2017 10:08:10 +0300
Subject: [PATCH 1/2] DT-2187 Make sure popups recieve updated time

Also make sure they don't reopen after closing them when time updates
---
 .../map/tile-layer/TileLayerContainer.js      | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/app/component/map/tile-layer/TileLayerContainer.js b/app/component/map/tile-layer/TileLayerContainer.js
index a623b86e58..7171fa9e98 100644
--- a/app/component/map/tile-layer/TileLayerContainer.js
+++ b/app/component/map/tile-layer/TileLayerContainer.js
@@ -86,14 +86,9 @@ 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,
 };
 
 // TODO eslint doesn't know that TileLayerContainer is a react component,
@@ -118,8 +113,8 @@ class TileLayerContainer extends GridLayer {
   };
 
   state = {
-    stops: undefined,
-    coords: undefined,
+    ...initialState,
+    currentTime: this.context.getStore('TimeStore').getCurrentTime().unix(),
   };
 
   componentWillMount() {
@@ -142,6 +137,8 @@ class TileLayerContainer extends GridLayer {
     let activeTiles;
 
     if (e.currentTime) {
+      this.setState({ currentTime: e.currentTime.unix() });
+
       /* eslint-disable no-underscore-dangle */
       activeTiles = lodashFilter(
         this.leafletElement._tiles,
@@ -177,6 +174,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));
@@ -236,17 +246,11 @@ 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}
@@ -327,7 +331,7 @@ class TileLayerContainer extends GridLayer {
           );
         }
         popup = (
-          <Popup {...PopupOptions} key={id} position={this.state.coords}>
+          <Popup {...this.PopupOptions} key={id} position={this.state.coords}>
             {contents}
           </Popup>
         );
@@ -335,7 +339,7 @@ class TileLayerContainer extends GridLayer {
         popup = (
           <Popup
             key={this.state.coords.toString()}
-            {...PopupOptions}
+            {...this.PopupOptions}
             maxHeight={220}
             position={this.state.coords}
           >
@@ -350,7 +354,7 @@ class TileLayerContainer extends GridLayer {
         popup = (
           <Popup
             key={this.state.coords.toString()}
-            {...PopupOptions}
+            {...this.PopupOptions}
             maxHeight={220}
             position={this.state.coords}
           >

From 27eda21904c6e990eee89e5af4222ddb5d676adf Mon Sep 17 00:00:00 2001
From: Hannes Junnila <hannes.junnila@gmail.com>
Date: Wed, 13 Sep 2017 17:07:31 +0300
Subject: [PATCH 2/2] Add state for showing spinner

---
 app/component/map/tile-layer/TileLayerContainer.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/component/map/tile-layer/TileLayerContainer.js b/app/component/map/tile-layer/TileLayerContainer.js
index 7171fa9e98..bb4f835c61 100644
--- a/app/component/map/tile-layer/TileLayerContainer.js
+++ b/app/component/map/tile-layer/TileLayerContainer.js
@@ -89,6 +89,7 @@ const LocationPopupWithContext = provideContext(LocationPopup, {
 const initialState = {
   selectableTargets: undefined,
   coords: undefined,
+  showSpinner: true,
 };
 
 // TODO eslint doesn't know that TileLayerContainer is a react component,
@@ -137,7 +138,7 @@ class TileLayerContainer extends GridLayer {
     let activeTiles;
 
     if (e.currentTime) {
-      this.setState({ currentTime: e.currentTime.unix() });
+      this.setState({ currentTime: e.currentTime.unix(), showSpinner: false });
 
       /* eslint-disable no-underscore-dangle */
       activeTiles = lodashFilter(
@@ -217,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;
@@ -253,7 +256,7 @@ class TileLayerContainer extends GridLayer {
                       currentTime: this.state.currentTime,
                     })
               }
-              renderLoading={loadingPopup}
+              renderLoading={this.state.showSpinner ? loadingPopup : undefined}
               renderFetched={data =>
                 <StopMarkerPopupWithContext {...data} context={this.context} />}
             />