Merge pull request #528 from acelaya-forks/feature/fallback-interval-fix

Fix fallback interval not causing new visits to be loaded

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.11.0] - 2024-11-30
 ### Added
 * [#491](https://github.com/shlinkio/shlink-web-component/issues/491) Add support for colors in QR code configurator.
 * [#515](https://github.com/shlinkio/shlink-web-component/issues/515) Add support for geolocation redirect conditions, when using Shlink 4.3 or newer.
@@ -23,7 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * *Nothing*
 
 ### Fixed
-* *Nothing*
+* [#504](https://github.com/shlinkio/shlink-web-component/issues/504) Fix fallback interval not causing new visits to be loaded.
 
 
 ## [0.10.1] - 2024-10-19

src/visits/VisitsStats.tsx

@@ -103,8 +103,8 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
     },
     [updateQuery],
   );
-  const initialInterval = useRef<DateRange | DateInterval>(
-    dateRange ?? fallbackInterval ?? visitsSettings?.defaultInterval ?? 'last30Days',
+  const [currentFallbackInterval, setCurrentFallbackInterval] = useState<DateInterval>(
+    fallbackInterval ?? visitsSettings?.defaultInterval ?? 'last30Days',
   );
   const [highlightedVisits, setHighlightedVisits] = useState<NormalizedVisit[]>([]);
   const [highlightedLabel, setHighlightedLabel] = useState<string | undefined>();
@@ -158,7 +158,7 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
 
   useEffect(() => cancelGetVisits, [cancelGetVisits]);
   useEffect(() => {
-    const resolvedDateRange = dateRange ?? toDateRange(initialInterval.current);
+    const resolvedDateRange = dateRange ?? toDateRange(currentFallbackInterval);
     const { loadPrevInterval: doLoadPrevInterval, ...filter } = resolvedFilter;
     const options: GetVisitsOptions = {
       doIntervalFallback: isFirstLoad.current,
@@ -169,13 +169,13 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
 
     setSelectedVisits([]); // Reset selected visits every time we load visits
     isFirstLoad.current = false;
-  }, [dateRange, visitsFilter, getVisits, resolvedFilter, setSelectedVisits]);
+  }, [currentFallbackInterval, dateRange, getVisits, resolvedFilter, setSelectedVisits]);
   useEffect(() => {
     // As soon as the fallback is loaded, if the initial interval used the settings one, we do fall back
-    if (fallbackInterval && initialInterval.current === (visitsSettings?.defaultInterval ?? 'last30Days')) {
-      initialInterval.current = fallbackInterval;
+    if (fallbackInterval && currentFallbackInterval === (visitsSettings?.defaultInterval ?? 'last30Days')) {
+      setCurrentFallbackInterval(fallbackInterval);
     }
-  }, [fallbackInterval, visitsSettings?.defaultInterval]);
+  }, [currentFallbackInterval, fallbackInterval, visitsSettings?.defaultInterval]);
 
   return (
     <>
@@ -188,7 +188,7 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
               <div className="flex-grow-1">
                 <DateRangeSelector
                   disabled={loading}
-                  dateRangeOrInterval={activeInterval ?? dateRange ?? initialInterval.current}
+                  dateRangeOrInterval={activeInterval ?? dateRange ?? currentFallbackInterval}
                   defaultText="All visits"
                   onDatesChange={setDates}
                 />