Merge pull request keplergl#55 from EDiT/feature/BUBR-823-toast-messages

[BUBR-823] Toast messages
imec-int · Jun 14, 2022 · abd8f1b · abd8f1b
2 parents db417d5 + 0865ab0
commit abd8f1b
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "react-toastify": "^9.0.4",
     "redux": "^4.1.2",
     "redux-actions": "^2.6.5",
     "redux-logger": "^3.0.6",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
 
 import CustomLink from 'components/CustomLink';
 import config from 'config/configLoader';
@@ -60,6 +61,7 @@ export default function App() {
           <Route path="/analytical" element={<Analytical />} />
           <Route path="/simulations" element={<Simulations />} />
         </Routes>
+        <ToastContainer autoClose={3000} />
       </div>
     </Router>
   );

diff --git a/src/index.tsx b/src/index.tsx
@@ -10,6 +10,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { store } from './store';
 import './index.css';
+import 'react-toastify/dist/ReactToastify.css';
 
 // We polyfill process since kepler.gl expects it to be available in the browser.
 window.process = process;

diff --git a/src/pages/Physical/components/CustomSidePanelsFactory/OdtDatasetsPanel.tsx b/src/pages/Physical/components/CustomSidePanelsFactory/OdtDatasetsPanel.tsx
@@ -1,5 +1,6 @@
 import React, { FormEvent, useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { toast } from 'react-toastify';
 
 import FieldsetBuilder from 'components/FieldsetBuilder';
 import InlineLoader from 'components/InlineLoader';
@@ -76,71 +77,85 @@ const OdtDatasetsPanel = () => {
     );
   };
 
-  const handleSubmit = useCallback(
-    async (event: FormEvent<HTMLFormElement>) => {
-      try {
-        event.preventDefault();
-        setLoading(true);
-        const params = formStateToParams(formValues);
-
-        const json = selectedDataSet.adapter
-          ? await getDataSDP(selectedDataSet, params)
-          : await getDataFAPI(selectedDataSet.url, params);
-
-        if (!json.length) {
-          console.warn('No data found for this period');
-          return;
-        }
-
-        let layerLabel = '';
-        const metric = getMetric(selectedDataSet);
-        const filterField = selectedDataSet.filterFields.find((f) => f.fieldProps.id === metric);
-        const { items } = filterField?.fieldProps as RadioGroupProps;
-        if (filterField && items) {
-          layerLabel = items.find((i) => i.value === formValues[metric])?.label || '';
-        }
-
-        const dataId = `${new Date().getTime()}_${selectedDataSet.id}`;
-        dispatch(
-          addDataToMap({
-            datasets: {
-              info: {
-                id: dataId,
-                label: `${selectedDataSet.name} (${formValues.date})`,
-              },
-              data: processRowObject(json),
-            },
-            options: {
-              keepExistingConfig: true,
+  const fetchDataset = useCallback(async (): Promise<number | undefined> => {
+    try {
+      setLoading(true);
+      const params = formStateToParams(formValues);
+
+      const json = selectedDataSet.adapter
+        ? await getDataSDP(selectedDataSet, params)
+        : await getDataFAPI(selectedDataSet.url, params);
+
+      if (!json.length) {
+        console.warn('No data found for this period');
+        return Promise.resolve(0);
+      }
+
+      let layerLabel = '';
+      const metric = getMetric(selectedDataSet);
+      const filterField = selectedDataSet.filterFields.find((f) => f.fieldProps.id === metric);
+      const { items } = filterField?.fieldProps as RadioGroupProps;
+      if (filterField && items) {
+        layerLabel = items.find((i) => i.value === formValues[metric])?.label || '';
+      }
+
+      const dataId = `${new Date().getTime()}_${selectedDataSet.id}`;
+
+      dispatch(
+        addDataToMap({
+          datasets: {
+            info: {
+              id: dataId,
+              label: `${selectedDataSet.name} (${formValues.date})`,
             },
-            config: {
-              visState: {
-                filters: [
-                  createKeplerTimeRangeFilter(dataId, 'timestamp', selectedDataSet.defaultValueField, formValues.date),
-                ],
-                interactionConfig: createKeplerTooltipConfig(dataId, { fields: selectedDataSet.tooltip }),
-              },
+            data: processRowObject(json),
+          },
+          options: {
+            keepExistingConfig: true,
+          },
+          config: {
+            visState: {
+              filters: [
+                createKeplerTimeRangeFilter(dataId, 'timestamp', selectedDataSet.defaultValueField, formValues.date),
+              ],
+              interactionConfig: createKeplerTooltipConfig(dataId, { fields: selectedDataSet.tooltip }),
             },
-          }),
-        );
-        dispatch(averageSeriesAction());
-        dispatch(showLegend());
-        const { layers } = keplerState().visState;
-        const oldLayer = layers.find((l: any) => l.config.dataId === dataId);
-        setColorScale(
-          oldLayer,
-          `${selectedDataSet.shortName} - ${layerLabel}`,
-          formValues[metric],
-          selectedDataSet.colorScale,
-        );
-        dispatch(toggleSidePanel('layer'));
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setLoading(false);
-      }
+          },
+        }),
+      );
+      dispatch(showLegend());
+      const { layers } = keplerState().visState;
+      const oldLayer = layers.find((l: any) => l.config.dataId === dataId);
+      setColorScale(
+        oldLayer,
+        `${selectedDataSet.shortName} - ${layerLabel}`,
+        formValues[metric],
+        selectedDataSet.colorScale,
+      );
+      dispatch(toggleSidePanel('layer'));
+      return Promise.resolve(json.length);
+    } catch (error) {
+      console.error(error);
+      return Promise.reject(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatch, dataset, setLoading, formValues]);
+
+  const handleSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      toast.promise(fetchDataset, {
+        pending: `Loading dataset "${selectedDataSet.name}"`,
+        success: {
+          render: ({ data }) => {
+            return `Loading complete, ${data} results`;
+          },
+        },
+        error: 'Something went wrong',
+      });
     },
-    [dispatch, dataset, setLoading, formValues],
+    [fetchDataset, selectedDataSet],
   );
 
   const handleChangeFormValue = useCallback(

diff --git a/src/pages/Physical/index.tsx b/src/pages/Physical/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { toast } from 'react-toastify';
 
 import config from 'config/configLoader';
 import { intensityColors } from 'config/layerConfig';
@@ -118,70 +119,74 @@ function Physical() {
     );
   };
 
-  useEffect(() => {
+  const fetchSimulation = useCallback(async () => {
     const timestampNow = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
-    const fetchSimulation = async () => {
-      const json = await getDataFAPI(simulationUrl, {});
-      const parsedFeatures = parseMobilizeSimulation(json, timestampNow);
-      showSimulation(parsedFeatures);
-      const { layers } = keplerState().visState;
-      dispatch(showLegend());
-      if (parsedFeatures.before) {
-        setSimulationColorScale(
-          layers.find((layer: any) => layer.config.dataId === `${dataId}-before`),
-          parsedFeatures.before,
-        );
-      }
-      if (parsedFeatures.after) {
-        setSimulationColorScale(
-          layers.find((layer: any) => layer.config.dataId === `${dataId}-after`),
-          parsedFeatures.after,
-        );
-      }
-      if (parsedFeatures.delta) {
-        setSimulationColorScale(
-          layers.find((layer: any) => layer.config.dataId === `${dataId}-delta`),
-          parsedFeatures.delta,
-        );
-      }
-    };
-    const fetchSimulationSnapshot = async () => {
-      if (!simulationId) return;
-      const json = await getDataFAPI(snapShotURL, { simulationId });
-      const changeFeatures = await enrichMobilizeChanges(json);
-      dispatch(
-        addDataToMap({
-          datasets: [
-            {
-              info: {
-                id: `${dataId}-changes`,
-                label: `Changes - ${simulationName}`,
-              },
-              data: processGeojson(changeFeatures),
-            },
-          ],
-          options: {
-            keepExistingConfig: true,
-          },
-        }),
+    const json = await getDataFAPI(simulationUrl, {});
+    const parsedFeatures = parseMobilizeSimulation(json, timestampNow);
+    showSimulation(parsedFeatures);
+    const { layers } = keplerState().visState;
+    dispatch(showLegend());
+    if (parsedFeatures.before) {
+      setSimulationColorScale(
+        layers.find((layer: any) => layer.config.dataId === `${dataId}-before`),
+        parsedFeatures.before,
+      );
+    }
+    if (parsedFeatures.after) {
+      setSimulationColorScale(
+        layers.find((layer: any) => layer.config.dataId === `${dataId}-after`),
+        parsedFeatures.after,
       );
-      const { layers } = keplerState().visState;
-      const oldLayer = layers.find((layer: any) => layer.config.dataId === `${dataId}-changes`);
-      dispatch(
-        layerVisualChannelConfigChange(
-          oldLayer,
+    }
+    if (parsedFeatures.delta) {
+      setSimulationColorScale(
+        layers.find((layer: any) => layer.config.dataId === `${dataId}-delta`),
+        parsedFeatures.delta,
+      );
+    }
+  }, []);
+
+  const fetchSimulationSnapshot = useCallback(async () => {
+    if (!simulationId) return;
+    const json = await getDataFAPI(snapShotURL, { simulationId });
+    const changeFeatures = await enrichMobilizeChanges(json);
+    dispatch(
+      addDataToMap({
+        datasets: [
           {
-            strokeColor: [51, 51, 255],
+            info: {
+              id: `${dataId}-changes`,
+              label: `Changes - ${simulationName}`,
+            },
+            data: processGeojson(changeFeatures),
           },
-          'strokeColor',
-        ),
-      );
-    };
+        ],
+        options: {
+          keepExistingConfig: true,
+        },
+      }),
+    );
+    const { layers } = keplerState().visState;
+    const oldLayer = layers.find((layer: any) => layer.config.dataId === `${dataId}-changes`);
+    dispatch(
+      layerVisualChannelConfigChange(
+        oldLayer,
+        {
+          strokeColor: [51, 51, 255],
+        },
+        'strokeColor',
+      ),
+    );
+  }, []);
 
+  useEffect(() => {
     if (!mapLoaded || (!simulationUrl && !dataId)) return;
-
-    fetchSimulation();
     fetchSimulationSnapshot();
+    toast.promise(fetchSimulation, {
+      pending: `Loading simulation "${simulationName}"`,
+      success: `Loading complete "${simulationName}"`,
+      error: 'Something went wrong',
+    });
   }, [mapLoaded]);
 
   useEffect(() => {