5.1 Create the Toolbar

The next feature we want to build is a toolbar which will go across the top of our interface here. This toolbar is going to be the permanent home of our new deck button and it's also going to have the new card button, the study button and also the search box. So let's go ahead and start building this component. We'll create a new file in components called toolbar. And as you might expect we'll start by building a presentational component and then we'll give it the wrappings that it needs to become a container component. So let's go ahead and start by importing react from react. We're also going to need to import the show add deck function. This is what we can use to show the AddDeck input box, so we import this from actions. We're also going to need the Link component from react-router. And this is because the new card and study buttons are actually links that go to new routes and us. So we're going to need this link component there. And then finally we're going to need connect from the react-redux library. All right so let's go ahead and create our toolbar. And we'll figure out what we need for this toolbar as time goes on and then we'll come back and add some properties here. So, what do we want to return? What we're going to of course start with the day of and it's going to have a class name of toolbar. Inside of this let's create a new div and inside this div let's add a button, and this button is going to be the new deck button. So the text is just going to be a fatter plus sign symbol new deck. Now of course this button is going to need an on click handler here, and for this let's just call showAddDeck. Of course then this is going to be a property that we need so up here in our parameters let's destructure an object and we'll say showAddDeck. All right, let's see if we can get this working. And so let's create a new function here. That's going to be mapDispatchToProps, and I should mention that calling this function mapDispatchToProps, and calling the other one mapStatetoProps are just conventions. So you could call it something else if you wanted to. All right so let's create a show and deck function here and this is just gonna go ahead and call dispatch and dispatch gets the action show add deck there we go. Okay, so down at the bottom now we can say export default. Let's do connect we'll just past no as the first parameter because we don't have a map state to prop function and then we'll pass mapDispatchToProps and then from the function that's returned we'll pass in the Toolbar, excellent. Okay so where are we going to display this toolbar. Well we're actually going to display it within the app component. So let's go ahead and import our toolbar here. and we'll import toolbar from toolbar. Then just after this sidebar let's replace this H one with an instance of the toolbar component. And there we go we should have our twelve hour displaying if we go back to the browser. Okay it is displaying but it's not exactly how I want. I think what we need to do is just to reverse the order of these. The CSS is expecting the toolbar to come first. Okay, there we go now we have a toolbar going across the top, and we have our decks below. Now I want you to realize that because we told our toolbar to call that action when I clicked this new deck button noticed that we get our new deck textbox to appear and I can go ahead and type in Dec in and hit enter. And that's working just fine. So that's pretty great. And remember that's just because of a redux. We have actions that we can send to our store. We can send those to the store from anywhere and they'll change the state Internet location. So here we can see changing the state from our toolbar causes something to change in our sidebar. So, now let's just go take it the new deck bun in the sidebar. There we go, and now if we come back you can see it's been removed. Excellent. That looks so much better. Okay. Now we're not quite done with the toolbar because when we select one of these decks, you can see right now we have the deck will display here. But also when that URL changes we want to show some other things on the toolbar here. So we need our toolbar to know when there is a specific deck ID. Well this is actually really easy to do. Because as you can see here we already know that our app component has access to this deck ID. So let's just give it to the Toolbar as a parameter. we can say deckId is the deckId and then the Toolbar will receive that as one of its parameters. So we can see the deckId. So let's create a variable up here called deckTools and we can use a turnery expression here. We can say if deckId exists then will return some components here. Otherwise we'll just return null and then down here. After this div, you can just insert the deck tools. So what do we want to set as our deck tools if we have a deck ID? Let's go ahead and wrap these things in a div and in here, we'll just have two links. So will have one link element that goes to /deck/ and then let's use the template string to insert the deckId there. And will say so deckId/new and in here we'll just say + New Card and this will be the link that goes to the New Card wrote excellent. Let me duplicate this and the difference in the road will be deck. Slash deckId/study and inside our tags here we'll just have the text Study Deck. If we come back to our app and if we don't have a deck selected you can see that nothing appears on the toolbar. However, if I do click one of these decks you can see that the new card and study deck buttons appear. They don't look too much like buttons though and that's because they're actually anchor elements. So, let me go ahead and add a class name of BTN to both of these. And now you can see that we have a new card button and a study deck button. This is great. And if I click this, notice the URL changes to "/new" and notice also that we get a warning saying that this did not match any routes. That's okay. We'll be creating that soon. I can click study and it changes to "/study" as well. Okay. And of course if we go back to the home route those buttons disappear entirely. So now we can select our decks and we have a toolbar that we can use to add new decks. So this is really coming along in the next lesson we will create our new card route and we will create the model window that will appear when we click the new card button.