Extract RoomsListCellView

Chat.xcodeproj/project.pbxproj

@@ -25,6 +25,7 @@
 		2F6E936C28F8D74600FAF0E5 /* MessageTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F6E936B28F8D74600FAF0E5 /* MessageTextField.swift */; };
 		2F81974828ACEDC8008D8C45 /* User.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F81974728ACEDC8008D8C45 /* User.swift */; };
 		2F81974C28ACFDEA008D8C45 /* Room.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F81974B28ACFDEA008D8C45 /* Room.swift */; };
+		2FB65BD828F9D2C000007021 /* RoomsListCellView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2FB65BD728F9D2C000007021 /* RoomsListCellView.swift */; };
 		2FCB75E728A425580097BD1D /* RoomsListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2FCB75E628A425580097BD1D /* RoomsListView.swift */; };
 		2FCB75EA28A425900097BD1D /* RoomsListViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2FCB75E928A425900097BD1D /* RoomsListViewModel.swift */; };
 		2FCB75ED28A42B1E0097BD1D /* ChatViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2FCB75EC28A42B1E0097BD1D /* ChatViewModel.swift */; };
@@ -50,6 +51,7 @@
 		2F6E936B28F8D74600FAF0E5 /* MessageTextField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageTextField.swift; sourceTree = "<group>"; };
 		2F81974728ACEDC8008D8C45 /* User.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = User.swift; sourceTree = "<group>"; };
 		2F81974B28ACFDEA008D8C45 /* Room.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Room.swift; sourceTree = "<group>"; };
+		2FB65BD728F9D2C000007021 /* RoomsListCellView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomsListCellView.swift; sourceTree = "<group>"; };
 		2FCB75E628A425580097BD1D /* RoomsListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomsListView.swift; sourceTree = "<group>"; };
 		2FCB75E928A425900097BD1D /* RoomsListViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomsListViewModel.swift; sourceTree = "<group>"; };
 		2FCB75EC28A42B1E0097BD1D /* ChatViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatViewModel.swift; sourceTree = "<group>"; };
@@ -109,6 +111,7 @@
 			isa = PBXGroup;
 			children = (
 				2FCB75E628A425580097BD1D /* RoomsListView.swift */,
+				2FB65BD728F9D2C000007021 /* RoomsListCellView.swift */,
 				2FCB75E928A425900097BD1D /* RoomsListViewModel.swift */,
 			);
 			path = Rooms;
@@ -268,6 +271,7 @@
 				2FCB75E728A425580097BD1D /* RoomsListView.swift in Sources */,
 				2F6045B3288EA0E6008F005E /* LoginView.swift in Sources */,
 				2F60459F288D869B008F005E /* ChatListView.swift in Sources */,
+				2FB65BD828F9D2C000007021 /* RoomsListCellView.swift in Sources */,
 				2F6045A5288E19ED008F005E /* KeyboardReadable.swift in Sources */,
 				2F60458C288D787F008F005E /* ContentView.swift in Sources */,
 				2F604599288D7E00008F005E /* ChatView.swift in Sources */,

Chat/UI/Rooms/RoomsListCellView.swift

@@ -0,0 +1,80 @@
+//
+//  RoomsListCellView.swift
+//  Chat (iOS)
+//
+//  Created by Sergey Tarasov on 14.10.2022.
+//
+
+import SwiftUI
+
+struct RoomsListCellView: View {
+	@Environment(\.colorScheme) var colorScheme
+
+	let roomID: String
+	let title: String
+	let lastMessage: String
+	let lastMessageTime: String
+	let unreadMessagesCount: Int
+
+	var body: some View {
+		ZStack {
+			HStack {
+				Image(systemName: "person.crop.circle")
+					.font(.system(size: 42))
+					.foregroundColor(.secondary.opacity(0.5))
+				VStack(alignment: .leading, spacing: 6) {
+					HStack(alignment: .firstTextBaseline) {
+						Text(title)
+						Spacer()
+						Text(lastMessageTime)
+							.font(.callout)
+							.foregroundColor(.secondary)
+					}
+					HStack(alignment: .firstTextBaseline) {
+						Text(lastMessage)
+							.foregroundColor(.secondary)
+						Spacer()
+						Text("\(unreadMessagesCount)")
+							.font(.callout)
+							.foregroundColor(colorScheme == .light ? .white : .black)
+							.padding(.horizontal, 6)
+							.background(
+								Capsule().foregroundColor(.secondary)
+							)
+							.monospacedDigit()
+					}
+				}
+			}
+			.foregroundColor(.primary)
+			.lineLimit(1)
+			NavigationLink {
+				ChatView(viewModel: ChatViewModel(with: roomID))
+			} label: {
+				EmptyView()
+			}
+			.opacity(0.0)
+		}
+	}
+}
+
+struct RoomsListCellView_Previews: PreviewProvider {
+	static var previews: some View {
+		List {
+			RoomsListCellView(
+				roomID: "room@domain.com",
+				title: "Room looooooooooooooong title",
+				lastMessage: "Last message",
+				lastMessageTime: "15:37",
+				unreadMessagesCount: 3
+			)
+			RoomsListCellView(
+				roomID: "room@domain.com",
+				title: "Room title",
+				lastMessage: "Last loooooooooooooooong message",
+				lastMessageTime: "15:37",
+				unreadMessagesCount: 3
+			)
+		}
+		.listStyle(.plain)
+	}
+}

Chat/UI/Rooms/RoomsListView.swift

@@ -11,61 +11,24 @@ struct RoomsListView: View {
     @Environment(\.colorScheme) var colorScheme
 
 	@StateObject var viewModel: RoomsListViewModel = RoomsListViewModel()
+
     var body: some View {
         Group {
-            if viewModel.rooms.isEmpty {
-                ProgressView()
-            } else {
-                List {
-                    ForEach(viewModel.rooms.indices, id: \.self) { index in
-                        ZStack {
-                            HStack {
-                                Image(systemName: "person.crop.circle")
-                                    .resizable()
-                                    .scaledToFit()
-                                    .foregroundColor(.secondary.opacity(0.5))
-                                    .padding(.vertical, 8)
-                                VStack(alignment: .leading, spacing: 0) {
-                                    HStack {
-                                        Text(viewModel.rooms[index].name)
-                                        Spacer()
-                                        Text("23:04")
-                                            .font(.callout)
-                                            .foregroundColor(.secondary)
-                                    }
-                                    .padding(.vertical, 4)
-                                    HStack {
-                                        VStack {
-                                            Text("Сообщение \(index)")
-                                                .foregroundColor(.secondary)
-                                            Spacer()
-                                        }
-                                        Spacer()
-                                        Text("\(index)")
-                                            .font(.callout)
-                                            .foregroundColor(colorScheme == .light ? .white : .black)
-                                            .padding(.horizontal, 6)
-                                            .background(
-                                                Capsule().foregroundColor(.secondary)
-                                            )
-                                    }
-                                    .padding(.vertical, 6)
-                                }
-                            }
-                            .foregroundColor(.primary)
-                            .frame(height: 60)
-                            NavigationLink {
-                                ChatView(viewModel: ChatViewModel(with: viewModel.rooms[index].jidString))
-                            } label: {
-                                EmptyView()
-                            }
-                                .opacity(0.0)
-                        }
-                    }
-                }
-                .listStyle(.plain)
-            }
-        }
+			if viewModel.rooms.isEmpty {
+				ProgressView()
+			} else {
+				List(viewModel.rooms.indices, id: \.self) { index in
+					RoomsListCellView(
+						roomID: viewModel.rooms[index].jidString,
+						title: viewModel.rooms[index].name,
+						lastMessage: "Сообщение \(index)",
+						lastMessageTime: "14:\(Int.random(in: 10...50))",
+						unreadMessagesCount: Int.random(in: 1...100)
+					)
+				}
+				.listStyle(.plain)
+			}
+		}
 		.onAppear {
 			viewModel.fetchRooms()
 		}
@@ -75,15 +38,21 @@ struct RoomsListView: View {
 
 struct RoomsListView_Previews: PreviewProvider {
     static var viewModel: RoomsListViewModel = RoomsListViewModel()
+
     static var previews: some View {
-        Group {
-            NavigationView {
-                RoomsListView(viewModel: viewModel)
-            }
-            NavigationView {
-                RoomsListView(viewModel: viewModel)
-            }
-            .preferredColorScheme(.dark)
-        }
+		NavigationView {
+			RoomsListView(viewModel: viewModel)
+				.onAppear {
+					viewModel.rooms = [
+						.init(jidString: "Jid", name: "Room title 1"),
+						.init(jidString: "Jid", name: "Room title 2"),
+						.init(jidString: "Jid", name: "Room title 3"),
+						.init(jidString: "Jid", name: "Room title 4"),
+						.init(jidString: "Jid", name: "Room title 5"),
+						.init(jidString: "Jid", name: "Room title 6"),
+						.init(jidString: "Jid", name: "Room title 7")
+					]
+				}
+		}
     }
 }