Changing Basket Logic Frontend

[00:00 - 00:04] We just change the basket logic in the backend. Let's now apply these changes in the front end.

[00:05 - 00:15] Let's start with closing everything from the backend and open the user model. And now with the user, we also need a basket.

[00:16 - 00:20] So that's right. Basket and this basket will be optional.

[00:21 - 00:31] So I can use a question mark and this will have a type basket. It is optional because the user will not always have a basket and it can be null.

[00:32 - 00:46] Now we can go to the user slice. So user slice and we need to make changes to the signing user function because from now onwards, they will receive a basket along with the user token.

[00:47 - 01:00] We can change this variable from user to user data because it contains basket as well as user. And below this, we can use destructuring to extract user in the basket.

[01:01 - 01:17] So basket and everything else can be a user. And this will be restructured from the user data and then the user will be stored inside the local storage.

[01:18 - 01:26] And since we are returning the user from here, it will be stored inside the Redux state. We will then check if the basket exists.

[01:27 - 01:40] If it does, we will use thunk API to dispatch the set basket function, which we created inside the basket slice. So now we want to check if there is a basket.

[01:41 - 01:51] If there is, we want to dispatch. Set basket function and pass the basket.

[01:52 - 01:57] We can do one more thing here. If the user signs out, we want to remove the basket from Redux as well.

[01:58 - 02:16] So let's go to the basket slice and inside reducers, we can create another reducer function. Let's call it remove basket and we just need a state.

[02:17 - 02:24] And what we want to do is put state dot basket to be null. Now let's export this function.

[02:25 - 02:42] Remove basket and now we can use it inside the user menu where we are using the signout function. So user menu and inside the signout function, we can dispatch remove basket.

[02:43 - 02:56] And same goes for the navigation file. So I can copy it and go to the navigation file where we are using the same logic for the signout.

[02:57 - 03:09] So let me paste it here and import remove basket from basket slice. Now let's go back to the browser to check if everything we have implemented here is working correctly.

[03:10 - 03:30] Let's log in as a student first and we can add one course to the basket. Now let's log out and as you see, the basket has been cleared.

[03:31 - 03:37] Now let's add two items to the basket one and two. And now we can sign in as a student.

[03:38 - 03:55] So again, let's use student at the rate test dot com and the same password. Now you see our basket has been replaced with two items, although after signing in, we only added one cause and now we have two.

[03:56 - 04:03] So this means our feature is working as expected. Let's check one more thing now after signing out.

[04:04 - 04:14] Let's add two courses to the basket and let's check the code and let's check the baskets. We see an ID right now.

[04:15 - 04:27] Now what we want to do is we want to replace this ID with a student because that's what our code is doing. So let's go back and signing as a student.

[04:28 - 04:47] Now let's go back to the code to see if that ID has been replaced. So again, let's open show table and now as you can see, we have deleted the ID and assigned it to the user or the student.

[04:48 - 04:55] So what we implemented is now working fine. Now we want our profile page to be protected so that only the sign in users can see that.

[04:56 - 04:57] Let's take care of it next.