1 00:00:01,080 --> 00:00:03,900 ‫Now, it's time to implement the functionality 2 00:00:03,900 --> 00:00:06,123 ‫of starting a new quiz. 3 00:00:07,650 --> 00:00:10,500 ‫So, how are we going to do that? 4 00:00:10,500 --> 00:00:13,320 ‫Well, after we click here on this button, 5 00:00:13,320 --> 00:00:16,980 ‫we basically want to display the first question 6 00:00:16,980 --> 00:00:19,203 ‫here inside this main component. 7 00:00:20,340 --> 00:00:22,020 ‫So, basically, right here, 8 00:00:22,020 --> 00:00:25,290 ‫and since we have been using this status state here 9 00:00:25,290 --> 00:00:29,190 ‫to basically decide what will be rendered in the main, 10 00:00:29,190 --> 00:00:32,520 ‫all we have to do now is to change that status 11 00:00:32,520 --> 00:00:36,183 ‫to something else and then display that question here. 12 00:00:37,200 --> 00:00:39,093 ‫And let's actually start with that. 13 00:00:40,800 --> 00:00:45,800 ‫So, let's say if the status was active, 14 00:00:46,590 --> 00:00:50,073 ‫then here, we want to display the question component. 15 00:00:52,290 --> 00:00:54,570 ‫So, that component doesn't exist yet, 16 00:00:54,570 --> 00:00:56,583 ‫and so, let's create it. 17 00:00:58,320 --> 00:01:03,280 ‫So, yet another component file here, let's close that 18 00:01:04,920 --> 00:01:07,323 ‫and then our nice snippet again. 19 00:01:10,170 --> 00:01:13,320 ‫So, here, I will just write question for now 20 00:01:13,320 --> 00:01:16,893 ‫and then of course, we need to import that. 21 00:01:21,750 --> 00:01:26,750 ‫Okay. Well, that's not correct, but yeah, now, it is. 22 00:01:28,410 --> 00:01:31,560 ‫So, here, remember, that active is one 23 00:01:31,560 --> 00:01:35,370 ‫of the five different status that the application can have. 24 00:01:35,370 --> 00:01:37,920 ‫And so, now, we are here basically handling 25 00:01:37,920 --> 00:01:39,573 ‫that active state. 26 00:01:40,770 --> 00:01:42,300 ‫So, right here. 27 00:01:42,300 --> 00:01:46,260 ‫So, again, we are using this different status to decide 28 00:01:46,260 --> 00:01:51,150 ‫what will be displayed here in this main part of the app. 29 00:01:51,150 --> 00:01:53,520 ‫And it's a bit like a flow as well. 30 00:01:53,520 --> 00:01:57,180 ‫So, first, the status is loading, then we display this. 31 00:01:57,180 --> 00:02:00,150 ‫In case there was an error, then we display this. 32 00:02:00,150 --> 00:02:01,890 ‫But if everything went well, 33 00:02:01,890 --> 00:02:04,590 ‫well, then we display the next one. 34 00:02:04,590 --> 00:02:06,630 ‫And then once the user collects here, 35 00:02:06,630 --> 00:02:08,670 ‫then we display the next one. 36 00:02:08,670 --> 00:02:11,670 ‫So, this question right here. 37 00:02:11,670 --> 00:02:13,110 ‫But now, the question is 38 00:02:13,110 --> 00:02:16,890 ‫how do we actually set this status to active? 39 00:02:16,890 --> 00:02:20,523 ‫Or in other words, how do we now start the game? 40 00:02:24,090 --> 00:02:27,270 ‫Well, all we have to do is to create basically 41 00:02:27,270 --> 00:02:30,060 ‫a new action type here in our reducer, 42 00:02:30,060 --> 00:02:35,060 ‫which will set the status to start or to active actually. 43 00:02:36,540 --> 00:02:38,860 ‫So, let's create a new action type here 44 00:02:39,900 --> 00:02:42,063 ‫and let's call this one start. 45 00:02:43,830 --> 00:02:48,810 ‫And so, here, we want to return a new state as always, 46 00:02:48,810 --> 00:02:51,990 ‫which is comprised of the current state 47 00:02:51,990 --> 00:02:56,463 ‫anti-status set to active. 48 00:02:57,360 --> 00:03:00,150 ‫All right. And so, now, it's very easy. 49 00:03:00,150 --> 00:03:03,930 ‫We just have to dispatch an action from this button here 50 00:03:03,930 --> 00:03:08,220 ‫with the action type of start that we just created. 51 00:03:08,220 --> 00:03:10,233 ‫So, we're going to do that here. 52 00:03:11,250 --> 00:03:13,890 ‫So, here we will want to dispatch that action. 53 00:03:13,890 --> 00:03:16,470 ‫And so therefore, we now need access 54 00:03:16,470 --> 00:03:18,900 ‫to that dispatch function. 55 00:03:18,900 --> 00:03:20,550 ‫So, it needs to be a prop. 56 00:03:20,550 --> 00:03:24,003 ‫And so, let's pass that here into the start screen. 57 00:03:25,980 --> 00:03:27,000 ‫And so, as you see, 58 00:03:27,000 --> 00:03:30,180 ‫we are basically passing the dispatch function around, 59 00:03:30,180 --> 00:03:32,400 ‫just like before we were passing around 60 00:03:32,400 --> 00:03:36,647 ‫event handler functions or the set state functions, right? 61 00:03:38,700 --> 00:03:41,220 ‫So, if we were still using new state, 62 00:03:41,220 --> 00:03:43,110 ‫then we would now probably create 63 00:03:43,110 --> 00:03:45,270 ‫some new event handler here 64 00:03:45,270 --> 00:03:47,760 ‫and then we would pass that event handler 65 00:03:47,760 --> 00:03:49,830 ‫into the start screen. 66 00:03:49,830 --> 00:03:52,830 ‫But now, we don't need to do any of that anymore 67 00:03:52,830 --> 00:03:55,440 ‫because we are handling all the state transitions 68 00:03:55,440 --> 00:03:56,670 ‫in the reducer. 69 00:03:56,670 --> 00:03:58,830 ‫And then all we do is to pass 70 00:03:58,830 --> 00:04:03,480 ‫the dispatcher functions around because then it's very easy. 71 00:04:03,480 --> 00:04:06,900 ‫All we have to do here is to then call 72 00:04:06,900 --> 00:04:09,150 ‫that dispatch function with the action 73 00:04:09,150 --> 00:04:10,623 ‫that we want to dispatch. 74 00:04:12,690 --> 00:04:15,630 ‫So, creating a new function here as always 75 00:04:15,630 --> 00:04:20,630 ‫and then dispatch and the type of the event 76 00:04:21,780 --> 00:04:26,190 ‫will be as we just defined earlier start. 77 00:04:26,190 --> 00:04:28,710 ‫And this should actually be enough. 78 00:04:28,710 --> 00:04:32,100 ‫So, if we click here now, then the question component 79 00:04:32,100 --> 00:04:34,500 ‫should be displayed instead of this. 80 00:04:34,500 --> 00:04:38,760 ‫So, let's see, and bam, there it is. 81 00:04:38,760 --> 00:04:43,440 ‫So, here, we finished this component and so, 82 00:04:43,440 --> 00:04:46,920 ‫actually, we finished what we wanted to do in this lecture. 83 00:04:46,920 --> 00:04:49,410 ‫So, we're going to leave the actual displaying 84 00:04:49,410 --> 00:04:51,753 ‫of the question for the next one.