Can you explain how the tagging feature works in the comment section of platforms like Facebook or Azure, where users can mention others by using the '@' symbol?

I am currently working on creating a comment box application similar to Facebook using the MERN stack. While adding simple comments is not difficult, I am curious about how the tagging mechanism works when mentioning a user with an '@' symbol. Should I structure the comments in the MongoDb database in a specific way that would make it easier to display the tagged user in React, or is there a different technique to achieve this?

Update: My main question revolves around the roles of the UI and API, the flow of code, and any additional components (such as a reference section in the comment document) that should be included in the Mongo Database for seamless integration.

node.jsreactjsmongodb

Answer №1

It seems like you're looking for guidance on both database semantics and frontend implementation, given the broad nature of your question. Here are some suggestions to help steer you in the right direction:

  • For the frontend: consider using the onKeyDown event handler on a textarea element to detect which character was typed. If the character is an @, you can display a dropdown list of users and dynamically filter it as the user continues typing.
  • On the backend: After submission, you'll need to extract all @user mentions from the input. This can be achieved using regular expressions to capture any word starting with @. For example, a regex pattern like [\s\.]?@(\w)\s could help identify all mentioned users within a sentence. Once identified, you can link these users to the corresponding comments in your database.
  • Regarding the database: Once you have the user information, you may want to notify the mentioned user or update their inbox accordingly. Various approaches can be taken to accomplish this task, such as the popular techniques known as Fan out on Read or Fan out on Write. The choice between these methods will depend on your specific requirements, preferred database system, and schema design.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending a Thunk to the store using Typescript

Within my primary store.ts file, the following code is present: const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)) ); store.dispatch(fetchUser()); Upon initial rendering, an action is dispatched to fetchUser in ord ...

javascriptreactjstypescriptreduxredux-thunk

Send a property as a string, then transform the string back into JavaScript

I am in the process of creating a versatile carousel that will cater to various conditions. Therefore, I need to set the "imageQuery" on my display page as a string and then make it work as executable javascript within my carousel. The query functions pr ...

javascriptreactjsnext.js

Issues encountered when configuring Capistrano to execute shell tasks for deploying Node.js applications

Deploying a node.js application using capistrano has presented me with an issue related to setting the shell tasks. Despite having npm installed, the following command fails: run "npm install" npm not found When attempting to use this command instead: r ...

node.jscapistranonpm

A guide on utilizing multer-sftp for downloading files

I've been working on this code, but after searching online I still haven't found a way to download a file from the remote server. I can successfully upload files to the server, but downloading them is posing a challenge. var storage = sftpStorag ...

javascriptnode.jsexpressbackendmulter

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

javascripthtmlreactjsdom

Avoid utilizing <Route> or withRouter() in instances where a <Router> is not present in React

Why am I encountering this error message? It says not to use withRouter() outside a component, but I do not have withRouter in my code. const AppWrapper = () => { return ( <Provider store={store}> <BrowserRouter> ...

reactjsreact-router

Using the active class feature in React Router

Hey there! I've been working with react router v6 and using NavLink to move between components. I've been trying to figure out how to add a custom active class in NavLink, but the method I tried isn't working. Here is what I attempted: <N ...

javascriptreactjsreact-router

What could be causing jQuery to overlook this button?

Having some trouble with my angular, bootstrap, and jQuery setup. I can't get jQuery to select a button and trigger an alert when clicked: $('#some_button').click(function(e) { alert('testing'); }); <button id="some_but ...

jquerynode.jsangulartwitter-bootstrapdom-events

Unable to iterate through nested arrays in Contentful mapping

I am facing an issue while trying to map further into the array after successfully retrieving data from Contentful. The error message field.fields.map is not a function keeps popping up and I can't figure out what I'm doing wrong. export defau ...

javascriptarraysreactjsarray.prototype.map

Enhancing Material UI React Table with Padding on Both SidesIncorporating

Is there a way to add padding in a Material UI 4 React table so that the text starts at the green lines within the blue gray outline box? I have tried styling padding but it doesn't seem to be working. Any suggestions on how this can be accomplished? ...

reactjsmaterial-ui

The issue of React Js's inline style malfunctioning when using a loop condition

Having some trouble with setting different backgrounds for items in a loop in React JS. I attempted to use inline styles to make it dynamic, but no luck so far. Any tips or solutions? { main.map((item, index) => ( <a key={index} href=&apo ...

javascriptreactjs

The state update is failing to properly reflect changes in the array of objects

Need help with updating an object array called users within the Users component using the function below: updateUser = (index, user) => { let temp = this.state.users; temp[index] = user; this.setState({users: temp}); console.l ...

reactjs

Delayed Passport Session Login

Every time I try to log in, my Express app loads very slowly... I've implemented Passport and Express Validator, but there are no errors. However, the login process for some users is extremely slow. Can anyone offer assistance? Below is a snippet o ...

javascriptnode.jsexpresspassport.jsexpress-session

How can I rectify the varying vulnerabilities that arise from npm installation?

After running npm audit, I encountered an error related to Uncontrolled Resource Consumption in firebase. Is there a solution available? The issue can be fixed using `npm audit fix --force`. This will install <a href="/cdn-cgi/l/email-protection" clas ...

javascriptnode.jsfirebasenpmnpm-install

Is it possible to use CSS modules to override Material-UI styles in create-react-app v2?

As an illustration, I need to apply a margin-top to this specific button import classes from 'button.module.css'; <Button type="submit" variant="contained" color="primary" fullWidth d ...

reactjsmaterial-uicss-modules

Achieving SEO success in angular js through organic methods, without the need for third

Is it possible to optimize SEO in AngularJS without relying on third-party solutions such as Prerender or Seo4Ajax? Can we effectively implement SEO using AngularJS alone? After researching forums and Stack Overflow, I have found that the primary options ...

angularjsnode.jsseo

Error message: The types in React Redux typescript are incompatible and cannot be assigned to each other

I recently converted my React App to TypeScript and encountered an error that I'm having trouble understanding. Any help would be greatly appreciated. Here is the code for my "mapStateToProps" function: function mapStateToProps(state: AppState): MapS ...

reactjstypescriptreact-typescript

When a reference is placed in a sub-schema, Mongoose Populate may return null

I currently work with three schemas in my project: 1. User 2. SignedToEvent 3. Events The User schema holds user information and has a relationship with SignedToEvents. The SignedToEvents schema connects users to events. The SignedToEvent is embedded with ...

mongodbexpressmongoose

Ways to adjust timestamps (DayJs) by increments of 1 minute, 5 minutes, 15 minutes, 30 minutes, and more

Currently, I am exploring time functionality within React Native by utilizing DayJs. I have noticed a slight inconsistency when comparing 2 different points in time to calculate the time difference. Typically, everything works smoothly such as with 10:00 ...

javascriptreactjsreact-nativedayjs

Are there any methods to alter the location where Material-UI inserts its style tag html elements?

When it comes to adding style tags, Material-UI usually does so within the <header />, which is a common practice. However, I am in need of a way to insert my style tags into a different HTML element. My current challenge involves transitioning an o ...

reactjsmaterial-uijss