2.11 Working With Links
Of course, our sections can have links. However, if a user clicks a link, that section goes into edit mode and is locked—even though the user isn't on that page anymore! So, let's fix our links.
1.Getting Started6 lessons, 27:04
2.Building the Application13 lessons, 1:29:43
3.Conclusion1 lesson, 00:44
2.11 Working With Links
In the previous lesson, we saw that links inside of our sections make a little bit of a tricky situation. When a user tries to click on them, they are navigated to that link. However, they're also marked as the editor for that section. So we want to avoid that. So this is all gonna happen inside the startEditing function of our section component. Before we actually get to the matter at hand, there's something we need to add that relates to our previous lesson. In the previous lesson, we created the styling so that when one user User was editing a section, other users would see that section is being locked. However, if those users did click that locked section, they would still be able to edit it. We didn't actually do anything to prevent them from doing that. So that's what we're going to do first and start editing here. at the retort to this from should we have our if statement saying that if no users log in. Or if the user is already editing it. And we're not going to actually allow us to start editing. So let's add in this state locked. So that if this section is They won't be able to edit it either. Okay, so that will prevent anyone from editing a section while someone else is doing it. Above this if statement, let's add another if statement here that will check to see if the user is actually clicking a link inside the section and will do the right thing if they're clicking that link. So first, are they clicking a link? Well, we can find this so if we say if event.target.tagname === A. Now if they're clicking anchor element, what do we want to do. Well, nothing really because the browser will take care of navigating to that link. So all we have to do is return so that none of our start editing logic Will be run. Now if we come back to the browser, and I'll refresh the browsers. If we click on our link here, you can see that the page will load over here on the right. However, the section is not marked as locked on the left. So that means this is working just fine. Now. Really, when it comes to this type of wiki, we have two types of links that we need to think about, right? Cuz we have links like the one that we've just created here, which is an external link, linking to some page outside of our website. However, we also have internal links, which will link to other pages in our wiki. Let me copy the link here to our dogs page. And I'll go over to the cats page and I'll add a section here at the top. And this will just have a link directly back to our dogs page. So now from the cats page if I go ahead and click that link. You can see that we're dedicated to our dogs page. So the link behavior is working right because of the code we just wrote. However the problem here is that the page did a refresh. And that's of course what you would expect to happen when we're going to an external link. But when we're going to another one of our pages we don't wanna have to do a complete page refresh. Instead we wanna use the react router to navigate from one page to another. So, how can we add that behavior to our application? What we need to do is get a reference to our router. Now, because we have react-router as part of our application, we have access to our router as one of our react components context variables. However, by default, react variables don't have access to context properties. And so we're going to have to explicitly declare that we want our section component to have access to the router. So at the very bottom of this page. Let's give our class a property. So will say section dot context types. And this is going to be an object in the context that we want to allow is the router And we'll set this to be React.PropTypes.func.isrequired. All right, so this basically just tells react that we want to be able to use the router and we expect it to be a function which is exactly what will happen. But then how can we actually get access to this context.router. Well we have to jump up to the top here in our constructor, because any context that is passed to this component will be passed as a second parameter to the constructor. So we'll take the context as a second parameter. We'll also have to pass that parameter through to our super constructor. And then we can just say this.context equals context. And now we have access to the router as one of the properties of that context object. Let's jump back down into start editing. The first thing we want to do is find out is this a local link. Or is it an external link. So let's get the href value off that link. So we can say var href equals event .target.getAttribute. And look at the href attribute. Now, to see if this is a local link, we'll check to make sure we have the text/page/ within this link. So we can say if href.indexOf Index/page/ Is greater than minus one, meaning it's inside this link. Then, we know that we want to use the react-router to navigate to this URL. So, we can say this.context.router to get access to the router. And then we can say .transitionTo and we can pass in the href. And the react-router will look at that link and it will know what to do with it, and it will smoothly transition us to the new page. Finally, at the very end here, we'll call evt.preventDefault. And this will prevent the actual page refresh that happens when you click a link. All right, let's see if we can see this in action. I'll go back to the cats page, and I'll refresh the page. And when I click that dogs link, we're taken immediately to the dogs page, and the rest of the page does not refresh. Excellent, that's exactly the behavior we were looking for.