Merge branch 'feature/typing-indicators' of https://github.com/GetStream/stream-chat-swiftui into feature/muting-users

martinmitrevski · martinmitrevski · commit b706e12ae6a0 · 2022-01-12T09:35:57.000+01:00
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChannelHeader/ChatChannelHeaderViewModifier.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChannelHeader/ChatChannelHeaderViewModifier.swift
@@ -33,11 +33,11 @@ public struct DefaultChatChannelHeader: ToolbarContent {
             VStack(spacing: 2) {
                 Text(channelNamer(channel, currentUserId) ?? "")
                     .font(fonts.bodyBold)
-                if !channel.currentlyTypingUsers.isEmpty
+                if !channel.currentlyTypingUsersFiltered(currentUserId: currentUserId).isEmpty
                     && utils.typingIndicatorPlacement == .navigationBar {
                     HStack {
                         TypingIndicatorView()
-                        SubtitleText(text: channel.typingIndicatorString)
+                        SubtitleText(text: channel.typingIndicatorString(currentUserId: currentUserId))
                     }
                 } else {
                     Text(channel.onlineInfoText(currentUserId: currentUserId))
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift
@@ -88,6 +88,8 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
 
     @Published public var reactionsShown = false {
         didSet {
+            // When reactions are shown, the navigation bar is hidden.
+            // Check the header type and trigger an update.
             checkHeaderType()
         }
     }
@@ -271,16 +273,27 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
     
     private func checkHeaderType() {
         let type: ChannelHeaderType
+        let typingUsers = channel.currentlyTypingUsersFiltered(
+            currentUserId: chatClient.currentUserId
+        )
+        
         if !reactionsShown && isMessageThread {
             type = .messageThread
-        } else if !channel.currentlyTypingUsers.isEmpty {
+        } else if !typingUsers.isEmpty {
             type = .typingIndicator
         } else {
             type = .regular
         }
         
         if type != channelHeaderType {
             channelHeaderType = type
+        } else if type == .typingIndicator {
+            // Toolbar is not updated when new user starts typing.
+            // Therefore, we shortly update the state to regular to trigger an update.
+            channelHeaderType = .regular
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+                self?.channelHeaderType = .typingIndicator
+            }
         }
     }
 }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift
@@ -7,6 +7,7 @@ import SwiftUI
 
 struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
     @Injected(\.utils) private var utils
+    @Injected(\.chatClient) private var chatClient
     
     var factory: Factory
     var channel: ChatChannel
@@ -145,10 +146,10 @@ struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
                 DateIndicatorView(date: date)
             }
                 
-            if !channel.currentlyTypingUsers.isEmpty
+            if !channel.currentlyTypingUsersFiltered(currentUserId: chatClient.currentUserId).isEmpty
                 && utils.typingIndicatorPlacement == .bottomOverlay {
                 TypingIndicatorBottomView(
-                    typingIndicatorString: channel.typingIndicatorString
+                    typingIndicatorString: channel.typingIndicatorString(currentUserId: chatClient.currentUserId)
                 )
             }
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift b/Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift
@@ -6,6 +6,7 @@ import Foundation
 import StreamChat
 
 extension ChatChannel {
+    
     func onlineInfoText(currentUserId: String) -> String {
         if isDirectMessageChannel {
             guard let member = lastActiveMembers
@@ -27,8 +28,14 @@ extension ChatChannel {
         return L10n.Message.Title.group(memberCount, watcherCount)
     }
     
-    var typingIndicatorString: String {
-        let typingUsers = Array(currentlyTypingUsers)
+    func currentlyTypingUsersFiltered(currentUserId: UserId?) -> [ChatUser] {
+        currentlyTypingUsers.filter { user in
+            user.id != currentUserId
+        }
+    }
+    
+    func typingIndicatorString(currentUserId: UserId?) -> String {
+        let typingUsers = currentlyTypingUsersFiltered(currentUserId: currentUserId)
         if let user = typingUsers.first(where: { user in user.name != nil }), let name = user.name {
             return L10n.MessageList.TypingIndicator.users(name, typingUsers.count - 1)
         } else {
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift
@@ -12,6 +12,7 @@ public struct ChatChannelListItem: View {
     @Injected(\.colors) private var colors
     @Injected(\.utils) private var utils
     @Injected(\.images) private var images
+    @Injected(\.chatClient) private var chatClient
         
     var channel: ChatChannel
     var channelName: String
@@ -47,7 +48,9 @@ public struct ChatChannelListItem: View {
                             }
                         } else {
                             HStack(spacing: 4) {
-                                if !channel.currentlyTypingUsers.isEmpty {
+                                if !channel.currentlyTypingUsersFiltered(
+                                    currentUserId: chatClient.currentUserId
+                                ).isEmpty {
                                     TypingIndicatorView()
                                 }
                                 SubtitleText(text: subtitleText)
@@ -81,8 +84,10 @@ public struct ChatChannelListItem: View {
     private var subtitleText: String {
         if channel.isMuted {
             return L10n.Channel.Item.muted
-        } else if !channel.currentlyTypingUsers.isEmpty {
-            return channel.typingIndicatorString
+        } else if !channel.currentlyTypingUsersFiltered(
+            currentUserId: chatClient.currentUserId
+        ).isEmpty {
+            return channel.typingIndicatorString(currentUserId: chatClient.currentUserId)
         } else if let latestMessage = channel.latestMessages.first {
             return "\(latestMessage.author.name ?? latestMessage.author.id): \(latestMessage.textContent ?? latestMessage.text)"
         } else {
diff --git a/Sources/StreamChatSwiftUI/Resources/en.lproj/Localizable.stringsdict b/Sources/StreamChatSwiftUI/Resources/en.lproj/Localizable.stringsdict
@@ -15,7 +15,7 @@
 			<key>zero</key>
 			<string> is typing</string>
 			<key>one</key>
-			<string> and %2$d more is typing</string>
+			<string> and %2$d more are typing</string>
 			<key>other</key>
 			<string> and %2$d more are typing</string>
 		</dict>
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/ChatChannelExtensions_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannel/ChatChannelExtensions_Tests.swift
@@ -26,7 +26,7 @@ class ChatChannelExtensions_Tests: XCTestCase {
         let channel = ChatChannel.mockDMChannel()
         
         // When
-        let typingIndicatorString = channel.typingIndicatorString
+        let typingIndicatorString = channel.typingIndicatorString(currentUserId: nil)
         
         // Then
         XCTAssert(typingIndicatorString == "Someone is typing")
@@ -42,7 +42,7 @@ class ChatChannelExtensions_Tests: XCTestCase {
         )
         
         // When
-        let typingIndicatorString = channel.typingIndicatorString
+        let typingIndicatorString = channel.typingIndicatorString(currentUserId: nil)
         
         // Then
         XCTAssert(typingIndicatorString == "Martin is typing")
@@ -61,12 +61,12 @@ class ChatChannelExtensions_Tests: XCTestCase {
         )
         
         // When
-        let typingIndicatorString = channel.typingIndicatorString
+        let typingIndicatorString = channel.typingIndicatorString(currentUserId: nil)
         
         // Then
         XCTAssert(
-            typingIndicatorString == "Stefan and 1 more is typing"
-                || typingIndicatorString == "Martin and 1 more is typing"
+            typingIndicatorString == "Stefan and 1 more are typing"
+                || typingIndicatorString == "Martin and 1 more are typing"
         ) // Any of the names can appear first.
     }
 }
diff --git a/docusaurus/docs/iOS/swiftui/components/typing-indicators.md b/docusaurus/docs/iOS/swiftui/components/typing-indicators.md
@@ -4,11 +4,14 @@ title: Typing Indicators
 
 ## Typing Indicators Overview
 
-The SwiftUI SDK has support for typing indicators, shown when other participants in a conversation are typing. There are two places where the typing indicators are shown. The first one is when the user is in the channels list - when someone in a channel is typing, the indicator is shown in the corresponding channel list item. The second place, where a typing indicator is shown, is in the chat channel view. Depending on the configuration provided, the typing indicator can be shown either in the navigation bar, or above the composer, as an overlay over the message list. 
+The SwiftUI SDK has support for typing indicators which are shown when other participants in a conversation are typing. 
 
-The configuration for placing the typing indicator can be found in the `TypingIndicatorPlacement` enum, which is part of the `Utils`  class. By default, the placement of the typing indicator is above the composer, which is represented by the enum value `bottomOverlay`.
+There are two places where the typing indicators are shown. The first one is when the user is in the channels list - when someone in a channel is typing, the indicator appears in the corresponding channel list item. 
+The second place, where a typing indicator is shown, is in the chat channel view. Depending on the configuration provided, the typing indicator can be shown either in the navigation bar or above the composer, as an overlay over the message list. 
 
-Here's an example how to change the configuration, so that the typing indicator is shown in the navigation bar.
+The configuration for placing the typing indicator can be found in the `TypingIndicatorPlacement` enum, which is part of the `Utils` class. By default, the placement of the typing indicator is above the composer, which is represented by the enum value `.bottomOverlay`.
+
+Here's an example of how to change the configuration, so that the typing indicator is shown in the navigation bar (represented by the `TypingIndicatorPlacement` enum value `.navigationBar`).
 
 ```swift
 let utils = Utils(typingIndicatorPlacement: .navigationBar)        

Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,8 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {`
`88`	`88`
`89`	`89`	`@Published public var reactionsShown = false {`
`90`	`90`	`didSet {`
	`91`	`+ // When reactions are shown, the navigation bar is hidden.`
	`92`	`+ // Check the header type and trigger an update.`
`91`	`93`	`checkHeaderType()`
`92`	`94`	`}`
`93`	`95`	`}`
`@@ -271,16 +273,27 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {`
`271`	`273`
`272`	`274`	`private func checkHeaderType() {`
`273`	`275`	`let type: ChannelHeaderType`
	`276`	`+ let typingUsers = channel.currentlyTypingUsersFiltered(`
	`277`	`+ currentUserId: chatClient.currentUserId`
	`278`	`+ )`
	`279`	`+`
`274`	`280`	`if !reactionsShown && isMessageThread {`
`275`	`281`	`type = .messageThread`
`276`		`- } else if !channel.currentlyTypingUsers.isEmpty {`
	`282`	`+ } else if !typingUsers.isEmpty {`
`277`	`283`	`type = .typingIndicator`
`278`	`284`	`} else {`
`279`	`285`	`type = .regular`
`280`	`286`	`}`
`281`	`287`
`282`	`288`	`if type != channelHeaderType {`
`283`	`289`	`channelHeaderType = type`
	`290`	`+ } else if type == .typingIndicator {`
	`291`	`+ // Toolbar is not updated when new user starts typing.`
	`292`	`+ // Therefore, we shortly update the state to regular to trigger an update.`
	`293`	`+ channelHeaderType = .regular`
	`294`	`+ DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in`
	`295`	`+ self?.channelHeaderType = .typingIndicator`
	`296`	`+ }`
`284`	`297`	`}`
`285`	`298`	`}`
`286`	`299`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ import SwiftUI`
`7`	`7`
`8`	`8`	`struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {`
`9`	`9`	`@Injected(\.utils) private var utils`
	`10`	`+ @Injected(\.chatClient) private var chatClient`
`10`	`11`
`11`	`12`	`var factory: Factory`
`12`	`13`	`var channel: ChatChannel`
`@@ -145,10 +146,10 @@ struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {`
`145`	`146`	`DateIndicatorView(date: date)`
`146`	`147`	`}`
`147`	`148`
`148`		`- if !channel.currentlyTypingUsers.isEmpty`
	`149`	`+ if !channel.currentlyTypingUsersFiltered(currentUserId: chatClient.currentUserId).isEmpty`
`149`	`150`	`&& utils.typingIndicatorPlacement == .bottomOverlay {`
`150`	`151`	`TypingIndicatorBottomView(`
`151`		`- typingIndicatorString: channel.typingIndicatorString`
	`152`	`+ typingIndicatorString: channel.typingIndicatorString(currentUserId: chatClient.currentUserId)`
`152`	`153`	`)`
`153`	`154`	`}`
`154`	`155`	`}`