Refactoring the Frontend
In this lesson, we're going to refactor our frontend
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:06] We have been working on our API for quite some long now. We need to get our front end match up the speed as well.
[00:07 - 00:26] If we run the front end server again, let's go to cd client and to the npm start. And open localhost 3000.
[00:27 - 00:32] You will see errors. Because now the response we are receiving has taken a different shape.
[00:33 - 00:42] We are receiving paginated result and also we have added few more properties to our cost entity. What we can do is reshape it.
[00:43 - 01:12] Now we'll open the terminal and go inside our client project and create a new model called paginated cost. Let's write export interface paginated cost.
[01:13 - 01:17] And if you remember we have four properties there. Let's write them down.
[01:18 - 01:28] We have page index which will be type number in JavaScript. We have count of type number again.
[01:29 - 01:42] We have the page size again number type. Finally, we have the data property which will be an array of costs.
[01:43 - 01:54] So we will import costs because we have already made our cost entity already. So this is what now we are expecting.
[01:55 - 02:00] And we have added few more properties to our cost model. So let's add them as well.
[02:01 - 02:46] We have added description of type string category of type string language of type string level of type string students of type number subtitle of type string. And we have learnings which will be an array of string or an empty string.
[02:47 - 02:57] And same goes for the requirements. I can simply copy it and paste it here.
[02:58 - 03:14] Now inside our agent.ts file we need to replace array of costs to the paginated costs. Because now the response we are getting is in shape of paginated costs.
[03:15 - 03:32] We will see a lot of errors now. Simply we can go to our courses.ts file and rather than storing it inside courses which is taking type cause, we can simply get rid of it and create a new state.
[03:33 - 03:47] Let's call it data and set data use state. And this will be of type paginated costs as well.
[03:48 - 04:00] And the default value will be empty inside use effect. Let also replace set causes with set data.
[04:01 - 04:26] And inside our return statement rather than mapping the causes, what we can do is we can check if we have data. Then we want to map data.data.map because our data has the paginated cost type and our paginated costs has data property which consists all our courses.
[04:27 - 04:37] So we are checking if we have data then data.data.map which will be of type cause. Now you see the errors are gone.
[04:38 - 04:41] Let's see if everything's working fine on the browser. Yeah, everything is fine here as well.
[04:42 - 04:56] If we inspect it and check our console, we see a warning which says every children in the list should have a unique key prop. And I know this is coming from the show stars function.
[04:57 - 05:02] We are using the icons more than once. And all of them should have a unique key.
[05:03 - 05:13] So let's minimize it and go back to our terminal. This is coming from our show stars function.
[05:14 - 05:24] And here every f a star should be unique. So what I'll do is give it a key to be I inside f a icons dot f a star half.
[05:25 - 05:50] We can make the key I plus one because when we use this the f a star icon and the f a star half icon will have the same key which will show the warning again. So let me refresh it and let's open the browser again to see if we still see the warning.
[05:51 - 05:57] Let me refresh it and see the warning has gone. Let's work on getting the categories in the next lecture.