JSQMessagesViewController updating bubble image color on update - swift3

Question

I am working with JSQMessagesViewController and have implemented three bubble colors. The extra color is designed to indicate an unapproved message in a moderated chat room.
I am running a Firebase backend and updating an approved flag when the chat message entries changes.
All is going well and the data is being changed real time. The problem is with the chat bubble colors, no matter what I do they will not change.
I've tried invalidating the layout, reloaddata, accessing the cell directly (comes up read only) and nothing seems to change the color other than leaving the chat view and coming back.
messageRef.observe(.childChanged, with: { (snapshot) in
let key = snapshot.key
if let dict = snapshot.value as? [String: AnyObject] {
let approved = (dict["approved"]?.boolValue ?? true)
let indexOfMesage = self.messages.index(where:{$0.key == key})
var message = self.messages[indexOfMesage!]
message.approved = approved
print(message)
self.collectionView.performBatchUpdates({ () -> Void in
self.collectionView.collectionViewLayout.invalidateLayout()
self.collectionView.reloadData()
}, completion:nil)
}
Any help would be appreciated. The code above is just one of many attempts.
Adding my "messageBubbleImageDataForItemAt" call for additional info after response below.
override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
let message = messages[indexPath.item] // 1
if message.messageItem.senderId == senderId { // 2
if (message.approved == true){
return outgoingBubbleImageView
}else{
return outgoingUnnaprovedBubbleImageView
}
}else if (self.superUsers.contains(message.messageItem.senderId)){
return incomingAdminBubbleImageView
}else { // 3
if (message.approved == true){
return incomingBubbleImageView
}else{
return incomingUnnapprovedBubbleImageView
}
}
}

Answer 1

Invalidating the layout will not do anything for the color of the bubble. I would suggest that you modify you messageDataObject all you have to do is conform to the JSQMessageData protocol and I would add a property for a messages approval status.
I am going to assume that you have three different message bubbles defined
something like this
var incomingBubble: JSQMessagesBubbleImage!
var outgoingBubble: JSQMessagesBubbleImage!
var approvedBubble: JSQMessagesBubbleImage!
then in your view did load you actually define them.
incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor.jsq_messageBubbleBlue())
outgoingBubble = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImage(with: UIColor.lightGray)
approvedBubble = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImage(with: UIColor.red)
Then in the overridden function messageBubbleImageDataForItemAt you should provide logic for which bubble to use.
override func collectionView(_ collectionView: JSQMessagesCollectionView, messageBubbleImageDataForItemAt indexPath: IndexPath) -> JSQMessageBubbleImageDataSource {
//Sent by the current user
if messages[indexPath.item].senderId == self.senderId(){
return outgoingBubble
}
//Check if the message is approved from that property earlier.
if messages[indexPath.item].approved {
return approvedBubble
}
// its just a normal message return incoming message.
return incomingBubble
}
Other wise you need to fetch from firebase at this point if a message is approved or not.
Then calling self.collectionView.reloadData() should update your colors as long as you have pulled the latest from firebase.
I hope this helps you out. Let me know if you have more questions and keep on keeping on. 🖖🏽