[Notifications Refresh] Redesign Likes and Follows details content

WordPress/Classes/ViewRelated/Likes/LikesListController.swift

@@ -357,7 +357,7 @@ extension LikesListController: UITableViewDataSource, UITableViewDelegate {
 private extension LikesListController {
 
     func headerCell() -> NoteBlockHeaderTableViewCell {
-        guard let cell = tableView.dequeueReusableCell(withIdentifier: NoteBlockHeaderTableViewCell.reuseIdentifier()) as? NoteBlockHeaderTableViewCell,
+        guard let cell = tableView.dequeueReusableCell(withIdentifier: NoteBlockHeaderTableViewCell.defaultReuseID) as? NoteBlockHeaderTableViewCell,
               let group = notification?.headerAndBodyContentGroups[Constants.headerRowIndex] else {
             DDLogError("Error: couldn't get a header cell or FormattableContentGroup.")
             return NoteBlockHeaderTableViewCell()
@@ -403,13 +403,20 @@ private extension LikesListController {
     }
 
     func userCell(for indexPath: IndexPath) -> UITableViewCell {
-        guard let user = likingUsers[safe: indexPath.row],
+        guard let parent = parent,
+              let user = likingUsers[safe: indexPath.row],
               let cell = tableView.dequeueReusableCell(withIdentifier: LikeUserTableViewCell.defaultReuseID) as? LikeUserTableViewCell else {
             DDLogError("Failed dequeueing LikeUserTableViewCell")
             return UITableViewCell()
         }
+        cell.configure(
+            user: user,
+            onUserClicked: { [weak self] in
+                self?.delegate?.didSelectUser(user, at: indexPath)
+            },
+            parent: parent
+        )
 
-        cell.configure(withUser: user, isLastRow: (indexPath.row == likingUsers.endIndex - 1))
         return cell
     }
 

WordPress/Classes/ViewRelated/Notifications/Controllers/NotificationDetailsViewController.swift

@@ -355,25 +355,23 @@ extension NotificationDetailsViewController {
     }
 
     func setupMainView() {
-        view.backgroundColor = note.isBadge ? .ungroupedListBackground : .listBackground
+        view.backgroundColor = .ungroupedListBackground
     }
 
     func setupTableView() {
         tableView.separatorStyle            = .none
         tableView.keyboardDismissMode       = .interactive
         tableView.accessibilityIdentifier   = .notificationDetailsTableAccessibilityId
         tableView.accessibilityLabel        = NSLocalizedString("Notification Details Table", comment: "Notifications Details Accessibility Identifier")
-        tableView.backgroundColor           = note.isBadge ? .ungroupedListBackground : .listBackground
+        tableView.backgroundColor           = .ungroupedListBackground
     }
 
     func setupTableViewCells() {
         let cellClassNames: [NoteBlockTableViewCell.Type] = [
-            NoteBlockHeaderTableViewCell.self,
             NoteBlockTextTableViewCell.self,
             NoteBlockActionsTableViewCell.self,
             NoteBlockCommentTableViewCell.self,
             NoteBlockImageTableViewCell.self,
-            NoteBlockUserTableViewCell.self,
             NoteBlockButtonTableViewCell.self
         ]
 
@@ -384,9 +382,12 @@ extension NotificationDetailsViewController {
             tableView.register(nib, forCellReuseIdentifier: cellClass.reuseIdentifier())
         }
 
-        tableView.register(LikeUserTableViewCell.defaultNib,
+        tableView.register(LikeUserTableViewCell.self,
                            forCellReuseIdentifier: LikeUserTableViewCell.defaultReuseID)
-
+        tableView.register(NoteBlockHeaderTableViewCell.self,
+                           forCellReuseIdentifier: NoteBlockHeaderTableViewCell.defaultReuseID)
+        tableView.register(NoteBlockUserTableViewCell.self,
+                           forCellReuseIdentifier: NoteBlockUserTableViewCell.defaultReuseID)
     }
 
     /// Configure the delegate and data source for the table view based on notification type.
@@ -557,7 +558,7 @@ private extension NotificationDetailsViewController {
     func reuseIdentifierForGroup(_ blockGroup: FormattableContentGroup) -> String {
         switch blockGroup.kind {
         case .header:
-            return NoteBlockHeaderTableViewCell.reuseIdentifier()
+            return NoteBlockHeaderTableViewCell.defaultReuseID
         case .footer:
             return NoteBlockTextTableViewCell.reuseIdentifier()
         case .subject:
@@ -571,7 +572,7 @@ private extension NotificationDetailsViewController {
         case .image:
             return NoteBlockImageTableViewCell.reuseIdentifier()
         case .user:
-            return NoteBlockUserTableViewCell.reuseIdentifier()
+            return NoteBlockUserTableViewCell.defaultReuseID
         case .button:
             return NoteBlockButtonTableViewCell.reuseIdentifier()
         default:
@@ -669,26 +670,20 @@ private extension NotificationDetailsViewController {
             return
         }
 
-        let hasHomeURL = userBlock.metaLinksHome != nil
-        let hasHomeTitle = userBlock.metaTitlesHome?.isEmpty == false
-
-        cell.accessoryType = hasHomeURL ? .disclosureIndicator : .none
-        cell.name = userBlock.text
-        cell.blogTitle = hasHomeTitle ? userBlock.metaTitlesHome : userBlock.metaLinksHome?.host
-        cell.isFollowEnabled = userBlock.isActionEnabled(id: FollowAction.actionIdentifier())
-        cell.isFollowOn = userBlock.isActionOn(id: FollowAction.actionIdentifier())
-
-        cell.onFollowClick = { [weak self] in
-            self?.followSiteWithBlock(userBlock)
-        }
-
-        cell.onUnfollowClick = { [weak self] in
-            self?.unfollowSiteWithBlock(userBlock)
-        }
-
-        // Download the Gravatar
-        let mediaURL = userBlock.media.first?.mediaURL
-        cell.downloadGravatarWithURL(mediaURL)
+        cell.configure(
+            userBlock: userBlock,
+            onUserClicked: { [weak self] in
+                self?.displayContent(blockGroup)
+            },
+            onFollowClicked: { [weak self] followClicked in
+                if followClicked {
+                    self?.followSiteWithBlock(userBlock)
+                } else {
+                    self?.unfollowSiteWithBlock(userBlock)
+                }
+            },
+            parent: self
+        )
     }
 
     func setupCommentCell(_ cell: NoteBlockCommentTableViewCell, blockGroup: FormattableContentGroup, at indexPath: IndexPath) {

WordPress/Classes/ViewRelated/Notifications/Views/LikeUserTableViewCell.swift

@@ -1,65 +1,65 @@
 import Foundation
+import SwiftUI
 
-class LikeUserTableViewCell: UITableViewCell, NibReusable {
-
-    // MARK: - Properties
-
-    @IBOutlet weak var gravatarImageView: CircularImageView!
-    @IBOutlet weak var nameLabel: UILabel!
-    @IBOutlet weak var usernameLabel: UILabel!
-    @IBOutlet weak var separatorView: UIView!
-    @IBOutlet weak var separatorHeightConstraint: NSLayoutConstraint!
-    @IBOutlet weak var separatorLeadingConstraint: NSLayoutConstraint!
-    @IBOutlet weak var cellStackViewLeadingConstraint: NSLayoutConstraint!
-
+class LikeUserTableViewCell: UITableViewCell, Reusable {
     static let estimatedRowHeight: CGFloat = 80
-    private typealias Style = WPStyleGuide.Notifications
 
-    // MARK: - View
+    private var controller: UIHostingController<NotificationDetailUserView>?
 
-    override func awakeFromNib() {
-        super.awakeFromNib()
-        configureCell()
+    func configure(user: LikeUser, onUserClicked: @escaping () -> Void, parent: UIViewController) {
+        configure(
+            avatarURL: URL(string: user.avatarUrl),
+            username: user.displayName,
+            blog: String(format: Constants.usernameFormat, user.username),
+            onUserClicked: onUserClicked,
+            parent: parent)
     }
 
-    // MARK: - Public Methods
-
-    func configure(withUser user: LikeUser, isLastRow: Bool = false) {
-        nameLabel.text = user.displayName
-        usernameLabel.text = String(format: Constants.usernameFormat, user.username)
-        downloadGravatarWithURL(user.avatarUrl)
-        separatorLeadingConstraint.constant = isLastRow ? 0 : cellStackViewLeadingConstraint.constant
+    func configure(
+        avatarURL: URL?,
+        username: String?,
+        blog: String?,
+        isFollowed: Bool? = nil,
+        onUserClicked: @escaping () -> Void,
+        onFollowClicked: @escaping (Bool) -> Void = { _ in },
+        parent: UIViewController
+    ) {
+        let view = NotificationDetailUserView(
+            avatarURL: avatarURL,
+            username: username,
+            blog: blog,
+            isFollowed: isFollowed,
+            onUserClicked: onUserClicked,
+            onFollowClicked: onFollowClicked
+        )
+        host(view, parent: parent)
     }
 
-}
-
-// MARK: - Private Extension
+    private func host(_ content: NotificationDetailUserView, parent: UIViewController) {
+        if let controller = controller {
+            controller.rootView = content
+            controller.view.layoutIfNeeded()
+        } else {
+            let cellViewController = UIHostingController(rootView: content)
+            controller = cellViewController
 
-private extension LikeUserTableViewCell {
+            parent.addChild(cellViewController)
+            contentView.addSubview(cellViewController.view)
+            cellViewController.view.translatesAutoresizingMaskIntoConstraints = false
+            layout(hostingView: cellViewController.view)
 
-    func configureCell() {
-        nameLabel.textColor = Style.blockTextColor
-        usernameLabel.textColor = .textSubtle
-        backgroundColor = Style.blockBackgroundColor
-        separatorView.backgroundColor = Style.blockSeparatorColor
-        separatorHeightConstraint.constant = .hairlineBorderWidth
-    }
-
-    func downloadGravatarWithURL(_ url: String?) {
-        // Always reset gravatar
-        gravatarImageView.cancelImageDownload()
-        gravatarImageView.image = .gravatarPlaceholderImage
-
-        guard let url = url,
-              let gravatarURL = URL(string: url) else {
-            return
+            cellViewController.didMove(toParent: parent)
         }
+    }
 
-        gravatarImageView.downloadImage(from: gravatarURL, placeholderImage: .gravatarPlaceholderImage)
+    func layout(hostingView view: UIView) {
+        self.contentView.pinSubviewToAllEdges(view)
     }
+}
+
+private extension LikeUserTableViewCell {
 
     struct Constants {
         static let usernameFormat = NSLocalizedString("@%1$@", comment: "Label displaying the user's username preceeded by an '@' symbol. %1$@ is a placeholder for the username.")
     }
-
 }

WordPress/Classes/ViewRelated/Notifications/Views/NoteBlockHeaderTableViewCell.swift

@@ -7,7 +7,7 @@ import DesignSystem
 
 // MARK: - NoteBlockHeaderTableViewCell
 //
-class NoteBlockHeaderTableViewCell: NoteBlockTableViewCell {
+class NoteBlockHeaderTableViewCell: NoteBlockTableViewCell, Reusable {
     typealias Constants = ContentPreview.Constants
     typealias Avatar = ContentPreview.ImageConfiguration.Avatar