fix: store filters when using breadcrumbs to all stores

CartoDB · Dec 18, 2020 · 63efebb · 63efebb · vercel · Dec 18, 2020
1 parent bda1c0f
commit 63efebb
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,14 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 template-skeleton/README.md
+/template-skeleton/yarn.lock
 /template-skeleton/template/package.json
 /template-skeleton/template/yarn.lock
 /template-skeleton/template/node_modules
 /template-skeleton/template/_templates
 
 template-sample-app/README.md
+/template-sample-app/yarn.lock
 /template-sample-app/template/package.json
 /template-sample-app/template/yarn.lock
 /template-sample-app/template/node_modules

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Not released
 - Fix use of layerAttributes in UserDatasets [#154](https://github.com/CartoDB/carto-react-template/pull/154)
 - Improve stores layout and loading [#155](https://github.com/CartoDB/carto-react-template/pull/155)
+- Fix store filters when using breadcrumbs to all stores [#156](https://github.com/CartoDB/carto-react-template/pull/156)
 - Improve mobility UX [#157](https://github.com/CartoDB/carto-react-template/pull/157)
 - Improve layout for Google Maps basemaps [#157](https://github.com/CartoDB/carto-react-template/pull/157)
 

diff --git a/template-sample-app/template/src/components/views/stores/StoresDetail.js b/template-sample-app/template/src/components/views/stores/StoresDetail.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { NavLink, useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
 
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -14,22 +14,29 @@ import {
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 
 import { WrapperWidgetUI, FormulaWidgetUI, HistogramWidgetUI } from '@carto/react/ui';
-import { updateLayer, selectSourceById, setViewState } from '@carto/react/redux';
+import {
+  clearFilters,
+  updateLayer,
+  selectSourceById,
+  setViewState,
+} from '@carto/react/redux';
 
 import { getStore, getRevenuePerMonth } from 'models/StoreModel';
 import { LAYER_ID, MONTHS_LABELS } from './constants';
 import { Isochrone } from 'components/common/Isochrone';
 import { currencyFormatter } from 'utils/formatter';
 import { setBottomSheetOpen, setError } from 'config/appSlice';
 
+import { SOURCE_ID } from './constants';
+
 export default function StoresDetail() {
   const [storeDetail, setStoreDetail] = useState(null);
   const [revenuePerMonth, setRevenuePerMonth] = useState(null);
   const dispatch = useDispatch();
   const { id } = useParams();
   const source = useSelector((state) => selectSourceById(state, 'storesSource'));
   const location = useLocation();
-
+  const navigate = useNavigate();
   const classes = useStyles();
 
   const histogramData = (revenuePerMonth || []).map((month) => month.revenue);
@@ -92,6 +99,11 @@ export default function StoresDetail() {
     };
   }, [dispatch, source, id, location.state]);
 
+  const navigateToStores = () => {
+    dispatch(clearFilters(SOURCE_ID));
+    navigate('/stores');
+  };
+
   const onTotalRevenueWidgetError = (error) => {
     dispatch(setError(`Error obtaining total revenue: ${error.message}`));
   };
@@ -102,65 +114,62 @@ export default function StoresDetail() {
 
   return (
     <>
-      {(revenuePerMonth === null || storeDetail === null)
-        ? (
-          <Grid container item justify='center' alignItems='center' style={{ flexGrow: 1 }}>
-            <CircularProgress />
-          </Grid>
-        )
-        : (
-          <Grid item xs>
-            <div className={classes.storeDetail}>
-              <Breadcrumbs
-                separator={<NavigateNextIcon />}
-                aria-label='breadcrumb'
-                gutterBottom
-              >
-                <Link color='inherit' component={NavLink} to='/stores'>
-                  All stores
-                </Link>
-                <Typography color='textPrimary'>Store detail</Typography>
-              </Breadcrumbs>
-              <Typography variant='h5' gutterBottom className={classes.title}>
-                {storeName(storeDetail)}
-              </Typography>
-              <Isochrone latLong={storeLatLong}></Isochrone>
-            </div>
-
-            <Divider />
-
-            <WrapperWidgetUI title='Total revenue'>
-              <FormulaWidgetUI
-                formatter={currencyFormatter}
-                data={storeDetail.revenue}
-                onError={onTotalRevenueWidgetError}
-              />
-            </WrapperWidgetUI>
-
-            <Divider />
-
-            <WrapperWidgetUI title='Revenue per month'>
-              <HistogramWidgetUI
-                name='Store'
-                data={histogramData}
-                dataAxis={MONTHS_LABELS}
-                yAxisFormatter={currencyFormatter}
-                tooltipFormatter={tooltipFormatter}
-                onError={onRevenuePerMonthWidgetError}
-              ></HistogramWidgetUI>
-            </WrapperWidgetUI>
-
-            <Divider />
-          </Grid>
-        )
-      }
+      {revenuePerMonth === null || storeDetail === null ? (
+        <Grid container item justify='center' alignItems='center' style={{ flexGrow: 1 }}>
+          <CircularProgress />
+        </Grid>
+      ) : (
+        <Grid item xs>
+          <div className={classes.storeDetail}>
+            <Breadcrumbs
+              separator={<NavigateNextIcon />}
+              aria-label='breadcrumb'
+              gutterBottom
+            >
+              <Link color='inherit' component='button' onClick={navigateToStores}>
+                All stores
+              </Link>
+              <Typography color='textPrimary'>Store detail</Typography>
+            </Breadcrumbs>
+            <Typography variant='h5' gutterBottom className={classes.title}>
+              {storeName(storeDetail)}
+            </Typography>
+            <Isochrone latLong={storeLatLong}></Isochrone>
+          </div>
+
+          <Divider />
+
+          <WrapperWidgetUI title='Total revenue'>
+            <FormulaWidgetUI
+              formatter={currencyFormatter}
+              data={storeDetail.revenue}
+              onError={onTotalRevenueWidgetError}
+            />
+          </WrapperWidgetUI>
+
+          <Divider />
+
+          <WrapperWidgetUI title='Revenue per month'>
+            <HistogramWidgetUI
+              name='Store'
+              data={histogramData}
+              dataAxis={MONTHS_LABELS}
+              yAxisFormatter={currencyFormatter}
+              tooltipFormatter={tooltipFormatter}
+              onError={onRevenuePerMonthWidgetError}
+            ></HistogramWidgetUI>
+          </WrapperWidgetUI>
+
+          <Divider />
+        </Grid>
+      )}
     </>
   );
 }
 
 const useStyles = makeStyles((theme) => ({
   storeDetail: {
-    padding: theme.spacing(3.25, 3)
+    padding: theme.spacing(3.25, 3),
   },
   title: {
     textTransform: 'capitalize',