Add ChatThreadListErrorBannerView

nuno-vieira · nuno-vieira · commit 6f7b535d306d · 2024-10-14T18:56:19.000+01:00
diff --git a/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListErrorBannerView.swift b/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListErrorBannerView.swift
@@ -0,0 +1,28 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import SwiftUI
+
+public struct ChatThreadListErrorBannerView: View {
+    @Injected(\.colors) private var colors
+    @Injected(\.images) private var images
+
+    let action: () -> Void
+
+    public var body: some View {
+        HStack(alignment: .center) {
+            Text(L10n.Thread.Error.message)
+                .foregroundColor(Color(colors.staticColorText))
+            Spacer()
+            Button(action: action) {
+                Image(uiImage: images.restart)
+                    .customizable()
+                    .frame(width: 20, height: 20)
+                    .foregroundColor(Color(colors.staticColorText))
+            }
+        }
+        .padding(.all, 16)
+        .background(Color(colors.bannerBackgroundColor))
+    }
+}
diff --git a/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListItem.swift b/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListItem.swift
@@ -7,10 +7,7 @@ import SwiftUI
 
 /// View for the thread list item.
 public struct ChatThreadListItem: View {
-    @Injected(\.fonts) private var fonts
-    @Injected(\.colors) private var colors
     @Injected(\.utils) private var utils
-    @Injected(\.images) private var images
     @Injected(\.chatClient) private var chatClient
 
     var thread: ChatThread
@@ -101,8 +98,7 @@ struct ChatThreadListItemContentView: View {
             threadContainerView
             replyContainerView
         }
-        .padding(.horizontal, 8)
-        .padding(.vertical, 4)
+        .padding(.all, 8)
     }
 
     var threadContainerView: some View {
diff --git a/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListLoadingView.swift b/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListLoadingView.swift
@@ -19,8 +19,6 @@ struct ChatThreadListLoadingView: View {
                         replyMessageText: placeholder(length: 50),
                         replyTimestampText: placeholder(length: 8)
                     )
-                    .padding(.horizontal, 8)
-                    .padding(.vertical, 4)
                     .shimmering(duration: 0.8, delay: 0.1)
                     .redacted(reason: .placeholder)
 
diff --git a/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListView.swift b/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListView.swift
@@ -72,6 +72,11 @@ public struct ChatThreadListView<Factory: ViewFactory>: View {
                     )
                 }
             }
+            .bottomBanner(isPresented: viewModel.failedToLoadThreads) {
+                viewFactory.makeThreadsListErrorBannerView {
+                    viewModel.loadThreads()
+                }
+            }
             .accentColor(colors.tintColor)
             .background(
                 viewFactory.makeThreadListBackground(colors: colors)
diff --git a/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListViewModel.swift b/Sources/StreamChatSwiftUI/ChatThreadList/ChatThreadListViewModel.swift
@@ -32,6 +32,8 @@ open class ChatThreadListViewModel: ObservableObject, ChatThreadListControllerDe
     /// A boolean indicating that there is no data from server.
     @Published public var isEmpty = false
 
+    /// A boolean indicating if it failed loading the initial data from the server.
+    @Published public var failedToLoadThreads = false
     /// Creates a view model for the `ChatThreadListView`.
     ///
     /// - Parameters:
@@ -49,9 +51,11 @@ open class ChatThreadListViewModel: ObservableObject, ChatThreadListControllerDe
     public func loadThreads() {
         controller?.delegate = self
         isLoading = controller?.threads.isEmpty == true
+        failedToLoadThreads = false
         controller?.synchronize { [weak self] error in
             self?.isLoading = false
             self?.hasLoadedThreads = error == nil
+            self?.failedToLoadThreads = error != nil
             self?.isEmpty = self?.controller?.threads.isEmpty == true
         }
     }
diff --git a/Sources/StreamChatSwiftUI/ColorPalette.swift b/Sources/StreamChatSwiftUI/ColorPalette.swift
@@ -85,6 +85,10 @@ public struct ColorPalette {
     public lazy var composerPlaceholderColor: UIColor = subtitleText
     public lazy var composerInputBackground: UIColor = background
     public lazy var composerInputHighlightedBorder: UIColor = innerBorder
+
+    // MARK: - Threads
+
+    public var bannerBackgroundColor: UIColor = .streamDarkGray
 }
 
 // Those colors are default defined stream constants, which are fallback values if you don't implement your color theme.
diff --git a/Sources/StreamChatSwiftUI/CommonViews/FloatingBannerViewModifier.swift b/Sources/StreamChatSwiftUI/CommonViews/FloatingBannerViewModifier.swift
@@ -0,0 +1,62 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import SwiftUI
+
+extension View {
+    @ViewBuilder
+    func topBanner(isPresented: Bool, _ bannerView: @escaping () -> some View) -> some View {
+        modifier(
+            FloatingBannerViewModifier(
+                isPresented: isPresented,
+                alignment: .top,
+                bannerView
+            )
+        )
+    }
+
+    @ViewBuilder
+    func bottomBanner(isPresented: Bool, _ bannerView: @escaping () -> some View) -> some View {
+        modifier(
+            FloatingBannerViewModifier(
+                isPresented: isPresented,
+                alignment: .bottom,
+                bannerView
+            )
+        )
+    }
+}
+
+
+struct FloatingBannerViewModifier<BannerView: View>: ViewModifier {
+    let alignment: Alignment
+    var isPresented: Bool
+
+    @ViewBuilder
+    let bannerView: () -> BannerView
+
+    init(
+        isPresented: Bool,
+        alignment: Alignment = .bottom,
+        _ bannerView: @escaping () -> BannerView
+    ) {
+        self.alignment = alignment
+        self.isPresented = isPresented
+        self.bannerView = bannerView
+    }
+
+    func body(content: Content) -> some View {
+        ZStack(alignment: alignment) {
+            content
+            if isPresented {
+                bannerView()
+                    .animation(.easeInOut)
+                    .transition(
+                        .move(edge: alignment == .bottom ? .bottom : .top)
+                        .combined(with: .opacity)
+                    )
+            }
+        }
+    }
+}
diff --git a/Sources/StreamChatSwiftUI/DefaultViewFactory.swift b/Sources/StreamChatSwiftUI/DefaultViewFactory.swift
@@ -995,6 +995,10 @@ extension ViewFactory {
         NoThreadsView()
     }
 
+    public func makeThreadsListErrorBannerView(onRefreshAction: @escaping () -> Void) -> some View {
+        ChatThreadListErrorBannerView(action: onRefreshAction)
+    }
+
     public func makeThreadListLoadingView() -> some View {
         ChatThreadListLoadingView()
     }
diff --git a/Sources/StreamChatSwiftUI/ViewFactory.swift b/Sources/StreamChatSwiftUI/ViewFactory.swift
@@ -1006,6 +1006,12 @@ public protocol ViewFactory: AnyObject {
     /// Creates the view that is displayed when there are no threads available.
     func makeNoThreadsView() -> NoThreads
 
+    associatedtype ThreadListErrorBannerView: View
+    /// Creates the error view that is displayed at the bottom of the thread list.
+    /// - Parameter onRefreshAction: The refresh action, to reload the threads.
+    /// - Returns: Returns the error view shown as a banner at the bottom of the thread list.
+    func makeThreadsListErrorBannerView(onRefreshAction: @escaping () -> Void) -> ThreadListErrorBannerView
+
     associatedtype ThreadListLoadingView: View
     /// Creates a loading view for the thread list.
     func makeThreadListLoadingView() -> ThreadListLoadingView
diff --git a/StreamChatSwiftUI.xcodeproj/project.pbxproj b/StreamChatSwiftUI.xcodeproj/project.pbxproj
@@ -515,6 +515,8 @@
 		AD3AB65C2CB730090014D4D7 /* Shimmer.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3AB65B2CB730090014D4D7 /* Shimmer.swift */; };
 		AD3AB65E2CB731360014D4D7 /* ChatThreadListLoadingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3AB65D2CB731360014D4D7 /* ChatThreadListLoadingView.swift */; };
 		AD3AB6602CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3AB65F2CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift */; };
+		ADE0F55E2CB838420053B8B9 /* ChatThreadListErrorBannerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = ADE0F55D2CB838420053B8B9 /* ChatThreadListErrorBannerView.swift */; };
+		ADE0F5602CB846EC0053B8B9 /* FloatingBannerViewModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = ADE0F55F2CB846EC0053B8B9 /* FloatingBannerViewModifier.swift */; };
 		C14A465B284665B100EF498E /* SDKIdentifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = C14A465A284665B100EF498E /* SDKIdentifier.swift */; };
 		E3A1C01C282BAC66002D1E26 /* Sentry in Frameworks */ = {isa = PBXBuildFile; productRef = E3A1C01B282BAC66002D1E26 /* Sentry */; };
 /* End PBXBuildFile section */
@@ -1099,6 +1101,8 @@
 		AD3AB65B2CB730090014D4D7 /* Shimmer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Shimmer.swift; sourceTree = "<group>"; };
 		AD3AB65D2CB731360014D4D7 /* ChatThreadListLoadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatThreadListLoadingView.swift; sourceTree = "<group>"; };
 		AD3AB65F2CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatThreadListHeaderViewModifier.swift; sourceTree = "<group>"; };
+		ADE0F55D2CB838420053B8B9 /* ChatThreadListErrorBannerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatThreadListErrorBannerView.swift; sourceTree = "<group>"; };
+		ADE0F55F2CB846EC0053B8B9 /* FloatingBannerViewModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FloatingBannerViewModifier.swift; sourceTree = "<group>"; };
 		C14A465A284665B100EF498E /* SDKIdentifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SDKIdentifier.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -1687,6 +1691,7 @@
 			children = (
 				8465FCFA2746A95600AF091E /* ActionItemView.swift */,
 				4F6D83502C1079A00098C298 /* AlertBannerViewModifier.swift */,
+				ADE0F55F2CB846EC0053B8B9 /* FloatingBannerViewModifier.swift */,
 				4F077EF72C85E05700F06D83 /* DelayedRenderingViewModifier.swift */,
 				84AB7B1C2771F4AA00631A10 /* DiscardButtonView.swift */,
 				84F2908D276B92A40045472D /* GalleryHeaderView.swift */,
@@ -2240,6 +2245,7 @@
 				AD3AB6532CB54F310014D4D7 /* ChatThreadListItem.swift */,
 				AD3AB65D2CB731360014D4D7 /* ChatThreadListLoadingView.swift */,
 				AD3AB65F2CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift */,
+				ADE0F55D2CB838420053B8B9 /* ChatThreadListErrorBannerView.swift */,
 				AD2DDA602CB040EA0040B8D4 /* NoThreadsView.swift */,
 			);
 			path = ChatThreadList;
@@ -2559,6 +2565,7 @@
 				82D64BE92AD7E5B700C5C79E /* TaskLoadData.swift in Sources */,
 				847CEFEE27C38ABE00606257 /* MessageCachingUtils.swift in Sources */,
 				82D64BF62AD7E5B700C5C79E /* ImageProcessors+CoreImage.swift in Sources */,
+				ADE0F55E2CB838420053B8B9 /* ChatThreadListErrorBannerView.swift in Sources */,
 				8451C4912BD7096000849955 /* PollAttachmentView.swift in Sources */,
 				8465FD792746A95700AF091E /* DeletedMessageView.swift in Sources */,
 				8492975227B156D100A8EEB0 /* SlowModeView.swift in Sources */,
@@ -2646,6 +2653,7 @@
 				84DEC8EC27611CAE00172876 /* SendInChannelView.swift in Sources */,
 				84F130C12AEAA957006E7B52 /* StreamLazyImage.swift in Sources */,
 				82D64BD12AD7E5B700C5C79E /* Image.swift in Sources */,
+				ADE0F5602CB846EC0053B8B9 /* FloatingBannerViewModifier.swift in Sources */,
 				82D64BD52AD7E5B700C5C79E /* AnimatedFrame.swift in Sources */,
 				8465FD9F2746A95700AF091E /* ChatChannelExtensions.swift in Sources */,
 				844D1D6628510304000CCCB9 /* ChannelControllerFactory.swift in Sources */,

Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,6 @@ struct ChatThreadListLoadingView: View {`
`19`	`19`	`replyMessageText: placeholder(length: 50),`
`20`	`20`	`replyTimestampText: placeholder(length: 8)`
`21`	`21`	`)`
`22`		`- .padding(.horizontal, 8)`
`23`		`- .padding(.vertical, 4)`
`24`	`22`	`.shimmering(duration: 0.8, delay: 0.1)`
`25`	`23`	`.redacted(reason: .placeholder)`
`26`	`24`
Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,11 @@ public struct ChatThreadListView<Factory: ViewFactory>: View {`
`72`	`72`	`)`
`73`	`73`	`}`
`74`	`74`	`}`
	`75`	`+ .bottomBanner(isPresented: viewModel.failedToLoadThreads) {`
	`76`	`+ viewFactory.makeThreadsListErrorBannerView {`
	`77`	`+ viewModel.loadThreads()`
	`78`	`+ }`
	`79`	`+ }`
`75`	`80`	`.accentColor(colors.tintColor)`
`76`	`81`	`.background(`
`77`	`82`	`viewFactory.makeThreadListBackground(colors: colors)`
Original file line number	Diff line number	Diff line change
`@@ -995,6 +995,10 @@ extension ViewFactory {`
`995`	`995`	`NoThreadsView()`
`996`	`996`	`}`
`997`	`997`
	`998`	`+ public func makeThreadsListErrorBannerView(onRefreshAction: @escaping () -> Void) -> some View {`
	`999`	`+ ChatThreadListErrorBannerView(action: onRefreshAction)`
	`1000`	`+ }`
	`1001`	`+`
`998`	`1002`	`public func makeThreadListLoadingView() -> some View {`
`999`	`1003`	`ChatThreadListLoadingView()`
`1000`	`1004`	`}`