Creating Basket Page
In this lesson, we're going to add Basket page
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:08] We saw that the add item request is working in the basket. Let's create a basket page as well to show the basket items.
[00:09 - 01:00] So what I'll do is inside pages create a new file and we'll call it basket page dot tss and import react from react create basket page function and for now let's return empty fragment and export default basket page. Let's create a new state inside and let's simply call it items.
[01:01 - 01:11] Items and set items. I will use the use state hook and without default value.
[01:12 - 01:55] Let's make the get basket request inside the use effect hook. So I will directly use it use effect and it will automatically import it and inside I will make a request to get the basket and as you know we have agent dot basket dot get and then I will get the response and set items to be the response and also pass an empty array as a dependency.
[01:56 - 02:18] Here what we can do is inside the h1 tag begin write items dot client id. We are getting so many errors because we don't have the model yet.
[02:19 - 02:40] So what we'll do is first of all let's register it inside our app dot tss. I will copy anyone from here and make it slash basket and here it should be basket page.
[02:41 - 03:18] Now to resolve these errors let's create a new model and let's call it basket dot tss. We will export interface basket and our basket will have a client id which will be of type string and we also have items and for that let's create a new model and let's call it cause item.
[03:19 - 04:08] Now below this we will create our cause item and this one should have our cause id which is going to be a string title which will be a string will have the instructor again string image type string and price of type number. Now here we need to pass it a basket type.
[04:09 - 04:28] Also we'll have to go to our agent dot tss file and pass the basket type to our response. So let's go to the agent dot tss file and inside basket we will get type basket response.
[04:29 - 04:44] Also when we are making add item request we are getting basket as a response. Also we see a warning because the name of our model basket clashes with our const.
[04:45 - 05:02] So what we can do is change basket to baskets and let's make it baskets here as well. Now going back here let's change this to baskets and also we have made a request in our showcourses component.
[05:03 - 05:23] So let's go there and it should be baskets instead of basket. Now what we see is an error let's take it from here and our dependency should be in the end.
[05:24 - 05:38] So here and also here it can be undefined so we can pass a question mark just to tell react that there is a value. Make sure the servers are running and open the terminal.
[05:39 - 05:49] Now we can check if our basket page is working fine and we see the client id as we're written in our code. So that is working fine.
[05:50 - 05:51] let's design our basket page in the next lesson.