From 4642e07fd321536453206039cbbf2110a0304682 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 20 Dec 2020 19:42:37 +0100
Subject: [PATCH] Reduced duplication when defining routes in visits section

---
 src/visits/ShortUrlVisits.tsx |  1 -
 src/visits/VisitsStats.tsx    | 25 ++++++++++++-------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/visits/ShortUrlVisits.tsx b/src/visits/ShortUrlVisits.tsx
index 4501347a..d7ceb2ef 100644
--- a/src/visits/ShortUrlVisits.tsx
+++ b/src/visits/ShortUrlVisits.tsx
@@ -28,7 +28,6 @@ const ShortUrlVisits = boundToMercureHub(({
 }: ShortUrlVisitsProps) => {
   const { shortCode } = params;
   const { domain } = parseQuery<{ domain?: string }>(search);
-
   const loadVisits = (params: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...params, domain });
 
   useEffect(() => {
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index 8816e111..f1b9936a 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -31,11 +31,11 @@ export interface VisitsStatsProps {
 type HighlightableProps = 'referer' | 'country' | 'city';
 type Section = 'byTime' | 'byContext' | 'byLocation' | 'list';
 
-const sections: Record<Section, { title: string; subPath?: string; icon: IconDefinition }> = {
-  byTime: { title: 'By time', icon: faCalendarAlt },
-  byContext: { title: 'By context', subPath: 'by-context', icon: faChartPie },
-  byLocation: { title: 'By location', subPath: 'by-location', icon: faMapMarkedAlt },
-  list: { title: 'List', subPath: 'list', icon: faList },
+const sections: Record<Section, { title: string; subPath: string; icon: IconDefinition }> = {
+  byTime: { title: 'By time', subPath: '', icon: faCalendarAlt },
+  byContext: { title: 'By context', subPath: '/by-context', icon: faChartPie },
+  byLocation: { title: 'By location', subPath: '/by-location', icon: faMapMarkedAlt },
+  list: { title: 'List', subPath: '/list', icon: faList },
 };
 
 const highlightedVisitsToStats = (
@@ -61,7 +61,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
   const buildSectionUrl = (subPath?: string) => {
     const query = domain ? `?domain=${domain}` : '';
 
-    return !subPath ? `${baseUrl}${query}` : `${baseUrl}/${subPath}${query}`;
+    return !subPath ? `${baseUrl}${query}` : `${baseUrl}${subPath}${query}`;
   };
   const { visits, loading, loadingLarge, error, progress } = visitsInfo;
   const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
@@ -133,9 +133,8 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
                   tag={RouterNavLink}
                   className="visits-stats__nav-link"
                   to={buildSectionUrl(subPath)}
-                  isActive={(_: null, { pathname }: Location) =>
-                    (!subPath && pathname.endsWith('/visits')) || (subPath && pathname.endsWith(subPath))
-                  }
+                  isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)}
+                  replace
                 >
                   <FontAwesomeIcon icon={icon} />
                   <span className="ml-2 d-none d-sm-inline">{title}</span>
@@ -158,7 +157,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
               </div>
             </Route>
 
-            <Route exact path={`${baseUrl}/by-context`}>
+            <Route exact path={`${baseUrl}${sections.byContext.subPath}`}>
               <div className="col-xl-4 col-lg-6 mt-4">
                 <GraphCard title="Operating systems" stats={os} />
               </div>
@@ -181,7 +180,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
               </div>
             </Route>
 
-            <Route exact path={`${baseUrl}/by-location`}>
+            <Route exact path={`${baseUrl}${sections.byLocation.subPath}`}>
               <div className="col-lg-6 mt-4">
                 <SortableBarGraph
                   title="Countries"
@@ -214,7 +213,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
               </div>
             </Route>
 
-            <Route exact path={`${baseUrl}/list`}>
+            <Route exact path={`${baseUrl}${sections.list.subPath}`}>
               <div className="col-12">
                 <VisitsTable
                   visits={normalizedVisits}
@@ -253,7 +252,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
                 className="btn-md-block"
                 onClick={() => setSelectedVisits([])}
               >
-                Reset selection {highlightedVisits.length > 0 && <>({highlightedVisits.length})</>}
+                Clear selection {highlightedVisits.length > 0 && <>({highlightedVisits.length})</>}
               </Button>
             </div>
           )}