How to add a Search Bar in GroupChannelListView

[lookdeceline]

Question

How to insert a Search Bar on top of channel list in a GroupChannelListView?

At the end of this guide, you will be able to achieve the below.

searchBar.mp4

Answer

SendbirdSwiftUI works on top of SendbirdUIKit. By adding a workaround to SendbirdUIKit, you can add a Search Bar in GroupChannelListView.

1. In your SwiftUI View, call the default GroupChannelListView.
2. Create a custom UIView that wraps a UISearchBar.
3. Create a subclass of SBUGroupChannelListModule.List to add the custom UISearchBar wrapper view created in step 2.
   3-1. Also make it conform to UISearchBarDelegate to react to any events triggered by the UISearchBar.
4. Create a protocol that enables your SBUGroupChannelListModule.List to pass on search bar related events to SBUGroupChannelListViewController.
5. Create a subclass of SBUGroupChannelListViewController.
   6-1. Also make it conform to the protocol created in step 4.
6. Configure SendbirdUIKit to use your subclasses under the hood of SendbirdSwiftUI.
   7-1. Note: This configuration must run before a SendbirdSwiftUI View is shown.

import SwiftUI
import SendbirdSwiftUI

// Step 1. 
struct ContentView: View {
    var body: some View {
        GroupChannelListView()
    }
}

// Step 2. 
/// Your custom UIView that wraps a `UISearchBar`.
/// This UIView will be added to the top of channel list in `SBUGroupChannelModule.List`.
class ChannelTopView: UIView, SBUViewLifeCycle {
    let contentStackView = SBUStackView(axis: .horizontal, spacing: 8)
    
    let searchBar: UISearchBar = {
        let bar = UISearchBar()
        bar.translatesAutoresizingMaskIntoConstraints = false
        bar.placeholder = "Search Channels"
        return bar
    }()
        
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
        setupLayouts()
        setupActions()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
        setupLayouts()
        setupActions()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setupStyles()
    }
    
    // MARK: -Sendbird UIKit Lifecycle
    func setupViews() {
        self.addSubview(contentStackView)
        contentStackView.setHStack([
            searchBar
        ])
    }
    
    func setupLayouts() {
        contentStackView.sbu_constraint(
            equalTo: self,
            leading: 0,
            trailing: 0,
            top: 0,
            bottom: 0
        )
    }
    
    func updateLayouts() {}
    
    func setupStyles() {
        contentStackView.backgroundColor = .red
    }
    
    func updateStyles() {}
    
    func setupActions() {}
}


// Step 3. 
/// Create a subclass of `SBUGroupChannelListModule.List`. 
class CustomGroupChannelListModuleList: SBUGroupChannelListModule.List {
    // The custom UIView wrapper of UISearchBar created in step 2.
    public lazy var topView = ChannelTopView()

    
    override func setupViews() {
        super.setupViews()
        self.addSubview(topView)
        topView.searchBar.delegate = self
    }
    
    override func setupLayouts() {
        super.setupLayouts()
        
        // Sets the `topView` layout
        self.topView
            .sbu_constraint(equalTo: self, leading: 0, trailing: 0, top: 0)
            .sbu_constraint(height: 80)
        
        // Deactivates the existing topConstraint of the tableView.
        if let tableViewTopConstraint = self.constraints.first(where: {
            $0.firstAttribute == .top && $0.firstItem === self.tableView
        }) {
            tableViewTopConstraint.isActive = false
        }
        
        // Set the tableView's bottonConstraint to tableViewBottomConstraint
        self.tableView.sbu_constraint_equalTo(
            topAnchor: self.topView.bottomAnchor,
            top: 0
        )
    }
}

extension CustomGroupChannelListModuleList: UISearchBarDelegate {
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        guard let searchBarDelegate = self.delegate as? CustomGroupChannelListSearchBarDelegate else { return }

        searchBarDelegate.groupChannelListModuleDidclickSearchButton(searchBar)
        searchBar.resignFirstResponder()
    }
}


// Step 4. 
/// Custom delegate protocol that passes on search bar related events to SBUGroupChannelListViewController.
protocol CustomGroupChannelListSearchBarDelegate {
    func groupChannelListModuleDidclickSearchButton(_ searchBar: UISearchBar)
}

// Step 5. 
/// Subclass of `SBUGroupChannelListViewController` that also conforms to `CustomGroupChannelListSearchBarDelegate`.
class MyGroupChannelListVC: SBUGroupChannelListViewController, CustomGroupChannelListSearchBarDelegate {
    func groupChannelListModuleDidclickSearchButton(_ searchBar: UISearchBar) {
        // Create a new GroupChannelListQuery. 
        let params = GroupChannelListQueryParams { params in
            params.includeEmptyChannel = false
            params.channelNameContainsFilter = searchBar.text
        }
        let newChannelListQuery = GroupChannel.createMyGroupChannelListQuery(params: params)
        
        // Reset the SBUGroupChannelListViewModel with the new query, and reload channels.
        // This interface is only available in `SendbirdUIKit 3.29.2+`.
        self.viewModel?.initializeAndLoad(channelListQuery: newChannelListQuery)
    }
}

// Step 6. 
@main
struct YourApp: App {
    init() {
        SBUViewControllerSet.GroupChannelListViewController = MyGroupChannelListVC.self
        SBUModuleSet.GroupChannelListModule.ListComponent = CustomGroupChannelListModuleList.self
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}