1 00:00:01,080 --> 00:00:03,750 ‫So after a quick break, 2 00:00:03,750 --> 00:00:06,900 ‫let's now finally build the simple feature 3 00:00:06,900 --> 00:00:10,293 ‫that allows a user to restart a quiz. 4 00:00:11,670 --> 00:00:14,940 ‫And with our reducer that we already have in place, 5 00:00:14,940 --> 00:00:18,060 ‫this is almost too easy now. 6 00:00:18,060 --> 00:00:22,170 ‫So we have updated related pieces of state so many times 7 00:00:22,170 --> 00:00:24,690 ‫in this section so far that I think 8 00:00:24,690 --> 00:00:27,930 ‫that you could actually implement this on your own. 9 00:00:27,930 --> 00:00:29,340 ‫So this entire feature 10 00:00:29,340 --> 00:00:32,820 ‫you might be able to just build it on your own now. 11 00:00:32,820 --> 00:00:36,330 ‫I think that might be a really nice challenge. 12 00:00:36,330 --> 00:00:39,810 ‫Just add a button here with the same classes 13 00:00:39,810 --> 00:00:42,330 ‫as I think this one here 14 00:00:42,330 --> 00:00:45,570 ‫or at least the same classes as this one. 15 00:00:45,570 --> 00:00:47,910 ‫So basically it's just the same thing here 16 00:00:47,910 --> 00:00:51,120 ‫and then you just create a new action 17 00:00:51,120 --> 00:00:54,060 ‫and then basically reset this date there. 18 00:00:54,060 --> 00:00:56,400 ‫So that should not be too hard. 19 00:00:56,400 --> 00:00:58,530 ‫And so please do that now 20 00:00:58,530 --> 00:01:01,023 ‫and meet me back here once you are finished. 21 00:01:02,520 --> 00:01:05,790 ‫So I hope that was fun. 22 00:01:05,790 --> 00:01:10,053 ‫So I will just now copy and paste this button here. 23 00:01:11,550 --> 00:01:15,960 ‫So place it right underneath this one right here. 24 00:01:15,960 --> 00:01:18,030 ‫And then of course we need access 25 00:01:18,030 --> 00:01:19,983 ‫to the dispatch function. 26 00:01:21,450 --> 00:01:24,810 ‫Here the text will be restart quiz. 27 00:01:27,600 --> 00:01:30,240 ‫And then here, let's dispatch an action 28 00:01:30,240 --> 00:01:32,730 ‫with a type of restart. 29 00:01:32,730 --> 00:01:34,263 ‫So very creative. 30 00:01:35,880 --> 00:01:40,880 ‫All right, and going back to our reducer, case restart. 31 00:01:45,510 --> 00:01:49,710 ‫And so here we could now do this in two different ways. 32 00:01:49,710 --> 00:01:53,220 ‫So we could define all the variables that we want to reset 33 00:01:53,220 --> 00:01:54,543 ‫to their initial state. 34 00:01:57,180 --> 00:01:59,670 ‫So just like this, for example, 35 00:01:59,670 --> 00:02:01,920 ‫setting the score back to zero 36 00:02:01,920 --> 00:02:04,950 ‫and basically doing all of this here 37 00:02:04,950 --> 00:02:07,500 ‫because actually we want to restore all of them 38 00:02:07,500 --> 00:02:09,840 ‫except for the questions array. 39 00:02:09,840 --> 00:02:12,603 ‫So this one we don't want to re-fetch of course. 40 00:02:13,470 --> 00:02:15,990 ‫And well, probably we also want 41 00:02:15,990 --> 00:02:18,210 ‫to reset this one here to ready 42 00:02:18,210 --> 00:02:20,680 ‫but these other ones, they should become 43 00:02:21,655 --> 00:02:24,000 ‫exactly the values that we have right here. 44 00:02:24,000 --> 00:02:26,373 ‫So let's try to do this. 45 00:02:27,510 --> 00:02:31,980 ‫So we expand the entire initial state back here 46 00:02:31,980 --> 00:02:35,463 ‫and then we just add the questions back in. 47 00:02:36,900 --> 00:02:41,850 ‫So we say questions is equal state.questions 48 00:02:41,850 --> 00:02:44,370 ‫so that we don't lose them. 49 00:02:44,370 --> 00:02:49,200 ‫And then finally the status should become ready. 50 00:02:49,200 --> 00:02:53,280 ‫But again, you could just as well have done this. 51 00:02:53,280 --> 00:02:55,653 ‫So return the entire state, 52 00:02:56,670 --> 00:03:00,330 ‫then override like the points back to zero, 53 00:03:00,330 --> 00:03:02,133 ‫the high score back to zero, 54 00:03:03,930 --> 00:03:07,800 ‫the index back to zero as well. 55 00:03:07,800 --> 00:03:11,583 ‫And there was just one more, which was it? 56 00:03:13,140 --> 00:03:18,140 ‫The answer back to null, answer back to null. 57 00:03:18,416 --> 00:03:22,380 ‫And of course the status to ready. 58 00:03:22,380 --> 00:03:25,440 ‫So both of these work, I just prefer this one here 59 00:03:25,440 --> 00:03:27,930 ‫because it's a bit more explicit 60 00:03:27,930 --> 00:03:31,260 ‫that we basically want to reset 61 00:03:31,260 --> 00:03:34,440 ‫to something similar to the initial state. 62 00:03:34,440 --> 00:03:37,830 ‫So this was really easy, wasn't it? 63 00:03:37,830 --> 00:03:42,120 ‫And so I actually really, really like this pattern. 64 00:03:42,120 --> 00:03:46,440 ‫So it makes the state logic that we have here, all of it, 65 00:03:46,440 --> 00:03:49,830 ‫so decoupled from all the different components. 66 00:03:49,830 --> 00:03:53,040 ‫And this is especially helpful when we later come back 67 00:03:53,040 --> 00:03:56,253 ‫to the code and want to understand what is happening. 68 00:03:57,840 --> 00:04:00,030 ‫So then all we will have to do is 69 00:04:00,030 --> 00:04:02,730 ‫to basically read through these cases, 70 00:04:02,730 --> 00:04:05,580 ‫and by that we can then understand what happens 71 00:04:05,580 --> 00:04:09,150 ‫in our application and how the state transitions. 72 00:04:09,150 --> 00:04:12,420 ‫So even without understanding much of the application 73 00:04:12,420 --> 00:04:15,030 ‫just by reading the reducer, we will know 74 00:04:15,030 --> 00:04:18,270 ‫that some data might be received, that it might fail, 75 00:04:18,270 --> 00:04:21,690 ‫that something will start, that there can be a new answer, 76 00:04:21,690 --> 00:04:24,720 ‫that there can be a next question and so on. 77 00:04:24,720 --> 00:04:27,330 ‫So again, just from reading the reducer 78 00:04:27,330 --> 00:04:28,770 ‫and so because of this, 79 00:04:28,770 --> 00:04:32,670 ‫our state updates are really a lot more declarative. 80 00:04:32,670 --> 00:04:35,520 ‫So we just map these different actions here 81 00:04:35,520 --> 00:04:40,050 ‫to the state transitions that we then write out right here. 82 00:04:40,050 --> 00:04:43,380 ‫So really, really amazing pattern, but I will talk more 83 00:04:43,380 --> 00:04:45,780 ‫about that again by the end of the course 84 00:04:45,780 --> 00:04:48,393 ‫when we summarize everything that we learned here. 85 00:04:49,230 --> 00:04:52,263 ‫So now let's actually just test this. 86 00:04:53,700 --> 00:04:58,700 ‫So let's start and then I will cheat again and going back 87 00:05:01,020 --> 00:05:05,833 ‫or actually going forward automatically to index number 14. 88 00:05:10,063 --> 00:05:10,896 ‫Then let's click here. 89 00:05:10,896 --> 00:05:13,563 ‫Oh, actually this is the demo version. 90 00:05:14,430 --> 00:05:17,010 ‫So that is then really cheating, right? 91 00:05:17,010 --> 00:05:18,603 ‫Because that's already working. 92 00:05:19,920 --> 00:05:23,163 ‫So yeah, again, 14. 93 00:05:25,850 --> 00:05:28,470 ‫And so we have just 20 points. 94 00:05:28,470 --> 00:05:32,010 ‫So I guess we won't beat the high score or actually we will 95 00:05:32,010 --> 00:05:35,430 ‫because of course it's also reset to zero. 96 00:05:35,430 --> 00:05:38,820 ‫And so here we didn't have the same as before 97 00:05:38,820 --> 00:05:41,040 ‫but now we can restart the quiz. 98 00:05:41,040 --> 00:05:42,690 ‫So let's see. 99 00:05:42,690 --> 00:05:45,390 ‫And dispatch is not a function. 100 00:05:45,390 --> 00:05:49,053 ‫Nice, so we didn't pass it in, I guess. 101 00:05:50,130 --> 00:05:52,803 ‫So of course we need that here. 102 00:05:56,550 --> 00:05:58,113 ‫So let's do it all again. 103 00:06:02,310 --> 00:06:04,770 ‫And if you want, you can of course go 104 00:06:04,770 --> 00:06:08,010 ‫through the entire quiz, which I really hope you do. 105 00:06:08,010 --> 00:06:11,070 ‫That's why I added 15 questions to it 106 00:06:11,070 --> 00:06:13,623 ‫so that you can practice a little bit. 107 00:06:15,030 --> 00:06:18,873 ‫But anyway, let's now click here and nice. 108 00:06:19,920 --> 00:06:22,380 ‫So the questions remain the same 109 00:06:22,380 --> 00:06:25,113 ‫but everything else is reset. 110 00:06:26,220 --> 00:06:29,220 ‫Great, so that was actually it. 111 00:06:29,220 --> 00:06:31,380 ‫So we finished that part as well. 112 00:06:31,380 --> 00:06:35,400 ‫All we have to do now is to get this timer here to run. 113 00:06:35,400 --> 00:06:40,400 ‫So when this timer runs out, then basically the quiz stops. 114 00:06:42,240 --> 00:06:44,790 ‫So you see here that it keeps updating. 115 00:06:44,790 --> 00:06:48,360 ‫So let's set it like to five seconds. 116 00:06:48,360 --> 00:06:51,240 ‫So we see what happens here at the end. 117 00:06:51,240 --> 00:06:52,413 ‫So let's wait for it. 118 00:06:54,161 --> 00:06:55,080 ‫And so then you see 119 00:06:55,080 --> 00:06:58,443 ‫that it automatically moves to the finished screen. 120 00:06:59,368 --> 00:07:00,930 ‫And so let's now implement this functionality 121 00:07:00,930 --> 00:07:02,493 ‫in our own application.