How to add an Avatar image in GetStream iOS Activity Feed component?

Question

My config: XCode 10.3, Swift 5, MacOS Catalina v10.15

I followed the native iOS Activity Feed demo (https://getstream.io/ios-activity-feed/tutorial/?language=python) to successfully add an activity feed to my XCode project.

How do I add an avatar image for each user? Here is what I have tried so far:

I uploaded an avatar image to my backend storage, obtained the corresponding URL, and used a json object to create a new user using my backend server like so:

{
  "id" : "cqtGMiITVSOLE589PJaRt",
  "data" : {
    "name" : "User4",
    "avatarURL" : "https://firebasestorage.googleapis.com/v0/b/champXXXXX.appspot.com/o/profileImage%2FcqtGMiITVSOLXXXXXXXX"
  }
}

Verified that user was created successfully, but the FlatFeedPresenter view controller shows up with a blank avatar image even though activities in the feed show up correctly. How can I use the user's data.avatarURL property to populate the avatar image correctly?

Here is the StreamActivity ViewController class behind the Main storyboard.

import UIKit
import GetStream
import GetStreamActivityFeed

class StreamActivityViewController: FlatFeedViewController {

    let textToolBar = TextToolBar.make()

    override func viewDidLoad() {
        if let feedId = FeedId(feedSlug: "timeline") {
            let timelineFlatFeed = Client.shared.flatFeed(feedId)
            presenter = FlatFeedPresenter(flatFeed: timelineFlatFeed, reactionTypes: [.likes, .comments])
        }

        super.viewDidLoad()
        setupTextToolBar()
        subscribeForUpdates()
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let detailViewController = DetailViewController()
        detailViewController.activityPresenter = activityPresenter(in: indexPath.section)
        detailViewController.sections = [.activity, .comments]
        present(UINavigationController(rootViewController: detailViewController), animated: true)
    }

    func setupTextToolBar() {
        textToolBar.addToSuperview(view, placeholderText: "Share something...")

        // Enable image picker
        textToolBar.enableImagePicking(with: self)
        // Enable URL unfurling
        textToolBar.linksDetectorEnabled = true
        textToolBar.sendButton.addTarget(self,
                                         action: #selector(save(_:)),
                                         for: .touchUpInside)
        textToolBar.updatePlaceholder()
    }

    @objc func save(_ sender: UIButton) {
        // Hide the keyboard.
        view.endEditing(true)

        if textToolBar.isValidContent, let presenter = presenter {
//            print("Message validated!")
            textToolBar.addActivity(to: presenter.flatFeed) { result in
//                print("From textToolBar: \(result)")
            }
        }
    }

}

UPDATE:

I updated the AppDelegate as suggested in the answer below, but avatar image still does not update even though rest of the feed does load properly. Set a breakpoint at the following line and found that avatarURL property of createdUser is nil even though streamUser.avatarURL is set correctly.

print("createdUser: \(createdUser)")

Updated AppDelegate code (had to comment out initialViewController?.reloadData() to address a "Value of type 'UIViewController' has no member 'reloadData'" error -- not sure whether is contributing to the avatar issue.)

import UIKit
import Firebase
import GetStream
import GetStreamActivityFeed
import GoogleSignIn

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        GIDSignIn.sharedInstance()?.clientID = FirebaseApp.app()?.options.clientID
        Database.database().isPersistenceEnabled = true
        configureInitialRootViewController(for: window)

        return true
    }

}

extension AppDelegate {
    func configureInitialRootViewController(for window: UIWindow?) {
        let defaults = UserDefaults.standard
        let initialViewController: UIViewController

        if let _ = Auth.auth().currentUser, let userData = defaults.object(forKey: Constants.UserDefaults.currentUser) as? Data, let user = try? JSONDecoder().decode(AppUser.self, from: userData) {
            initialViewController = UIStoryboard.initialViewController(for: .main)

            AppUser.setCurrent(user)

            Client.config = .init(apiKey: Constants.Stream.apiKey, appId: Constants.Stream.appId, token: AppUser.current.userToken)

            let streamUser = GetStreamActivityFeed.User(name: user.name, id: user.id)
            let avatarURL = URL(string: user.profileImageURL)
            streamUser.avatarURL = avatarURL

            Client.shared.create(user: streamUser) { [weak initialViewController] result in
                if let createdUser = try? result.get() {
                    print("createdUser: \(createdUser)")

                    // Refresh from here your view controller.
                    // Reload data in your timeline feed:
//                    initialViewController?.reloadData()

                }
            }
        } else {
            initialViewController = UIStoryboard.initialViewController(for: .login)
        }
        window?.rootViewController = initialViewController
        window?.makeKeyAndVisible()
    }
}

How to add an Avatar image in GetStream iOS Activity Feed component?

Answers (1)

Related Questions