Changing bubble color depending on gender of message sender

Question

Changing bubble color depending on gender of message sender

tHull90 opened this issue 7 years ago · comments

I'm using Swift 3...

I'm trying to figure out how I can use a genderDictionary that I have (in the form of [UID: Gender]) for all participants in a chat) to determine the background color of the message bubble.

I can use a switch statement in setupIncomingBubble() like so:

    switch gender {
    case "male":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "2573C5"))
    case "female":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "E452CE"))
    default:
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "848484"))
    }

However since I don't have the indexPath for the messages, I don't have a way to tell who is sending each message. I'd like to use something like:

    let message = messages[indexPath.row]
    let gender = genderDictionary.value(forKey: message.senderId)

But setupIncomingBubble() doesn't have an indexPath. Is there another way to go about this, or simply a way to get that indexPath? Sorry if this is vague, and let me know if you need more information - I'm a beginner to programming in general, and this is my first project with this framework.

Thanks for any help!

Aaron Chong · Answer 1 · Tue May 30 2017 22:14:45 GMT+0800 (China Standard Time)

This should work:

var outgoingBubble = setupOutgoingBubble()
var incomingBubble = setupIncomingBubble(nil)
var maleIncomingBubble = setupIncomingBubble("male")
var femaleIncomingBubble = setupIncomingBubble("female")

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
    let message = messages[indexPath.row]
    let gender = genderDictionary.value(forKey: message.senderId)

    if message.senderId() == senderId {
        return outgoingBubble
    }

    switch gender {
    case "male":
        return maleIncomingBubble
    case "female":
        return femaleIncomingBubble
    default:
        return incomingBubble
    }
}

Timothy Hull · Answer 2 · Wed May 31 2017 00:00:13 GMT+0800 (China Standard Time)

Hey acth, thanks! I'm getting an error on all the variables saying "Cannot use instance member 'whatever the variable is' within property initializer; property initializers run before 'self' is available"

Also, what exactly would my setupIncomingBubble function look like? I can't have the switch statement in there because I can't get the gender of the incoming message sender (need indexPath).

Aaron Chong · Answer 3 · Wed May 31 2017 00:50:00 GMT+0800 (China Standard Time)

lazy var outgoingBubble = setupOutgoingBubble()
lazy var incomingBubble = setupIncomingBubble(nil)
lazy var maleIncomingBubble = setupIncomingBubble("male")
lazy var femaleIncomingBubble = setupIncomingBubble("female")

func setupIncomingBubble(gender: String?) -> JSQMessagesBubbleImage {
    switch gender {
    case "male":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "2573C5"))
    case "female":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "E452CE"))
    default:
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "848484"))
    }
}

Timothy Hull · Answer 4 · Wed May 31 2017 00:56:24 GMT+0800 (China Standard Time)

Thanks, I actually got it working differently - I put the variables inside the function, so my final function looks like this:

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
    let message = messages[indexPath.row]
    let gender = genderDictionary.value(forKey: message.senderId) as! String
    
    var outgoingBubble = self.setupOutgoingBubble()
    // var incomingBubble = self.setupIncomingBubble(gender: nil) <- Error
    var maleIncomingBubble = self.setupIncomingBubble(gender: "male")
    var femaleIncomingBubble = self.setupIncomingBubble(gender: "female")
    
    if message.senderId == senderId {
        return outgoingBubble
    }
    
    switch gender {
    case "male":
        return maleIncomingBubble
    case "female":
        return femaleIncomingBubble
    default:
        return maleIncomingBubble
    }
}

It works now, except I get an error on the var incomingBubble = self.setupIncomingBubble(gender: nil) line, "nil is not compatible with type string". I commented it out because users provide their gender at sign up, so I can't think of a scenario where it wouldn't be male or female, and if they selected "other" at sign up, it will go to the default grey color.

Aaron Chong · Answer 5 · Wed May 31 2017 01:02:17 GMT+0800 (China Standard Time)

It's advisable to setup bubbles once, instead of assigning to local variables each time the function is called.

Timothy Hull · Answer 6 · Wed May 31 2017 01:15:20 GMT+0800 (China Standard Time)

I tried your new code and am still getting the same error on those lines. Also "unexpected non-void return value in void function" errors on the returns in setupIncomingBubble.

lazy var outgoingBubble = setupOutgoingBubble()
lazy var incomingBubble = setupIncomingBubble(nil)
lazy var maleIncomingBubble = setupIncomingBubble("male")
lazy var femaleIncomingBubble = setupIncomingBubble("female")

func setupIncomingBubble(gender: String?) {
    switch gender {
    case "male":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "2573C5"))
    case "female":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "E452CE"))
    default:
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "848484"))
    }
}

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
    let message = messages[indexPath.row]
    let gender = genderDictionary.value(forKey: message.senderId)
    
    if message.senderId == senderId {
        return outgoingBubble
    }
    
    switch gender {
    case "male":
        return maleIncomingBubble
    case "female":
        return femaleIncomingBubble
    default:
        return incomingBubble
    }
}

Aaron Chong · Answer 7 · Wed May 31 2017 01:22:04 GMT+0800 (China Standard Time)

Add return type -> JSQMessagesBubbleImage

Timothy Hull · Answer 8 · Wed May 31 2017 01:27:30 GMT+0800 (China Standard Time)

Yeah so I got it to run, but I get an "unexpectedly found nil" crash as soon as the chat is opened. This is my code:

lazy var outgoingBubble: JSQMessagesBubbleImage = self.setupOutgoingBubble()
//lazy var incomingBubble: JSQMessagesBubbleImage = self.setupIncomingBubble(gender: nil)
lazy var maleIncomingBubble: JSQMessagesBubbleImage = self.setupIncomingBubble(gender: "male")
lazy var femaleIncomingBubble: JSQMessagesBubbleImage = self.setupIncomingBubble(gender: "female")

func setupIncomingBubble(gender: String) -> JSQMessagesBubbleImage {
    switch gender {
    case "male":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "2573C5"))
    case "female":
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "E452CE"))
    default:
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "848484"))
    }
}

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
    let message = messages[indexPath.row]
    let gender = genderDictionary.value(forKey: message.senderId) as! String
    
    if message.senderId == senderId {
        return outgoingBubble
    }
    
    switch gender {
    case "male":
        return maleIncomingBubble
    case "female":
        return femaleIncomingBubble
    default:
        return maleIncomingBubble
    }
}

Still had to comment out this line: lazy var incomingBubble: JSQMessagesBubbleImage = self.setupIncomingBubble(gender: nil), I can't pass it nil.

Timothy Hull · Answer 9 · Wed May 31 2017 01:30:58 GMT+0800 (China Standard Time)

I populate the genderDictionary in the prepareForSegue method of the previous page (the table view that lists the chat rooms). I'm not sure when the messageBubbleImageDataForItemAt method is called, but I'm guessing the crash is because it's looking for genderDictionary values when it's still empty? Again I'm fairly new so I'm not sure.

Aaron Chong · Answer 10 · Wed May 31 2017 01:31:49 GMT+0800 (China Standard Time)

Which line is the crash on?
You can pass nil if you left it as gender: String?.

Timothy Hull · Answer 11 · Wed May 31 2017 01:34:01 GMT+0800 (China Standard Time)

It doesn't highlight a line for the crash, but it must be the genderDictionary because I don't get the crash when I open a chat with just me in it (outgoing bubble just checks currentUser.gender to set the color, not the genderDict). The crash only happens in chats where there are users (male & female) other than myself. And I get errors on the switch statement if I don't change it to gender: String!

Aaron Chong · Answer 12 · Wed May 31 2017 01:48:44 GMT+0800 (China Standard Time)

It may be cleaner to pass in an empty string "" instead of nil.
It's likely that genderDictionary doesn't contain some senderId.

let gender = genderDictionary.value(forKey: message.senderId) as? String ?? ""

Timothy Hull · Answer 13 · Wed May 31 2017 01:56:25 GMT+0800 (China Standard Time)

Ok cool, I added that and it seems to be working now. As for making the gender string parameter optional (sorry if my terminology is off) in setupIncomingBubble, if I do that, I get an error on the "male" and "female" lines stating Expression pattern of type 'String' cannot match values of type 'String?'. Is there a way to get around that, or should I just leave the function as func setupIncomingBubble(gender: String?) -> JSQMessagesBubbleImage?

Aaron Chong · Answer 14 · Wed May 31 2017 02:00:34 GMT+0800 (China Standard Time)

This is cleaner:

lazy var incomingBubble: JSQMessagesBubbleImage = self.setupIncomingBubble(gender: "")

func setupIncomingBubble(gender: String) -> JSQMessagesBubbleImage {
    // ...
}

Timothy Hull · Answer 15 · Wed May 31 2017 02:14:05 GMT+0800 (China Standard Time)

Nice, that's a good fix. I noticed now that sometimes when I run the demo chat, the incoming bubbled are the default grey for a few seconds, then turn pink or blue depending on gender. I guess without that, it would have simply crashed because those values weren't there yet?

Aaron Chong · Answer 16 · Wed May 31 2017 02:14:27 GMT+0800 (China Standard Time)

For completeness sake:

lazy var incomingBubble: JSQMessagesBubbleImage = self.setupIncomingBubble(gender: nil)

func setupIncomingBubble(gender: String?) -> JSQMessagesBubbleImage {
    switch gender {
    case .some("male"):
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "2573C5"))
    case .some("female"):
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "E452CE"))
    default:
        return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(hexString: "848484"))
    }
}

Timothy Hull · Answer 17 · Wed May 31 2017 02:26:32 GMT+0800 (China Standard Time)

Interesting, I've never seen that before. What does .some do?

Aaron Chong · Answer 18 · Wed May 31 2017 07:46:12 GMT+0800 (China Standard Time)

The type Optional<Wrapped> is an enum with two cases, none and some(Wrapped). So .some(value) can be used for pattern matching in a switch statement.

Timothy Hull · Answer 19 · Thu Jun 01 2017 02:22:51 GMT+0800 (China Standard Time)

Cool - thanks for your help on this!

Aaron Chong · Answer 20 · Thu Jun 01 2017 06:52:05 GMT+0800 (China Standard Time)

You're welcome!

Lucas Huang · Answer 21 · Mon Jun 26 2017 03:00:56 GMT+0800 (China Standard Time)

@acjh, thanks so much. You rock! 💯 👍 🥇