Django Rest Framework Series - Build a Django DRF Quiz API - Part-2

so let me just give you a preview of what we're going to build so in the previous tutorial we created the django api so we built the models and i've set up some data here so we've got two quizzes available in this quiz um i've created some questions for one of the quizzes the django quiz so that's all we have available here in the background in terms of the data that's in our api so we're going to build in react a simple front end that's going to collect that data so you can see the two quizzes here that we've created collected the data from the api and then we can go ahead now these are just random quizzes now in the previous tutorial we built some endpoints for a random quiz facility or random quiz uh feature so we're going to use that in this tutorial now we will build upon this throughout the series so this is kind of like a baseline or initial build for our front end so what we're going to be able to do in this tutorial is we're going to start a new quiz and just show that we're collecting individual questions related to that quiz now here we're going to be able to select because questions might have multiple answers so here you're going to be able to select more than one answer and press submit and then receive a reply now again i'll show a baseline here how to do that you can go ahead and add to this and change things around how you want to of course now the correct answer once it's been selected so you can see i can keep continuing my answer until i get the right answer which is um this one and there we go so then i can go to the next question and this question actually looks like a question so again i can try and select the right answer and so on until i get the right answer press submit then i can select another random question now obviously i've only got two questions you might have more questions in your quiz but that's pretty much it so at the moment i'm not tracking the score or anything like that this is just to kind of get a baseline and really just to showcase how to get data from your api rather than to focus on react now i will be going over and i will be building a framework for our application which we can build upon um so like i said we will build new things into this application as we go along throughout the series so everything up here is just a placeholder there's nothing working here and these are just all placeholders down here so nothing is working down there like i said we fill those in later and then in the next tutorial i want to focus on the application process or sorry the user registration and login process so that would be the next tutorial in this series and i know i've had a few requests in regards to setting up email confirmation and so on so we'll go through that in the next tutorial okay so let's get started building our react application so i'm going to make an assumption that you've got node.js installed because you're going to need some of those dependencies that come with that installation so let's go ahead now and actually build so mpx and create react so we're going to use the create react app app and i'm going to call this app just core so that's going to go ahead and download install and set up our application ready for us to start building okay so that takes a couple of seconds to complete so let's go ahead now and run the npm and start that's just going to check to see if everything is working okay so you can see here that by doing that you'll notice that there is a problem because one thing that i seem to forget to do is also you need to then cd into the core so everything is installed inside of this core folder so the first thing you need to do is cd move into the folder called core and from there you can then run mpm start okay so that's the first problem that you might receive and that's solved so once that's completed you'll be presented with the the default kind of react theme um or view here so we need to now go ahead and change this so let's first of all just strip out all the things that we're not going to need so the majority of the files are going to be in the src folder here so i'm just going to remove everything that i don't need so i'm not going to need the logo here and we're not going to use the report web vitals at the moment we're bringing that back in later and all the tests etc um so we can just get rid of all of those um so we're just going to leave the app.js we don't need the we don't need the index.css at the moment we can remake that later um so all we're left with is index app and app css so what we can also do in the public we can just remove some of these items if we want to just to kind of clear everything up here um so that's what you were looking at initially when we loaded the react page now the manifest we could change this if we wanted to but um yeah let's just get rid of the icons for now and we can change the name etc but we'll just leave that as is um there's nothing in there i don't think we need to change and then let's just remove the fab icon we won't worry about that for now so we'll just get rid of the fab icon there so these are kind of optional things you don't need to do this essentially uh just to tie these things up maybe um we could change all these bits and bobs here but okay so that leaves us with a kind of a baseline here of index.js the app.js and the app.css which we can also delete let's just delete that too there we go okay so now we're ready index and app.js so for anyone new starting with react and you're wondering what the hell is going on here essentially uh just to briefly describe what's going on here when you load the racked application it's going to be loading up the index.html page here so this is going to be connected to uh the let's just say it's going to be connected to the index.js that's kind of the entry point into our application and you can see here that we move down we've got this uh can this point here or this connection here reference to the app.js file so essentially this file here is going to be placed in the middle here which represents what's on the page so that's how everything is kind of connected at out up at the moment index page loads the index js and the app component here is being loaded in the middle of the page okay so let's think about a folder structure uh so we're going to need a new folder let's call this uh components uh so we've got our components folder so we're going to place individual components in there so we can start to manage our application more effectively so the idea is we create small components that we can bring into our application small reusable components so this is why we break our applications into smaller components so that we can reuse these components in other places of your application plus it can make it easier to kind of manage your application so let's uh get a new fold in here called i'm going to call this folder framework so inside of here is just going to be for example the header and footer that's going to appear on every single uh page so i'll go ahead and make a new file called header.js or make a new component and then a footer so those are two components that will appear in every single view that you see the header and the footer so the head is going to have the title the footer is going to have the uh the footer section that you saw in the preview we're also going to build an api folder so what i want to do here is kind of separate the ipa the i the api sorry um mechanics or the functionality away from the main application so we can manage the api connectivity and bringing in the data within a different component so we can then reuse that component throughout our application so let's just create a new folder and we're going to call this one let's just call it api okay so now we've got that in place that's pretty much the folder structure for our application so let's head over to the index page and we're just going to tidy up this section so we don't have the import the index sorry the css page anymore so we can take that out we don't have the vitals either so we can remove that too from our application for now there we go so that's just kind of tidy that one up if you head into the app.js file now you did um when we looked at the server when we run the server initially you saw a lot of things on the page so we can just tidy that up so let's just go ahead and delete all this div here so we don't need that anymore now we'll make a complaint here because we don't actually have anything inside of the return which isn't a problem for now if you're not familiar with react when when you return something you're going to need an outer element and then add all your data inside of it for example so what you couldn't have is if you started building a pattern like this for example you can see that there's going to be an error because this isn't wrapped within one element so there's a few ways of getting around that so we can use the this type of pattern here and put some things in between not a problem or we could use the let's just uh bring in a component from react so import react from react so what we can do is use the react fragment for example so this allows us to kind of group a list of elements or elements without adding kind of any extra notes so this is going to allow us to have two divs instead of wrapping them up for example so from here we can use a react um this needs to be in brackets so react dot fragment there we go so we have a start and an end okay so that's just a general fragment and from within there we can start to build our different elements so one of the good features of utilizing visual studio code is you can see that some of this text is kind of grayed out slightly and that's suggesting that it's not being utilized within the application and therefore we can remove it so let's just go ahead and remove this svg because we know we've deleted it anyway and in addition to that we don't need to import the css anymore because we're not using that so that kind of strips the app and i think now we've stripped out everything that we're going to need we set up all the framework and we can now move on to actually building the application so as i previously mentioned the index page is going to be loaded up uh on the front end that's going to load up the index page and you can see that then we are bringing in this application which we've imported in and we're placing it this kind of component right here and then it's going to display whatever's inside of this app component so there's kind of a hierarchical structure here that we're developing so let's just go ahead and just add a div here just to show that's the case so let's just say hello let's go for the hello world any excuse there we go so let's just um load this up so it's compiling at the moment um it seems to be an error blah see complying okay we'll just close that okay so let's just uh npm start this okay so that's kind of loading up on my other page okay so here it is it just says hello world so you can clearly see hopefully now what's happening like i've already mentioned the index page contacting the the index.js page and then we've got that app page being loaded up and that's what we're actually seeing on the page so let's go ahead now and build our header page so back in your folder structure here have the header js so this component is going to be utilized to put on the top of our component or on the page so we can see a basic header so for no particular reason we're going to build our application with material ui and this is going to give us all the kind of visuals that we need to design our application so down here on the left hand side we've got different components that we can bring in boxes and containers sliders switches app bars etc so if you go over to the app bar you'll see a list of different options we have for the app bar so we're going to just utilize one of these copy some code in and then utilize that as a placeholder for now so now you go ahead and actually npm i material ui core so that's going to install the main packages for the material ui so that we can bring them into our project so now we have material ui available all that we need to do at this point i'm just going to mp and start the application so this is also going to give us some indication of anything that's not working of course so it's handy to have it open or on while we're actually building our application so let's go over into our header and now let's go ahead and start building so let's start by setting out our application so export default for example function and let's call this function header and we're going to then need maybe a return here so we're going to return we're going to return some code that's going to structure actually build or display the header on the page okay so that's that done at this point so we've exported or able to export this header onto another component so now let's start to think about what we're going to need here in order for us to utilize the material ui so in order to utilize material ui we don't bring it all in at once the whole package we bring in individual components so we're going to need a few components as well as setting out some of the css so we can write css within this page what we need to do is just define the fact that we're going to do that with material ui so first of all we're going to create this variable classes that's going to be called use styles so we're going to make this um this available here so that we can access our styles that we're going to create in a second so this variable here brings in use styles from material ui um but also it can access to some css that we're going to build so now what we can do is uh just to find um the space for that so let's call this use styles equals make styles and then say theme okay so there's only gonna be need one there i think that that's good okay so in here for example now we can actually define some styles so for example root um so we want this to kind of flex grow one how about that so that's just a simple way of setting out a style here um that should be okay um now there's some code issues here so let's have a comma there so we're opening and closing and then we've kind of missed a close okay so now that's in place we've essentially disconnected or made available our use styles um our styles that we can then include within our application so let's go ahead and actually bring in some of the other items that we're going to need so we're going to need to actually bring in from material ui make styles so let's go ahead and do that so um i'll go ahead and just copy that in there we go so that kind of connects that up nicely now the reason why this is underlying is because we're not actually utilizing it yet in our application so don't worry about that for now so that kind of brings everything together there so we can create our own styles within our application okay let's go ahead now and set out a new framework for this so this is going to be a an outer element for our application so you can see that here i've brought in let's just move this around you can see here i brought in classes.root so this is how i'm going to call my new classes that i've applied or i'm defining at the top here now if you're not too familiar with flex grow now material ui is utilizing flexbox um which allows us um the tools to kind of manage the layout alignment sizes of grid columns navigation components etc so flexgrow is a built-in um css functionality um so if you're not too sure how to use flexbox then just head over to kind of flexbox or type in flexbox into google have a look but of course you can go to the material ui website and then if you let's go over to here and just type in uh flex grow from the flex box area here it takes you through the different ways you can manage the dimensions and the structure of your page so if you're not too sure what that is just have a quick read of that so we're using flex grow one which is going to provide us a kind of a fix width column okay so that's our first uh element in place so now what we're going to build inside of here maybe this is kind of an outer container is this is going to now be our app bar so we're going to build an app bar so this app bar is a an element from material ui so because it is that you're going to need to import this in so if you go to the top you'll just need to include that in so we can then have access to all of the items so you see um because i selected the option uh when i created it um you can see it automatically is imported for me so let me just show you that again so you can clearly see that happening so if i um type in app you can see it says auto import from and that will say obviously material ui there there we go so you can see it's automatically being imported in when i need it so now i've got my app bar i can go ahead now and just consult the d the uh the manual so app bar so from here you can see that i can just start to copy and paste some of this code out depending on what app bar i want so there's a source here if you need more information or more code based upon what's happening here you can have a look at the code um so go ahead and choose an app bar um we'll go ahead and just build our own app bar very quickly so one of the details you're going to find on the material ui website all the different attributes that you can apply so here i'm going to have an app bar that's static i'm going to use a default color whatever the default color is for this app bar i think it's blue and then elevation so here we can add some elevation which is going to provide some sort of if we for example take an example here you can see that there's some there's some gray elements here which it's kind of making it into a 3d effect it looks like it's kind of elevating from the page so we can define if we wanted that kind of elevation so you can see like i said this gray section here which is kind of providing a shadow from the bar making it look like it's popping out of the page slightly so that's a elevation and then we give it a class name of classes.app bar so that we can add some additional styling here so let's just um add some additional additional styling if you need it of course that's totally optional maybe you don't need that so i'm not i haven't got any additional css here that i need but that just shows you how to connect that up if you do need it so in material ui we have different components within components we have the app bar which defines certain parameters here we've got the elevation etc so within our app bar we then have different other different components that we can include so now we need to define a uh a toolbar so you can see i'm going to use the auto import again and that's going to appear or not uh at the top here if it does need any imports so the toolbar does need an import so um you can see oh sorry it is imported so you can see it here so we've imported the toolbar um so that's all good so this is going to provide us a toolbar so we can now add some items within this toolbar it's going to be a separate area within our app bar where we can add some different items now typically within material ui if we want to utilize some text we would utilize typography which is going to then also provide us some additional options so we can manage our text again a little bit more efficiently so here's typography so again i'm just going to import that in manu um automatically here from material ui so we bring that component in and now we can start to think about well this is going to be the name of of my application so here's kind of the heading or the name of my application it's going to be called quizzes so i'll go ahead now and think about some of the different parameters that i might want to apply to that okay so just to add some different parameters here let's talk about variance so here's just typical css variance so h1 to h6 that's going to describe the size of my text we're going to inherit the color from material ui whatever the default setting is and then we're going to say no wrap so this is going to be another flexbox attribute so it doesn't wrap my text but i'm only using one word so that's not really relevant here so let's just get rid of that and then we can also add a class name again if we wanted to add some additional um if we wanted to add some additional kind of options here so let's just go ahead and set this up so we're going to have toolbar title we're going to use a flexgrow one again that's just going to provide the scale for this um in different sizes of screens so we're just going to say one right so now we have that in place um so that should be the the heading so let's go ahead now and just save that up and i'm just going to import that in just to show that it's working now if you head over to the app.js file i've started to import this in so let's remember the app file here is in the root directory the src folder and we want to get into the framework to access the header file so in our app.js i've started typing import header from and now this is where i am and this is where i need to get to so i need to start off in this folder and then i need to go to components and then i need to go to framework and inside of framework is the header there we go so we've imported that component into this page and now we can utilize it so the way that we can utilize it is just by naming it there we go and that should bring that component into this page or into this component sorry um so it looks like it's working okay because we don't have any errors here so let's just go back to our app here refresh and there we go we now have this app bar it says quizzes it's slightly gray you notice and it's uh it's getting to where we need to get it to but notice also we've got this um this border around um our page here so this um margin sorry is a default margin our browser applies to our page and if someone can tell me after many many years of why your browsers do this i'd love to know why this is the default option still because how many websites do you see where this isn't this is the default option um so yeah we we start with a margin around the page so what we're going to need to do is just go back into our application and now just bring back in um our our css so let's just um let's just bring in a new file here okay so we're going to create an index.css let's bring it into our application so i've made it into the wrong folder and then inside of here what we're going to do is just uh set out some simple css so body and then margin that's going to just be 0 pixels so that's just going to remove that margin around our page so obviously in the index page i need to bring that back in again so go into your index page of course and then you just need to import that in so let's import index dot css so the dot is referring to this directory because the index page here and the css page is in the same directory structure um so let's just say dot so this folder look for a page or a component called index.css okay so we go back to our component here and refresh we shouldn't need to refresh but we refresh and you can now see that that margin has been removed okay so you've just brought in a component into another component so we can view that component so you can hopefully start to see how now making smaller components we can now import those or utilize those and other components to build up our page so we're not going to be utilizing this app page to actually um show anything we're going to be utilizing this app page to kind of set up the rest of the application so we're going to need to set up urls so that we can navigate to different pages of our application so now what we need to do is set up the router and the react router so that we can navigate to separate pages right so the first thing that we're going to need to do is actually bring the react router in so let's go ahead and npm install that so let's just close that and clear that so npm uh install and then we're going to install the react router dom okay so what we're going to do here is just configure the app file uh we're going to configure the app component to direct the component to different components within our application so this is going to make sense in a second uh so let's just get rid of in our app here let's just get rid of these components here we're not going to need those for now and then that means we don't need to print and react again okay so what we're going to do here is just set out our router so the router is basically going to describe what routes are available within our application and those routes will refer to different components that we can access so we're going to need a home page for this application and we're going to need another what i say page or component to show the quiz the actual quiz questions so those are two different views that we need to set up and those required two different paths within our system to access those components so let's go ahead and we've brought in router um so we're going to need to define that in a minute uh so let's just do that now so uh let's just uh well we don't need this header anymore so import uh we're going to need the router and that's going to be from the component we've just installed so from that's going to be the react router dom there it is okay so we bring in router so now we can just describe our links that we want to build so let's go ahead and switch this up there we go um so switch is going to provide us um the ability to describe the different routes that we're going to have within our application here so now we can go ahead and describe our routes so these routes refer to individual components that we want to link to within our application because remember we're building a single page application here so we still want to want to be able to kind of link around to different views like we would do a normal web page so we go to a web page we click on the categories page that takes us to the categories page but of course here we're using a single page application so we're just going to need to build up our links here so we can actually access those different kind of components or those pages as i might describe it so our route here is going to describe a path so that's going to be the path so if someone goes to the main home page which is the root page here we're going to then tell them which component they should see so if we set up for example here a page called categories then we then describe what component should be shown when we go to the categories page and this path here represents what we type into the browser into the url so slash categories etc so here's the path the home page for application and now we can just define the component that we want to associate that to so this is going to be our landing page for our quiz so uh this is going to be our quiz selection page our home page for the quiz i'm going to call that quiz select so that is a component we have we haven't built just yet so let's go ahead in components let's add a new file and i'm going to call this file quiz select or this component quiz select.js so that's a new component i'm going to build so now i have that in place let's just go back to the app.js i'm just going to close all these so we don't have too many open so i'm in the app.js so that's a quiz select component now i need to bring that component in of course so i just need to remember where i am i'm in the root directory here so i need to import and the we're going to say quiz select from and that is going to be from i mean the component so i need to go into the components directory to find that and then it's going to be in there so inside of there is a quiz select file and there we go so i've connected that up so now what i'm saying in my application when i open up the application that's the root directory it's actually going to show this component that's what i'm doing so here hopefully you can start to see that this router is defining when i um define in my browser the uh the url or the path it would then show the difference components depending on the different paths i type in or utilize within the browser so what i can also do here well let's just uh work let's just do this first so this is the home page now for our application so let's go ahead now and just go into the quiz select file here and let's just build something here just to show you the fact that when we run our application now it's going to look for the path and then it's going to look for the component and load that component which is the quiz select component so let's go ahead and start building this up so let's build the export um this is going to be called quiz select right um select so um let's just do it this way okay so we're going to need a return here so we're going to return something eventually so let's just build that in okay so that's our quiz select so what we're going to do here is just uh import the header so we're going to need the header on this page aren't we so we just need to remember where this page is so this is in the components and we want to go into the components framework folder to get the header so let's go ahead and do that so let's import the header from that's going to be the framework folder and then i want the header so here in visual studio code you can see it's prompting me um in terms of what files are inside of those folders which is handy and so then i can go ahead and within this placement here i can then bring in the header there we go okay so just to finish off we export default quiz select okay so that kind of finishes off that page there the quiz select page so let's disclose that and start the application so npm start and then go back in to your application and you should receive this error here location of undefined so if you go over to this post here uh react router uncourt cannot read property location of undefined this is a really simple problem um which you might find so simply because we're utilizing version four and not version three of the react router dom uh you can see that we're going to need to bring this in slightly differently here so let's just go ahead and in our app.js file here let's just bring that in separately so the browser router as router so let's just remove router from this list here so we're bringing in root and switch from the root rack root dom and then browser router as router from uh react router dom here or so i'll just buddy those up so let's try that let's go back into our application and see if that works and there we go so there we have our new app started so i do hope at this point you've got a general feel of what's happening here of the structure of this application we've got these components that we're building individually and then we're bringing in bringing them into our application to build up our application so we remember that we've got this index page here connected to our index page here this is connecting to our app components and our app component component we're describing what other component to show based upon the root which is the url so let's go ahead now and actually start to finish the quiz select because what we need to do now is bring in the data from our django api so that we can actually see some data on our react front end so we want to be able to collect all the quizzes that are available within our quiz system and show them on the page so that users can select the quiz that they want to take so i guess this is a two-step process we need to collect data from our api pass it over to the component so that then the component can then format it and display it on the front end or to the user so because collecting data is very generic we're going to make a separate component for this so let's go ahead and into our api folders that we created earlier and let's just call this um let's just call this api shall we or connect api connect i'm just going to call this yeah let's connect api dot js there we go so i'm going to call mine connect api and js is going to be a generic component which i can use for all of my other components when they need data from the api so to help us build an api or collect data from apis we're going to utilize another package that's going to help us do that so we're going to utilize axios here in this application so let's go ahead and just stop our server and we'll go ahead and actually import axios into our project so this is a simply the case of typing in mpmi and then axios there we go so that will bring in axios into our application this is a an api facility that's going to allow us to easily connect to our django api and collect data from it so now that is done of course you don't need to use this there are other ways of doing this so we have a kind of a a default way inside of react if you wanted to use that so we're going to use axios it provides some great tools and is easy to use so let's go ahead and use that so let's just close everything here let's go into our connect api js components and the first thing that we need to do is to import axios so that just gives us access to all the tools that it provides there we go so let's go ahead and build this so right um let's call this let's call this uh collect collect data there we go so we're going to call this collect data now what we can do is we can pass in a url so because the collection of the data is going to be generic for all of our different components so when we collect data we're going to collect in exactly the same way except for one thing now remember our api has an endpoint that endpoint describes the data that we can collect so um if you remember in the previous tutorial we created i think was two or three endpoints one endpoint which collects all the data about the quiz so we can then show all the quizzes that are available to the user and then we also create an endpoint for a random question so the process of collecting that data is the same except for the url will be different because we have different endpoints for different data that we want to collect so we can just pass in that url to collect data from that endpoint now because we're using asynchronous connections here that means that when we make a request we may have to wait a couple of seconds for a reply but we still want our application to go on and work for example or maybe to perform other activities so to kind of indicate whether we're waiting or not it'd be good to have some sort of indication wouldn't it so let's first of all let's build or let's set up the facility so that we can actually determine whether we're waiting for data to be returned or not so we're going to set up this uh storage here so that we can store whether we're actually fetching or not so let's just set up this state is fetching so we're going to set this to false to begin with so what's going to happen here then is that when we make a request to the api um this is going to be set to true so it is fetching once we've received the data from the api we then set this to false so what we can do on the screen in terms of the user is that when this uh is set to uh true we are trying to fetch data it would tell the user that we're trying to fetch data when the data is returned then that will disappear and actually then show the data so this is kind of a crude method of of doing this um so this would just be handy um for us to explore later on potentially setting up a more robust way of of doing this but this will work most differently but we won't actually set up many of the different visuals here we'll just have a a piece of text that will say data is being fetched and i'll show you that working so now we want to use a use effect so if you're not familiar with react hooks use effect is basically going to allow us to perform an action as soon as this component has been initiated so what we're going to do here is we're actually going to when this component is called it's going to automatically initiate this code within here which is obviously the fetching process collecting the data from our api right that's what we want to do now we notice that we're going to need to bring this in to our application so let's just uh import that in so we're going to also need the state as well because we're using use state so we're going to need to bring that in the same time so use effect and use state now we know that we're using hooks a reactor x because we're using the use so that normally um defines a a hook a racked hook um so we're going to bring those two tools in because we're using them and that's going to be from react there we go so let's just move this down it's in the wrong place there we go um [Music] okay so that's good to go at the moment so we're going to store whether we've fetched a data or not and we're now going to configure the collection of the data so we're going to be working within these curlies here we're going to move that so let's just move that there provide a comma okay so we'll define this and we'll describe this in a second okay right so the first thing we're going to do uh let's just actually set up um and create a a request so we can send some data over so let's just call this uh fetch data from api so this is going to be an async we're utilizing asynchronous kind of requests so async and then what we want to do now is we want to try collecting data from the database uh so let's just give this a go um so right so now we've set this out we're going to be using asynchronous kind of connectivities or a request here so we want to now actually try and collect data from the api so because we're trying to collect data from the api the first thing that we're going to do is we're going to change the state here to true because we are fetching so let's just uh do that first so we're going to need to use the set fetching so let's go ahead and set fetching so here what we're going to do now is just define the fact that we are going to now start fetching the data from the api so we're going to set the data set fetching to true so just to let everyone know that we are fetching data so is fetching is now true so remember here this is how we're going to collect the data from this state and this is how we're going to set data within the state so this is why we're saying set fetching and then defining is fetching now to true so now we want to actually get data from our api right so uh let's do that and store it in a response so we're going to restore whatever data is returned from the database so await oh wait um axios so we're going to wait for axios to return some data from our database now we want to now send across to axis so we're using axios get which is an axis command and then what we need to do is just pass in the details of our get request so what we want to do is we want to tell axios where to get the data from and that's going to be from the url so what we're going to need to do now is just set up a a data state for that so let's go at the top here so what's going to happen now you can see is i'm going to pass in the url to this function here and we're going to save that into the kind of initial state and then we can access that via api url so if we want to access this data here we can just we'll just type in api url here api url so that's how we can get the url um so what was going to happen eventually in our quiz select file is that we're going to find define the url to send across that's going to then be passed in and saved into the state and then accessed via api url so that's going to ch now fire off a request to the api and then return the data into this variable response so now we've collected that data i guess it'd be a good time now to actually well do something with it right so let's now just create a new state so that we can save that data now it's going to be an array so i'm just going to paste this in so data state and set data state so that's how we're going to collect data this is how we're going to set it and then we're going to um store it here as an array um and refine to as data so we can access it through the data property here so let's now set that up so what we want to do is set the data state and that's now going to include um anything that's inside already and then the data response so this is going to be the response and then what we need to do is the response is going to return so we're going to send a request to it axis so through axios get we're going to send a request to the url which is our django endpoint that's going to say be saved in response but to get the data from response we need to just drill down to response to the data so that's going then going to collect the data and put it into our state here so now we've saved all the data from our endpoint our django api endpoint and we can now access it via data state if we want to so that's our try um so what we want to do is just uh probably catch any errors um so let's just finish that off and let's just catch any errors um so if there is an error well we need to definitely set um fetching to true because we are still fetching remember so um let's go ahead and see what's inside of fetch and then is fetching we're going to change to true yep okay so if there is an error we can't find any data then obviously a fetching should be set to true because we are still trying to collect that data right okay so um that sets that out so we've got this uh catchy obviously we could um console log some of these errors and so on so we'd expand the error a little bit more if you wanted to so what we need to do now i guess is just make sure that that's complete okay and let's go ahead now and run it so we've called it uh fetch data from api okay so that's going to then fire that off um okay so the last thing we want to do here let's remove that last thing that we want to do here is we want to actually return something right so we've collected the data we've just done that so let's go ahead and return and this time we're going to return the data state remember if we if we have received data it's going to be stored inside the data the it's going to be set via set data state and now we want to access it so this whole process has collected data from our our api so what we want to do is return the data state and then it's just a export default and that's going to be called whatever we call this here so collect data okay okay so let's go ahead and test this out so head over to the quiz select js file uh let's go ahead and import our file first so we just need to remember where that is so we're in quiz select and we want to get to the uh folder so in components we want to get to the folder called api inside of that connect app so we need to here in this framework folder um we need to come out uh one it looks like so we need to come out of the components folder dot dot slash that takes us back a step that takes us into the root directory then we can go into the api and then utilize that component so i import that in and then i go ahead and just create this variable here so i'm just going to call this api url this is the end point where i want to collect the data so that's remember that's the variable or that's the data that i want to pass across to my connect so then i can go ahead and actually get the data and then use that url right here so it gets passed across into this state here and then we can utilize it so you can start to see how generic this is because i can just pass any url across now and look to see if i can get some data so i bring that in to this component and i set up my url and now i can actually then go and um request the data so i say connect api that's the um the function sorry the component we just made so we send that data across there and then it runs this piece of code here to check to see if we can get some data the use effect kicks in and so we return that data inside the data state and then i've just run this console log data state just to show that we've returned some data so let's go ahead now and just npm start your server should run up and then let's just go back to the the right page uh here we go so i refresh this page now that should have run all that code and actually now return some data from our api so let's just go into the console here and let's go into the object you can see it's returned two items and that's a zero and one and those are the two quizzes that we have inside of our django api here so let's just go over to our quizzes you can see we've got two items here okay so that's the only data that we've returned or that's the data that we've returned from our database so obviously what we can now do is just build some front end to display those two items now before we do that we need to go back into the django application so head back into the django application in order for us to actually get that working i've already gone the step further just to show that information is working but what you're going to need to do next inside of django is to install the core headers so in order for us to actually make a connection or to accept connections outside of our maybe development network we're going to need to install uh core headers so let's just go into our core and settings and you can see that i've already installed core headers so go ahead and install m not npm sorry django who uh pip install sorry pip install uh core headers if you're not too sure how to do that this is it here so pip install django core headers so just run that you'll notice that my application is running 3.5.0 that's the latest version as of recording this tutorial so once you've gone ahead and installed that go ahead and go into the core in your core settings add it to the installed apps and then what you need to do is just some a few different configurations if you move down to the bottom here um you can see there's two configurations i've set up the core allowed origins so you can see i've allowed the react origin which is running on localhost 3000 port and i've also just i'm putting cause allow origins true so it's kind of irrelevant at the moment that data but we just set it up so that we can accept external connections and actually connect to our api via react so yes once you've done that you can definitely then go back into your application uh refresh and it should be collecting that data data sorry from our django api okay so now i guess what we need to do is go back into our react application and actually do something with this data so let's just go ahead and kind of finish off building our application so we've got this header in so let's go ahead and actually sort out this footer so i've already described you the kind of framework that material ui utilizes in terms of the styles or importing the styles and then having to import the individual components for each uh part of what it is you're building so with the first row i won't go through anything amazingly uh detailed um but if i just bring this in here if you go over to material ui and then head over to the get started and then templates that's going to give you some basic templates to help you get started and what i'm doing here is you'll notice that my final output looks a little bit like this and i'm utilizing the footer for this application so that's what i've done i basically just utilized i've copied this code here uh have a look at the source code and i'm just utilizing this as a placeholder for now so if you go into pricing.js it gives you all the components to build up the whole page i basically gone to the bottom from footer and started to utilize the footer so i've kind of retrofitted it into this page here so just to give you an overview of what's happening um if you're not still too familiar from what i previously mentioned you can see that i've imported make styles to allow me to utilize uh my custom css or custom style here sorry uh type the typography so that's where i'm kind of configuring um text to be displayed in a certain way i'm utilizing links here so i've got links from material ui i've got a box a grid and container so that's what's being imported in this is the styles that we're utilizing like i said i have just copied this across so i haven't actually styled this myself so we've got this function here for this component that brings into the footer that comes into the footer called copyright so you can see this is kind of a function that we can import into our our page here so at the bottom here we've got copyright so you can see where that is being brought in inside of this box here um but there's not too much to say other than that just have a look through the code it's in the repository and we've got a container and inside of the container is a grid uh so this grid will define so a spacing of four justify uh space evenly so here we're basically just building a grid um four blocks across so we can actually then go ahead and build what we're doing down here so the grid down here for example um and then inside of here we've got this list so inside of the list notice what's happening here is that the data that's inside of our list is inside of this variable here and you can see how it's been kind of detailed out and then it's been mapped out so um it's not been it's been mapped out um via the data here or the text that you see on the screen okay so i do apologize we're not going through this step by step i didn't want to go through that just kind of try and concentrate because it's getting rather long now this tutorial um so like i said have a look in the tutorial a repository for this code just copy and paste it in and just have a look around and just familiarize yourself if you want to material ui all these different components here so now that's ready we can now go into the quiz select and just bring it in like we did the header so now we can bring in the footer obviously i need to import that in uh footer and underneath the header let's just do the same thing again so footer and this time it's going to be the footer there we go so when we go back into our page hopefully um if i open up the right window hopefully now we refresh you can see it's already there so now we have our header and our footer so this is what our quiz select page now looks like we've brought in our header enough footer so obviously now what we need to do is we'll put something in between there right so we're going to need the actual data so uh again similar to what you've seen here in this template you'll notice i am using this template we've got the header brought in the footer this from material ui template we're now going to add the individual quizzes in as well as this box here so let's go ahead and just finish off this quiz select so the first thing we're going to need to do is bring in some of the material ui components that we're going to need so let me do that first there we go so this is all the components that we're going to utilize from the material ui let's just put that at the top okay so that brings in all the the imports that we're going to need so next up um just the styles so some custom styles that we're going to be utilizing here uh so i'll bring those in next that goes before um before this export here so let's go ahead and do that there we go so again this is a lot of code i just don't want to explain in this tutorial so have a look through the code if you're filming to css is going to make sense so we've got this unordered list here margin padding list style we've got an app bar i've added a bottom border of one pixel um so the toolbar is going to be a wrap so it's going to wrap nicely as we the page gets smaller everything's going to wrap so things are going to start to pile on top of each other we've got a toolbar flex one a link so i've added some padding on the links um we've got a card header um so we just added the palette colors etcetera for that and then we've also got this card pricing which is going to be where the quizzes are going to be displayed and we've got this displayed as flex which means that they're going to pile on top of each other as the screen gets smaller and there's a margin at the bottom okay so there's just some custom css or custom styling that we're going to utilize for this page so next up let's just make sure that we've imported in the classes so we'll go ahead and do that so in the export here and let's just tab this we'll just leave it like that so um we'll just bring in the classes so that we can utilize our custom styling here and of course use styling use styles has already been imported up here also make style sorry it's been imported up here from the material ui so we can utilize these custom components or styles so um next up let's just remove the data state console log so we don't need to print that out anymore we know that we're collecting the right data to be installed in data state so that's all good and let's just go ahead return let's just uh use our fragments here there we go okay so that's kind of sets up our our fragment um i've used the wrong side there we go and then of course we just need to bring in react because we're utilizing the react fragment [Music] okay so that just kind of brings that in so that's our fragment so we've got our header and our footer and now what we're going to do is just define a container so let's go ahead and after the header we've got a nice container nice to be a capital okay so now we've got a nice container so that's going to contain everything and you can see here the max width is md so similar to for example bootstrap where we define the different sizes so md if uh if i just put something here for example we'll just view that on the page you can see that md is going to be right here so we know that our box or container is going to be from there to there for example um so if i were to change md to lg a larger version that's obviously going to make the container much larger because you can see the boundary starts here to there for example so that's just defining the width excuse me the with the width what are these screens the width of my container okay so that's just the container it's going to contain everything right so inside of here we're going to create a grid so let me just uh sort that out so i've gone ahead and made this grid here now i've made the container spacing of five and alignment items flex end so again i'm just using flexbox to align the items and now i'm gonna make a map so what i want to do now with all the data that's inside of our data state remember that's the data that's returned from our api which is only holding two things that's the two quizzes the names or the titles of the two quizzes right at the moment so i basically just want to map those out and as i loop through that data essentially this map is going to loop through that data as i loop it out i want to make a new kind of container for that individual quiz so what i'm going to do is then create this grid so i've gone ahead i'm going to create this a new grid inside the item key is going to be the title and you can use i'm using extra small and md so i'm defining the sizes of the boxes at different screen sizes so at extra small it's going to take up the whole width of the screen and md is going to take up four so that defines the small items that i'm going to have inside of this grid the sizes so now i just need to detail what is actually going to be in these little boxes on the screen so i'm going to build something called cards i'm going to use the card component from material ui so let's go ahead and fill this in so the card will have a card header so i set out the card header it's going to have a title now notice here that each time we map through every item inside the data that we return from the api we're going to refer to it as q so i'm going to output the title now how do i get the title well when we return data from our api that title is going to get like a a name value type of pairing so all i need to do is get the name of the data that i want in this case the title and then extract it out so here i'm utilizing some other properties align center align center there's a different kind of typography properties and then i've given this a class name of card header which is then linked into my card header css or card header theming up here okay so that goes towards the card header and then we've got some card content so this card content you can see it starts and ends there uh so what we're doing here we're going to use some custom styling we're going to use some text here it's going to call be called random quiz and i'm going to use a typography uh element here so i can kind of set out some of the other styling properties so that's going to say random quiz underneath that there's going to be a list and you can see here it's just going to say 50 questions so what i could do is um at the moment my api is only returning the name of the quiz but i could change that api to return more data and i could just kind of output it here if i wanted to so i've just kind of statically put 50 questions there might be only 2 or 10 or 20. but that's um the unordered list that we're going to create and then we're going to have some actions so at the bottom of my card there's going to be an action so that action um is there's going to be a button so i'll create a button set out some of the principles and you can see that i've at the moment for this tutorial i've just ran statically put in the url which is going to take me to the other component which we haven't set up yet so this is going to take me to the django random quiz so obviously again what we're going to need to do is extract information from the api uh to return the right thing so what we could actually do here instead of using the word django uh notice how we get the data so we could for example get the title because we could use the title um as part of the uh the url but we're not going to go do that at the moment that isn't really a problem at this point so we're just going to uh put that in like that so we're going to have a button that's gonna take us to that page that we haven't built yet and there we go so that's uh building a simple grid so if i save that and go into my component here and refresh um i'm not too sure if i've turned the server on just to double check um so that should be pretty much all we need um let's just see if this is working so it looks like um there's a problem here okay so this was a problem i saw earlier but it did work previously but obviously it's calling the problem now so what's happening here our connect api js really what we've done here is we've created our own hook so we ought to be kind of naming the hook with views so this was called collect data so if we just just rename this to use collect data and then down here we just use collect data you'll notice that the problem disappears it disappears because we've got a hook here um so we've now defined our own um react hook and let's go back and you can now see we've got our quizzes so if i select here that's going to take us to this new url which we need to configure shortly to show all the quiz data okay so we now have our boxes in place to show all the quizzes and we've only got two quizzes in our data in our django administration so if we were to add a new quiz let's just test this out let's just call this uh js um we need to make another category in a minute so let's just press save so we've now done that and let's go back to our application and refresh there we go so we now can see that our react application is taking data from our django api nicely so let's just see what happens when this we make another one because this should wrap um so let's go ahead and make a new quiz let's just call this uh view press save so we should now see a wrapping in place and there we go so you can see what's happening now if you make more quizzes it's going to be wrapped wrapped nicely like that so next thing let's just add in an item above this as you saw in the preview so let's just go back into our code now let's just close everything up we'll go into our quiz select now above here in our container we've got our grid there that's the grid we were just looking at so let's go ahead now and just add something above this grid um which is going to be just some sort of kind of placeholder so let's build a another container um so i think this is going to be called a hero unit in terms of material ui so i'm just going to paste this in okay so here we go so we've built a another container now let's just get this right excuse me so we've got this container so apologies so we're going to put it above this container here in actual fact so we're going to make another container for this uh so this is the same type of setup max width um you can see it's smaller so it's the max width is going to be smaller um and we're utilizing the hero content style which we defined here so just some padding and you can see what's happening here is we've got some typography it's just going to be quizzes and below that we've got some more typography which is um this text here so we've simply just built this simple container right there with some typography elements and a container element so let's go ahead and see what we've done there and there we go so now we have this component at the top here notice that the width is smaller so here we had an md container here we've got a small container that just controls the size of this text and there we go so we now have a good or we now have an interface for our application our quiz application so now we can go ahead and focus on actually clicking on this item here this is going to take us to a new uh quiz which is going to be the django quiz so we now need to first of all set out our router and then attach that to a new component and then we need to then configure that component to show the quiz and then just to bring in all the logic of the quiz so we can actually take the quiz and show the user whether they've selected the right or wrong answer so now we know what the url is going to be let's go ahead and close this and just put that down now for now okay so what we're going to need to do go into our app jess we're going to need a new route right so we've got the connect api so let's make a a a new let's make a new file here we're going to call this quiz or should we call this a random quiz how about that random quiz okay dot js right so it's called random quiz um so let's go back into our app let's just copy this we're going to make a new route so this time it's the roots going to be r for random and now what we need to do is uh add something here because what's going to happen here is that when we go when we travel here we're going to need to tell our api our django api that we want all the questions or we want a random question from the django quiz so how are we going to tell dynamically the django that we're going to need a question from the django quiz is we're going to extract this component here so this could be django this could be react or whatever so we're going to take this um this piece of text here this component here and we're going to utilize this as part of the url string request that we're going to send to our django api and by doing that that's going to select the individual components from or the individual question from our api so let's just go into our api uh let's go to urls so you can see here that we're going to sorry let's go into so we've got a quiz in our urls um now let's just go into our quiz sorry into our urls so you can see here this is what we set up on django so what we needed to do to get the data about a random to get a random question from a particular topic we needed the actually we need to change that to r so the path is going to be r and then that's going to then collect this random string that we're going to send across so that's what we need in django terms apologies i'm stumbling there but uh you can see what's happening when we actually get this data from our django api we're going to need to send this path so we're going to need to send r and then the name of the topic remember that's the name of the quiz so we're selecting the the quiz via name we're going to get all that um all the questions from that quiz and then we're going to select one of them and return only one question so we need to kind of align that up so what we're going to do here in our react application is we're going to pass that data over to our component to utilize to build that url so we can send that specific url over to django so this is where we bring in a a new item so what we're going to do here is we're going to utilize this format so we're going to say topic so this is going to allow us to set up essentially a a variable if you like and that when we send this across over to our or when we utilize this in our component we're going to be able to extract this information here so we'll see that in a second so we're going to extract this information right here so let's go ahead and now import our new component in let's do this first so this is going to be random quiz so let's import this in there we go okay so now we've imported this component in you can see that this path is going to take us to this component right so now what we're going to do is now we've got the component path let's go over to our random quiz so in here we're going to first of all just set out the export okay so export um we're going to call this random quiz okay so that just sets out our random quiz now what we want to do is collect that data from our url so when we type in for example django here we want to collect that word so how we can do that is really very simple we're going to use the use params so let's just go ahead and import use perhaps from the react router dom and now what we need to do a bit further down is just basically collect that data so first thing we can do is set up this variable here where we collect the parameters that are called topic now remember we've named this topic here so we're going to collect those parameters so what we can do then is just console.log and then we can check to see if that exists or not or whether we're utilizing it so it's fairly simple process uh doing it that way so let me just type in topic here um let's just go back to our application um refresh okay cannot resolve random quiz components i failed to compile so maybe there's a an issue here so we call it random quiz from random quiz so let's just double check i think i've put it into the wrong folder that's why it's not working so let us move it out let's put it into here i think i've just had it in the wrong folder so now it should be picked up there we go okay so let's just make sure that everything is on doesn't contain a default export okay so let's just set up that so i've just added the export default random quiz let's just go back into our page refresh and we do receive an error because there's nothing rendered um but you can see at the top here it says django okay so that's where we were outputting so if i change it to react you can see at the top here it now says react so you can clearly see that we were collecting our parameters from the url in topic and just outputting them that's what i wanted to show to begin with so you can clearly see hopefully now the fact that if you want to pass over parameters through the the url here we can just use use params and collect that information so that's going to be useful when we actually build the request for the data okay so let's go ahead and just uh build this out so what we're going to need to do is obviously bring in some material ui things um we've got the we're going to need the header and the footer for example as well so let's just go ahead and set out some of this so we'll start with the uh return just uh so we've got something for now okay so that shouldn't we shouldn't have any errors now okay so that just sets that out so we've got a blank page to work from now um next thing i guess we should just kind of test out to see if we can get the right data uh from the database so let's go ahead and set that out okay so the first thing we need to do is connect or import in our connect api uh hook so that we can actually send requests to the server and then what we've done there is like we did previously this is why i've pre-typed it out because we're just following the same path as we've previously done where we set out the url so here what we're going to do is uh send a request to quiz r plus the topic name so the topic name is going to be added to that url there uh whether it's django or whatever and then you can see what we've done is we've returned that data so we've sent that we've made a request now we've passed over that url over to our connect api hook we've received the data and we're just going to console log that out so again i pre-typed this out because we've already done this before in the previous we're just using a different url this time now just remember the url pattern is right here in django in the quiz url so we need r slash and then a topic also remember that in the core we defined the url to be quiz slash so it's quiz and then r and then um the random or the topic name so that's how we've set out our urls so our uh string topic so let's go back into our application so that's the right url that we're sending the request to plus the topic okay so let's go back into our page and uh let's just refresh so we're using our django and it's actually returning some data so there we go so we can see the data has been returned it's just one question that's been returned this is what we said out in the previous tutorial we're returning all the answers and whether they're right or not and then also the title so that's all the data that we're returning about that individual question at the moment of course you can change and add to that if you wish right so we're receiving the data which means that we need to do now of course is to output it onto the screen and deal with it as a quiz now if i were to type in react no data is being returned because we don't actually have any questions inside of our react quiz that's the problem we've only got questions so far inside of our django quiz so that's why we're just using django quiz at the moment so if i go into quiz and questions you can see we've got two questions in there so it's just randomly picking one of those so you can see it's picked let's just do that again so it's randomly picked one of those questions this time let's pick question two so i guess that's the easy bit um so now what we need to do is to actually display it and sort out all the logic for this quiz so this is kind of a stopping point for those people who don't really want to go ahead and actually do this you can now see we've built this framework application so that we can now be build any other component here we can add components here we can continue utilizing our connect api and just send it new url endpoints for django so now what you can do in django's go ahead and build some more api endpoints and then just build some more components change the url that we send across to our connect api and you'll collect different data based upon the endpoint that you've specified so if we were to remove quiz select and random quiz and then just reconfigure our app with new urls you can see that everything else now is kind of like a a baseline that you can build it from so you could probably save this now and if you're gonna make another api for another uh project you could maybe just bring this in and then obviously just build out the different components so we've got this hook that we can utilize for all of our different components so let's go ahead now and actually build this out okay so i'm going to import some of the material apis that we're going to need oh sorry first of all let's just go and get the the header and footer right let's just spell that out first so we can just go to the previous app here the quiz select app here and we can just kind of import this in so we need the header and the footer so let's just go ahead and import that in um and same kind of procedure again uh we've got the the header and then the footer there we go so now that should be the header and footer sorted on this page yep so now we've got the header and footer right so let's just uh turn this into a react fragment okay for no particular reason i could just wrap this up of course um okay so then obviously i need to import react okay so now that works and now we can actually then build the question set so i'm going to be utilizing multiple material ui elements so let's just uh bring those in there we go so not too dissimilar to what we've already done i'm going to be utilizing alerts to show the user whether they've actually um they've actually answered the question correctly or not so we'll utilize those components um everything else is pretty much the same you can see we're going to import some styles um check box so we're gonna be utilizing check boxes so i've brought in those components we're gonna be utilizing some links um yeah so just some stuff that we're gonna be utilizing now one thing that you're going to need to do next if i just close this server is we're just going to need to import uh the lab here so that's something that you're going to need to do so as well as we're going to be utilizing some icons i think we are potentially um so just go ahead and first of all npm install material ui icons so that's going to allow us to use the icons and then in addition to that we also install the ui lab which is going to give us access here to the alert and alert title so let's go ahead and do that so once we've got all those dependencies ready we can now think about how this is going to look on the page so i just copy and paste in the styles that we're going to be utilizing so just under here so we've got some styles that we're going to be utilizing nothing crazy here if you're familiar to css again we've just got with margins and colors and display flex uh padding and margins at the top etc so because i'm utilizing that um of course i just need to be able to bring that in to my project so in the export uh just below there i'm going to bring in the classes so i can utilize them within my application like i said previously this basically just allows us to connect to these styles here so the first thing we're going to need to do is just extract the questions sorry the answers from the question so that we can then eventually compare the answers to the user's answers so we're going to need to perform that action now notice here we utilize an array it's a an indexed array zero and then we have the answers here and also the titles and you see the answer here has another array of um answers so we're gonna need to just extract that out from this array so let's go ahead and do that first so let's store it in a equals so in data set notice that the data is in data so you can see that it's referred to as data so that's how we can access the information inside of here uh so inside of there we want to just basically uh we're going to say flat map sorry data dot flat map so because we're utilizing indexed array we just want to ensure that we return um an array rather than an indexed array just to make things a little bit easier to work with so q uh and then basically we're just going to loop through and find all the questions also the answers i keep saying questions the answers so we're going to look through and find all the uh on the answers uh referred to his answer okay so we got that out so that's going to return all the answers so if we were now just to uh console log that that should just return the array of answers there we go so now we've just got the answers good so we're going to want to in this case this approach i'm just going to count them so i'm going to create a another variable here called ac for answer count and that's going to equal well we're returning a so we just need to use a length that's going to basically count how many items are returned or how many um answers there might be of course your questions might have multiple answers six or seven or eight answers uh so we'll return that so that'll be ac so let's just uh see that in action there we go so we're returning there's three possible answers okay so let's go ahead and down the bottom here let's just uh start to map out what it's going to actually how we're actually going to display the quiz questions and we'll come back to this information up here in a minute so we're going to need a container set to extra small that's going to contain our question in the center and then we're going to just create this paper here again just as another container around our question so now we want to actually loop out or we want to actually display the answer so here we take the data datastate.datamap this is going to provide us a loop to loop around the data that's been returned from the api we're selecting the two pieces of information title and answer and we've got i here that's going to represent the the i the index so let's go ahead and there's only one item here so that key is going to equal for example zero one so we've got a nice little index there and then we're going to set our typography which is obviously the text information so we're gonna to component h1 component we're going to give it a variant of h5 so this is going to be a h1 component but we're going to size it as h5 so it's not so big the actual text so there's the title so we've extracted the title from the data that's returned from our api we put it right there now we need to go ahead and actually loop out the answers so we're going to take in the answer text and then an id now the idea is the id of the question this is important so when we build questions in django um obviously those questions are individual um pieces of information that goes into the django i might just quickly show you in django so if i go into the database here this is in django i just open up the room open up the questions the answers uh wherever the answers are okay so just show you this table you can see that every answer has an id so that's pretty useful most definitely so the question also has an id so let me just show you this so the question also has an id which is also useful information because what we can do later on is once we've actually determined what the user has actually selected we can also send that data back to the django api and we can create a new table where we record all the answers that the user has made so if they do make the wrong selection what we can do later on is that the user can review their answers and to see what answers they got incorrect etc so sandy having this kind of id to to perform those type of actions so anyway we were then going to map out the answers so what we do is we'll make a radio group that's going to create the radio buttons the little buttons we can press and you can see here we've got the form control label and we've got the control details so here we've got checkbox so we're going to create a checks box and i'm going to handle that check box with the handle change function that we're going to build so every time someone selects one of those check boxes it's going to fire off this function to handle that change and to save it in state that'll come a us shortly and we've got a label here which is just going to be the answer text so what we've got here really is we're just extracting out the id um of the answer and the answer text and that's what we're placing right here in the checkbox and then also in the label so that pretty much spells it out we've got a radiogroup we've got a form control label and then we've got a checkbox where you can actually select buttons and that's connected to a function so when you select it something will happen or we update the the information that the user has selected which which uh question the user's selected and then we've got a label which is the answer text okay so hopefully if the server is on um handle change hasn't been defined so we'll just remove that for now just to get this working and we'll go back and there we see there we go so we now have the actual question set so if i refresh remember this is selecting a random question so if i just refresh the page it will select random questions from django api now obviously there's only two questions that's why we're only seeing two questions okay so now we've got the select options we can now go ahead we obviously gonna need a submit button so we quickly add that in so this button is gonna go underneath um let's just check to see where we are so we've got the loop so we don't want it to be within the loop so that's where the um the data state we do want it in the main loop we don't want it in this loop here in actual fact so let's go ahead now and just add a new button here so that button like i said is just going to be utilized and pressed and obviously the fun what's going to happen here is when someone presses this button um these are all the properties they're going to basically we're going to fire off this new function called check answer so when someone presses that button we fire off a new function so it's just going to be called submit answer so let's have a look there we go submit answer so that's that all in okay so that pretty much sums up what we're going to do here in terms of the visuals for this page the only thing that we're going to add obviously when they submit a new box will appear under here telling whether they've got it right or wrong okay so now what we need to do is be able to record um when someone has actually made a selection so let's work this out so what we want to do is create a function so that um when someone title when someone presses the checkbox we're going to fire off a new function and we're going to call that handle change so let's call that handle let's call that handle selection handle selection or maybe use a selection okay so we're going to call that handle selection so this is on change so as soon as soon as someone uh presses one of those radio buttons obviously it's not connected it's not working at the moment as soon as someone selects one of those is going to then fire off this function here called handle selection so what we need to do now is just build a a new function so let's just uh move those up so we're going to call this obviously handle selection so let's do this uh handle selection so we're going to first of all we want to we want to basically save their selection that's all we're going to do so set uh answer well let's uh selection shall we uh let's go to set selection so this is a data store that we're going to need to set up and we're going to basically selection i feel so i need to call this answer set answer so let's just call this answer so we're basically going to update we're going to read whatever's inside of answer to begin with sorry and then what we're going to then do is basically get the the target which is what the user has selected so we're going to get the target value and that's what the user has selected and then basically yeah we want to select what's been checked so what we're going to do here let's just kind of summarize this is that we're going to build a new state so let's just quickly build this new state uh so it's called set answer so just hear them so we've got answer and set answer so inside of here starts off with absolutely nothing at all right as soon as the user presses one of those uh buttons one of those options to select an answer what's going to happen we're going to get all the data from answer uh so dot that's going to allow us to list out all the answers we're then going to basically update um the answer with the item that's been checked so what's going to happen if the user was to select an item that would appear here in the the answer state if we were to reselect what will happen is because we're selecting the target value um that's the if we go down here to the labels we're setting the value to id now because we're utilizing the id it means we can override what's already in the state so this way we can record whether the user selected or deselected every radio button so every radio button that the user can select will have a value id so we use that value id to check whether that's been set already if it has been set then we just override it with the new selection and that's going to be true or false so it starts off with false if we select a radio button that would then be true so we get all the answers that have been made already if the user's made any answers we then find if there has been the answer has already been made or selected and then we update it whether it true or false so that's what we're doing there we're going to save it then inside of this state okay so obviously we're going to need to import use state so let's go ahead and do that so from react let's just uh bring that in so that was a use state okay so we've now got that saved so let's go ahead and actually see that in action so if i uh console.log now that and that's just going to be answer so for console log that so that should now record the answer or should output the answer so let's just go into our console select that notice and it now says one true if i select this it's now one and two true and if i select the last one we now have one true two true and three true now if i deselect other it goes to false and then so on so here you can clearly see a mapping of the answers that the user is being provide is provided now one annoying thing here is if i just refresh the page if i just select one item there's only one item here and that can make it harder to actually um compare against the actual answers so particularly if you for example have two answers that are correct so what we can do is we can set out in the state some initial answers okay so what we're going to do is we're going to build a function which when the page loads it works out how many answers there are and then sets out or defines a kind of an initial set of answers inside of the answer state so let's just have a look to see how this works so let's go ahead and first of all we're going to create this new variable oh sorry this new function called create initial answers and then inside of here what we're going to do is we're going to use flat map again to flatten um in this case let z equals a so remember a we returned a earlier so we got all the answers from our question we put it into a that's what we did originally so what we're going to do is we're going to take those answers um they are indexed so we use flat map and then what we're going to do is just select the id of those questions now this is important because uh remember that we're returning these uh these questions here or using the id inside the question so notice that it's four five and six here in this question if i go to question one the questions are numbered one two and three so it's important if i'm going to make a match between the user's answers and the actual answers i need to match the actual question number to the answer and that's important also because if you're for example randomizing randomizing the actual answers on the page here we can still make a comparison between the user's answers and the actual answers uh utilizing the id of the question so that's important to keep there so we get the ids of the questions uh remember we're getting the questions here initially up here so we do that so that z is now storing the answer um ids one two three or four five six so next up what we do is we're going to create this new object here and we're going to loop through uh ac so ac was the length here so what we're saying here is that we're going to build three new objects now we know how many objects we need to build and that's the amount of answers so in this case um we use ac to get the number of answers and here we're just making a loop so we start at zero we're going to as long as we're less than ac that's going to make three or four questions and what we're doing here is we're going to use zed so zed remember is the object ids and for every object we build we're going to take one of the object ids and then we're basically going to set that to false so basically what we're doing here is we're going to popular we're going to add some data into our usa state which is going to both match the number of answers that are possible and also the id of each answer so let me just uh save that and let's just go in now and use this console log here and we're going to do the same thing again answer so this time oh sorry we we need to initialize so this this downward is not just going to work um okay so what we can do here um let's just uh use a use effect shall we so what we need to do is we need to run this when the page loads up so go ahead and import use effect up here and let's just build this up so we're going to use a use effect so basically this is going to run the function here when the page loads it's just going to run that once so when the page loads we just want to load this up so what we want to do is we want to create an if statement so if the object the answer object length is zero so if there isn't any data inside of this object then what we need to do is just populate it with our new data so set answer is going to equal whatever's returned from great initial answer so what we're going to need to do in the create initial answer in actual fact is just to return the object okay so remember we're we're creating a new object putting all the data inside the object and now we just want to return it so let's see that in action so what's going to happen now is that the page is going to load it's going to run that function and then populate the state and then we're going to be able to actually then uh see what's inside of it okay so this doesn't necessarily follow react rules um so just put answer in here so it um it works as we need it to so if i refresh the page boom you can see here that we've automatically populated um our object and so what we've done here is we've created a new object and it's ready now to be changed so if the user only selects django that's great what we can now do is compare this answer to the actual answer so we've already got our three elements because like i said if we don't select everything then all that happens is we're just returning one answer and it makes it harder for us to then compare against the actual answers so there we go so this should work as intended so and so on so when we go to the next answer you can see here it's got false false false if there were more answers obviously there would be more options here it's also got the id of the question so if i go on to question two we've got four five and six so that creates a a good um object for us to compare against the actual answers so i guess the next thing that we need to do is to actually work out whether the user has selected the right answer so let's go back into our button down here and let's just uh put back uh the checking of the answer so on click so this button here when we click this button on click we want to run the check answer function so let's go ahead and build this up so we've got the let's just move this up here so we've got this function to handle select this function to create some initial answers and now what we can do then is build a new function here which is going to check the answers so let's go ahead and create a new function here i've already done it so that's for the check answer so next thing that we want to do is we want to prepare the data that's been returned from our api and we want to basically prepare the answers so we can then make a comparison between the answers the real answers and the user's answers so let's just uh console.log let's just get this ready um and then a so if you remember a is the answers that's returned um that's the answers that we prepared earlier so that's the real answers so let's just have a look at these real answers if i press submit that should bring up the data so the problem here is that that doesn't match what we need remember the actual answers that we're saving is just the id number and then just true or false so we need to kind of make this data into a format that we can then compare against the user's answers so let's go ahead and just extract first of all um let's uh so let uh n equal so this is going to be the the answers this is just going to return uh true or false so when i map this across we want to map we want to skip through each item um so a is all the the answers remember so what we want to do now is uh go through each answer and we're just going to extract uh from it the object dot is right so remember we had a column called is right that uh stored true or false so let's just get that data out and now let's just uh console logs out so you can see what we're extracting so if i were to now refresh and let's just uh submit the answer and there we go so now we have true false true so that's the actual answers true false true so that should be true that should be false that should be false so now what we need to do is add the ids to it so let's say let y equal and this time we're going to say dot dot dot n okay so i wonder what that does so let's go have a look at now what y is if i refresh i shouldn't have to refresh but i press submit and now what i've got is zero one and two okay that's useful so now i've got an id that's pretty handy but what you can see here is i've actually got um the actual format i need now so i can compare against the answer so we can see that if we just um add the console log y uh refresh and just uh submit you can both now see the actual answers and the user's answers so if i were to change here something here submit again you can now see the user's answers down here changed they don't quite match the top here so what we need to do now is match uh the values what we're going to do is match the the values in this scenario i did mention earlier we've got the ids but i'm just going to show you how to match the value so tree must match true false match and so on so that's going to determine whether we have this the right answer or not okay so let's go ahead and do that so we're going to build a small function that basically checks so we're going to build a function that checks to arrays to match the values in array so we're going to create a function here called array equals we're going to take in two parameters o and p in this case and then we're going to return um because it's a function so we're going to check the array so we're going to check to see if o is an array and then if p is an array and then we're going to check the the length to make sure that they're correct and then the next thing we're going to do is we're going to check the values so basically we're going to check the values of each of these arrays and we're going to match make a match to see if there is a match sorry i just meant i think you get the idea i'm going to loop through every value in the array i'm going to match to make sure there is a match between both arrays okay so that's the function we're going to run so now we just need to start up the function so let's just put the data in place so let o equals object values y so y is the actual data you can follow y back um here for example and this mapped to n n was where we extracted is right so anyway so let's get that that's the actual answers and let's get the user's answers of course that's stored in our data store as answers right so now we've got the answers in place uh let's just now run um the function so it takes some two parameters here so we run o and p so we pass those in into here into this function and then we just use an if statement so if this is true that means that if um those values do match then the console is going to log correct else it's going to crop console.log incorrect so let's see this in action so let's go back and refresh right so question two let's just check submit answer incorrect uh incorrect still incorrect and eventually we know that we select the right answer and it goes to correct and there we go so it looks like it's working okay let's just check the other answer so django flask submit incorrect just django correct so that kind of adds well that is all the functionality that we're going to set up just to set up a basic quiz now this isn't necessarily the most optimal answer here but hopefully that's given you an idea if you run through this code it gives you an idea about how to handle dates and how to potentially delve into data separate slice data up using maps to kind of iterate over data and preparing the data in a way that then can be compared like i said previously we'll loop back and we reiterate this code over the duration of this series or this course um but for now we just got something in place so that we have a quiz a working quiz anyway so let's just finish this off um by adding a new function so let's go down into the random uh question here so underneath the submit button what we want to add is a a new kind of component here uh which we call um what can we call this we would call this the result so let's call this result uh so obviously this is going to show the user whether they've selected the right answer or not so let's just go up here uh let's just uh tidy this all up uh let's just add a new function here so what we're going to do now is just create a simple function which is going to output it's going to output an alert button or it's going to output a alert title underneath so it's going to tell the user whether they've actually selected the right answer or not so it's not called app um it was called result so let's just change that okay so it's a result so if answer check is equal to true now i want to check so what we need to do in actual fact is uh set out a new state here so what we want to do is just record whether the user has um selected the right answer or not so let's just uh create a new state here so answer check and set out to check so what we need to do is apologies for scrolling up and down if we go back into our our if statement here where we check whether it's correct or not what we need to do is update the state whether the user has selected the right answer or not so that's a simple case of just setting the state to correct so we use a boolean so we say set answer true obviously if it's true and then what we do here is we'll also set the answer to false now the problem we've got here is that we're going to probably receive oh we're not we're not that's fine okay so there we go so that sets that out um and so now what we have when the user answers the question inside of answer check state here that's going to say true or false so what we can now do is uh the result can appear if a condition is true so if the answer check value is true so if um the user selects the answer and then um the state then goes to true it's changed to true if it does equal true well it's going to return this block here which is going to be an alert and you can see that um that's going to give you a link here which is going to then take you to the next question now this is something a little bit hacky and i'm just utilizing for now [Music] so what i'm going to do is i just create a new function just above here which is going to reload the page so it's just going to refresh the page right um so we'll deal with that at a later point so that's when we click this button it's just going to refresh the page and that's going to show you another question isn't it so that's that in place so this is the success alert then alphys elfish elf if sorry check answer is equal to false we're going to show this and else it's just going to return nothing at all right so that's the obviously the default so that's basically going to um show the alert button underneath the button if the answer is true or false and that's obviously now connected down here in result so let's just see that in action okay wrong answer and then just take the right answer and there we go so the right answer gives you this link we can then go to the next question or the next random question and so on looks like it's uh working absolutely okay and there we have it so that was just some basic features and functionality for our quiz it's just to say that we're using a quiz um obviously there's a few things that we need to change um maybe you can build upon that if you want to do that individually so i'll try and focus on django so in the next tutorial we set up a user login system which includes uh email uh confirmation as like it was requested from the community so we'll do that next we'll set that up so that users can log in and then from then on we can well we can do lots of things obviously we need to build the actual quiz so that we can run through an actual set of questions that's something we need to do so there's lots to do thank you for listening there's a rather long ones if you did get this far thank you very much and hopefully i'll see you in the next tutorial

Channel: Very Academy

Views: 5,670

Keywords: django, django rest framework, django framework, django rest, djangoproject, django react, django python, rest framework, django cors, django tut, django tutorial, django 3, django examples, learn django, django beginners, beginners django, django 2020, django example, quiz api, django api

Id: EWJ2-xkfvXI

Length: 127min 23sec (7643 seconds)

Published: Mon Nov 16 2020