4.3 Add New Terms and Definitions

Now it's time to hold on to your hats, we're gonna get a little creative with the way we're handling some of this transitioning, to add the ability to create not only new quizzes, but also new cards within the quizzes. So you've probably noticed, that we have this button down here, and if we hit it, we can see title and description. But if we go into one of these quizzes, we can still see this button and it still says Title and Description. So if I were to fill this out, it would still fill out a brand new quiz and if we came back here we would see that quiz and that's okay. So we know that that still works but that's not the functionality we're looking for. Once we go into a quiz and we hit this button, we'd like to create a new word a new term. And that's exactly what we're gonna do right now but we're gonna do a little sleight of hand in order to get that accomplished. The way that we're gonna do this, is we're gonna come over to our code, and we're going to go into our create quiz, because basically we're gonna follow that same process. We're gonna create a New component and this is going to be the CreateFlashCard.view. And then we'll just go ahead and drop that all in there, and we're just gonna a couple of minor changes. So, we're no longer creating a quiz, we're creating a card, and that has a term in it, which means we're going to have term text. It's going to have a definition, which means it's going to have a definition text, and we're no longer saving a quiz we're now saving a flashCard, so that pretty much takes care of things down here. Now down at the bottom, we need to change these properties that we are exposing to termText, and to definitionText, like that, and then there's a couple more places where we have this. We have our definitionText, we have our termText and we have our termText and termText here, and that just about takes care of everything, except for this event that we're admitting now, is going to be create-flash-card. And we're not longer dealing with titles and descriptions, it's going to be terms and definitions. Okay, so basically what we did is a really big, giant copy and paste job, and just a couple of updates here and there, a couple of little tweaks. You could probably optimize this a little bit more, but just to kinda make things as simple and quick as possible, this is the route we're gonna go. So now we have a brand new component that we want to be able to use to create flashcards. And everything looks the same except for a couple functions that we're using here, and I need to also make sure that I update this one here to saveFlashCard. So some of the words and terms and events have changed but overall the basic structure is the same. So how does these help us? Well let's come back over to our app view and let's just introduce these new component into our application. So this is going to be a CreateFlashCard component from ./components/CreateFlashCard like that, and we're going to bring that into our components createFlashCard, save that. And now we will also bring that over here into our main part of our application as create-flash-card, and create-flash-card, just like that. So let's go ahead and save that and see what that does, now we have two buttons down here. If I were to click on the first one we'd get Title and Description, if we click on the second one, we get Term and Definition, okay, we're getting somewhere now. But obviously, I don't wanna have both of these buttons at the same time. It's going to depend on state, which we've already kinda began to talk about. So let's go ahead and go into our app view, let's come down into our data and let's define some of these things. So we're going to define our viewState once again, here and let's just say we're gonna be dealing with the quizzes and cards states again. And then at this point, we're also gonna need to know what the active quiz is. So when I go into viewing the different quizzes that I have in here, and then I look at the terms, if I hit add term here and I wanna add this in. I need to know which of the quizzes is currently actively being viewed, so I can add that new term and definition to the proper quiz. So we're going to just add an activeQuiz id down here and this is going to begin at 0. So at the beginning when there's nothing selected it's 0 and that's all we cared about. So let's go ahead and save that, so obviously we don't wanna be showing both of these all the time, so we're going to be doing a little bit of our magic again. So let's just go ahead and say v-show, we wanna v-show create quiz when our viewsState == quizzes. And we want to show our flashCard when our v-shown here, that we're going to show this when the viewState = cards, just like that, so let's save that. So if we come back here, now we should only see the one and we're gonna get title and description, that's good. But obviously now we need to know when we are changing states and not only when we're changing states, but also when we are looking at a specific quiz. So the way that we're gonna handle that is we're gonna come over to our quiz list, we already know when we're changing states that's nothing new. So let's kinda come down here, and when we're changing these states, all I really want to do now is I want to emit another event and pass it back up the food chain. So when we are viewing a quiz we get the quiz and so ultimately we know what the id is, so we simply want to emit a new event, so we're going to emit change-state. And then we're gonna pass in a new object which is gonna be viewState as one of the properties, and we're simply gonna, at this point say cards. And then here we're gonna say activeQuiz is going to be equal to quiz.id just like that, so we're going to admit a new even on that one. On view quizzes we're going to do the same thing, we're going to emit the same change-state event. We're gonna pass another object in here where viewState is going to be quizzes this time. And then our activeQuiz is simply going to be 0, okay so we'll set that back to that state. So now we're emitting these events, and we can handle that back in our app.vue. So once again, we'll come in to our quiz list here, and we wanna say v-onchange-state, then we want to call our changeState function. So let's go ahead and handle that, we'll come into our methods. Let's go ahead and add a changeState function and this changeState function is gonna come with a state object. So what do we gonna do at this point? Well at this point we're simply gonna set a couple of properties, we're gonna say this.viewState = state.viewstate. And this.activeQuiz = state.activeQuiz, so let's go ahead and save that, okay, so let's see where this has gotten us. If we refresh our page, let's go ahead and click this plus button and we get Title and Description, which is what we would anticipate. If I were to go into Chapter 1, we now see we have our words, if I hit this plus, I'm gonna see now, Term and Definition. Now that's really cool, so now it looks like it's the same button every single time, but in actuality, they're different buttons with different functionality. So now the addition that I have to make is, I know I can add in a new quiz and I can save that and I get it. But now I need to be able to handle the addition of this new term and definition because right now, if I hit Save, nothing really happens so I need to handle that. So let's come back into our app.vue, and when we actually do a create flash card, we wanna handle an event here. And we want this event to be, v-on::create-flash-card, and then when we do that, I want to run the function, createFlashCard, so let's save that. Let's go back to createFlashCard, and as you can see here, we are handling the saveFlashCard so that's gonna come in here saveFlashCard. We're going to emit this createFlashCard and we are passing in this object of a term and a definition just very similar to how we did before. So we're gonna bubble up that event and pass in this term and definition, so let's come back over here we need to create this, createFlashCard function in here now. We're going to say, createFlashCard, and we're gonna be getting a newCard in here. Okay, and now we need to do something very similarly to how we did with this, createQuiz. We did managed to get some ideas and then we push on some things into our quizzes, this is gonna be a little bit different. The first thing we need to do is find the activeQuiz that we were looking at. So we've set that activeQuiz value, but now we need to get the quiz within the quizzes collection for that active quiz and then do some of the same operations, so I'm gonna drop a little bit of code in here and let's go over it. So, the first thing that I'm gonna do is that I'm gonna get the id of the activeQuiz hat we have set before during the changeState. Then I'm going to look into the quizzes here and I'm gonna do a grep, I'm gonna grep on the quizzes that we have within our data. And then I'm going to look for whichever one of those quizzes match an id of whatever is set to my activeQuiz. Now it is possible that we could be looking for one that doesn't exist, and by default this grep will give you back a collection order ray. So I'm gonna check to see if the quizzes.length is equal to zero and if that's true if there's nothing there I'm simply gonna return and say you know what, forget about it. But if it is a valid id, and I did get back quizzes, I'm only expecting to get back one, then I'm going to get that first quiz because it should only be one the ID's should be unique. And then I can go ahead and get the maxId and calculate the nextId, based on that quiz and the number of cards that are currently there. So now, once I've done that, I know what the next id is going to be, so I'm simply going to say quiz.cards.push, and I can push in a new card which is going to have an id of nextId a term of newCard.term. And a definition of newCard.definition, so let's go ahead and save all of that. Now it seems like quite a bit but honestly it's really not that bad just a little bit of slide of hand. So let's come back in here and refresh our page, and so now in here I can come in and say I can create a new quiz this is for Chapter 3. Chapter 3Quiz, so we already know that this should work as it did before. Now we can come into Chapter 3 and we can see we don't have anything in here, well let's hit plus let's create a new term and a definition. New Term AndDefinition, and hit Save, and now you see we have New Term and Definition here, but if we go back we are persisting that. We have chapter 3 chapter 3 quiz I can go back in there, and see my New Term and Definition. And I can bounce all around here and continue to add terms and definitions as I need, which is pretty slick. And we're gonna get our updated numbers down here to get a count of the cards, so this is pretty good. And this is an easy and quick way, to be able to create additional functionality that looks like it's very big and complicated, but we're just re-using some existing components with a few tweaks that we've already had.