Merge branch 'fix/group-chat-members-list' into 'dev'

Fixes group chat member list

See merge request elixxir/client-ios!87

Sources/AppFeature/Dependencies.swift

@@ -104,6 +104,9 @@ extension NavigatorKey: DependencyKey {
     PresentCountryListNavigator(
       CountryListController.init(_:)
     ),
+    PresentGroupMembersNavigator(
+      GroupMembersController.init(_:)
+    ),
     PresentOnboardingEmailNavigator(
       OnboardingEmailController.init
     ),

Sources/AppNavigation/PresentGroupMembers.swift

+import UIKit
+import XXModels
+
+/// Opens up `GroupMembers` on a given parent view controller
+public struct PresentGroupMembers: Action {
+  /// - Parameters:
+  ///   - groupInfo: Model that represents the group info that contains the members to be shown
+  ///   - parent: Parent view controller from which presentation should happen
+  ///   - animated: Animate the transition
+  public init(
+    groupInfo: GroupInfo,
+    from parent: UIViewController,
+    animated: Bool = true
+  ) {
+    self.groupInfo = groupInfo
+    self.parent = parent
+    self.animated = animated
+  }
+
+  /// Model that represents the group info that contains the members to be shown
+  public var groupInfo: GroupInfo
+
+  /// Parent view controller from which presentation should happen
+  public var parent: UIViewController
+
+  /// Animate the transition
+  public var animated: Bool
+}
+
+/// Performs `PresentGroupMembers` action
+public struct PresentGroupMembersNavigator: TypedNavigator {
+  /// Custom transitioning delegate
+  let transitioningDelegate = BottomTransitioningDelegate()
+
+  /// View controller which should be opened up
+  var viewController: (GroupInfo) -> UIViewController
+
+  /// - Parameters:
+  ///   - viewController: view controller which should be presented
+  public init(_ viewController: @escaping (GroupInfo) -> UIViewController) {
+    self.viewController = viewController
+  }
+
+  public func perform(_ action: PresentGroupMembers, completion: @escaping () -> Void) {
+    let controller = viewController(action.groupInfo)
+    controller.transitioningDelegate = transitioningDelegate
+    controller.modalPresentationStyle = .overFullScreen
+
+    action.parent.present(
+      controller,
+      animated: action.animated,
+      completion: completion
+    )
+  }
+}

Sources/AppNavigation/PresentMemberList.swift

-import XXModels
-
-public struct PresentMemberList: Action {
-  public var members: [Contact]
-  public var animated: Bool
-
-  public init(
-    members: [Contact],
-    animated: Bool = true
-  ) {
-    self.members = members
-    self.animated = animated
-  }
-}

Sources/ChatFeature/Controllers/GroupChatController.swift

@@ -29,8 +29,10 @@ public final class GroupChatController: UIViewController {
 //  @Dependency var makeReportDrawer: MakeReportDrawer
 //  @Dependency var makeAppScreenshot: MakeAppScreenshot
 
+  private lazy var moreButton = UIButton()
+  private lazy var headerView = GroupHeaderView()
+
   private var collectionView: UICollectionView!
-  private lazy var header = GroupHeaderView()
   private let inputComponent: ChatInputView
 
   private var animator: ManualAnimator?
@@ -65,14 +67,18 @@ public final class GroupChatController: UIViewController {
 
     super.init(nibName: nil, bundle: nil)
 
-    let memberList = info.members.map {
-      Member(
-        title: ($0.nickname ?? $0.username) ?? "Fetching username...",
-        photo: $0.photo
-      )
+    headerView.titleLabel.text = info.group.name
+    info.members.forEach {
+      let contactTitle = ($0.nickname ?? $0.username) ?? "Fetching username..."
+      let avatarView = AvatarView()
+      avatarView.layer.borderWidth = 2
+      avatarView.layer.borderColor = UIColor.white.cgColor
+      avatarView.setupProfile(title: contactTitle, image: $0.photo, size: .small)
+      avatarView.snp.makeConstraints {
+        $0.width.height.equalTo(26.0)
+      }
+      headerView.avatarStackView.addArrangedSubview(avatarView)
     }
-
-    header.setup(title: info.group.name, memberList: memberList)
   }
 
   public required init?(coder: NSCoder) { nil }
@@ -127,12 +133,11 @@ public final class GroupChatController: UIViewController {
   }
 
   private func setupNavigationBar() {
-    let more = UIButton()
-    more.setImage(Asset.chatMore.image, for: .normal)
-    more.addTarget(self, action: #selector(didTapDots), for: .touchUpInside)
+    moreButton.setImage(Asset.chatMore.image, for: .normal)
+    moreButton.addTarget(self, action: #selector(didTapDots), for: .touchUpInside)
 
-    navigationItem.titleView = header
-    navigationItem.rightBarButtonItem = UIBarButtonItem(customView: more)
+    navigationItem.titleView = headerView
+    navigationItem.rightBarButtonItem = UIBarButtonItem(customView: moreButton)
   }
 
   private func setupCollectionView() {
@@ -317,7 +322,10 @@ public final class GroupChatController: UIViewController {
   }
 
   @objc private func didTapDots() {
-    navigator.perform(PresentMemberList(members: viewModel.info.members))
+    navigator.perform(PresentGroupMembers(
+      groupInfo: viewModel.info,
+      from: self
+    ))
   }
 
   func scrollToBottom(completion: (() -> Void)? = nil) {

Sources/ChatFeature/Controllers/GroupMembersController.swift

+import UIKit
+import XXModels
+
+public final class GroupMembersController: UIViewController {
+  private lazy var screenView = GroupMembersView()
+
+  private let groupInfo: GroupInfo
+  
+  public init(_ groupInfo: GroupInfo) {
+    self.groupInfo = groupInfo
+    super.init(nibName: nil, bundle: nil)
+  }
+  
+  required init?(coder: NSCoder) { nil }
+
+  public override func loadView() {
+    view = screenView
+  }
+  
+  public override func viewDidLoad() {
+    super.viewDidLoad()
+
+    groupInfo.members.forEach {
+      screenView.addMember(
+        title: ($0.nickname ?? $0.username) ?? "Fetching username...",
+        photo: $0.photo
+      )
+    }
+  }
+}

Sources/ChatFeature/Views/GroupHeaderView.swift

@@ -2,26 +2,19 @@ import UIKit
 import Shared
 import AppResources
 
-struct Member {
-    let title: String
-    let photo: Data?
-}
-
 final class GroupHeaderView: UIView {
   let titleLabel = UILabel()
-    let containerView = UIView()
-    let stackView = UIStackView()
+  let avatarStackView = UIStackView()
 
   init() {
     super.init(frame: .zero)
 
-        stackView.spacing = -8
+    avatarStackView.spacing = -5
     titleLabel.textColor = Asset.neutralActive.color
     titleLabel.font = Fonts.Mulish.semiBold.font(size: 15.0)
 
-        containerView.addSubview(titleLabel)
-        containerView.addSubview(stackView)
-        addSubview(containerView)
+    addSubview(titleLabel)
+    addSubview(avatarStackView)
 
     titleLabel.snp.makeConstraints {
       $0.top.equalToSuperview()
@@ -30,31 +23,14 @@ final class GroupHeaderView: UIView {
       $0.right.lessThanOrEqualToSuperview()
     }
 
-        stackView.snp.makeConstraints {
+    avatarStackView.snp.makeConstraints {
       $0.top.equalTo(titleLabel.snp.bottom)
       $0.centerX.equalToSuperview()
       $0.left.greaterThanOrEqualToSuperview()
       $0.right.lessThanOrEqualToSuperview()
       $0.bottom.equalToSuperview()
     }
-
-        containerView.snp.makeConstraints {
-            $0.edges.equalToSuperview()
-        }
   }
 
   required init?(coder: NSCoder) { nil }
-
-    func setup(title: String, memberList: [Member]) {
-        titleLabel.text = title
-
-        memberList.forEach {
-            let avatarView = AvatarView()
-            avatarView.layer.borderWidth = 3
-            avatarView.layer.borderColor = UIColor.white.cgColor
-            avatarView.setupProfile(title: $0.title, image: $0.photo, size: .small)
-            avatarView.snp.makeConstraints { $0.width.height.equalTo(25.0) }
-            stackView.addArrangedSubview(avatarView)
-        }
-    }
 }

Sources/ChatFeature/Controllers/MembersController.swift → Sources/ChatFeature/Views/GroupMemberView.swift

 import UIKit
 import Shared
-import XXModels
 import AppResources
 
-final class MembersController: UIViewController {
-  private lazy var stackView = UIStackView()
-  
-  private let members: [Contact]
-  
-  init(with members: [Contact]) {
-    self.members = members
-    super.init(nibName: nil, bundle: nil)
-  }
-  
-  required init?(coder: NSCoder) { nil }
-  
-  public override func viewDidLoad() {
-    super.viewDidLoad()
-    
-    view.layer.cornerRadius = 15
-    view.layer.masksToBounds = true
-    view.backgroundColor = Asset.neutralWhite.color
-    
-    stackView.axis = .vertical
-    stackView.distribution = .fillEqually
-    view.addSubview(stackView)
-    
-    stackView.snp.makeConstraints {
-      $0.top.equalToSuperview().offset(10)
-      $0.left.right.equalToSuperview()
-      $0.bottom.equalTo(view.safeAreaLayoutGuide)
-    }
-    
-    members.forEach {
-      let memberView = MemberView()
-      let assignedTitle = ($0.nickname ?? $0.username) ?? "Fetching username..."
-      memberView.titleLabel.text = assignedTitle
-      memberView.avatarView.setupProfile(title: assignedTitle, image: $0.photo, size: .small)
-      stackView.addArrangedSubview(memberView)
-    }
-  }
-}
-
-private final class MemberView: UIView {
+final class GroupMemberView: UIView {
   let titleLabel = UILabel()
   let avatarView = AvatarView()
   let separatorView = UIView()
@@ -74,7 +34,7 @@ private final class MemberView: UIView {
     separatorView.snp.makeConstraints {
       $0.height.equalTo(1)
       $0.left.equalToSuperview().offset(25)
-      $0.right.equalToSuperview()
+      $0.right.equalToSuperview().offset(-25)
       $0.bottom.equalToSuperview()
     }
   }

Sources/ChatFeature/Views/GroupMembersView.swift

+import UIKit
+import Shared
+import AppResources
+
+final class GroupMembersView: UIView {
+  private let stackView = UIStackView()
+
+  init() {
+    super.init(frame: .zero)
+
+    layer.cornerRadius = 40
+    layer.masksToBounds = true
+    backgroundColor = Asset.neutralWhite.color
+
+    stackView.axis = .vertical
+    stackView.distribution = .fillEqually
+    addSubview(stackView)
+
+    stackView.snp.makeConstraints {
+      $0.top.equalToSuperview().offset(20)
+      $0.left.equalToSuperview().offset(20)
+      $0.right.equalToSuperview().offset(-20)
+      $0.bottom.equalToSuperview().offset(-50)
+    }
+  }
+
+  required init?(coder: NSCoder) { nil }
+
+  func addMember(title: String, photo: Data?) {
+    let memberView = GroupMemberView()
+    memberView.titleLabel.text = title
+    memberView.avatarView.setupProfile(
+      title: title,
+      image: photo,
+      size: .small
+    )
+    stackView.addArrangedSubview(memberView)
+  }
+}

Sources/Shared/Views/AvatarView.swift

@@ -62,7 +62,7 @@ public final class AvatarView: UIView {
     switch size {
     case .small:
       layer.cornerRadius = 13.0
-      monogramLabel.font = Fonts.Mulish.semiBold.font(size: 14.0)
+      monogramLabel.font = Fonts.Mulish.semiBold.font(size: 12.0)
     case .medium:
       layer.cornerRadius = 13.0
       monogramLabel.font = Fonts.Mulish.semiBold.font(size: 14.0)