‫So, with our reducer now in place,
‫it's time to handle the different status
‫that the application can have.
‫So, remember that at the beginning,
‫our application is in the loading status.
‫So, that's how it starts.
‫And then when we receive some data,
‫the status change to ready.
‫And so, that's when we will then want to display
‫the list of questions.
‫And also, there can be an error.
‫And so, then the status changes to error.
‫And so now, we want to display different UIs
‫for these three situations.
‫And all of these situations will be always displayed
‫inside this main component right here.
‫So, let's get rid of this.
‫And now we will conditionally display some components.
‫And so, here, we can use state.status
‫but that's maybe a bit too much work.
‫And so, let's actually destructure our state object.
‫Now, we could do that outside.
‫So, creating these variables here
‫but we can do it on the fly.
‫So, basically right here with nested destructuring
‫so we can have the questions
‫and the status state destructured right here.
‫And so, now, state of course no longer exists
‫but we have status.
‫And so, now, we can just check,
‫for example, if it is loading.
‫And if it is, then we want to display something.
‫Now, in this case, we want to show a loader
‫and I actually also already have that loader component here.
‫So, it's again, a very simple presentational component.
‫And so, there was no need to create it from scratch.
‫So, it doesn't even receive any props.
‫And the same thing also for the error component.
‫So, exactly the same thing,
‫doesn't receive props, has no state.
‫And so, I thought we could save some minutes
‫and not write them manually here in the video.
‫So, here, if this status is loading,
‫we want to display that loading component.
‫And let's include that here
‫but just duplicate this line.
‫And actually it's called loader.
‫And then let's also already import the error.
‫So, here that is loader.
‫And then we have some problem here.
‫State is not defined.
‫But while I'm using state nowhere,
‫maybe let's just try to reload
‫and that fixes it.
‫Okay.
‫And now we can just do the same thing again
‫because these different status
‫are of course, mutually exclusive.
‫So, we don't need any turneries or even nested turneries.
‫So, only this one or this one
‫or one of the next ones will be true.
‫And yeah.
‫So, we can just use the end here.
‫All right.
‫But here, let's use the error
‫and let's already try this out.
‫So, let's see if we briefly see the loading.
‫And we saw, but it was very short.
‫So, just to make sure, let's do some throttling here.
‫So, make our app a little bit slower.
‫This can be a bit smaller.
‫Yeah, there we go.
‫So, there we are loading our questions.
‫And now, let's also pretend
‫that we have no network connection
‫so that we are offline.
‫And so then, when we reload,
‫well then of course, the entire page doesn't work.
‫So, that experiment actually doesn't really work.
‫But so, to check the error state here,
‫let's again quit our fake API
‫and so, then we should see some error.
‫And indeed.
‫Now here, this dispatch was called with this event type here
‫which then set our status to error.
‫And so, therefore, then we got this error component.
‫But of course, let's restart our server.
‫And so, then,
‫it should be back to working.
‫Yes.
‫Okay.
‫And we have another state or status that we can handle
‫which is the ready status.
‫So, ready basically means that the questions have arrived
‫and that we are ready to start the quiz.
‫So, status ready,
‫and here we will want to create yet another component.
‫So, let's just check that out.
‫So, here in the demo,
‫and this actually is what we want to show
‫in the very beginning.
‫So, when the app is ready.
‫So, when we load the app,
‫you briefly saw the loading indicator there flash,
‫and then this here is the start screen.
‫So, just with this text, number of questions,
‫and then a button to start.
‫So, very simple stuff.
‫So, let's create a new file here for that component
‫and I'm gonna call it
‫the startscreen.js.
‫And then again, using that snippet rfc,
‫which by the way, stands for React Functional Component.
‫And so here, let's place some texts.
‫So, starting with welcome to the React quiz like this
‫and then a paragraph with the number of questions.
‫Let's just place an X for now
‫To test your React mastery.
‫And then this diff should actually have
‫the class name of start.
‫And here, let's use an h3 instead.
‫And then finally, also that button which says let's start.
‫Okay.
‫So, that's enough for now.
‫And then let's indeed include that right here.
‫So, start and then here VS code.
‫This time actually suggests the import for us.
‫So you can see that here by the path name to the file.
‫And so, if we click that,
‫then that import is nicely automatically added.
‫So, if we save this now, then here we go.
‫So, we basically reacted or we handled
‫to that ready status there.
‫Now, what we want here is actually the number of questions.
‫And so, that's basically the length
‫of the questions array right here.
‫So, the questions array has the length of 15
‫and so, 15 is what we want to see there.
‫So, where do we calculate that value?
‫Should we maybe place it here also into our state object?
‫Well, that's actually not necessary.
‫So, just like we have always been doing,
‫we can just calculate derived state
‫right here in the app component
‫because in fact, this is just derived state
‫because we can simply calculate it
‫from the question array itself.
‫So, let's just do num questions is just equal to questions.
‫So, it should be questions here.
‫Let's see.
‫Yeah, it's questions everywhere.
‫So, just questions.length.
‫And of course, we could also pass the entire array
‫into this component, but there's really no need to.
‫And also, we will need this in other places.
‫So, let's pass the number of questions
‫equal two number of questions,
‫so then we can receive that here.
‫So, destructuring and then num questions.
‫And finally, num questions here as well.
‫And beautiful.
‫Now we get 15 questions
‫like this.
‫And now, all we need to do
‫is to add some more class names here,
‫which is the btn and btn ui class.
‫And as always, feel free to check those out in the CSS file.
‫Okay.
‫And so, with this,
‫we actually fulfilled our goal for this lecture.
‫And so, in the next one, we will then finally start
‫our game or our quiz by clicking here.