Delete and copy message in gifted chat

Question

Using Dialogflow, I had onLongPress to GiftedChat component like this:

 <GiftedChat
   onLongPress={this.onLongPress}

   ....
   ....
/>

onLongPress returns context, message. Then you can show an ActionSheet and add the logic to delete and copy.

onLongPress(context, message) {
    console.log(context, message);
    const options = ['copy', 'Delete Message', 'Cancel'];
    const cancelButtonIndex = options.length - 1;
    context.actionSheet().showActionSheetWithOptions({
        options,
        cancelButtonIndex
    }, (buttonIndex) => {
        switch (buttonIndex) {
            case 0:
                Clipboard.setString(this.props.currentMessage.text); this code not work and brakes my app :(
                break;
            case 1:
               //code to delete
                break;
        }
    });
}

Here i have the send properties of code:

  sendBotResponse(text) {
let msg = {
  _id: this.state.messages.length + 1,
  text,
  //createdAt: new Date(Date.UTC(2019, 5, 11, 17, 20, 0)),
  createdAt: new Date(),
  user: BOT_USER,
};
this.setState(previousState => ({
  messages: GiftedChat.append(previousState.messages, [msg]),
 }));
}

handleGoogleResponse(result) {
  console.log(result);
  let text = result.queryResult.fulfillmentMessages[0].text.text[0];
  this.sendBotResponse(text);
}

onSend(messages = []) {
   this.setState(previousState => ({
    messages: GiftedChat.append(previousState.messages, messages),
 }));
 let message = messages[0].text;
 Dialogflow_V2.requestQuery(
    message,
    result => this.handleGoogleResponse(result),
    error => console.log(error)
  );
}

I did a very silly mistake this only works in arrow function unless you bind this manually to the normal function so have to use the arrow function in onLongPress

Areeb Vohra · Accepted Answer · 2020-02-06T15:36:37.657

2

change this.props.currentMessage.text
to messages.text
create the following function:

    onDelete(messageIdToDelete) {
    this.setState(previousState =>
      ({ messages: previousState.messages.filter(message => message.id !== messageIdToDelete) }))
    }

    onLongPress(context, message) {
    console.log(context, message);
    const options = ['copy','Delete Message', 'Cancel'];
    const cancelButtonIndex = options.length - 1;
    context.actionSheet().showActionSheetWithOptions({
        options,
        cancelButtonIndex
    }, (buttonIndex) => {
        switch (buttonIndex) {
            case 0:
                Clipboard.setString(message.text);
                break;
            case 1:
                this.onDelete(messageIdToDelete) //pass the function here
                break;
        }
    });
}

edited Feb 06 '20 at 15:36

answered Jan 31 '20 at 11:00

Areeb Vohra

61
7

hi, thank you for your help!! any idea how to do a logic to delete message? – Matheus Cabral Jan 31 '20 at 13:14
do you want to delete message from the screen or from the backend server I'm assuming you have a backend server setup to save the messages on some database – Areeb Vohra Jan 31 '20 at 14:56
just the screen of the user – Matheus Cabral Jan 31 '20 at 15:41
1

onDelete(messageIdToDelete) { this.setState(previousState => ({ messages: previousState.messages.filter(message => message.id !== messageIdToDelete) })) } – Areeb Vohra Jan 31 '20 at 15:46
how can I declare here: case 1: //code to delete break; – Matheus Cabral Jan 31 '20 at 15:55
1

create this function and pass it as `case 1: this.onDelete(messageIdToDelete)` – Areeb Vohra Feb 01 '20 at 13:46

score 0 · Answer 2 · answered Jul 20 '22 at 10:54

0

please any one will write a delete message gifted code like functional component above class component to functional component

answered Jul 20 '22 at 10:54

hari

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 25 '22 at 03:28

score -3 · Answer 3 · answered Dec 17 '19 at 11:59

-3

please change the way to call function

onLongPress={this.onLongPress} to onLongPress={() => { this.onLongPress() }}

answered Dec 17 '19 at 11:59

savan patel

254
1
5

Hi, thank you for your help, but the code brokes when i change the code to this... any other idea? – Matheus Cabral Dec 17 '19 at 12:11

Delete and copy message in gifted chat

3 Answers3