Collection view not reloading after retrieving data - ios

Question

Situation: I'm pulling data from Firebase. After pulling the data, I want to update/reload my collectionView table.
Problem: collectionView doesn't update. Here are the codes with a bit of explanation.
var allProducts = [Product]()
override func viewDidLoad() {
super.viewDidLoad()
mostPopularCollectionView.dataSource = self
mostPopularCollectionView.delegate = self
getAllProducts { (returnedProductArray) in
self.allProducts = returnedProductArray
self.mostPopularCollectionView.reloadData()
}
}
The function getAllProducts works fine. If I print allProducts.count within the closure, I get the right number(3).
If I print allProducts.count outside the closure, my count is zero.
I tried putting the getAllProducts function in viewWillAppear but it didn't solve the problem
extension FeedTableViewController: UICollectionViewDataSource, UICollectionViewDelegate
{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "mostPopularCell", for: indexPath) as? MostPopularCollectionViewCell else {return UICollectionViewCell()}
if allProducts.count > 0 {
let product : Product = allProducts[indexPath.row]
if let productImageUrl = product.imageUrlArray.first {
cell.upadateCellUI(forProductName: product.title, forProductImage: productImageUrl, forProductPrice: product.price)
}
return cell
} else {
return cell
}
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let productVC = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "productVC") as! ProductViewController
productVC.product = allProducts[indexPath.row]
present(productVC, animated: true, completion: nil)
}
}
The good news is that when I click on any item, the right product is selected when the next viewController appears.
So the only issue is how do I get the collectionView to reload after data is retrieved from Firebase? Any help is very much appreciated
This is the getAllProducts function used to retrieve all the data from Firebase.
//MARK:- Retrieve all products from Firebase
func getAllProducts (handler: #escaping (_ allProducts: [Product]) -> ()) {
//TODO:- Create an empty array to store all product fetched from Firebase
var productArray = [Product]()
var imageUrlArray = [String]()
//TODO:- Create reference to Firebase database
let DB = Database.database().reference()
//TODO:- Create reference to products
let REF_PRODUCTS = DB.child("Product")
//TODO:- Snapshot of all products in database
REF_PRODUCTS.observeSingleEvent(of: .value) { (allProductsSnapshot) in
guard let allProductsSnapshot = allProductsSnapshot.children.allObjects as? [DataSnapshot] else {return}
for product in allProductsSnapshot {
let title = product.childSnapshot(forPath: "name").value as! String
let price = product.childSnapshot(forPath: "price").value as! String
let id = product.childSnapshot(forPath: "id").value as! Int
let viewCount = product.childSnapshot(forPath: "viewCount").value as! Int
let description = product.childSnapshot(forPath: "description").value as! String
let REF_IMAGEURL = REF_PRODUCTS.child(String(id)).child("image")
REF_IMAGEURL.observeSingleEvent(of: .value, with: { (allImageUrlSnapshot) in
guard let allImageUrlSnapshot = allImageUrlSnapshot.children.allObjects as? [DataSnapshot] else {return}
for imageUrl in allImageUrlSnapshot {
let imageUrl = imageUrl.value as! String
imageUrlArray.append(imageUrl)
}
})
let product = Product(title: title, price: price, imageUrlArray: imageUrlArray, description: description, viewCount: viewCount, id: id)
productArray.append(product)
}
handler(productArray)
}
}

Answer 1

You should always update your UI elements on main thread. No exception here as well. Just execute the reload code on main thread.
dispatch_async(dispatch_get_main_queue(), {
self.mostPopularCollectionView.reloadData()
})
For Swift 3:
DispatchQueue.main.async {
self.mostPopularCollectionView.reloadData()
}

Answer 2

your viewDidLoad is look like below:
var allProducts = [Product]()
override func viewDidLoad() {
super.viewDidLoad()
mostPopularCollectionView.dataSource = self
mostPopularCollectionView.delegate = self
getAllProducts { (returnedProductArray) in
self.allProducts = returnedProductArray
}
self.mostPopularCollectionView.reloadData()
}

Answer 3

This may be due the auto layout issue, I stuck in the same case and resolving the auto layout issue for the cell, enable debug log for view on the xcode. and see if there is any auto layout issue is there, remember the size of the content should be less than content of collection view