Merge pull request #8255 from woocommerce/issue/8189-loading-state

ealeksandrov · web-flow · commit dc1f4ba6f01c · 2022-11-30T17:27:03.000+03:00
[Analytics Hub] Add loading state
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubView.swift
@@ -75,6 +75,9 @@ struct AnalyticsHubView: View {
         .navigationBarTitleDisplayMode(.inline)
         .background(Color(uiColor: .listBackground))
         .edgesIgnoringSafeArea(.horizontal)
+        .task {
+            await viewModel.updateData()
+        }
     }
 }
 
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift
@@ -24,13 +24,6 @@ final class AnalyticsHubViewModel: ObservableObject {
                                                              previousRangeSubtitle: timeRangeGenerator.generatePreviousRangeDescription())
 
         bindViewModelsWithData()
-        Task.init {
-            do {
-                try await retrieveOrderStats()
-            } catch {
-                DDLogWarn("⚠️ Error fetching analytics data: \(error)")
-            }
-        }
     }
 
     /// Revenue Card ViewModel
@@ -58,13 +51,26 @@ final class AnalyticsHubViewModel: ObservableObject {
     /// Order stats for the previous time period (for comparison)
     ///
     @Published private var previousOrderStats: OrderStatsV4? = nil
+
+    /// Request stats data from network
+    ///
+    func updateData() async {
+        do {
+            try await retrieveOrderStats()
+        } catch {
+            switchToErrorState()
+            DDLogWarn("⚠️ Error fetching analytics data: \(error)")
+        }
+    }
 }
 
 // MARK: Networking
 private extension AnalyticsHubViewModel {
 
     @MainActor
     func retrieveOrderStats() async throws {
+        switchToLoadingState()
+
         let currentTimeRange = try timeRangeGenerator.unwrapCurrentTimeRange()
         let previousTimeRange = try timeRangeGenerator.unwrapPreviousTimeRange()
 
@@ -104,6 +110,17 @@ private extension AnalyticsHubViewModel {
 // MARK: Data - UI mapping
 private extension AnalyticsHubViewModel {
 
+    func switchToLoadingState() {
+        self.revenueCard = revenueCard.redacted
+        self.ordersCard = ordersCard.redacted
+        self.productCard = productCard.redacted
+    }
+
+    func switchToErrorState() {
+        self.currentOrderStats = nil
+        self.previousOrderStats = nil
+    }
+
     func bindViewModelsWithData() {
         Publishers.CombineLatest($currentOrderStats, $previousOrderStats)
             .sink { [weak self] currentOrderStats, previousOrderStats in
@@ -131,7 +148,8 @@ private extension AnalyticsHubViewModel {
                                             trailingValue: StatsDataTextFormatter.createNetRevenueText(orderStats: currentPeriodStats),
                                             trailingDelta: netDelta.string,
                                             trailingDeltaColor: Constants.deltaColor(for: netDelta.direction),
-                                            trailingChartData: StatsIntervalDataParser.getChartData(for: .netRevenue, from: currentPeriodStats))
+                                            trailingChartData: StatsIntervalDataParser.getChartData(for: .netRevenue, from: currentPeriodStats),
+                                            isRedacted: false)
     }
 
     static func ordersCard(currentPeriodStats: OrderStatsV4?, previousPeriodStats: OrderStatsV4?) -> AnalyticsReportCardViewModel {
@@ -149,7 +167,8 @@ private extension AnalyticsHubViewModel {
                                             trailingValue: StatsDataTextFormatter.createAverageOrderValueText(orderStats: currentPeriodStats),
                                             trailingDelta: orderValueDelta.string,
                                             trailingDeltaColor: Constants.deltaColor(for: orderValueDelta.direction),
-                                            trailingChartData: StatsIntervalDataParser.getChartData(for: .averageOrderValue, from: currentPeriodStats))
+                                            trailingChartData: StatsIntervalDataParser.getChartData(for: .averageOrderValue, from: currentPeriodStats),
+                                            isRedacted: false)
     }
 
     static func productCard(currentPeriodStats: OrderStatsV4?, previousPeriodStats: OrderStatsV4?) -> AnalyticsProductCardViewModel {
@@ -158,7 +177,8 @@ private extension AnalyticsHubViewModel {
 
         return AnalyticsProductCardViewModel(itemsSold: itemsSold,
                                              delta: itemsSoldDelta.string,
-                                             deltaBackgroundColor: Constants.deltaColor(for: itemsSoldDelta.direction))
+                                             deltaBackgroundColor: Constants.deltaColor(for: itemsSoldDelta.direction),
+                                             isRedacted: false)
     }
 }
 
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift
@@ -14,6 +14,10 @@ struct AnalyticsProductCard: View {
     /// Delta Tag background color.
     let deltaBackgroundColor: UIColor
 
+    /// Indicates if the values should be hidden (for loading state)
+    ///
+    let isRedacted: Bool
+
     var body: some View {
         VStack(alignment: .leading) {
 
@@ -30,8 +34,12 @@ struct AnalyticsProductCard: View {
                 Text(itemsSold)
                     .titleStyle()
                     .frame(maxWidth: .infinity, alignment: .leading)
+                    .redacted(reason: isRedacted ? .placeholder : [])
+                    .shimmering(active: isRedacted)
 
                 DeltaTag(value: delta, backgroundColor: deltaBackgroundColor)
+                    .redacted(reason: isRedacted ? .placeholder : [])
+                    .shimmering(active: isRedacted)
             }
         }
         .padding(Layout.cardPadding)
@@ -56,7 +64,10 @@ private extension AnalyticsProductCard {
 // MARK: Previews
 struct AnalyticsProductCardPreviews: PreviewProvider {
     static var previews: some View {
-        AnalyticsProductCard(itemsSold: "2,234", delta: "+23%", deltaBackgroundColor: .withColorStudio(.green, shade: .shade50))
+        AnalyticsProductCard(itemsSold: "2,234",
+                             delta: "+23%",
+                             deltaBackgroundColor: .withColorStudio(.green, shade: .shade50),
+                             isRedacted: false)
             .previewLayout(.sizeThatFits)
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift
@@ -16,6 +16,23 @@ struct AnalyticsProductCardViewModel {
     /// Delta background color.
     ///
     let deltaBackgroundColor: UIColor
+
+    /// Indicates if the values should be hidden (for loading state)
+    ///
+    let isRedacted: Bool
+}
+
+extension AnalyticsProductCardViewModel {
+
+    /// Make redacted state of the card, replacing values with hardcoded placeholders
+    ///
+    var redacted: Self {
+        // Values here are placeholders and will be redacted in the UI
+        .init(itemsSold: "1000",
+              delta: "+50%",
+              deltaBackgroundColor: .lightGray,
+              isRedacted: true)
+    }
 }
 
 /// Convenience extension to create an `AnalyticsReportCard` from a view model.
@@ -25,5 +42,6 @@ extension AnalyticsProductCard {
         self.itemsSold = viewModel.itemsSold
         self.delta = viewModel.delta
         self.deltaBackgroundColor = viewModel.deltaBackgroundColor
+        self.isRedacted = viewModel.isRedacted
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift
@@ -16,6 +16,8 @@ struct AnalyticsReportCard: View {
     let trailingDeltaColor: UIColor
     let trailingChartData: [Double]
 
+    let isRedacted: Bool
+
     // Layout metrics that scale based on accessibility changes
     @ScaledMetric private var scaledChartWidth: CGFloat = Layout.chartWidth
     @ScaledMetric private var scaledChartHeight: CGFloat = Layout.chartHeight
@@ -38,10 +40,14 @@ struct AnalyticsReportCard: View {
 
                     Text(leadingValue)
                         .titleStyle()
+                        .redacted(reason: isRedacted ? .placeholder : [])
+                        .shimmering(active: isRedacted)
 
                     AdaptiveStack(horizontalAlignment: .leading) {
                         DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor)
                             .frame(maxWidth: .infinity, alignment: .leading)
+                            .redacted(reason: isRedacted ? .placeholder : [])
+                            .shimmering(active: isRedacted)
 
                         AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingDeltaColor)
                             .frame(width: scaledChartWidth, height: scaledChartHeight)
@@ -58,10 +64,14 @@ struct AnalyticsReportCard: View {
 
                     Text(trailingValue)
                         .titleStyle()
+                        .redacted(reason: isRedacted ? .placeholder : [])
+                        .shimmering(active: isRedacted)
 
                     AdaptiveStack(horizontalAlignment: .leading) {
                         DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor)
                             .frame(maxWidth: .infinity, alignment: .leading)
+                            .redacted(reason: isRedacted ? .placeholder : [])
+                            .shimmering(active: isRedacted)
 
                         AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingDeltaColor)
                             .frame(width: scaledChartWidth, height: scaledChartHeight)
@@ -99,7 +109,8 @@ struct Previews: PreviewProvider {
                             trailingValue: "$3.232",
                             trailingDelta: "-3%",
                             trailingDeltaColor: .withColorStudio(.red, shade: .shade40),
-                            trailingChartData: [50.0, 15.0, 20.0, 2.0, 10.0, 0.0, 40.0, 15.0, 20.0, 2.0, 10.0, 0.0])
+                            trailingChartData: [50.0, 15.0, 20.0, 2.0, 10.0, 0.0, 40.0, 15.0, 20.0, 2.0, 10.0, 0.0],
+                            isRedacted: false)
             .previewLayout(.sizeThatFits)
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift
@@ -29,7 +29,7 @@ struct AnalyticsReportCardViewModel {
     ///
     let leadingChartData: [Double]
 
-    /// Second Column Titlke
+    /// Second Column Title
     ///
     let trailingTitle: String
 
@@ -48,6 +48,31 @@ struct AnalyticsReportCardViewModel {
     /// Second Column Chart Data
     ///
     let trailingChartData: [Double]
+
+    /// Indicates if the values should be hidden (for loading state)
+    ///
+    let isRedacted: Bool
+}
+
+extension AnalyticsReportCardViewModel {
+
+    /// Make redacted state of the card, replacing values with hardcoded placeholders
+    ///
+    var redacted: Self {
+        // Values here are placeholders and will be redacted in the UI
+        .init(title: title,
+              leadingTitle: leadingTitle,
+              leadingValue: "$1000",
+              leadingDelta: "+50%",
+              leadingDeltaColor: .lightGray,
+              leadingChartData: [],
+              trailingTitle: trailingTitle,
+              trailingValue: "$1000",
+              trailingDelta: "+50%",
+              trailingDeltaColor: .lightGray,
+              trailingChartData: [],
+              isRedacted: true)
+    }
 }
 
 /// Convenience extension to create an `AnalyticsReportCard` from a view model.
@@ -65,5 +90,6 @@ extension AnalyticsReportCard {
         self.trailingDelta = viewModel.trailingDelta
         self.trailingDeltaColor = viewModel.trailingDeltaColor
         self.trailingChartData = viewModel.trailingChartData
+        self.isRedacted = viewModel.isRedacted
     }
 }
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -1178,6 +1178,7 @@
 		AE3AA88D290C30E800BE422D /* WebProgressView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE3AA88C290C30E800BE422D /* WebProgressView.swift */; };
 		AE3AA890290C313600BE422D /* NavigationTitleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE3AA88F290C313600BE422D /* NavigationTitleView.swift */; };
 		AE457813275644590092F687 /* OrderStatusSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE457812275644590092F687 /* OrderStatusSection.swift */; };
+		AE4CCCEB29365CFD00B47EE8 /* AnalyticsHubViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE4CCCEA29365CFD00B47EE8 /* AnalyticsHubViewModelTests.swift */; };
 		AE56E73428E76CDB00A1292B /* StoreInfoInlineWidget.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE56E73328E76CDB00A1292B /* StoreInfoInlineWidget.swift */; };
 		AE56E73628E7787700A1292B /* StoreInfoCircularWidget.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE56E73528E7787700A1292B /* StoreInfoCircularWidget.swift */; };
 		AE56E73828E7869800A1292B /* StoreInfoRectangularWidget.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE56E73728E7869800A1292B /* StoreInfoRectangularWidget.swift */; };
@@ -3154,6 +3155,7 @@
 		AE3AA88C290C30E800BE422D /* WebProgressView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WebProgressView.swift; sourceTree = "<group>"; };
 		AE3AA88F290C313600BE422D /* NavigationTitleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NavigationTitleView.swift; sourceTree = "<group>"; };
 		AE457812275644590092F687 /* OrderStatusSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderStatusSection.swift; sourceTree = "<group>"; };
+		AE4CCCEA29365CFD00B47EE8 /* AnalyticsHubViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnalyticsHubViewModelTests.swift; sourceTree = "<group>"; };
 		AE56E73328E76CDB00A1292B /* StoreInfoInlineWidget.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoreInfoInlineWidget.swift; sourceTree = "<group>"; };
 		AE56E73528E7787700A1292B /* StoreInfoCircularWidget.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoreInfoCircularWidget.swift; sourceTree = "<group>"; };
 		AE56E73728E7869800A1292B /* StoreInfoRectangularWidget.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoreInfoRectangularWidget.swift; sourceTree = "<group>"; };
@@ -7415,6 +7417,7 @@
 		B6440FB7292E73E50012D506 /* Analytics Hub */ = {
 			isa = PBXGroup;
 			children = (
+				AE4CCCEA29365CFD00B47EE8 /* AnalyticsHubViewModelTests.swift */,
 				B6440FB8292E74230012D506 /* AnalyticsHubTimeRangeGeneratorTests.swift */,
 			);
 			path = "Analytics Hub";
@@ -11127,6 +11130,7 @@
 				02B653AC2429F7BF00A9C839 /* MockTaxClassStoresManager.swift in Sources */,
 				0277AEA5256CAA4200F45C4A /* MockShippingLabel.swift in Sources */,
 				02BAB02324D0250300F8B06E /* ProductVariation+ProductFormTests.swift in Sources */,
+				AE4CCCEB29365CFD00B47EE8 /* AnalyticsHubViewModelTests.swift in Sources */,
 				025C00CC2551524300FAC222 /* BarcodeScannerFrameScalerTests.swift in Sources */,
 				02B1AFEE24BC5BA9005DB1E3 /* LinkedProductListSelectorDataSourceTests.swift in Sources */,
 				028E19BA28053443001C36E0 /* MockOrderDetailsPaymentAlerts.swift in Sources */,
diff --git a/WooCommerce/WooCommerceTests/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModelTests.swift b/WooCommerce/WooCommerceTests/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModelTests.swift
@@ -0,0 +1,57 @@
+import XCTest
+import Yosemite
+@testable import WooCommerce
+
+final class AnalyticsHubViewModelTests: XCTestCase {
+
+    private var stores: MockStoresManager!
+
+    override func setUp() {
+        stores = MockStoresManager(sessionManager: .makeForTesting())
+    }
+
+    func test_cards_viewmodels_show_correct_data_after_updating_from_network() async {
+        // Given
+        let vm = AnalyticsHubViewModel(siteID: 123, statsTimeRange: .thisMonth, stores: stores)
+        let stats = OrderStatsV4.fake().copy(totals: .fake().copy(totalOrders: 15, totalItemsSold: 5, grossRevenue: 62))
+        stores.whenReceivingAction(ofType: StatsActionV4.self) { action in
+            if case let .retrieveCustomStats(_, _, _, _, _, _, completion) = action {
+                completion(.success(stats))
+            }
+        }
+
+        // When
+        await vm.updateData()
+
+        // Then
+        XCTAssertFalse(vm.revenueCard.isRedacted)
+        XCTAssertFalse(vm.ordersCard.isRedacted)
+        XCTAssertFalse(vm.productCard.isRedacted)
+
+        XCTAssertEqual(vm.revenueCard.leadingValue, "$62")
+        XCTAssertEqual(vm.ordersCard.leadingValue, "15")
+        XCTAssertEqual(vm.productCard.itemsSold, "5")
+    }
+
+    func test_cards_viewmodels_show_empty_data_after_getting_error_from_network() async {
+        // Given
+        let vm = AnalyticsHubViewModel(siteID: 123, statsTimeRange: .thisMonth, stores: stores)
+        stores.whenReceivingAction(ofType: StatsActionV4.self) { action in
+            if case let .retrieveCustomStats(_, _, _, _, _, _, completion) = action {
+                completion(.failure(NSError(domain: "Test", code: 1)))
+            }
+        }
+
+        // When
+        await vm.updateData()
+
+        // Then
+        XCTAssertFalse(vm.revenueCard.isRedacted)
+        XCTAssertFalse(vm.ordersCard.isRedacted)
+        XCTAssertFalse(vm.productCard.isRedacted)
+
+        XCTAssertEqual(vm.revenueCard.leadingValue, "-")
+        XCTAssertEqual(vm.ordersCard.leadingValue, "-")
+        XCTAssertEqual(vm.productCard.itemsSold, "-")
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,9 @@ struct AnalyticsHubView: View {`
`75`	`75`	`.navigationBarTitleDisplayMode(.inline)`
`76`	`76`	`.background(Color(uiColor: .listBackground))`
`77`	`77`	`.edgesIgnoringSafeArea(.horizontal)`
	`78`	`+ .task {`
	`79`	`+ await viewModel.updateData()`
	`80`	`+ }`
`78`	`81`	`}`
`79`	`82`	`}`
`80`	`83`