1 00:00:01,050 --> 00:00:03,780 ‫So, with our reducer now in place, 2 00:00:03,780 --> 00:00:06,210 ‫it's time to handle the different status 3 00:00:06,210 --> 00:00:08,403 ‫that the application can have. 4 00:00:10,020 --> 00:00:12,180 ‫So, remember that at the beginning, 5 00:00:12,180 --> 00:00:15,960 ‫our application is in the loading status. 6 00:00:15,960 --> 00:00:17,910 ‫So, that's how it starts. 7 00:00:17,910 --> 00:00:19,950 ‫And then when we receive some data, 8 00:00:19,950 --> 00:00:22,110 ‫the status change to ready. 9 00:00:22,110 --> 00:00:24,780 ‫And so, that's when we will then want to display 10 00:00:24,780 --> 00:00:26,370 ‫the list of questions. 11 00:00:26,370 --> 00:00:28,410 ‫And also, there can be an error. 12 00:00:28,410 --> 00:00:31,200 ‫And so, then the status changes to error. 13 00:00:31,200 --> 00:00:33,870 ‫And so now, we want to display different UIs 14 00:00:33,870 --> 00:00:36,270 ‫for these three situations. 15 00:00:36,270 --> 00:00:40,080 ‫And all of these situations will be always displayed 16 00:00:40,080 --> 00:00:43,560 ‫inside this main component right here. 17 00:00:43,560 --> 00:00:45,480 ‫So, let's get rid of this. 18 00:00:45,480 --> 00:00:49,560 ‫And now we will conditionally display some components. 19 00:00:49,560 --> 00:00:52,960 ‫And so, here, we can use state.status 20 00:00:54,090 --> 00:00:56,760 ‫but that's maybe a bit too much work. 21 00:00:56,760 --> 00:01:00,990 ‫And so, let's actually destructure our state object. 22 00:01:00,990 --> 00:01:03,090 ‫Now, we could do that outside. 23 00:01:03,090 --> 00:01:05,070 ‫So, creating these variables here 24 00:01:05,070 --> 00:01:07,080 ‫but we can do it on the fly. 25 00:01:07,080 --> 00:01:11,130 ‫So, basically right here with nested destructuring 26 00:01:11,130 --> 00:01:14,130 ‫so we can have the questions 27 00:01:14,130 --> 00:01:18,963 ‫and the status state destructured right here. 28 00:01:20,370 --> 00:01:23,340 ‫And so, now, state of course no longer exists 29 00:01:23,340 --> 00:01:25,620 ‫but we have status. 30 00:01:25,620 --> 00:01:27,573 ‫And so, now, we can just check, 31 00:01:28,500 --> 00:01:30,510 ‫for example, if it is loading. 32 00:01:30,510 --> 00:01:34,110 ‫And if it is, then we want to display something. 33 00:01:34,110 --> 00:01:36,720 ‫Now, in this case, we want to show a loader 34 00:01:36,720 --> 00:01:41,720 ‫and I actually also already have that loader component here. 35 00:01:41,940 --> 00:01:45,240 ‫So, it's again, a very simple presentational component. 36 00:01:45,240 --> 00:01:48,989 ‫And so, there was no need to create it from scratch. 37 00:01:48,989 --> 00:01:51,960 ‫So, it doesn't even receive any props. 38 00:01:51,960 --> 00:01:55,710 ‫And the same thing also for the error component. 39 00:01:55,710 --> 00:01:57,300 ‫So, exactly the same thing, 40 00:01:57,300 --> 00:01:59,910 ‫doesn't receive props, has no state. 41 00:01:59,910 --> 00:02:02,110 ‫And so, I thought we could save some minutes 42 00:02:03,330 --> 00:02:06,093 ‫and not write them manually here in the video. 43 00:02:07,110 --> 00:02:10,380 ‫So, here, if this status is loading, 44 00:02:10,380 --> 00:02:14,253 ‫we want to display that loading component. 45 00:02:15,090 --> 00:02:16,660 ‫And let's include that here 46 00:02:17,610 --> 00:02:19,413 ‫but just duplicate this line. 47 00:02:21,180 --> 00:02:22,893 ‫And actually it's called loader. 48 00:02:23,760 --> 00:02:27,603 ‫And then let's also already import the error. 49 00:02:28,890 --> 00:02:32,103 ‫So, here that is loader. 50 00:02:33,780 --> 00:02:35,940 ‫And then we have some problem here. 51 00:02:35,940 --> 00:02:38,013 ‫State is not defined. 52 00:02:38,850 --> 00:02:41,790 ‫But while I'm using state nowhere, 53 00:02:41,790 --> 00:02:43,770 ‫maybe let's just try to reload 54 00:02:43,770 --> 00:02:45,603 ‫and that fixes it. 55 00:02:46,980 --> 00:02:48,120 ‫Okay. 56 00:02:48,120 --> 00:02:50,850 ‫And now we can just do the same thing again 57 00:02:50,850 --> 00:02:52,620 ‫because these different status 58 00:02:52,620 --> 00:02:54,990 ‫are of course, mutually exclusive. 59 00:02:54,990 --> 00:02:59,220 ‫So, we don't need any turneries or even nested turneries. 60 00:02:59,220 --> 00:03:02,190 ‫So, only this one or this one 61 00:03:02,190 --> 00:03:04,713 ‫or one of the next ones will be true. 62 00:03:06,210 --> 00:03:07,043 ‫And yeah. 63 00:03:07,043 --> 00:03:09,333 ‫So, we can just use the end here. 64 00:03:11,490 --> 00:03:12,323 ‫All right. 65 00:03:12,323 --> 00:03:14,340 ‫But here, let's use the error 66 00:03:14,340 --> 00:03:16,350 ‫and let's already try this out. 67 00:03:16,350 --> 00:03:20,190 ‫So, let's see if we briefly see the loading. 68 00:03:20,190 --> 00:03:23,040 ‫And we saw, but it was very short. 69 00:03:23,040 --> 00:03:27,930 ‫So, just to make sure, let's do some throttling here. 70 00:03:27,930 --> 00:03:31,143 ‫So, make our app a little bit slower. 71 00:03:32,010 --> 00:03:33,423 ‫This can be a bit smaller. 72 00:03:34,710 --> 00:03:35,940 ‫Yeah, there we go. 73 00:03:35,940 --> 00:03:38,670 ‫So, there we are loading our questions. 74 00:03:38,670 --> 00:03:40,346 ‫And now, let's also pretend 75 00:03:40,346 --> 00:03:44,280 ‫that we have no network connection 76 00:03:44,280 --> 00:03:45,780 ‫so that we are offline. 77 00:03:45,780 --> 00:03:48,030 ‫And so then, when we reload, 78 00:03:48,030 --> 00:03:50,853 ‫well then of course, the entire page doesn't work. 79 00:03:52,110 --> 00:03:55,350 ‫So, that experiment actually doesn't really work. 80 00:03:55,350 --> 00:03:59,460 ‫But so, to check the error state here, 81 00:03:59,460 --> 00:04:02,910 ‫let's again quit our fake API 82 00:04:02,910 --> 00:04:05,850 ‫and so, then we should see some error. 83 00:04:05,850 --> 00:04:06,683 ‫And indeed. 84 00:04:08,520 --> 00:04:13,520 ‫Now here, this dispatch was called with this event type here 85 00:04:13,913 --> 00:04:16,620 ‫which then set our status to error. 86 00:04:16,620 --> 00:04:19,593 ‫And so, therefore, then we got this error component. 87 00:04:20,610 --> 00:04:24,153 ‫But of course, let's restart our server. 88 00:04:25,050 --> 00:04:25,893 ‫And so, then, 89 00:04:27,360 --> 00:04:29,309 ‫it should be back to working. 90 00:04:29,309 --> 00:04:30,142 ‫Yes. 91 00:04:31,507 --> 00:04:32,340 ‫Okay. 92 00:04:33,270 --> 00:04:36,990 ‫And we have another state or status that we can handle 93 00:04:36,990 --> 00:04:38,880 ‫which is the ready status. 94 00:04:38,880 --> 00:04:42,300 ‫So, ready basically means that the questions have arrived 95 00:04:42,300 --> 00:04:44,673 ‫and that we are ready to start the quiz. 96 00:04:48,240 --> 00:04:51,690 ‫So, status ready, 97 00:04:51,690 --> 00:04:55,770 ‫and here we will want to create yet another component. 98 00:04:55,770 --> 00:04:57,663 ‫So, let's just check that out. 99 00:04:58,560 --> 00:05:00,030 ‫So, here in the demo, 100 00:05:00,030 --> 00:05:02,249 ‫and this actually is what we want to show 101 00:05:02,249 --> 00:05:03,750 ‫in the very beginning. 102 00:05:03,750 --> 00:05:05,163 ‫So, when the app is ready. 103 00:05:06,120 --> 00:05:07,410 ‫So, when we load the app, 104 00:05:07,410 --> 00:05:10,920 ‫you briefly saw the loading indicator there flash, 105 00:05:10,920 --> 00:05:13,950 ‫and then this here is the start screen. 106 00:05:13,950 --> 00:05:16,380 ‫So, just with this text, number of questions, 107 00:05:16,380 --> 00:05:17,823 ‫and then a button to start. 108 00:05:18,960 --> 00:05:20,880 ‫So, very simple stuff. 109 00:05:20,880 --> 00:05:24,450 ‫So, let's create a new file here for that component 110 00:05:24,450 --> 00:05:26,040 ‫and I'm gonna call it 111 00:05:26,040 --> 00:05:30,693 ‫the startscreen.js. 112 00:05:31,740 --> 00:05:35,190 ‫And then again, using that snippet rfc, 113 00:05:35,190 --> 00:05:38,670 ‫which by the way, stands for React Functional Component. 114 00:05:38,670 --> 00:05:42,540 ‫And so here, let's place some texts. 115 00:05:42,540 --> 00:05:47,540 ‫So, starting with welcome to the React quiz like this 116 00:05:51,420 --> 00:05:54,840 ‫and then a paragraph with the number of questions. 117 00:05:54,840 --> 00:05:56,470 ‫Let's just place an X for now 118 00:05:59,520 --> 00:06:04,520 ‫To test your React mastery. 119 00:06:04,620 --> 00:06:06,770 ‫And then this diff should actually have 120 00:06:06,770 --> 00:06:09,693 ‫the class name of start. 121 00:06:11,010 --> 00:06:13,593 ‫And here, let's use an h3 instead. 122 00:06:15,030 --> 00:06:20,030 ‫And then finally, also that button which says let's start. 123 00:06:22,500 --> 00:06:23,760 ‫Okay. 124 00:06:23,760 --> 00:06:25,857 ‫So, that's enough for now. 125 00:06:25,857 --> 00:06:29,103 ‫And then let's indeed include that right here. 126 00:06:30,030 --> 00:06:32,940 ‫So, start and then here VS code. 127 00:06:32,940 --> 00:06:36,330 ‫This time actually suggests the import for us. 128 00:06:36,330 --> 00:06:40,890 ‫So you can see that here by the path name to the file. 129 00:06:40,890 --> 00:06:42,300 ‫And so, if we click that, 130 00:06:42,300 --> 00:06:45,873 ‫then that import is nicely automatically added. 131 00:06:46,740 --> 00:06:50,160 ‫So, if we save this now, then here we go. 132 00:06:50,160 --> 00:06:53,220 ‫So, we basically reacted or we handled 133 00:06:53,220 --> 00:06:56,430 ‫to that ready status there. 134 00:06:56,430 --> 00:07:00,480 ‫Now, what we want here is actually the number of questions. 135 00:07:00,480 --> 00:07:02,430 ‫And so, that's basically the length 136 00:07:02,430 --> 00:07:06,090 ‫of the questions array right here. 137 00:07:06,090 --> 00:07:08,910 ‫So, the questions array has the length of 15 138 00:07:08,910 --> 00:07:11,013 ‫and so, 15 is what we want to see there. 139 00:07:12,210 --> 00:07:15,780 ‫So, where do we calculate that value? 140 00:07:15,780 --> 00:07:20,310 ‫Should we maybe place it here also into our state object? 141 00:07:20,310 --> 00:07:23,460 ‫Well, that's actually not necessary. 142 00:07:23,460 --> 00:07:25,890 ‫So, just like we have always been doing, 143 00:07:25,890 --> 00:07:28,290 ‫we can just calculate derived state 144 00:07:28,290 --> 00:07:30,510 ‫right here in the app component 145 00:07:30,510 --> 00:07:34,080 ‫because in fact, this is just derived state 146 00:07:34,080 --> 00:07:35,790 ‫because we can simply calculate it 147 00:07:35,790 --> 00:07:38,580 ‫from the question array itself. 148 00:07:38,580 --> 00:07:43,580 ‫So, let's just do num questions is just equal to questions. 149 00:07:46,110 --> 00:07:48,630 ‫So, it should be questions here. 150 00:07:48,630 --> 00:07:50,010 ‫Let's see. 151 00:07:50,010 --> 00:07:52,860 ‫Yeah, it's questions everywhere. 152 00:07:52,860 --> 00:07:56,493 ‫So, just questions.length. 153 00:07:57,630 --> 00:08:00,750 ‫And of course, we could also pass the entire array 154 00:08:00,750 --> 00:08:04,380 ‫into this component, but there's really no need to. 155 00:08:04,380 --> 00:08:07,023 ‫And also, we will need this in other places. 156 00:08:08,640 --> 00:08:12,240 ‫So, let's pass the number of questions 157 00:08:12,240 --> 00:08:14,913 ‫equal two number of questions, 158 00:08:15,750 --> 00:08:18,090 ‫so then we can receive that here. 159 00:08:18,090 --> 00:08:23,090 ‫So, destructuring and then num questions. 160 00:08:23,760 --> 00:08:28,760 ‫And finally, num questions here as well. 161 00:08:28,980 --> 00:08:30,240 ‫And beautiful. 162 00:08:30,240 --> 00:08:32,290 ‫Now we get 15 questions 163 00:08:33,750 --> 00:08:35,430 ‫like this. 164 00:08:35,430 --> 00:08:37,140 ‫And now, all we need to do 165 00:08:37,140 --> 00:08:40,230 ‫is to add some more class names here, 166 00:08:40,230 --> 00:08:45,230 ‫which is the btn and btn ui class. 167 00:08:45,420 --> 00:08:50,130 ‫And as always, feel free to check those out in the CSS file. 168 00:08:50,130 --> 00:08:50,963 ‫Okay. 169 00:08:50,963 --> 00:08:51,796 ‫And so, with this, 170 00:08:51,796 --> 00:08:55,470 ‫we actually fulfilled our goal for this lecture. 171 00:08:55,470 --> 00:08:58,740 ‫And so, in the next one, we will then finally start 172 00:08:58,740 --> 00:09:02,223 ‫our game or our quiz by clicking here.