Merge pull request #7650 from woocommerce/fix/7639-swipe-to-switch-time-range-tab

Dashboard: sync stats after swiping to another time range tab

Author: jaclync

RELEASE-NOTES.txt

@@ -3,6 +3,7 @@
 10.3
 -----
 - [*] Dashboard: the last selected time range tab (Today/This Week/This Month/This Year) is persisted for the site and shown on the next site launch (app launch or switching stores). [https://github.com/woocommerce/woocommerce-ios/pull/7638]
+- [*] Dashboard: swiping to another time range tab now triggers syncing for the target tab. Previously, the stats on the target tab aren't synced from the swipe gesture. [https://github.com/woocommerce/woocommerce-ios/pull/7650]
 - [*] In-Person Payments: Fixed an issue where the Pay in Person toggle could be out of sync with the setting on the website. [https://github.com/woocommerce/woocommerce-ios/pull/7656]
 
 10.2

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsAndTopPerformersViewController.swift

@@ -32,14 +32,18 @@ final class StoreStatsAndTopPerformersViewController: ButtonBarPagerTabStripView
 
     private var periodVCs = [StoreStatsAndTopPerformersPeriodViewController]()
     private let siteID: Int64
-    private var isSyncing = false
+    // A set of syncing time ranges is tracked instead of a single boolean so that the stats for each time range
+    // can be synced when swiping or tapping to change the time range tab before the syncing finishes for the previously selected tab.
+    private var syncingTimeRanges: Set<StatsTimeRangeV4> = []
     private let usageTracksEventEmitter = StoreStatsUsageTracksEventEmitter()
     private let dashboardViewModel: DashboardViewModel
     private let timeRanges: [StatsTimeRangeV4] = [.today, .thisWeek, .thisMonth, .thisYear]
 
-    /// Because loading the last selected time range tab is async, we need to make sure any call to the public `reloadData` is after the selected time range
-    /// is ready to avoid making unnecessary API requests for the non-selected tab.
-    @Published private var isSelectedTimeRangeReady: Bool = false
+    /// Because loading the last selected time range tab is async, the selected tab index is initially `nil` and set after the last selected value is loaded.
+    /// We need to make sure any call to the public `reloadData` is after the selected time range is set to avoid making unnecessary API requests
+    /// for the non-selected tab.
+    @Published private var selectedTimeRangeIndex: Int?
+    private var selectedTimeRangeIndexSubscription: AnyCancellable?
     private var reloadDataAfterSelectedTimeRangeSubscriptions: Set<AnyCancellable> = []
 
     // MARK: - View Lifecycle
@@ -62,20 +66,21 @@ final class StoreStatsAndTopPerformersViewController: ButtonBarPagerTabStripView
             let selectedTimeRange = await loadLastTimeRange() ?? .today
             guard let selectedTabIndex = timeRanges.firstIndex(of: selectedTimeRange),
                   selectedTabIndex != currentIndex else {
-                isSelectedTimeRangeReady = true
+                selectedTimeRangeIndex = currentIndex
                 return
             }
             // There is currently no straightforward way to set a different default tab using `XLPagerTabStrip` without forking.
             // This is a workaround following https://github.com/xmartlabs/XLPagerTabStrip/issues/537#issuecomment-534903598
             moveToViewController(at: selectedTabIndex, animated: false)
             reloadPagerTabStripView()
-            isSelectedTimeRangeReady = true
+            selectedTimeRangeIndex = selectedTabIndex
         }
 
         // 👆 must be called before super.viewDidLoad()
 
         super.viewDidLoad()
         configureView()
+        observeSelectedTimeRangeIndex()
     }
 
     override func viewWillAppear(_ animated: Bool) {
@@ -101,23 +106,51 @@ final class StoreStatsAndTopPerformersViewController: ButtonBarPagerTabStripView
         }
     }
 
-    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
-        super.collectionView(collectionView, didSelectItemAt: indexPath)
-        let timeRangeTabIndex = indexPath.item
-        guard let periodViewController = viewControllers[timeRangeTabIndex] as? StoreStatsAndTopPerformersPeriodViewController,
-              timeRangeTabIndex != currentIndex else {
+    override func updateIndicator(for viewController: PagerTabStripViewController,
+                                  fromIndex: Int,
+                                  toIndex: Int,
+                                  withProgressPercentage progressPercentage: CGFloat,
+                                  indexWasChanged: Bool) {
+        super.updateIndicator(for: viewController,
+                              fromIndex: fromIndex,
+                              toIndex: toIndex,
+                              withProgressPercentage: progressPercentage,
+                              indexWasChanged: indexWasChanged)
+        // The initially selected tab should be ignored because it should be set after `loadLastTimeRange` in `viewDidLoad`.
+        guard selectedTimeRangeIndex != nil else {
             return
         }
-        saveLastTimeRange(periodViewController.timeRange)
-        syncStats(forced: false, viewControllerToSync: periodViewController)
+        selectedTimeRangeIndex = toIndex
+    }
+
+    func observeSelectedTimeRangeIndex() {
+        let timeRangeCount = timeRanges.count
+        selectedTimeRangeIndexSubscription = $selectedTimeRangeIndex
+            .compactMap { $0 }
+            // It's possible to reach an out-of-bound index by swipe gesture, thus checking the index range here.
+            .filter { $0 >= 0 && $0 < timeRangeCount }
+            .removeDuplicates()
+            // Tapping to change to a farther tab could result in `updateIndicator` callback to be triggered for the middle tabs.
+            // A short debounce workaround is applied here to avoid making API requests for the middle tabs.
+            .debounce(for: .seconds(0.3), scheduler: DispatchQueue.main)
+            .sink { [weak self] timeRangeTabIndex in
+                guard let self = self else { return }
+                guard let periodViewController = self.viewControllers[timeRangeTabIndex] as? StoreStatsAndTopPerformersPeriodViewController else {
+                    return
+                }
+                self.saveLastTimeRange(periodViewController.timeRange)
+                self.syncStats(forced: false, viewControllerToSync: periodViewController)
+            }
     }
 }
 
 extension StoreStatsAndTopPerformersViewController: DashboardUI {
     @MainActor
     func reloadData(forced: Bool) async {
         await withCheckedContinuation { continuation in
-            $isSelectedTimeRangeReady.filter { $0 == true }.first()
+            $selectedTimeRangeIndex
+                .compactMap { $0 }
+                .first()
                 .sink { [weak self] _ in
                     self?.syncAllStats(forced: forced) { _ in
                         continuation.resume(returning: ())
@@ -140,12 +173,13 @@ private extension StoreStatsAndTopPerformersViewController {
     }
 
     func syncStats(forced: Bool, viewControllerToSync: StoreStatsAndTopPerformersPeriodViewController, onCompletion: ((Result<Void, Error>) -> Void)? = nil) {
-        guard !isSyncing else {
+        let timeRange = viewControllerToSync.timeRange
+        guard !syncingTimeRanges.contains(timeRange) else {
             onCompletion?(.success(()))
             return
         }
 
-        isSyncing = true
+        syncingTimeRanges.insert(timeRange)
 
         let group = DispatchGroup()
 
@@ -156,7 +190,7 @@ private extension StoreStatsAndTopPerformersViewController {
 
         defer {
             group.notify(queue: .main) { [weak self] in
-                self?.isSyncing = false
+                self?.syncingTimeRanges.remove(timeRange)
                 self?.showSpinner(for: viewControllerToSync, shouldShowSpinner: false)
                 if let error = syncError {
                     DDLogError("⛔️ Error loading dashboard: \(error)")