Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
React firebase 2
  • Overview
  • Transcript

2.10 Edit Locking

In the previous lesson, we created the ability to edit sections within our page, and we haven't seen this in action yet for multiple users. So let me show you how this would work. Let me open up another window here, and I'll load up our dogs page. And right now in the left window I logged in. In the right window I'm not. So in the left window, I can go ahead and make a change to one of our sections. And when I save that change, you can see that pretty much instantaneously the change is made in the right window. So this shows us that if we have multiple users viewing a page at the same time, and one makes a change, all the other users will see that change right away. If we log into our user account here in the second window, I can go ahead and make some changes here. And you can see that these changes are reflected back in the first window on the left. So we have editing working just fine. However at this point, we still don't have any kind of locking mechanism in place. While user two on the right is editing this section, user one could go ahead and edit that section as well, and then we would be in trouble if users don't see their updates. So let's create a locked state for each of our sections. Back in our section.js file, let's look at the getState function that we started with. In the state object that's returned, we're going to add one more property, locked. So a section will be considered locked if a user is logged in and this section has an editor, but the user is not the editor of the section. So we can say props.user and props.section.editor and props.user.username does not equal props.section.editor. That's pretty straightforward. Now we can show that a section is locked by giving it the locked class. And will only show that a section is locked if the user is logged in. So down here where we're assigning classes, I have my if this.props.user block. Right now, we're just pushing in the editable class. However inside that push statement, let's switch to a ternary expression. So say if this.state.locked, then we will include the class locked. Otherwise we'll include the class editable, okay? Now with that class in place, let's switch to our style.css file, and let's add a locked class. So at the bottom here, I'll say .locked. Will Start by setting the border color to a shade of light gray and then will set the background to a darker shade of gray so d1d1d1. All right, so if we save the stylesheet and we refresh the pages, after the pages load, we're currently logged in in both views. So that means if I try and make some changes to a section as one user, the other user will see that section turn gray, which they will know means it's locked. And they shouldn't be able to edit it. We can change a section on the right and the user on the left will find it locked. Now as far as editing via locking goes, we have a bit of a problem. Let's create another section here and I'm going to give this section a link. Now, what's gonna happen if I click this link within the section? Well, I'll go ahead and click that link. Notice that right away the window on the left has the references section locked. Has the references section locked because the other user has clicked it and therefore they have started to edit it. However the link that we click within that element takes over the functionality and user two is actually directed to the new page. So as long as they are away from the website, nobody else can edit that section. If I navigate back to our dogs page, our own wiki here, you can see that that section is still being displayed as a text area. It's still editable by the user two. However, if they had never come back to the wiki, it would be left that way for an indeterminate length of time. Meaning that no one else could edit that section. So we need to fix links so that the user will be able to click links within sections without having to worry about becoming the editor. We'll look at that in the next lesson.

Back to the top