Limiting the work of 2 users on one site?

Question

JavaScript

Good evening, here such a question was inserted, there is a one-page page, the page is closed (by login). It displays a lot of user on react.js. They can be edited right away (the form is very large, extensive).

The question is, if 2 people change at the same time (let's say 1 person of one user, another person of another user), there may be consequences and how can you check?

Answer 1

directions for solving the problem of multi-user editing:
- zero, the most vicious for clients, give an error when trying to save the document, if it was edited, update the form and offer to enter everything again, implemented by the 'last modified time' field, which is loaded on the form and sent with a request to update, if the server sees them as different - write an error.
- the first is simple and also 'wrong', to prohibit conflicts in principle, i.e. button on the form - start editing, the mode is held while the form is open, it is turned off automatically by timeout, when saving, or by pressing the corresponding button.
It is recommended to show who has blocked the form at the moment and give the opportunity to somehow communicate with the person (if the timeout is long)
- the second is more difficult, allow several to edit at the same time, but when you click 'save', report that this form has been changed by others and show what it is in the interface (show two values ​​​​for form fields - your new and other people's changes. The complexity of implementation is that if more than two people can edit the form, then conflict resolution hell will begin.It is especially difficult if the form is not just a linear set of fields, but a complex part of the database, with lists, subforms, etc.
I do not recommend this option if the forms are complex, but for simple why not
- the third, the best in modern realities, apply changes and display them at the same moment as they are made to the form, like google docs documents, you can see in which cell which user has now put the cursor, you can even highlight with colors, with fading. It is recommended, oddly enough simple to implement, if the interface is client side javascript and not html generation on the server.
All three methods require up-to-date information about the presence of locks by users, which is implemented using a web socket

Answer 2

The consequences will be - who is the last one and slippers.
Add the isEditable flag to the state, and when you click on the edit button, check whether someone works with this form or not