‫So after a quick break,
‫let's now finally build the simple feature
‫that allows a user to restart a quiz.
‫And with our reducer that we already have in place,
‫this is almost too easy now.
‫So we have updated related pieces of state so many times
‫in this section so far that I think
‫that you could actually implement this on your own.
‫So this entire feature
‫you might be able to just build it on your own now.
‫I think that might be a really nice challenge.
‫Just add a button here with the same classes
‫as I think this one here
‫or at least the same classes as this one.
‫So basically it's just the same thing here
‫and then you just create a new action
‫and then basically reset this date there.
‫So that should not be too hard.
‫And so please do that now
‫and meet me back here once you are finished.
‫So I hope that was fun.
‫So I will just now copy and paste this button here.
‫So place it right underneath this one right here.
‫And then of course we need access
‫to the dispatch function.
‫Here the text will be restart quiz.
‫And then here, let's dispatch an action
‫with a type of restart.
‫So very creative.
‫All right, and going back to our reducer, case restart.
‫And so here we could now do this in two different ways.
‫So we could define all the variables that we want to reset
‫to their initial state.
‫So just like this, for example,
‫setting the score back to zero
‫and basically doing all of this here
‫because actually we want to restore all of them
‫except for the questions array.
‫So this one we don't want to re-fetch of course.
‫And well, probably we also want
‫to reset this one here to ready
‫but these other ones, they should become
‫exactly the values that we have right here.
‫So let's try to do this.
‫So we expand the entire initial state back here
‫and then we just add the questions back in.
‫So we say questions is equal state.questions
‫so that we don't lose them.
‫And then finally the status should become ready.
‫But again, you could just as well have done this.
‫So return the entire state,
‫then override like the points back to zero,
‫the high score back to zero,
‫the index back to zero as well.
‫And there was just one more, which was it?
‫The answer back to null, answer back to null.
‫And of course the status to ready.
‫So both of these work, I just prefer this one here
‫because it's a bit more explicit
‫that we basically want to reset
‫to something similar to the initial state.
‫So this was really easy, wasn't it?
‫And so I actually really, really like this pattern.
‫So it makes the state logic that we have here, all of it,
‫so decoupled from all the different components.
‫And this is especially helpful when we later come back
‫to the code and want to understand what is happening.
‫So then all we will have to do is
‫to basically read through these cases,
‫and by that we can then understand what happens
‫in our application and how the state transitions.
‫So even without understanding much of the application
‫just by reading the reducer, we will know
‫that some data might be received, that it might fail,
‫that something will start, that there can be a new answer,
‫that there can be a next question and so on.
‫So again, just from reading the reducer
‫and so because of this,
‫our state updates are really a lot more declarative.
‫So we just map these different actions here
‫to the state transitions that we then write out right here.
‫So really, really amazing pattern, but I will talk more
‫about that again by the end of the course
‫when we summarize everything that we learned here.
‫So now let's actually just test this.
‫So let's start and then I will cheat again and going back
‫or actually going forward automatically to index number 14.
‫Then let's click here.
‫Oh, actually this is the demo version.
‫So that is then really cheating, right?
‫Because that's already working.
‫So yeah, again, 14.
‫And so we have just 20 points.
‫So I guess we won't beat the high score or actually we will
‫because of course it's also reset to zero.
‫And so here we didn't have the same as before
‫but now we can restart the quiz.
‫So let's see.
‫And dispatch is not a function.
‫Nice, so we didn't pass it in, I guess.
‫So of course we need that here.
‫So let's do it all again.
‫And if you want, you can of course go
‫through the entire quiz, which I really hope you do.
‫That's why I added 15 questions to it
‫so that you can practice a little bit.
‫But anyway, let's now click here and nice.
‫So the questions remain the same
‫but everything else is reset.
‫Great, so that was actually it.
‫So we finished that part as well.
‫All we have to do now is to get this timer here to run.
‫So when this timer runs out, then basically the quiz stops.
‫So you see here that it keeps updating.
‫So let's set it like to five seconds.
‫So we see what happens here at the end.
‫So let's wait for it.
‫And so then you see
‫that it automatically moves to the finished screen.
‫And so let's now implement this functionality
‫in our own application.