2.13 Three Final Tweaks

And this final lesson. We're going to wrap up with three small tweaks that I'd like to make to our code to improve our application just a little bit more. The first thing I want to do has to do with our internal links in our start editing function right now. The if statement that checks to see if a link is internal or not checks to see if href.indexOf /page/ is greater than minus one. That is just checking to see if /page/ is somewhere inside the href. However, it's very likely that there will be other links that have /page/ inside of them. What we really want to check for is to see if our href begins with /page/. And of course all of our internal links will because that's the way we write them in our makeLinks function. So instead of saying is it greater than minus one, I'm going to change this to is it equal to 0. That is tweak number one. The second tweak has to do with adding a new section. Right now, if I click the Add Section button, a new section is out into the page, and we are the editor so we see the text area box there. However, we don't have focus on that text box. It would be nice If when we click Add Section, the new text box is created and we are focused within that text box. The way to do this starts that are textarea element. We'll will add a ref to this element, and we'll call it editor. And this way we'll be able to get a reference to this editor from somewhere else in the code. Now let's add another method to this class and this will be the componentDidUpdate function. This will happen every time the properties or the state update. From within this function we want to check to see if we are currently editing this section. So will say if this.state.editing, And if that's true then we'll say react.findDOMNode. And we'll pass it to this.refs.editor. So we'll find the editor Node. And then we'll just call dot focus. So this way whenever we start editing a section that section will receive focus immediately. So now, if I come back and refresh the page, and I click add section, you can see that right away my cursor is flashing inside the Box. The last feature that I wanted to add has to do with creating new pages. Right now, if I create a new page. And let me do that for a German shepherd, we'll say. When I hit enter the page is created and we can see it in the list. However if we want to move to that page, we would have to click its a link in the page list. What we want is for us to be taken directly to that new page when we create it. We'll do this from within the PageList.js function. And we've done some navigation like this before. So you probably know that to do this we need to enable the rotor in the context of this class. So we'll say PageList.contextTypes. And then we'll give it a router property. And we'll set that to React.PropTypes.function.isRequired. All right. So now this class currently does not have a constructor so we'll have to add that in. We'll get the props and the context as the first two parameters. And we'll have to pass them to the super constructor. And then of course we can say this.context = context. Now let's jump down to our create Page function. Right now we create the page where we do our API.pages.push. Now what we need to do is store the value that's returned from this, because what's returned is a Firebase ID. For the new element that we've just added to our database. And of course, that's the new page that we want to navigate to. Now that we've captured that ID, w can say this.context.rotor.transitionTo and we'll move to the page route and as the parameters, we can pass it an id and that id will be id.key. That id object is not just the id that we need, it's actually an object with some other properties. We just need the key, which is the actual identifier that Firebase gives our page. So we'll say id.key and that's a function so we'll call that function. Now if we come back to our application and I create a Terrier page, you can see that as soon as I create it, we are navigated to the Terrier page. So this means our live collaborative Wiki is complete.