Include LinearProgress within tooltip component

WFP-VAM · May 17, 2021 · e8d0e89 · e8d0e89
1 parent 1d5057e
commit e8d0e89
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/src/components/MapView/MapTooltip/index.tsx b/src/components/MapView/MapTooltip/index.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Popup } from 'react-mapbox-gl';
-import { createStyles, withStyles, WithStyles } from '@material-ui/core';
+import {
+  createStyles,
+  withStyles,
+  WithStyles,
+  LinearProgress,
+} from '@material-ui/core';
 import { tooltipSelector } from '../../../context/tooltipStateSlice';
 
 function MapTooltip({ classes }: TooltipProps) {
@@ -21,6 +26,8 @@ function MapTooltip({ classes }: TooltipProps) {
             {key}: {value.data}
           </h4>
         ))}
+
+      {popup.wmsGetFeatureInfoLoading ? <LinearProgress /> : null}
     </Popup>
   ) : null;
 }

diff --git a/src/components/MapView/index.tsx b/src/components/MapView/index.tsx
@@ -44,9 +44,9 @@ import {
 } from '../../context/mapStateSlice/selectors';
 import { addLayer, setMap, updateDateRange } from '../../context/mapStateSlice';
 import {
-  showPopup,
   hidePopup,
   addPopupData,
+  setWMSGetFeatureInfoLoading,
 } from '../../context/tooltipStateSlice';
 import {
   availableDatesSelector,
@@ -240,28 +240,22 @@ function MapView({ classes }: MapViewProps) {
           ).format('YYYY-MM-DD');
 
           const params = getFeatureInfoParams(map, evt, dateFromRef);
+          dispatch(setWMSGetFeatureInfoLoading(true));
           makeFeatureInfoRequest(featureInfoLayers, params).then(
-            (result: any) => {
-              if (!result) {
-                return;
+            (result: { [name: string]: string } | null) => {
+              if (result) {
+                Object.keys(result).forEach((k: string) => {
+                  dispatch(
+                    addPopupData({
+                      [k]: {
+                        data: result[k],
+                        coordinates: evt.lngLat,
+                      },
+                    }),
+                  );
+                });
               }
-              Object.keys(result).forEach(k => {
-                dispatch(
-                  addPopupData({
-                    [k]: {
-                      data: result[k],
-                      coordinates: evt.lngLat,
-                    },
-                  }),
-                );
-              });
-
-              dispatch(
-                showPopup({
-                  coordinates: evt.lngLat,
-                  locationName: '',
-                }),
-              );
+              dispatch(setWMSGetFeatureInfoLoading(false));
             },
           );
         }}

diff --git a/src/context/tooltipStateSlice.ts b/src/context/tooltipStateSlice.ts
@@ -3,14 +3,15 @@ import { merge } from 'lodash';
 import type { RootState } from './store';
 
 export interface PopupData {
-  [key: string]: { data: number; coordinates: GeoJSON.Position };
+  [key: string]: { data: number | string; coordinates: GeoJSON.Position };
 }
 
 export interface MapTooltipState {
   coordinates?: GeoJSON.Position;
   locationName: string;
   data: PopupData;
   showing: boolean;
+  wmsGetFeatureInfoLoading: boolean;
 }
 
 type ShowPopupType = {
@@ -22,6 +23,7 @@ const initialState: MapTooltipState = {
   locationName: '',
   data: {},
   showing: false,
+  wmsGetFeatureInfoLoading: false,
 };
 
 export const tooltipStateSlice = createSlice({
@@ -66,6 +68,14 @@ export const tooltipStateSlice = createSlice({
       ...state,
       coordinates: payload,
     }),
+
+    setWMSGetFeatureInfoLoading: (
+      state,
+      { payload }: PayloadAction<boolean>,
+    ) => ({
+      ...state,
+      wmsGetFeatureInfoLoading: payload,
+    }),
   },
 });
 
@@ -84,6 +94,7 @@ export const {
   hidePopup,
   showPopup,
   setPopupCoordinates,
+  setWMSGetFeatureInfoLoading,
 } = tooltipStateSlice.actions;
 
 export default tooltipStateSlice.reducer;