How to run an effect (callback) AFTER message is sent (successfully)

Sendbird Chat UIKit React
,
1

[Problem/Question]
The ChannelProvider seems to have an onBeforeSendUserMessage but not an onAfter… which is not great if you want to run an effect only on success.

I also noticed the events system has on onMessageReceived, but not an onMessageSent.

Is there any way to do this without having to manage all the input behaviour with a custom message input?

I don’t see why this the smart component Channel/components/MessageInput couldn’t take some callbacks for all those “onXxx” events. Would be 1 line to add there xD.

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
3.3.4

2

Hi @x43n,

Welcome to the Sendbird Community.

What specifically are you looking to achieve after the message has been sent?
In terms of event handlers only having an onMessageReceived, this is because these action upon websocket events that did not originate from the client. Typically, with the Core SDK, you’d have complete control over what you do when the event originates from your own client.

3

Hi @Tyler ,

Im wanting to update some application state when a message is successfully sent.

How can I hook into a message sent successfully event/callback?

4

@x43n,

In it’s current form, what you’re looking for does not exist. You would need to overwrite the MessageInput component as it’s what contain the onSendMessage function.

5

Thanks for the response @Tyler .

That’s a shame :cry: … Almost less effort (initially :stuck_out_tongue: ) to fork the repo and add 1 line at line 150 to the MessageInput: props.onSendMessage().

You guys do such a great job with all the render props on other components. Why no props for this one :frowning: ?

6

onSendMessage and onBeforeMessageSend would accomplish essentially the same thing. The idea behind onBeforeMessageSend is to allow you to modify the default values that are sent along with the message. In design, onSendMessage would be built to do the same.

7

But what if the request fails? Then my application state is incorrect, as I have set state representing a successful event that has not been successful, right?

8

So actually the code change at line 150 wouldnt really just be props.onSendMessage() as that would happen before I guess as well. It would need to await the result of the internal sendMessage. Something like:

...
onSendMessage={({ message, mentionTemplate }) => {
  sendMessage({
    message,
    quoteMessage,
    mentionedUsers,
    mentionTemplate,
  })
  .then((res) => props.onSendMessage(res))
...
9

Either that or add an onAfterMessageSend to the provider thingy

10

At the moment,

I think the best bet is for you to override the messageInput prop so you can access the underlying functionality. This way you have complete control over the life cycle of the message and can directly update your state accordingly.