😅 Finally solved the @mention notification feature! Wow that was hard
Probably wrote the most complicated function ever yet. In fact, over a few functions. Writing it down to remember the lessons:
* detect @ in the username text input inside a textarea, using regex .match(/@\w+/g), and then using map() and substring() to put them into an array without the @ prefix. Mount and watch this function to detect @ as the user types.
* because there's some data from 2 endpoints that needs to be prefetched for the next function to work and I didn't want to figure out how to synchronously chain that data fetching to the @submit event, I wrote a function that runs when user clicks on textarea, using @focus. That way the data is ready way before the comment is submitted.
* then comes the actual function to POST the @mention notifications. Use filter-includes-map or forEach-if-push to create an array of user ids from the username array from the 1st step. Then map() and for() loop through each of these user ids to run the POST request, including 3 if-else-if conditions to prevent double notifications. The hard part was how to compare an array to another array within a if condition! But I realised I just needed a boolean true/false from array2.includes(element) with the element from array1.map(element => ...)
* detect @ in the username text input inside a textarea, using regex .match(/@\w+/g), and then using map() and substring() to put them into an array without the @ prefix. Mount and watch this function to detect @ as the user types.
* because there's some data from 2 endpoints that needs to be prefetched for the next function to work and I didn't want to figure out how to synchronously chain that data fetching to the @submit event, I wrote a function that runs when user clicks on textarea, using @focus. That way the data is ready way before the comment is submitted.
* then comes the actual function to POST the @mention notifications. Use filter-includes-map or forEach-if-push to create an array of user ids from the username array from the 1st step. Then map() and for() loop through each of these user ids to run the POST request, including 3 if-else-if conditions to prevent double notifications. The hard part was how to compare an array to another array within a if condition! But I realised I just needed a boolean true/false from array2.includes(element) with the element from array1.map(element => ...)
