why my first cell on collection view always show the wrong data? - ios

Question

I have collection view of products like the image below
if the product is in stock, the the button will be black, otherwise the button background color will be yellow.
but as you can see from the file gif in here: http://g.recordit.co/HTEVw88Tt4.gif
the first product (index = 0) from the image slider initially has black button (stock is still available), in the array it only has 1 product that out of stock, but after I scroll to right and then back to the first index (index = 0) then suddenly the button become yellow (as if now it has 2 product that out of stock) even though the product that out of stock (yellow button) is only one product.
how to solve this issue?
here is the simplified class of the product:
class Product {
var productID : Int = 0
var name : String = ""
var quantityFromServer: Int = 0
var lowLimit : Int = 0
var isInStock : Bool {
return quantityFromServer > lowLimit ? true : false
}
convenience init(dictionary: [String:Any]) {
self.init()
name = dictionary["products_name"] as? String ?? ""
quantityFromServer = dictionary["products_quantity"] as? Int ?? 0
lowLimit = dictionary["low_limit"] as? Int ?? 0
}
}
in the view controller I set the cellForRow at using the code below
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == firstListProductCollectionView {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: HomeStoryBoardData.CollectionViewIdentifiers.productSliderCell.rawValue, for: indexPath) as! ListProductCell
let selectedProduct = firstProducts[indexPath.item]
cell.minimumOrderQuantity = selectedProduct.minimumOrderQuantity
cell.stepperValue = selectedProduct.quantityInCart
cell.productData = selectedProduct
cell.delegate = self
cell.collectionView = firstListProductCollectionView
cell.indexPath = indexPath
return cell
}
}
and here is the code on my collection view cell
class ListProductCell: UICollectionViewCell {
#IBOutlet weak var addToCartButton: UIButton!
#IBOutlet weak var counterStackView: UIStackView!
#IBOutlet weak var textFieldStepper: UITextField!
#IBOutlet weak var decrementButton: UIButton!
#IBOutlet weak var incrementButton: UIButton!
#IBOutlet weak var loveButtonHeightConstraint: NSLayoutConstraint!
#IBOutlet weak var loveButtonWidthConstraint: NSLayoutConstraint!
var minimumOrderQuantity = 0
var stepperValue = 0
var indexPath: IndexPath?
var collectionView : UICollectionView?
var delegate: ListProductCellDelegate?
var productData : Product? {
didSet {
updateUI()
checkIfProductIsInStock()
}
}
override func awakeFromNib() {
super.awakeFromNib()
setSpecialConstraint()
}
func checkIfProductIsInStock() {
guard let product = productData else {return}
if !product.isInStock {
showAddToCartButton(status: true)
addToCartButton.isEnabled = false
addToCartButton.setTitle("HABIS", for: .normal)
addToCartButton.setTitleColor(.black, for: .normal)
addToCartButton.backgroundColor = AppColor.mainYellow.getUIColor()
}
}
}
I use checkIfProductIsInStock() method in the property observer of productData to check whether to show yellow button or black button.

Answer 1

Cells are dequeued , you need else here
if product.isInStock {
// supply in stock logic here
}
else {
showAddToCartButton(status: true)
addToCartButton.isEnabled = false
addToCartButton.setTitle("HABIS", for: .normal)
addToCartButton.setTitleColor(.black, for: .normal)
addToCartButton.backgroundColor = AppColor.mainYellow.getUIColor()
}

Answer 2

This happens because of the behavior of dequeueing the cells. At this point, I would recommend to override prepareForReuse():
Performs any clean up necessary to prepare the view for use again.
In your custom UICollectionViewCell class, add:
override func prepareForReuse() {
super.prepareForReuse()
// do the reset/cleanup here...
}