What is the best way to organize text within messages?

Question

What is the best way to organize text within messages?

Hey there! I have a messaging app with arrays of messages.

[{"id":4,
"user_id":1,
"messageable_id":3,
"messageable_type":"conversation",
"text":"Text 1",
"action":null,
"target_id":null,
"created_at":"2019-06-17 15:47:55",
"updated_at":"2019-06-17 15:47:55",
"replies":[],
"files":[]},

{"id":5,
"user_id":1,
"messageable_id":3,
"messageable_type":"conversation",
"text":"Text 2",
"action":null,
"target_id":null,
"created_at":"2019-06-17 15:48:00",
"updated_at":"2019-06-17 15:48:00",
"replies":[],
"files":[]}]

I am looking to merge message text into one message if they are sent within 60 seconds of each other.

[{"id":4,
"user_id":1,
"messageable_id":3,
"messageable_type":"conversation",
"grouped_text":["Text 1","Text 2"], //GROUP 
"action":null,
"target_id":null,
"created_at":"2019-06-17 15:47:55",
"updated_at":"2019-06-17 15:47:55",
"replies":[],
"files":[]}]

This is the code I've tried so far

let messages = this.$store.getters['conversation/messages'](this.conversation);
let grouped = _.groupBy(messages, message => {
    return this.$moment(message.created_at).startOf('minute');
});

How can I improve on this? I'm open to using lodash

Thanks in advance!

javascript arrays vue.js lodash javascript-objects

Answer 1

Answer №1

In order to group messages based on the time difference between them, you can utilize the reduce function. If the time gap between the previous message's created_at and the current message's created_at is less than 1 minute (or 60,000ms), then add the message to the existing item's grouped_text array in the accumulator. Otherwise, create a new message within the accumulator with a grouped_text property.

To extract the message content and other properties separately from each message, you can employ destructuring assignment.

const messages=[{"id":4,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 1","action":null,"target_id":null,"created_at":"2019-06-17 15:47:55","updated_at":"2019-06-17 15:47:55","replies":[],"files":[]},{"id":5,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 2","action":null,"target_id":null,"created_at":"2019-06-17 15:48:00","updated_at":"2019-06-17 15:48:00","replies":[],"files":[]}]

const groupDates = (date1, date2) => (new Date(date1) - new Date(date2) < 60000)

const grouped = messages.reduce((result, { text, ...otherProps }, index, array) => {
  const previousMsg = array[index - 1];

  if (previousMsg && groupDates(otherProps.created_at, previousMsg.created_at))
    result[result.length - 1].grouped_text.push(text)
  else
    result.push({ ...otherProps, grouped_text: [text] })

  return result;
}, [])

console.log(grouped)

Note: This logic assumes that the messages are already sorted based on the created_at timestamp.

Answer 2

In order to group messages based on the time difference between them, you can utilize the reduce function. If the time gap between the previous message's created_at and the current message's created_at is less than 1 minute (or 60,000ms), then add the message to the existing item's grouped_text array in the accumulator. Otherwise, create a new message within the accumulator with a grouped_text property.

To extract the message content and other properties separately from each message, you can employ destructuring assignment.

const messages=[{"id":4,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 1","action":null,"target_id":null,"created_at":"2019-06-17 15:47:55","updated_at":"2019-06-17 15:47:55","replies":[],"files":[]},{"id":5,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 2","action":null,"target_id":null,"created_at":"2019-06-17 15:48:00","updated_at":"2019-06-17 15:48:00","replies":[],"files":[]}]

const groupDates = (date1, date2) => (new Date(date1) - new Date(date2) < 60000)

const grouped = messages.reduce((result, { text, ...otherProps }, index, array) => {
  const previousMsg = array[index - 1];

  if (previousMsg && groupDates(otherProps.created_at, previousMsg.created_at))
    result[result.length - 1].grouped_text.push(text)
  else
    result.push({ ...otherProps, grouped_text: [text] })

  return result;
}, [])

console.log(grouped)

Note: This logic assumes that the messages are already sorted based on the created_at timestamp.

Answer 3

Answer №2

The lodash's groupBy-function may not be the best fit for this scenario. Instead of putting all message-objects that match the key into an array, it would be more efficient to utilize the reduce-function.

If we assume that the list of messages (referenced in your query) is sorted by date:

const messages=[{"id":4,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 1","action":null,"target_id":null,"created_at":"2019-06-17 15:47:55","updated_at":"2019-06-17 15:47:55","replies":[],"files":[]},{"id":5,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 2","action":null,"target_id":null,"created_at":"2019-06-17 15:48:00","updated_at":"2019-06-17 15:48:00","replies":[],"files":[]}];

const result = messages.reduce((result, message) => {
    const lastMessage = result[result.length - 1];
    if (!lastMessage || new Date(message.created_at) - new Date(lastMessage.created_at) >= 60000) {
        message.grouped_text = [message.text]
        delete message.text;
        result.push(message);
    } else {
        lastMessage.grouped_text.push(message.text);
    }
    return result;
}, []);

console.log(result);

Answer 4

The lodash's groupBy-function may not be the best fit for this scenario. Instead of putting all message-objects that match the key into an array, it would be more efficient to utilize the reduce-function.

If we assume that the list of messages (referenced in your query) is sorted by date:

const messages=[{"id":4,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 1","action":null,"target_id":null,"created_at":"2019-06-17 15:47:55","updated_at":"2019-06-17 15:47:55","replies":[],"files":[]},{"id":5,"user_id":1,"messageable_id":3,"messageable_type":"conversation","text":"Text 2","action":null,"target_id":null,"created_at":"2019-06-17 15:48:00","updated_at":"2019-06-17 15:48:00","replies":[],"files":[]}];

const result = messages.reduce((result, message) => {
    const lastMessage = result[result.length - 1];
    if (!lastMessage || new Date(message.created_at) - new Date(lastMessage.created_at) >= 60000) {
        message.grouped_text = [message.text]
        delete message.text;
        result.push(message);
    } else {
        lastMessage.grouped_text.push(message.text);
    }
    return result;
}, []);

console.log(result);

What is the best way to organize text within messages?

Answer №1

Answer №2

Similar questions

There is an error in the TypeScript code where it is not possible to assign a string or

Injecting services differently in specific scenarios in AngularJS

Discovering if an array includes a particular value in JavaScript/jQuery

What are some ways to customize the appearance of VueJS components?

Exploring the JSON structure

Unable to display elements from an array in the dropdown menu generated by v-for

You can't send headers to the client in Express after they have already been set

Vue's innate lifecycle hook

What is the best way to append data to the end of an object using ReactJS Hooks?

Tips for rearranging table columns using drag and drop in react js

Ajax UpdateProgress not functional

Terminate the execution of the process.exec function

What is the best way to include rxjs in an npm library - as a dependency, peer dependency, or both?

Encountered a problem while parsing an XML file using JavaScript from an external server

Troubleshooting: JavaScript Bookmarklet Fails to Execute on Certain Websites

When a button is clicked, the event is not triggered within a FirefoxOS application

Is there a way to redirect using Express JS when the destination is

Using Vue.js, perform calculations on various fields within an array of objects generated by the v-for directive

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

Is it possible to utilize the import feature to access and read a JSON file within a Next.js 13 API scenario?