Let's build the UBER EATS Dashboard with ReactJS and AWS Amplify 🔴

what's up node.js developers welcome back to a new live stream i'm super excited for today's build because we're doing something different we are going to build that we're going to continue building our ubereats dashboard where we started previous week and we're gonna implement today we're gonna focus on the back end we're gonna integrate it with the same backend as we have for our ubereat series and um yeah more details let's see let's see what we're gonna do a really high overview of the whole project that we're doing here we are building the ubereats applications which are actually a couple of independent applications we have a driver application which is a mobile application uh similar to the user side application which is as well a mobile application but uh they are already done we have finished them during the five days challenge and today the focus is actually on the restaurant dashboard so this dashboard is specifically intended for restaurants to manage their menu and also manage their worders to to be able to see new orders to accept orders and move them from from one status to another until it is delivered to the end user so um i decided to give you a little overview of the whole project we uh we're gonna do it with react.js and aws amplify so this is a great opportunity for you to get started with these technologies and to be able to build web applications uh but regarding the whole uh project that we are building in this uh series which is the ubereats application um we started it in a five days challenge which happened a couple of weeks ago and we did like every day like five hour live streams where we build um in the first two days we have built a user side application from where he can browse all their restaurants he can see them the dishes the menu he can choose create and manage his basket and submit an order after that in the day 3 and day 4 we have focused on the driver side application and the driver will be able to see new orders on a map will be able to pick them up and deliver them to the end user the interesting part was in day five when we merged when we synchronized everything together we implemented the maps so every time the driver moves closer to the user the location of a driver updates automatically in real time and the user on his application will see the location of that driver so yeah like that was a super exciting uh week with a lot of uh with a lot of value there if you haven't checked it out it's published on the channel i'm gonna give you the url in a moment but um yes the challenge was done but we still wanted to do the dashboard so uh previous week lucas started the dashboard and he built the front end of our uh of our dashboard with react.js and ant design i hope you enjoyed the tutorial from the last week because it was really really nice lucas it did a great job there uh and yeah we're gonna take the project that look has built previous week uh the dashboard and we're gonna connect it to to our aws amplify back-end if we look at the first slide here as you can see we have one common backend and three independent applications where three separate independent applications with their own source code as you can see two of them are mobile applications built with rack native and one of them is a completely uh different type of application it's a web application built with frag.js but the cool part is that they are all connected to the same back end and for example when the restaurants from the dashboard will add a new dish menu the user in his application will see that menu he'll be able to order and then the driver will see the new order will be able to pick it up from the restaurant so like there is a lot of complexity in the synchronizing everything together but i hope that we managed to make this simple and to give you an idea of how to build this complex system systems of applications tied together with data uh communicating between each other in real time and yeah if you found this valuable don't forget to subscribe to the channel because we are doing these type of projects based on real real life applications we do them every friday so you don't want to miss that out drop the subscribe button turn on the notification bell not to miss any future videos and with that being said i think we are ready to get started let me just see the yes i just wanted to say that all of these tutorials that i discussed about up until now they are published in this playlist so you can um you can find them on our channel channel or following this url um yes if you want to follow only that dashboard build that's also possible and the only thing that you'll have to do is to watch the one tutorial from the previous week that was related to our dashboard and now today we're continuing continuing with the backend however if you are also interested in learning react native and building mobile applications i'm definitely definitely go check out the five days challenge it's a lot of content but it's very very valuable so um yes if you yes you will need a couple of things to follow along and here i'm talking about the asset bundle where you will find the source code up until now uh split every in every day and also these presentations that i'm using so to get the asset bundle go to assets.nodejs.dev ubereats and download them the files there also for this video you're gonna need an aws account which is free to sign up however you need the credit card uh information to to to create this account but everything that we're gonna use today is covered by the free tier so you are not going to be charged in the development process like if you will deploy some of these applications to market and will get a lot of users then you might get charged but now for development like i have a couple of those and thousand applications and i'm not charged any penny so with that being said let's get started and uh yes let's um let's get coding because we have a lot of things to cover today but i want to see everyone in the live chat how are you doing guys where where are you joining us from today so let's see rogelio hello thank you very much okay so um yes these are some some of the prerequisites are related to the aws amplify so you need node.js and npm but i guess you already have them installed if you follow so far uh as well as git but as well i think you have it already installed and you need aws account and amplify cli uh i'll i left a url here of how to to set up your amplify cli ables account and so on so if you don't have this already follow the url and it's pretty straightforward forward to set up amplify cli after that we are ready to start configuring amplify all right will lucas be joining us no today he cannot join because yeah he he has some some doctor visits so yeah do they know but in future definitely he's going to be here can you please share the link to the asset yes someone someone yeah um olatunde posted it here so here you can download the asset bundle okay let me read these long comments uh your question is regarding limiting the number of portions or the number of dishes that the restaurant can uh conserve um we didn't implement this feature it's a quite an edge case i mean it's quite specific feature it shouldn't be very hard to implement uh you just add one more field to the data model of our dish so and then you let the restaurant be able to update it so i'm gonna point uh towards where you would need to do these changes to to implement it when we get there hello from tunisia hi this is a great project to add to the academy yes this is a very very in-depth project like one of the biggest projects that we have done so far on youtube for free from argentina from indonesia awesome all right guys so uh let's have a look at the application that we have right now uh i have it here open in visual studio code but as i said i also provided it in them where is it in the asset bundle that you can download following the url in the description assets.notjust.dev ubereats and here in this asset bundle there is the folder source code and in the source code uh there is this basic dashboard front and zip and uh when you unzip this folder you will see you will see these three these three folders that represents free applications that we have built so far the ubereats courier mobile application the uber its user side application but what we are interested in is this user its restaurant dashboard this is a project that lucas has built uh previous week so we're going to start from here and for that we can click on it and open it in visual studio code to have it here so now i have it here open in visual studio code what you would want to do is first to install the dependencies so you can do npmi however this will will trigger an error because of some some libraries not working for example with react 18 so lucas has used the latest version of react which is react 18 which is a major update and not all the libraries have made sure that everything is working in this react 18 uh version for example react google places auto complete depends on either rack 16 or 17. so we could either downgrade react from here uh or we can ignore this uh this error for now um and test and see if everything is working perfectly with the uh real google places out on complete to make sure that there is no breaking changes for v-specific versions uh combination of versions so um what we can do for now is do npm i and then copy this legacy pure dependency so dash legacy here dabs this will ignore these peer dependencies issues so it's not the perfect solution for now but it works so i don't want to go through the process of downgrading react.js and waiting until the other libraries catch up with react just 18 and for that reason yeah like we're gonna do it like this but later in um later like our libraries will also catch up and support the new version so after everything is installed we can run npm start to start our development server and this will actually also open a browser window here with our project hello from sudan hi el salvador hello jamie so here is the application that lucas has built the front-end application as we can see we start from the home page which displays a list of worders and that's actually what what we want we want to see when new worders where the worders that we are working with right now basically the active worders uh vetta is on our side on the restaurant side so here we will display orders that are either new they are either cooking were ready for pick up after their water is picked after the water is picked up by the driver we're gonna remove it from here because it's already not the responsibility of the restaurant to manage it and what we're gonna do we're gonna move it actually in the order history in order to have a possibility to have a list of all the previous orders that we have done as a restaurant so this is the order history these orders are also clickable so when we click we get more details about the customer uh the customer address but what's more important is the items that the customer ordered here we will have a couple of options with buttons for example initially we're going to have two buttons accept order word decline order and after we accept the worder sorry we're gonna have this button food is done to say that yeah the food is done it is ready for pickup all right this is about warders another important part is the menu the menu is where we will manage all the dishes that have a restaurant has and we're going to do that by creating for example here by providing a name a description and a price and submitting it now nothing is working because it's using dummy data but uh yeah today we're going to connect it with a back-end and by creating it here we're going to save it in the database uh also we're gonna be able to remove them and um yeah that's it with a menu lastly uh it's the settings of a restaurant and here the restaurant will be able to set uh the name of the restaurant the address which is working with google autocomplete so if i write here santa cruz we will see we will see it here and after you select as we can see we also get the latitude and longitude which is our important values to saving the database regarding the restaurant to be able to show it on the map in the user application in the driver application um and in other places where we need the the specific location of the restaurant so here is our application let's get started and yes the first step would be to configure our amplify project so we're not going to create a new amplify project because we are going to connect to the same amplified backend uh as our mobile applications are connected to so for that let's go ahead in aws dot com aws.amazon let me share my screen if i forget to share a screen just write me a message in the chat so from here let's sign into the console and let's go ahead and search for aws amplify aws amplify and here we will access the application that we have already created so in my case that's uber it from here let's launch the studio because we will will manage uh our backend infrastructure and the data and everything about our amplify project using the amplify studio dashboard so here is our application uh and what we want to do is to press on the local setup here in the top right corner and grab the amplify pull command this command will pull the back end in a project in an existing project or in a completely new project so that's what we want to do we want to pull the backend in our dashboard in our ubereats dashboard to be able to connect from the uberease dashboard to our backend so let's open a terminal actually let's open a new one by pressing on the plus sign and let's paste the command amplify pool app id and environment name staging i have an update for amplify i haven't worked for a while on my windows machine so let me quickly upgrade it hopefully it's not gonna take a lot hello hello from sri lanka okay so successfully upgraded amplify cli perfect let's go ahead and do amplify pull here um all right the first step was it automatically opened for us a window from where we need to authenticate just by saying yes and after that uh we should follow the next steps here in the in the terminal so first of all first of all is the editor so i'm going to choose visuals to the code the type of application is javascript and the framework is react and i see that it's smart enough to understand that this react because it it automatically selected for me the source directory i'm going to leave by default src distribution directory as well so basically i'm just pressing enter until we get to vstab where it will ask us if we want to modify this backend and the question is actually if we want to pull the actual code for the backend and configuration for the backend and let's say yes we want to do that to be able to see it in our project [Music] i see a lot of interesting suggestions here for example 3d model to react that's actually a very good idea let me note it down um but you know what i want to uh i want to know something let me do a poll real quick because we um we we are doing this project with come on we are doing this uh project with flag.js but most of our projects on the channel is focused on rack native and mobile development i want to ask you are you interested in diversifying and seeing our technologies as well for example web development with react.js so let me ask these questions here okay that's it how to remove option so here uh here is that paul please um test your votes i'm really curious if you are interested in more web development content as well hey christian i work with react and learning native with your course that's amazing how do you find the course so far at what module are you at the moment so um yes the first step was to pull the changes and the next step the next step after pulling these changes is to configure amplify in our project but before that we will have to install two libraries let's go ahead and install them um npm installed but let me let me first clear to see it properly and let's do npm install and we need aws amplify library and the add aws amplify amplify uh slash ui react so the aws amplifier is the core of the library and the second one is specifically the library for react that has some ui components that we will help us speed up our development process so let's install these two libraries but actually we will need to do a legacy how is it called called legacy period dependencies so around 60 of people want to see more web development as well that's interesting but um i actually would will agree with paul here so my idea is that indeed there are a lot and of web development resources out there and i saw that a lot of people are struggling with mobile development and full stack development because this is actually not a lot of people are doing this so that's why i always stick to react native so far and yeah thinking about that everything shifted to mobile keep track native i would i would say so like a lot of things are now uh mobile applications but there are also a lot of projects on the web and interesting projects but i'm also interested but uh yeah so as i was saying like it will do the same error because we needed to add that legacy here dependencies for example yeah saying do some clones with frag jazz tailwinds assess where is it they always assess and typescript that will help a lot of people yeah we uh if i would do something in web development that will definitely be a real gs most probably next yes because um nexus is really really powerful tailwind definitely like i love it um typescript depends like if that tutorial is for beginners or not uh this is interesting how about sticking to mobile development but not only react native but also flutter i'm not sure not sure not very interested in that but we can we can have some fun to to to do with something with flatter yes with yarn it actually works fine with these dependencies this is something so what we're doing here is actually we're designing the uh the future of our channel um fotzing is having a very very good idea uh he's saying like i recommend you to go more in depth to make production ready application but we can launch together and see progressions on the market like i had this idea of actually starting um um how's it called commercial project let's say commercial project a project that i will build uh during live streams and at the end i will actually try to create a business out of it i'll try to release that application and i'm gonna try to teach you like how to go for all this process of making this application production ready actually monetizing it upgrading it keeping it up to date and so on so this is something interesting but actually this like takes a lot of time and like most probably you will lose the interest in it so this project would take like at least two months to build and like after two weeks you're just gonna get lost and you're not gonna be interested like if you understand what you mean what i mean because if you like at some random point like open vet tutorial after three weeks you you open a live stream like at week five you don't understand like the context you don't understand where we are coming from you don't understand where we are going so you're gonna say like it's something not interesting for me so we'll see we'll see we'll see it's interesting but i have a lot of ideas and deciding like what um what would be the best for you guys but now moving back to uh keep the ideas coming by the way like i really love this and i read all the comments and i take notes so it's really helpful for me to to understand where um to move uh forward but now moving back to the project because we still have a lot to do we didn't do a lot uh so far but what we uh the previous step was to install the adobe simplified uh packages and before that we have done amplify pool now i want to show you what the amplify pull command did for us first of all it created this amplify folder where it keeps all the configuration and all the code for our back backend so in a lot of cases we don't have to mess up here only in some specific use cases like we might go there to edit something but this is out of scope for this tutorial like for example in the full stack mobile developer course that we have the premium course that we launched where we are working a lot with this backend and we are actually like defining all the api based on this schema on youtube like we are not getting into that many details uh another file that is was generated by pulling our amplify backend is in the source called aws export this awx exports file is a configuration object that specifies how should amplify connect to our backend basically it points to specifically our resources in the cloud that we have set up such as the let's say the user pool here for managing our users this is id and amplify knows how to connect to it and get our users so this file is very important because we need this file to configure amplify in our project to do that let's open up.js and let's import a couple of things here let's import amplify from aws amplify let's import the configuration file that you just saw aws config from the same directory and aws exports this aws exports that i was talking about and now having amplify and the configuration file we can simply put them together and say amplify.configure aws config and that's it our application is configured um let me let me see if we didn't break anything so if i refresh yeah everything is working fine nothing was broken um and yeah that's uh that's basically what we intended to do now uh because we're gonna see features in the next steps firstly we have configure amplify and now we can um we can move to the next step the next step is actually uh we will need a couple of changes to our data model uh for today's video so i want to do them right now uh set them to be deployed uh and move to the next feature because deployment usually takes like around five minutes so i don't want to waste this time what uh let's go ahead and look at our data model at our existing data model let's go here in amplify studio and if we open the data tab here we're gonna see all our models that we have here so um one one thing that i want to add is here in order status as you can see from our presentation in the ui we set but no it's not in our presentation it's actually in our application here if we press on an order we see that we will be able to decline in order and i think this is a necessary feature to decline in order because maybe you are closed maybe something happened and you cannot take the water so uh declining and water what will it do it will move it to a it will set the status of order as declined but the thing is that in the order status we don't have a value for the decline so let's add this new value and let's call it declined by restaurant rent restaurant i wanted to specify specifically by who was a decline because maybe you will also want to add another value for decline by i don't know driver like it really depends on how you want to design these features but for now like it's okay decline by restaurant all right another thing that we want to do is uh whenever we will login in this dashboard we need to know what restaurant are we managing because there will be thousands of restaurant and whenever a user signs up in that dashboard we need to know the administrator of which restaurant is this user the same way as we have connected for example a user in our database with a user from cognito with this sub and the same way as we connected the driver where is the courier somewhere on top the same way as we connected the courier with the authenticated user with this subfield the same way we will do with our restaurant we will connect the restaurant to the administrator so let's say we need a new field here we can call it sub because this is the name of a field the subject which is very unique identifier of the authenticated user but in this case it makes more sense to have something more descriptive for example add me me straighter sub and in this case we will know which which subject is the administrator so add me me straighter did i make a mistake here i mean admin sub let's do just admin sub admin sub this is going to be a string so that's most probably everything that we need for now so let's press save and deploy this will check our updates and now let's deploy it okay now we see here top right corner deploying and it's gonna take around like five minutes but that's okay because we can move to the next feature and while we will implement the authentication this is going to be deployed so we will be able to pull them in a moment in a while all right so let's go ahead and how to work with this okay like this so uh i think let's see what's our next step we have updated the data model by adding the subfield to the restaurant and out adding restaurant declined order status actually we i did it decline by restaurant all right the next step is authentication and authentication similar to react native is very easy here so what we have to do is we have to import the with authenticator hook and we're going to import it from um import with authenticator hook from the aws amplify ui react and what we have to do is to wrap our application in there with our fantagator that's it by doing this we will automatically have authentication in our application let me see if i have to restart it with authenticator and let me see if yes it's from here all right let's go ahead and restart our server to make sure that we have all the new libraries hey thank you very much for supporting and for encouraging everyone to drop the like button drop us and smash the like button guys it really helps us a lot so here we have it for some reason it's not working um okay is it from the no actually with authenticator i think it's from the legacy but uh there is another there is another way and it's actually instead of a hook is with a component authenticator so authenticator and what we have to do is to wrap our whole application here basically the whole layout in the authenticator and we will close it at that and here and we don't need the higher order component but with authenticator so this is actually the two uh two ways we can do it i don't know why with authenticator didn't work maybe i imported it from a different place but now let's see no it's still not working uh why why are not working does it re did it remember the time already yes it remembers that i'm already signed in so yeah i'm gonna work here in a separate um in a separate uh in an incognito window so actually both of them will work both with authenticator and this authenticator component i was just already logged in but the problem was that open it here the problem as you can see is with the styles the files are not the best and that's because we didn't import the aws styles and to do that let's do import and we're going to take them from aws amplify ui react and from actually the styles.css we simply import them here in app.js and they will be available so if i go here now it's already better i think actually the with authenticator was displaying it a bit better because it was displaying it in the middle so i don't know maybe i'm confusing you but both of these methods are working i'm just gonna choose the with authenticator one for you you decide which one you think it's uh it's easier for you wrapping the application in authenticator or uh they export in the with authenticator higher word or component and now don't tell me your yes now we see uh automatically the sign-in page and here we can also create an account i already have an account there if i'm not mistaken so let me see user management i have it here so ah let me go to delete the user and create it again to show you how you can do it as well so in the create an account we can provide an email and very easy password and after that we can press create an account now on our email we are supposed to receive a confirmation code let me check yes we have it so let's confirm our account because at the moment our account is created but it has a status of uh unc unconfirmed so we need to specifically uh to provide the code in order to confirm our email and after that's done we are automatically signed in in the application and if i refresh the page as you can see it automatically displays the home page because it manages the cookies and the tokens the session automatically for us without us having to do anything um so yeah it's that easy to implement authentication basic authentication um it provides like the default user interface that you can also uh adjust with uh custom themes quite easily or if you need very custom flow for authentication you can also do that by simply designing implementing the screens yourself and by uh simply uh calling a couple of functions from the off module one of these functions is the sign out so i want to show you how you can call some functions directly to the authentication module so let's go ahead here yes and let's go in our code where do we want to sign up probably it's going to be one extra menu item here on the left menu and that menu we can find that menu we can find in the source components side menu index and here is our side menu as you can see it works with a menu component from the ant design what we can do is to add one extra button by providing one extra object here in the menu items so let's add it here like this key what's going to be the key sign sign out or like this sign out the label label will be sign out and there is also another property i think it's danger or how is it called true and that will display it with red yes and now as you can see there is a file here there is a menu option sign out if i press on it nothing happens it i'm just redirected to a page sign out why is that happening why am i redirected because that's what we implemented here in the previous video whenever when whenever we click on an item we simply navigate to the item dot key so we navigate to that slash sign out well for everything else this is working okay we are simply navigating there but for the sign out we don't want to navigate anywhere we need to execute some command so for that reason let me grab this function from here the on click function and let me grab it into a separate function here const on click equal and paste the code i'm also going to add the curly brackets here because we'll need more more logic and we can simply provide this on click function to the on click event now everything will work the same but we can add one check if menu item dot key is equal to the key of a sign out this sign out key then we need to do something else and we need to actually sign out the user which we're gonna do in a moment otherwise we will navigate okay so how can we sign out the user well for that we will need the auf module from the aws amplify package and we will simply do alf dot sign out that's it let's give it a try so if i go to other pages it still works as expected but if i press sign out nothing happens but if i refresh the page as you can see we are signed out and here i can log in again and we are coming back here so it actually works it signs out but it doesn't automatically refresh the state of application uh and to do that what i want to do the easiest way to um to update the application actually what i want to do after signing out the user is to refresh the page because everything is going to be we need to get rid of everything like all the state and so on so to do that we first will need to make the function a sync because we will need to await signing out the user which is a synchronous function and after we are done with signing out we can refresh the page we can physically refresh the page using the uh window dot location dot re reload and yes let's give it a try windows location reload this will reload the window and if i'm gonna press on the sign out i'm automatically redirected to the homepage so that's it that's how we can actually call methods directly on the authentication module and there are more than 20 functions on this off module such as off dot sign in and here you need to give as you see username and password or sign up and by doing this you can connect it to a custom form and sign up the user manually if you need very custom [Music] flows and user interface all right so uh with that being said we are done with actually authentication we're gonna still have to do a couple of things to make how to manage like who is the administrator of which restaurant uh but we're gonna do that uh a bit later because right now um because right now our deployment is successful which means that our data now was updated for example the restaurant has an admin sub which is good and what we have to do is to execute the amplify pull command once again to get these changes that we made in the cloud to get them locally in our project so let's go to the second terminal here and let's do amplify pool again we're done with authentication and our next step is to see how we can fetch data with data store and we're going to see that by simply fetching our worders on our werder page using amplify and using data store specifically uh if we go back here we see that it was updated and um yeah actually you know what i'm gonna meet everything that we have done so far all right [Music] hello dawn hello from russia hey vlad what's up how are you doing joel hello thank you carlos thank you very much okay so as i said our next step is to try to query some data using datastore all right for that let's go ahead in our source and in the modules we are going to go to the orders page because this is the page that is responsible for these orders table worders so at the moment as you can see this table that lucas generated is working with dummy data that is taking from orders.json well we will not need this because we will query them and save a mistake but for that we will need a couple of things for example we will need to keep the orders in state after fetching them so we will need use date from react but also we will need a use effect because we will want to query the worders when this component mounts and to do that we will need the use effect after that let's import the data store that we will use to query our database so let's import data store from aws amplify and also let's import the more model the module model that we need to query the model is one of these data models that we have for example a dish a restaurant a user and so on these are our models if you look in in the source models folder amplify automatically generated the data for them so as you can see here like there is the worder table and if i'm gonna check yeah here is the worder so let's import this word in our file because we will want to query it from models make sure it's models and not modules it's a bit tricky that we are so close together cold i would call this instead of modules i would call it screens probably but okay so now with all of these things let's go ahead and declare the state for our worders so orders set worders equal use state initially it's going to be an empty array now in they use effect in a use effect uh let's go ahead and define it here with an empty dependency array and this will make the function inside the use effect to be called only the first time the worders component is mounted so basically the first time it loads on the screen then we are doing this function so what do we want to do we want to query our worders so let's call datastore.query what do we want to query we want to query this model and after we receive a result dot then we will simply set them in state so set or there's here as simple as it as that we can go ahead and do console.log orders to see the structure of our worders as you can see it's very simple it's datastore.query then we specify what do we want to query and after that we specify what do we want to do with the results this actually can be written with a single weight but inside the use effect it's really uh handy to use that dot van approach because we don't have to declare an advertising function and call it in a user fact like yeah i think awaiting a user fact is not very handy to do so let's go ahead and see what it managed to query we already see a lot of uh rows here i don't see any uh values since um except that undefined one but let's go ahead and open the console and see what we have here in this array well we have all an array with all the data about our worders these orders have like v-specific fields we don't see any data in the table because the fields that it the table is trying to access are a bit different in our back end so this table component will populate every cell in the table based on this data index this data index specify how should i get that data what key should i use to get the data from the from one line of data so here we specify worder id but as we can see here there is no water id in our model there is an id so let's go ahead and say instead of worder id simply id and i'm gonna specify the key as well like to keep them consistent if i save i right away see the worder ids there not sure if we actually need them but yeah it's okay to just to see them maybe for debugging then where is that delivery address the delivery address should be the delivery address of the end user the problem is that as we can see here we have access to the courier we have access to that restaurant but we don't have access to the user we only have the user id here so we're gonna get back uh to this problem and query the user with this user id to be able to render them delivery address but regarding the price uh as we can see the price in our back end is called total so let's change it here from price to total hotel price okay and if we look here we see the price displayed but it has a lot of digits after the dot so what we can do is in the render method we specify how we want to render this data we can say that this price should be truncated using red two fixed and two digits after comma we want to display only two digits after the comma now all of them are displaying display properly here okay price and lastly we have status and status actually has a separate function render worder status that is this render order status as i see here depending on the order status if it is accepted pending declined or so on the problem is we've actually have statuses because we don't have accepted if we look in our models index.t at the top here is our worder statuses we have new for example so we can say new here and we see a couple of them appeared with a green but instead of providing them with as a string we can do better we can say we can actually access it by doing order status that was automatically imported for from the models this enumeration and we can simply say whether status dot new is this one with green for example order status dot uh cooking and the number one will be order status order status dot ready for pickup these are the three statuses that we want to render here i'm not sure yet if the colors are proper but like these are the ones here so okay as we can see they're all displayed i want to improve a bit uh here because we are always repeating this tag tag tag tag and the only thing that changes is that color green orange or red so one way to improve it is to actually say to invisive statements to only to only define the color so color is going to be i know by default it's going to be gray and inside here we're gonna say color is equal to green here color is equal to orange and here color is equal to red now i will pick this return tag and put them outside the if statements and remove it from the other places as well because we will define the color here and at the end we will simply specify the color and render the tag only once it was still rendered only once but in our code like we see it only once let's see if it's working okay okay okay that's good uh this completed we shouldn't be here because they are from the order history but we're going to handle them a bit later now this is good but actually we can also improve this quite a bit one way to improve this would be with switch cases but i really hate them i never write switch cases and actually i would rather write an object that maps one word their status to a color and we do that by simply saying we first define an object start to status to color and if the status is mu color will be green if status is cooking the color will be orange if the status is ready for pickup the status will be red and then we can simply say the color is equal to status to color at position uh by the give me the value from this object where the key is equal to order status this is what we are trying to do we are accessing one property based on the word or style so if order status is new it's gonna access this one so if i check right now it works as expected and we have done it like with a simple object in four lines instead of a lot of if statements here another thing is that these fields right now we hard coded them new cooking ready for pickup and we can leave them like this because the next part might confuse you a bit but in order not to hard code them but to actually get them from here for example from where their status new order status cooking and so on to access them dynamically we can specify a dynamic key in an object by putting it inside the square brackets and here we can say status status where their status were there status dot new the same way here word or status dot cooking and the same way here word status dot ready for pickup and in this case we make sure that the values are actually the ones coming from our database like we are not hard coding we are not repeating this new we are taking it from here let's see if it works it still works and it works as expected so this is our render order status we can remove a console log and as we can see all of them are displayed here we can go to a new page we can come back but at the moment we are missing the delivery address of the user the delivery address as i said is coming from uh from the end user but our order when we query it it only has user id doesn't has have a user property similar to this restaurant so what we will do is we will query the user separately based on this user id so for that we need a new state variable cost not here not here [Music] actually you know what we're gonna do it better in this folder order in the details page we're gonna do that here in the home page not sure i'm not sure if it needs to be here should it be here yes let's um we'll we'll see later uh what we do i've to query it here as well or only on the details page for now we are good we saw how easy it is to query our data and fetch our data from our api using data store um but before moving forward before moving forward i will move to uh to the restaurants crude operations we will get back to the worders a bit later but before before that like we need these restaurant crude operations because we depend a lot on the restaurant for example uh let me let me show you one problem that we have in this orders page we at the moment we display all the words from our database but what we actually should do is only display the worders for the restaurant that we are signing with for the restaurant that we are managing so not all the waters but only the waters to this specific restaurant at the moment there is no way to know which restaurant we are managing at the moment so that's why i decided to move first to the restaurant crude operation and then when we know information about the restaurant we will be able to move to finish the water screwed operations don't forget to smash the like button guys subscribe to the channel hey aditya thank you very much how is the course going how how is your progress so for the restaurant crude what we will need to do first of all if we need to check if a restaurant is saved in the database and if not we need to show the settings page and save a restaurant so the first time we sign up the first time we sign up here for example i'm going to sign out when we create an account you see um here it's a bit challenging to to to design this because it depends on the way we create restaurant if we allow anyone to create a restaurant and to start publishing on our application we would have like this sign up form and he will be able to create an account and after that we will create his restaurant automatically or if we decide to have like an invite only or to pre-create the accounts and set up the restaurants for them like you would need to do it a bit differently uh from um yeah like there are a lot of options basically adding a restaurant from the content tab here or having another dashboard for uh for a super admin that will create restaurants and similar to what um he is saying here to have a super admin but in our case we're gonna allow any user to create an account and when he creates an account we will have to automatically create a restaurant for his account that he signs up here so um for that what we will have to do is when we get to our application we should check is this user that is signed up is he an administrator for any restaurant if yes then get that restaurant get all the words for that restaurant and manage that restaurant otherwise simply show the settings page so he can create his restaurant basically he can set his name set his address and then start adding menu items to his restaurant so this settings page yes when there is no restaurant in the database the only page that we should see here is the settings page so let's go ahead and for that will do it very in a very similar way we did it for our mobile applications for user or for the drivers we will need uh to manage these things in a context so let's start by creating a folder context and inside this context let's create a new file called rest i'll run context dot g s x word yes okay right are we working simply with jess okay so uh here we will need to create context so let's import create context from react and let's create the context so rest run context equal create context now let's define a component that will uh that will render this con this provider this context provider so the component will be called restaurant context provider equal to a simple component that will return someday some will render something on the screen and it will specifically render our context provider because we need to put everything inside the provider to be able to access it now inside the provider we will render everything that this component will receive as children so children we take them from here and we simply render them inside the provider chill trend this provider also needs a value that we will specify in a moment uh and lastly not to forget we need to export default restaurant contacts provider awesome now let's import this restaurant context provider in our app.js so let's go ahead and import it somewhere here rest run context provider from context restaurant context and let's wrap our basically our whole application the whole layout in this restaurant provider so we have layout we're going to end it here all right like this let's see if we didn't break anything uh i think we didn't that's good and now and now we will need a couple of things here the first thing will be what we will manage here in the context provider is the authenticated user so let's save it in a state user and set user user equal use state oh my god i'm not sure showing the screen now i understand lucas so most probably i'm going to delete my context and i'm going to start again that's going to be the easiest one just so everyone is on the same page so as i was saying um like the reason why we need this context probably that was clear uh because we need to manage like information about restaurant and administrator authenticated user in a central place and to have access to it from everywhere in our application so for that let's go ahead and create the context folder contexts contexts contexts and inside the contexts let's create the restaurant context dot gs inside this file we will import firstly create context from react and let's start by creating the restaurant context by creating it here perfect now let's define the component that will render the provider and i will call it restaurant context provider which is a simple react component that will render the restaurant context.provider it should be like this and inside the provider uh we will have to render the children property that we will receive from props and these children are all the components below the tree below this component that we will render and i'm going to show you in a moment which exactly are these children explore default restaurant context provider now inside our updates we need to import our newly created context so let's import restaurant context provider from contexts restaurant context and we will wrap our whole application in it like this restaurant context provider and we will close it after the layout closes and now all of these components that you see here selected started from the layout will be passed to their restaurant contacts providers as a property with the name children because these are the children of our provider and if we look here it's passed as children and we simply render them inside our provider and by doing this all our screens in our app routes will be inside the contacts provider and will have access to our restaurant context awesome so as i was saying we need to come on put it like this oh it doesn't want okay so uh as i was saying we will need to track here two things the administrator well authenticated user that we will get from cognito from our auf module and the restaurant that we will get from our database using datastore and we're going to connect them uh based on that subfield that we defined so first thing that we will have to save is the user from the off module and set user is use state and nothing initially here is used also we will need a rest now run and set rest down and use state that's it like this now um when the component mounts we need to see what authenticated user do we have um there and we're going to take that inside a use effect inside the use effect using the auf module import of module from the aws amplify and let's define values effect that is going to be called when the component mounts basically at the beginning of our application and here what we want to do is to do our authentication dot current authenticated user we can also say bypass cache to actually try to take it from the server not from the cache and after that is done we can simply set that user in our state what okay some videos started playing uh in the van we will simply set in the state as seth user that let's simply console.log the user to see what do we have there let's go back to our application here and we see cognitouser and the cognitou user has attributes and has this sub this sub is what we are interested in because this is a unique identifier of the logged in user and it stands for subject okay we have authenticated user now what we will have to do is in our database we will have to go through the restaurants and we will have to check this administrator id and we will have to see is there any restaurant that this user is an administrator for and if yes then we're going to set it in state and we will know that we are managing that restaurant okay so how do we do that we do that like this as well in a use effect because it will depend wearing the user from the database will depend on this user object from um from the authentication because we will we will query based on the user dot attributes dot subject actually let me grab that cost sub is equal user question mark attributes we saw it it's under a tree buttes dot also with question mark because the user can be null so like this let's try to do console.log sub to see if we took it correctly we should see a number yes this is a sub identifier of our community user now in this user effect we will have to fetch resta restaurant [Music] and filter by admin sub and when should we fetch the restaurant whenever this subject changes here whenever we subject changes that means that a new user is authenticated and we need to fetch the restaurant again all right so how do we find the restaurant well we used beta store data store from aws amplify it was imported automatically here uh datastore.query and what do we query we query the rest runt from the models as you can see here restaurant models but we don't simply query all of them we will actually provide a function that will serve as a filter so we need to filter only the restaurants for example let's do r where are god um what do we want to filter on on the admin sub admin sub it's a function and we need to specify first the operation that we want to run so the operation in our case is the equality we need a restaurant which admin sub is equal so we need to specify eq and the second um the second is the operand like what do we want to compare it with we want to compare it with this sub that is coming from our authentication so restaurant okay and then then what then will happen then we will get some restaurant runs which we can simply console.log restaurant restaurant runs and let's see initially it should be let's refresh empty array yes because there is no restaurant that specify our subject as administrator but if i'm gonna go to user management and i'm gonna check the user that i'm logged in here with and i'm gonna take the sub here these digits let's copy them without aws just these digits let's go back to the content and let's say that let's set up that we are an administrator of a restaurant so if i'm gonna say that i'm an administrator for which one i don't remember which one we were using probably this one let's see and let's go to the admin sub and paste here the admin sub if i'm going to refresh the application right now we see that initially yeah it's empty because we need to do a check we we see that we are console logging it a couple of times meaning that we are fetching a couple of times and that's because initially the sub is null and it still triggers this use effect so we will check if sub is null then we're gonna simply stop the execution do the fetching only if sub is defined but now if i'm gonna refresh we see only once and with a model with information about the restaurant itself awesome so that means that restaurants is an array and we will want to set in state the first restaurant from veterinary because they might be a lot of them but we are specifically interested in the first one actually it shouldn't be a lot of them one user should be managing only one restaurant restaurant runs here not restaurant okay now we are setting it into the state well it wants to do it like this because now like this it looks a bit better but i'm pretty sure it will move from a new line yes okay no worries so thank you very much so guys is this are these steps that we are doing here clear to you so to recap everything that we have done here when we when the component when the component mounts what we are doing is we are getting the current authenticated user from the authentication module after we get this information and we set it into the state we will trigger we will trigger the next use effect to execute because it depends on this sub taken from the authenticated user now when this sub changes we will fetch the restaurant where the ad administrator subject is equal to this sub from um from the authentication module and in this way we are connecting a restaurant with a authenticated user because uh right now if i'm to go ahead in staging here and for the williamson if i'm going to remove admin sub from here save restaurant no actually let me leave it for a moment because i want to whoa whoa reset um i will actually need let me let me add it for a moment just to to to show something visible on the screen to to bring the point home so in the content let's go to the let's save a restaurant [Music] now um this context provider doesn't make a lot of sense without us actually using these values so let's go ahead and use this restaurant and to use it in our application uh from the context itself we need to provide it to the value in the provider and this is this will specify the fields that we want to export through this context provider so one of these things that i want to export is the restaurant itself i'm gonna add more things as we as we need there another thing that uh i like to do whenever setting up a context is to create a helper uh hook that will give me a context consumer that will easier that will make my life easier in the next step so to do that let's do export const the name of our custom hook is going to be use rest run context and this is going to be a function that will when called we'll call use context and what context rest around context basically instead of importing two things in our application use context and restaurant context and then putting them together like this i will have to import only one which is a user restaurant context it's a very little improvement uh but it makes a lot of difference like the less things that i will have to import in my application the better so this uh use restaurant context now we can go in our components uh let's go in our side menu and render the title of our restaurant in our side menu somewhere here so let's go ahead in the side menu what do we have menu items uh probably it's not in the side menu it's in abdojs we have layout sider with an image and then we have a side menu let's go no actually let's put it in the side menu it's better where i will yep in the return let's go ahead and put them in side fragment because besides the menu i also want to render for example and i don't know age 2 with restaurant title to get my restaurant title first i need to get the restaurant and to do that we're going to use that custom hook use restaurant context to get access to our restaurant restaurant run now i can simply go ahead and render the restaurant dot name is it name probably its name let's see it right now all right we see it williams fidel monte and something like that i can do it like h3 and i'm not gonna spend a lot of time on the styles i'm gonna freeze a lot h four will work or i made a mistake generally properties of undefined reading name yes because we need to uh we need to first check if restaurant is defined and only then to render the name there because sometimes i mean at the beginning it's not yet defined so [Music] let's do it like this right we see it here at the top maybe you can use some and design components um i haven't worked with indesign in a while and design to improve with the design of this one components typography what's this no h1 ah i'm not gonna waste time on this i just wanted to save the title here i see it that's perfect i can move on so this restaurant title is coming from our context provider and as you can see it is defined and we we see it here but if we're gonna go ahead and remove the admin sub from here simulating a newly registered user then in our react native application we're not gonna see the title but besides the title we also shouldn't see the orders the menu the order history and and only the settings because we first have to create that restaurant and then manage their orders and menu so based on this variable restaurant inside the side menu i'm gonna decide if we add these order histories and so on were not let me see how to do it well let's do it like this uh rest run menu items and this will be the items only specifically for the restaurant and they are the slash menu and order history or let's say main menu items then this one will be menu items here we will here we need to to also include the main menu items only if a restaurant is defined so oh that's interesting so i'm going to how to easier do that so [Music] let's destructure here based on the restaurant what my camera is falling come on okay so if restaurant is defined then we're gonna destructure the menu main menu items otherwise we're going to structure an empty array will this work let's see now we see only settings it means that it works for this use case uh for the other one i'm gonna just try it like this yes it works like this as well so what we are trying to do here is to render only these two options when there is no restaurant in the database and when there is a restaurant in the database to also render these main menu items from here okay uh so with that being said we are properly rendering like what pages should be visible here but um yeah the next step is to go in the settings page and to start actually implementing this restaurant crude operations so in the modules mod modules modules let's go into the settings index because this is the page for our settings the display restaurant name and restaurant address as we can see here we have a couple of form items for the name we have a form item for the restaurant address and we have a submit button we have a submit button as we can see we are tracking the address that coordinates but we are not tracking the the name input for the name let's uh let's see how it is done in indesign and design how is the form management implemented there so components let's go to the form input for example here is the basic usage show code placeholder value and on change value and on change okay uh let's then define the cons name and set name the state for our name so use date initially is going to be empty and let's send to this form dot uh not to the actual input should be to the actual input that's interesting uh yes it should be to the actual input so the value will be named and we're on change if i'm not mistaken let's see what data we'll receive there on change callback unchanged what's the console long event let's see it in action so restaurant name come on my camera why are you like this so a it's not working okay the does it have a unchanged text if has the id and options it'd been a while until uh from the time i work with rockjas on the web most probably it's on that target and value target dot value so we can use set name with event dot target dot value let's see a b c what's going on okay never mind my something is happening around here i have ghosts so as you can see it's working i can update it and yeah everything is fine now we are also tracking the restaurant name um [Music] let's see let's define them function over on submit so const on submit is going to be that function that is going to be called when we press the submit button that's probably done from the from form form itself so let's go ahead in the form and see some of the things uh i don't know form hmm on finish on forum forum what on finish values it actually has a smart way of managing these forms just show me a very basic simple one form name initial values on finish on finish is the function called i don't know let's give it a try uh form on finish on submit and does it also send something here values console log submit and then values okay let's have a look if i say hello and here submit anything happening you are loading no it's not working uh okay button type primary probably this button should have like thus uh to specify that it submitted the form uh button where is the button html type submit and now submit ok we see the submit event and when it happens we go here and there is no values and we are going to take the name address and coordinates from that state itself okay perfect uh all right all right all right submit we have them here and we can console.log console.log creating a new restaurant and here the name name also address and also coordinate submit creating a new restaurant hello with this label of our address and this latitude and longitude awesome so what do we have to do with this data we have to go ahead and to create a new restaurant in our database based on uh this name address and coordinates so to do that we're gonna need to import beta store from adwords amplify we're gonna need to import uh the model restaurant from the models and on submit we need to go ahead and do beta store dot save we're gonna save a new restaurant with the next data so what data do we need to say first of all name and the name we have it here then we have if i look here and the data restaurant so id is auto generated name we set it image it's required uh but at this moment we haven't uh implemented like an image picker yet so for that reasons i'm just going to go ahead and grab some some images from our source assets i'll have to grab them grab them from um give me a second we should have them here uber eats over its asset bundle data and for example restaurants open okay here i have some restaurant images that i can use as a image for now later on we can update it okay after the image we also have a delivery fee so delivery fee is also required yes and it's a float number uh let's add zero but in a moment we're gonna make sure it's possible to adjust it mean delivery time as well it's an integer mean delivery time let's do 15 and max delivery time let's do 60 minutes we're 120 minutes max delivery time okay what other fields do we need there um max delivery time rating we don't specify the rating because it's not um required address this is the string form version of the address and we're going to take it from the addressing state but it's the addressing state is an object we've as we can see here with a label and also a value description probably the label we are interested in the label so address dot label okay after that we also need that latitude and longitude latitude and longitude and these values we're going to take them from coordinates but latitude and then coordinates dot longitude uh latent longitude let's see if they're here as well l-a-t-l-n-g perfect and what else admin sub okay this is very important admin sub uh by specifying here the admin sub we need to make this connection between the user that is authenticated and the restaurant that we are creating right now because with all this uh it will not work uh to check like this connection this connection so uh the admin sub where do we take it from well we will take it from the context restaurant context because we have it here sub let's go ahead and export it as well like this besides the restaurant we export also the sub and back in our settings where we take the restaurant we don't take the restaurant yet so we need to take the sub from the use restaurant context okay and now we will set this up inside our restaurant inside our newly created restaurant uh let's go ahead and and what let's go ahead and create a new restaurant and see if it actually works so restaurant name is test and address is santa i don't know and let's press submit we don't see any errors which means that most probably it worked so let's go in the content uh in our amplify studio we see this newly created restaurant test with the address latitude longitude and also with admin sub and now if i'm gonna refresh this page we should see it we see the name of the restaurant test and we see the other objects here because the restaurant is already created one last thing is i'm gonna go ahead and actually delete this test restaurant actions delete one items because i want to automatically do that without having to refresh the page and to automatically update that we need to after creating this newly new restaurant we need to go ahead and set it in the context here because our side menu depends on the restaurant and we need to set it here so for that we need to we will export the set restaurant resetter and in the index let's import it here beside the sub on the on submit after saving we need to get to get the newly created restaurant so for that i'm going to make this function a sync and i'm going to say cost new restaurant run equal to a weight data store save now this will give us back the newly created restaurant that we can set in the global context as new restaurant and i can also have a look at maybe some alerts to show that it was successfully created i don't know let's say alert what kind like this success yeah that's good uh let's have a look at the example alert type success but can you do that programmatically do can i programmatically show it or not notification oh okay probably this one is better okay even message is even better success oh perfect so message success after setting the restaurant let's do message success but this message we will import it from and design like this message success restaurant has been created and if i go to the settings right now and enter restaurant name i don't know new restaurant and let's select the address it's let's submit i see a restaurant has been created and without any updates i already see the title and the other menu items here in that list perfect what's going on here should have a unique okay okay okay we're gonna manage it we're gonna see it so uh creating a new restaurant is done we have managed to automatically create a new restaurant and depending on it rendering parts of our application [Music] i want to mention one more thing because settings settings but yes let's um let's continue with updating the restaurant because creating it we we are done with that now it's time to update the restaurant and update the restaurant details so for that whenever we are getting to the settings here if we have a restaurant in the context that means that we want to populate these fields with the restaurant from the context so if i go here i will also get the restaurant from the context basically we're gonna use the same page settings for one creating a restaurant and either restaurant is already created for updating it so restaurant okay and we're gonna we're gonna define a use effect on their restaurant because whenever we receive a new restaurant we need to update our fields here name address and coordinates so the dependency will be restaurant itself so if restaurant then we can set name with the restaurant dot name then set address with address is a bit trickier to be honest because we don't have in the restaurant data everything about that address we have only them the latitude and longitude so yeah i will not be able to update it at this moment but with a name it should work use the fact use effect oh oh the arrow so if restaurant is defined here we see rest new restaurant and when we press the submit button we need to to either create a new restaurant or update the existing one so this function actually you know what i'm gonna create a new one on submit which is gonna be a sync and this one i'm going to create i'm going to call it create new restaurant run and here i'm going to check if a restaurant in our state is not defined then i want to create a new restaurant otherwise i want to update restaurant front and i can also do a wait now let's go ahead and implement this update restaurant function const const update restaurant uh the update restaurant will work uh in a following way cost we will also get the updated restaurant equal to a weight data store we're gonna also call the dot save because the dot save is used for both updating and creating new restaurants but instead of creating a new one here we want to create a copy and update the existing one so to do that we're gonna call the model that we want to update restaurant we're gonna call a function on it copy off we need to provide the existing object of our restaurant which we take from here from from this use from the context so we want to modify the existing one and here is updated we need to specify how do we want to operate it so we want to set first of all the updated dot name of that name from our from our state variable and the same for the address and latitude and longitude like this free so i'm updating dot address dot let and lng is equal here is equal and here is equal okay uh let's we need to make this function i think as well and here we need a semicolon and after that is done we will set it back into the global state set restaurant we've updated restaurant to have um the most up-to-date version and also let's do a message.success restaurant updated that's not updated but you know what i'm gonna do we might when we update the restaurant we might not have the address so in that case we will we don't want to set it back to null we want to leave it as it is there so i'm going to check if address is defined then i'm going to update it otherwise i'm going to leave it as it is where do we have this coordinates coordinates lng coordinates lot just to see them on the screen i'm gonna also do set coordinates with latitude which is restaurant dot latitude and longitude which is restaurant.lng just to see something about the address to make sure that it's updated as you can see here it queries and displays the existing address of the restaurant and if i'm going to update the name to restaurant one and press submit a lot of things are happening here why we press on the on submit update restaurant oh oh oh here i call it again i should go updated oh now what happened let's see oh oh it's actually restaurant one and if i update it restaurant to submit it automatically updates here as well because we update it into the global context and the good thing is that the address does not change if we actually don't change it uh it remains the same but if i'm gonna change the address to i don't know san francisco and if i'm gonna submit these are the new addresses and if i'm gonna refresh the page they should be saved in the database and we can see that as well here new restaurant and the address is san francisco and if i just change the name without not just burgers if i'm going to change just the name that address is not going to change and only the name is going to change here come on so here we see the updated name perfect oh so how do you feel guys how is it going is it clear everything that we are doing here [Music] so yeah with that being said we um we are finished with creating and updating and managing our the restaurant in our uh state a live name not just burgers thank you we we might open a location soon somewhere um so we are done with the restaurant crude operation uh yes we're not covering all of them like delete operations because at the moment this is not the most important part we're gonna see how to execute delete operations on for example dishes and you're going to learn how to do that in a moment but at the moment we can move on to the next step and the next step is to continue continue with how would order crude operation all right let's actually do that because we have started that but we didn't finish it but before that let me commit everything and not forget to switch screens this is restaurant crude all right so as i said the next step is going to be in the worders we are querying the actual worders from the database here but we also need to filter them and one of the filters that we need to filter on is based on which restaurant is this order for now that we are tracking and managing our restaurant in the global in the context we can simply get the rest of rant not like this but this structuring with curly brackets from them use restaurant context let's try to import it it doesn't want to import automatically but we can do it here import use press run context from context and restaurant context i have some okay now we need to filter these orders based on the restaurant id so let's go ahead and filter them like this so for a worder we want to filter one order dot restaurant id order restaurant id and we want to query only the ones that are equal to our restaurant dot id okay let's see now if i'm gonna go here there is no data because there is no worders for uh for my application but you know what i'm gonna do uh i'm gonna take my admin sub from here i'm gonna remove this restaurant that i'm managing and i'm gonna assign myself to manage a restaurant that we already used and that has like worders and if i'm not mistaking is this william williamson so let me let me let uh let me add uh myself to manage this restaurant and to see if we have any data now no data cannot read properties of undefined reading id cannot read proper restaurant let's see context restaurant context i am uh we need to put restaurant here um and only do this if restaurant is defined if it's undefined if it's null then we don't query it now all right now we see a couple of them we see one page of orders and we know that all of them are for this specific restaurant because we followed this check we have two pages two pages of them so if i remove this one it's going to be two pages but now all of them are for this restaurant okay another way we need to filter is we need to filter only new orders um let me check them the order status is so we need to get the new orders we need to get the cooking and ready for pickup if the order is already picked up completely excepted by the driver not by the driver who is accepting here i think the driver yeah the driver or if it's declined by the restaurant we don't show it there so let's um filter based on that so order dot order dot um how is it called no no we need to do it like this dot we need a war operator so let's go ahead and have a look at the documentation how this war operator works so amplify uh data store data store manipulating data querying for single predicates here equal okay that's a string multiple condition can also be used like the one defined with okay for example fetch all posts that has rating greater than before and are published it's like this alternative war logical operator can also be used if you wanted this to be an or statement you would wrap your combined predicates with c dot war so dot were and inside it we define another another one and another one okay i think i understand so inside this war were there status we are gonna say order status which is an actual the same order as here uh but we want to specify worder status dot status equal to they said new were it's equal to or status is equal to booking or status is equal to ready for pica oh it should be one of these statuses will it work ready for pickup new and that's it we don't see any other ones for example if i'm gonna do ready for pickup new ready for pickup for example instead of cooking here if i'm gonna do complete complete or how completed and i'm gonna see them here as well completed okay we see that it works amazing um yes now that's uh that's good we are filtering to see only the waters of this specific uh restaurant that are either in the new cooking or ready for pickup and actually i'm going to go ahead and change the status of one worder to cooking to see if it works as well so order for example one of these new i'm gonna do cooking save and cooking perfect probably the colors are not good but that's that's fine i'm thinking does the restaurant care about the delivery address i think it cares more about the time when the order was submitted so i can go ahead and actually in the tables instead of delivery address um created at and it's gonna be created at this is the data index and the key is going to be created at let's see uh yes it will specify the created at if we want to improve how it how this created ad looks we can use uh some libraries like base js or moment.js but i think moment just is deprecated uh and to improve the style of this uh created that to say like 20 minutes ago or 40 minutes ago or 15 minutes ago and so on uh for now i'm gonna leave it like this uh the next step which are which is very similar to this page is the order history page because in the order history we need to display the same uh the same style of worders but only the the ones that have a status of basically the rest of the status the one that are not related to the restaurant so i can go ahead in the order history here and let's see what do we need to bring from the orders well we will need to bring the state forwarders and the restaurant restaurant is not staked is actually a variable that we take from a context we need to import this use state use state and use restaurant context contexts restaurant context and then we will need to get this use effect this use effect let's grab it here that will query the orders we will also need data store so let's import data store from adobe exemplify and also let's import the order model like this now restaurant query order is equal to this or now let's bring the our statuses we will depend on them new cooking ready for pickup the rest picked up so if it's picked up if it's completed if it's accepted or if it is declined by the restaurant one of these statuses and what else what else wait a second i did i'm in a wrong place i had to change from here so it should be picked up completed accepted you know what i think that accepted will not be here except it is when the driver accepts that word that he is going to pick it up but it's still physically the weather is in the restaurant so the restaurant is still waiting for the driver so for that reason i'm going to move accept it from our water history to our warders like this and for the accepted i will need to add a new color order status dot accepted is gonna be i don't know purple sorry uh so back in our water history we picked up completely declined by restaurant and table columns let's bring the table columns from our worders because we already implemented that and also we have a render order status as well so table columns from here let's remove them all right let's remove them and paste the function render order and also table columns we need to import the order status from our models because we depend on them and we need to specify the colors for the picked up for the completed and for the decline by restaurant it's completed is going to be green picked up is going to be yellow or orange okay i think we are done let's uh let's give it a go cannot read properties i'm defined to fixed too fixed price to fixed why some of them have a price undefined were zero or with question mark okay delivered created that i don't know what's going on here but probably these are old worders so let me just try to console.log where there is are these old worders no it has a total probably the data orders history yes it's coming from the imported hard-coded data but we need to take it from a state and let's have a look completed and completed both of them have id they're created at the status and the price awesome uh do we have the error here on this page what do you want each child in a list should have a unique key property check the render method of body at the table what's up with the table row key oh it's not word already but it's id and the same in the words here row key it's id and now if i'm going to refresh the error should be gone yes perfect and i can go ahead and remove the console.log because we don't need it anymore we have it here so long now where is it coming from in the water history and yes perfect so now whether history displays the completed orders and the word space page displays the worders that are currently active either new ready for pickup or cooking awesome so um we are done with queering the list of orders filtering them based on the restaurant idea and based on the status now we need to um to go ahead and implement like the details page of our worder itself uh as we can see like when we press on this line we are redirected to order slash undefined so basically it means that we are not taking the proper parameter to redirect there in the orders index in the table we have one row click we navigate to where the item dot id should be now if i go back and navigate here yes we are navigating to this order with this id perfect now let's open this order details page which we can find in the detailed order here we have id and what we will need to do is to query the worder not to take it from the dummy data but to actually query it so let's go ahead and define the state for our order use order equal use state initially it's going to be null now um in a use effect use effect that is important from react and that is called every time our id in the parameters changes we need to query specifically the worder with this id using the data store so let's go ahead and do data store that is imported from aws amplify dot query what do we want to query we want to query the worder order that we need to import from models uh but we don't want to query all of them we want to query only the word with this id and by specifying the idea as a string for in the second parameter we are querying by id and it will return us not an array of items but only one item and that item we can then set in our state as set worder order not use order here but set worder okay for example here is information about customer let me first do a simply console.log worder just for you to see it so yeah here it is werder with all the information about it okay on this page we only have information about the total here right away and that is in this total field so let's see where we're displaying the total where is the total here we are gonna display order dot total dot tool fixed and two and also let's other question marks because it might not be there yet now it should be automatically updated 47 if i go to the other order it's eight dollars and so on perfect the total is dynamic now let's go ahead and dynamically display information about the customer itself the name of a customer and the address of a customer to do that in our order we have user id so based on this user id we need to query the customer itself uh let's save it as customer set customer use state equal null now uh inside another use effect that depends on the order dot user id we will check if order dot user id is defined then we want to do data store dot query user from the models also by id by the order dot user id and after that we want to save it in state set user or set customer yes now with this information let's go ahead and render the name here like this customer but name and here let's do customer dot address now let's have a look uh customer name by name customer address uh like this but most probably all of them will be from the same cannot read null of address yes it should be with question mark here most probably all of them are they are all the words belong to the same user because that's how we tested it and that's the data we have there but it's actually coming from uh from here from user vadim and the address so if i save and if i reload i see my new customer address awesome so let's move on to the dishes because the dishes uh are saved in another table and yes we have this worder dish that is an intermediate table between a dish and a water and here we have the water id water and red dish id so what we will have to do is to get all the ordered dish that belongs to this water id basically to a specific worder id okay so for that we're going to need a new state for dishes or let's let's try dishes you state initially it's going to be an empty array and when do we do that well when we use effect we query that well only when the worder.id changes and here let's check first of all if order dot id is undefined let's return otherwise we will go ahead and using data store dot query we're going to query whether these and we don't want to query all of them we want to we want to filter so the condition that we are going to provide here will be that the order id of our order dish should be equal movies worder dot id after we receive a response then we will set dishes now let's go ahead and before rendering everything let's do console.log orders not words but dishes all right here we have model and we see we see a dish i mean we see a water dish that has water id it has the quantity and it also has the dish itself perfect i think that's good i think that's exactly what we need so in this list data source will be dishes okay in this list where is the list data source is dishes but render item is dish item dot name it's not dish item dot name but it's dish item dot dish dot name so this item dot dish dot name let's have a look didn't change much oh because i was working overpriced uh the same for here this item this name and this one is the quantity okay so we see that these were there only were there these cheese tequinos which costs 6.9 and the total is 8 because there is also the delivery fee if i go back to another one for example this one we see that it were therefore obvious and two hamburgers awesome so it actually works just for hamburgers uh so what's what is left on this page we're displaying the word id we're displaying them customer information we're probably displaying the dishes the total now we need to conditionally render these buttons because when the order is new we need to render these two buttons decline order and accept order so where is decline this one this div should be rendered i'm going to put it in here and it should be rendered only if worder dot status equal order status dot new only if it's new food is done should be rendered only when the water status is cooking and otherwise we don't need any buttons because if it's if we will press on this cooking we will set it like that's done we are done with it so let's have a look right now nothing is uh here maybe we should also render the status in the header to see the word or status similar to how we are rendering it in the table worders like with this tag [Music] yeah let's let's let's take it render order status in the detail order probably this function should be put into into utility function because we are using it in multiple places but for this project that's okay so render order status i want to do it in the title so order id hmm where should i put it let me just grab this tag from here put it here and i don't need a function i will just simply keep this constant at the top [Music] order dot status here word dot status now it's ready for pickup okay this one is ready for pickup but for example a new order again i was cannot read property null reading stat tools because here it should be like this or even better we should do if water is not loaded yet return like a loading indicator that i can take from actually and design spinners spin let's do it like this and this pin will import from and design so now if i go here i see it right away status is new and i see that accept order word decline order so what should happen when we press decline order we should simply update the worder and update the status of it so for that in the button decline order we will provide um on press on click a function decline order let's do the same for the accept worder on click it's going to be a function accept order and let's do the same for the food is done uh on click um ready for pickup let's implement these functions here oh const on accept we need a function on decline or how is it called and lastly a function ready for pickup will be different accept order decline order accept order and decline order actually all of them should be a sync or we'll see if we will need to do it so what should happen on accept werder we need to update the order and we need to change simply the status of a worder so for example data store dot save as i said like we use the dot save method to update an order and we use the word dot copy off to create a copy of the existing order but we have in state and updated is going to be equal to 80. status we want to set it to order status dot cooking we want to put it in the cooking state uh to do what else should happen here cost updated order is equal to a weight data store and here we can say uh set order with the updated order for that we need this function async so the same thing should happen within decline worder with a decline order but the only difference is that order status should be declined by a restaurant and the same thing should happen for ready for pickup the status is ready for pickup and the function is a sync as well we could also make it a bit abstract and do update further status and we're gonna say async new status that will do all of these things uh we'll update it based on the parameter that we receive and then like in all of these functions we simply do update order status to order status dot ready for pickup here we simply call it and do decline by restaurant and here we simply do it with cooking cooking now all the logic is inside one function and here we just simply send different variables there because that's the only thing that is different from these three use cases so let's give it a go and let's decline this order so if i'm going to decline the worder we see right away decline by restaurant we don't see the buttons and if i'm going to go to the restaurant here no let's copy the id and if i'm going to go to the orders i'm going to search this id it's not here but if i'm going to go to word history we see it right away here perfect let's go ahead a new order and let's accept it okay we moved it into the cooking and after some time passes it will still be here in cooking we can press food is done and it's ready for pickup after that we cannot do anything we're still gonna see it here but after very restaurant picks it up we will see it in the water history all right so that's how we uh manage and update the worder statuses from here [Music] i think that's everything when it comes to the worders one more thing that i want to do is to add the same click handler to the order history to be able to be redirected there for example in the orders i have this on the table i have is on role click but i need to do that the same in the worder history in the table on row click and this navigate we will take from them const navigate equal use navigate and in the word history i can also uh but it should okay when we navigate it should start with um slash because we don't want to append uh this url to the order history we simply want the order from the beginning like this and we see it's completed we in this way we can also see the details about the orders about the past worders uh awesome so as i said that's uh that's it with worder management system um for our dashboard so i'm going to go ahead and do git add git commit order management system or all the crude operations perfect so back to our uh this one the next step is our menu crude and the menu crude is for creating getting and removing menu items from our application how do restaurants upload multiple images of food we design our data model to work only with one image but you can also design it to work with multiple images if you for example in the data model for them for the dish instead of uh image here instead of one image we can put an array and in that case uh our we will be able to store an array of images an array of urls and display them in our application okay so as i said the next step is our menu here we need first of all in the new menu item to create a menu item so let's go ahead and start from there from creating a new menu item we will find that page in the module and in the create menu item page here as we can see we have a form form item form item form item uh i want to see how how to properly manage forms with and design because we we have a bit more forms here so i want to just have a look form data control include layout initial values validation and submit finish form name label proper initial values on finish on finish okay it has rules as well so let's try it like this so the button should be of type html type submit the form should have a on finish on finish field function on the form itself so let's define them we don't need this because we are not using typescript here and and each form item should have a name form items beside the label should also have a name so if i provide the name with yes this one is going to be name form item here name is equal description um price yes name equal price you can also provide some rules for example for the name we can say that it is required required is true and if i put the placeholder here as well because i think they said that it will send all of them down no the placeholder is not being sent a b c a one submit success name description and name and if i don't provide the name i will see name is required perfect and the same for that description we can add the rules here for description and and for the price as well but the price we need to specify that it's a number so let's have a look here numbers input number oh it's actually an input number so it's gonna work it should work okay okay so now in this on finish we have these [Music] these values what we have to do is to actually create a dish based on that values and the values as we can see here is the description name and price okay let's go ahead and using the data store data store we will save the new dish and what we're going to save we're going to save a new dish that we should import we should import the dish from models so let's go ahead and see what values do we have to give a dish and to see that i'm going to simply go ahead data modeling in the dish itself id is auto generated name so the name we're going to take it from the values basically from here and i can actually right away the structure it name uh then we have image but this image is optional so i'm not gonna give anything description as well i'm gonna destructure it from here because we're gonna get it from the form the price the price as well i'm gonna get it from here and lastly we have var restaurant id right restaurant id of its restaurant id we need to specify the restaurant id where do we get it from we can get the restaurant from the context equal use rest run context i don't know why it doesn't how to suggest me but i can import it like this contexts and then restaurant context and here for id let's do restaurant dot id what's going on parsing type typecast expression is expected to be wrapped with a parenthesis wait i need to put everything into an object now it's better so we save it after that we can do message dot success dish was created and then we can uh we can go back right we can go back so caused navigation use navigation is there anything like go back or i can simply say navigation dot boy navigation dishes to the menu so from here from the menu if i go to new item let's try new dish new dish description price 1.2 submit this was created was it let's see let's go here new dish yes it was actually created uh correctly that's that means that yes our form for the new dish is working properly now uh now now let's go ahead and query all the dishes of a restaurant here and display them right away in the uh in the form in the table that is actually happening in them where is it restaurant menu and instead of taking them from the dishes we're gonna take them um using data store fetch them using datastore save in state and display them in the table so dishes or how to call yes this has set initially it's empty array and inside the use effect with an empty dependency array we're gonna say datastore dot query i want to query dish the dish model that it doesn't want to import properly import dish from models but not all the dishes but uh with a condition there and the condition will be on the restaurant id i want the restaurant id to be equal to the restaurant dot id that we take from them context from a used restaurant context so let's import use restaurant context from okay uh and after that we also need to set dishes in steak perfect as we say we are missing the restaurant here restaurant dot id and we can also do a check to make sure that the restaurant dot id is defined now most probably we will have to change the table columns but let's go ahead and do console log and here we will see this array of three models and actually they are working as expected because no we are still probably taken from here name price and action okay oh this is the new dish that i created so if i'm gonna do a go burger best burger 4.6 i see it right away here and also the user in his own application he is also going to see this newly added dish in his application okay creating we are done querying we are done the last thing is removing by pressing on this remove we will uh we will first where is these messages using an alert like this pop confirm we can are you sure yes or no so or even with a model i don't think we need a model the pop confirm looks quite good so let's see them pop confirm oh it's too much code i don't want to actually no it's not a lot it's only this pop confirm that we need to wrap our button in obvious pop confirm from end design like this what's going on what do you want from me oh wait a second wait a second wait a second why have two of them should be only one yes like this title are you sure you want to delete this dish and on confirm delete dish and delete this we need to know which delay we which dish we are we are trying to delete so we are going to get it from where most probably from this render so in the table if i look at the render method and there render oh it's text record and index so i am interested in the record so i'm not increasing in the first one i'm interested in the item so remove this item this delete dish is going to be a function const delete dish like this and let's do it go ahead and just console.log something just to see if it works delete this picking our act application let's try to place remove are you sure you want to delete this dish no nothing happens but if i press yes i see delete dish here awesome so how do we delete a dish well we do that by we're going to receive it here as dish and we can simply do data store dot delete and what do we want to delete we want to delete the dish itself and we can also update the state so set dishes with dishes dot filter where basically we want to remove that on the state now if i'm gonna remove a new dish yes it's removed from the state everything except this one so my check here should be is different than this id now it is actually removed from the database as you can see and if i remove a burger it's gonna remove only it so i can add it again like this not just burger me and we see it here not just burger amazing perfect so um yes i think with with this feature we are done with a crude operation for our for our dishes and for our menu right because we can create a new item here we can see a list of them here we can remove at this moment we cannot update but as you saw how we can update something in state the same way you can implement it here in the menu as well you would have like an update button in the actions here and whenever you press on that update button redirect to a page similar to to a page very similar to this new dish page which can be either the same page or two different pages one for a new menu item and one for update menu item i recommend having it separate because it's going to be easier to manage the code so yes the restaurant cannot upload an image for the item at this moment we haven't implemented that yet we'll see if we manage to do that today because it depends how much time it will take um me go ahead and do git add menu management crude um there are two things that we can do uh now one of them is the real-time orders with subscription and i think this is actually more important because for example whenever we are on the website on the waters page if there is going to be a new order uh i would like to receive it right away here without having to refresh the page this is quite an important feature for the restaurants they should receive it in real time as soon as possible to start actually preparing it not like after five minutes when someone decides to refresh the page so for that we have um data store um real-time subscriptions so we can go ahead and subscribe uh to some of the events that might happen in our um with our models uh so let's go ahead and models uh in the worders in the index because here is where we want to listen for uh new orders that are generated in the application so we are going to set the that listener up in uh use effect so let's do use effect i'm not showing so i didn't do much the only thing that i need is to go to the source modules and orders index.js because on this page we want to show new orders whenever we appear whenever we are created so let's go ahead in this page after this use effect use effect uh when should we call this function when the component mounts we need to start listening for updates so const um okay data store dot observe we want to observe changes to the worder model and dot subscribe when we subscribe we will receive this message so we will receive the message and we can do console.log message another thing that is very important is this datastore.subscribe will return back a function unsubscribe that we can call to stop listening for updates and subscribe and this is very important because we want to stop the listen for updates when we unmount these components in order to prevent data leaks so whenever we amount unsubscribe no actually it's a subscription object so it's subscription object and we can call subscription dot unsubscribe perfect so let's go ahead open our application here let's remove all the logs i don't have any and let's go ahead and create a new order from our amplify studio basically we are simulating that a user is creating a order so the total is going to be one where their status is going to be new let's we need to link it to a user we need to link it to our restaurant and our restaurant is this hmm i don't know which one is our restaurant you know uh but i can find out i can go in the context and do a console.log sub this will show me that no that's gonna no i need restaurant dot id let me see it's this one if i look here okay this one florian forest so let's do a save order and in the react application we see a console log which is coming from our subscription in index here we subscribe to the order updates and we consolidate the message we see that the operation type is insert and that's what actually we are interested in because if there is a new order the operation type will be insert so op type if op type is equal to insert then what else element element is the data about the newly created worder what are we interested in here well we are interested if this order is for us because it might not be for us let's do and if um i'm going to get the op type and the element which i'm gonna rename to um okay let's let me leave it element easier here so if the element dot restaurant let's see how to get the restaurant id uh water restaurant id order restaurant id yes and if this one is equal to that restaurant dot id then that means that this is a order for us right we can also check the status but i'm gonna leave it like this so what do we want to do with any order we want to set should we set it in state do we depend on anything that we don't have here um as you can see we don't have a relationships here yet like restaurant a restaurant and valver but i think we don't need those so we can simply set orders in state based on the existing orders i will simply put our element at the top and then the existing orders so if we look here in the list the first one in the list the first one is ready for pickup we have how many one two three four five six seven eight we have eight orders let me try to create a new one create order link to a user link to a restaurant with florian forest total is two worder status is new and that's it let's save now automatically without any refresh without any update we see a new order at the top of this list with the status new we don't see any data here because we didn't add it like we just simply created it and now after refreshing like we see it here at the bottom so that's how we receive and subscribe to updates and in this situation we're gonna receive this these updates about our worders without us having to refresh the page it's also possible to listen to updates not only for let's say where is it not only for insert operation but we can also do something for the update operation so for example we can check like if there is uh order updated then maybe we also want to listen to these updates and do something in our ui for example to update the status of a worder automatically so here is the idea of how you can subscribe to these updates and uh how you can take action like you can expand these features and i would encourage you to expand like to to listen to more uh to more events to uh in order to make your application uh more dynamic so with that being said like uh we are done with subscriptions they are very important on this page where we um are looking at the new words that appear in the list so for that i'm gonna do get add git commit subscriptions and get push origin main all right so um yes we are done for today so um if you have questions please let me know in the comments right now and i'm gonna go ahead and show you a quick demo of everything that we have managed to do today so i'm gonna sign out first and i'm also going to yes we started today by we started today by implementing uh and configuring amplify for our project and we did that by connecting it to the same amplified backend that we have built for our mobile applications this is very important because we want these independent front-end applications to communicate with the same back-end to work with the same data with the same users to be able to share data between them so that's why it's very important to do these connections to the same backend we did that by pulling the backend in our application and then we have set up our authentication we set up our authentication uh very easy very fast by using the with authenticator hook and by doing that we have a possibility to create a new account here and to sign in and also there is a forgot password flow that is fully functional and working where you can put your email you'll receive a confirmation code on your email and you'll be able to reset it to a new password after we create an account where we sign in we are redirected to the worders page here in the left corner we also see the name of the restaurant that we are managing right now and if we are a new manager a new user then we are going to need to create the new restaurant here in the settings page by providing the name and also by finding the address with this autocomplete feature after we submit it it's going to be updated and the user will will will see you on the map after you create your account set your address probably the next step would be to start uploading your menu items for that you would come to the menu here and you'll press new item here you're going to say the name of the dish the name of a dish the description and the price you'll submit it and right away you will see it here in this list at the bottom pizza with a price if you are not okay with something you can also remove them with a confirmation pop-up okay after we are done with menu users will start seeing this information in their application and it would be interesting to run valve our applications as well uh to see how everything interacts together but yeah like they will be able to see your worders your items and we will be able to start ordering them the new orders you will automatically receive here on this page and you will see like when it was created uh the price and the status of this order for the new orders you're going to check like if you want to accept the word or what for some reason decline it you can decline it and it automatically disappears from this list or you can accept the order and it sets it in the cooking state and after some time the food is done you can put food is done and it is in ready for pickup while it is in ready for pickup you'll still gonna see it here because physically the water is still at the restaurant and it's going to be here until the driver accepts the water comes to your location and then from his application he changes the water from ready for pickup to them um to the next state so for example i don't know right i'm not gonna find that specific one uh but yeah like when the driver changes ready for pickup the water will disappear from here and you will be able to see it only in the order history in the water history is all the past words that you have done that are in either like decline completed or other non-active states you can press on any orders and here you will see the details of it what specifically it ordered the total and so on so with that being said like we are managing everything about our restaurant in terms of orders menu information like name of a restaurant address and so on so if you have any questions let me know right now hey most thank you very much i'm good i'm a bit tired today to be honest because it was quite a hard week so i'm really looking forward to to get started with the weekend uh yes and also in two days my family is visiting me from uh from my home country they're coming here in tenerife so it's going to be a lot of fun spending some time with them can you implement the google auto complete for the user application uh i will i i'm interested in doing that but um maybe to do like a very very short video of explaining specifically how to use google autocomplete in react maybe we can do that because i don't want to create a new episode just to cover this feature as it's quite a small feature but yeah like it's an interesting feature i'm let me add it to my list google auto complete maybe to create a small tutorial short specifically for this hopefully next time uh use nest just for the backhand we'll see we'll see all right guys so thank you very much for watching till the end i hope you enjoyed this super long series let me know in the comments should we uh continue it and if we would continue this series what other features you would like to see because it seems that we have like almost everything from the core i mean for from the most important features we are we have covered here and i'm pretty uh hyped up about how this project turned out till the end so i hope you found this valuable if you did make sure to smash the subscribe button like the video and leave down your comments whatever tutorials we should do in future and yeah take care stay hydrated and write clean code bye bye

Channel: notJust․dev

Views: 105,398

Keywords:

Id: QrkkNte1onA

Length: 210min 44sec (12644 seconds)

Published: Fri May 13 2022