1
00:00:00,240 --> 00:00:06,540
Beautiful work, we have our basic set up in the garbage, and now, of course, we would need to handle

2
00:00:06,540 --> 00:00:10,010
if we have some items in the cart.

3
00:00:10,420 --> 00:00:17,340
Now, this case is going to be that every time we set up something in our component, we'll have to

4
00:00:17,340 --> 00:00:21,590
manually add that item to the cart because we're not persisting that there.

5
00:00:21,990 --> 00:00:29,250
So before we start working on the return on the logistics, I actually would want to set up the functionality

6
00:00:29,250 --> 00:00:36,240
where every time there's a change with our cart, I would want to invoke the user and I would want to

7
00:00:36,240 --> 00:00:39,710
save our current cart in the local storage.

8
00:00:40,110 --> 00:00:41,370
So if take a look.

9
00:00:41,520 --> 00:00:46,530
I already have, of course, since I'm using the final application, but I'm just going to clear it.

10
00:00:46,770 --> 00:00:52,100
And if, of course, you don't have anything beautiful, that is what you should see.

11
00:00:52,350 --> 00:00:57,720
So you have local storage and we'll just persist that data between all of the renters.

12
00:00:57,900 --> 00:01:03,480
And that way, once we add a few items to the cart, then we can just nicely work on return.

13
00:01:03,480 --> 00:01:07,950
And we don't have to go back every time to add a new item.

14
00:01:07,950 --> 00:01:10,690
Just see some small changes.

15
00:01:11,070 --> 00:01:14,400
And again, that's something we have already done before.

16
00:01:14,760 --> 00:01:21,090
So we have the cart context and I have my placeholder functions and right in the bottom.

17
00:01:21,390 --> 00:01:24,210
Or you can do it, I don't know, wherever you want.

18
00:01:24,220 --> 00:01:31,740
Basically, I'm going to go with my use of fact and I'm going to invoke it every time there is a change

19
00:01:31,740 --> 00:01:32,520
in my car.

20
00:01:33,030 --> 00:01:42,510
So I'm going to go with state and cart and I simply would want to grab my cart value and set up the

21
00:01:42,510 --> 00:01:44,330
item in the local storage.

22
00:01:44,340 --> 00:01:50,760
And yes, of course, every time something changes, I'm just grabbing that latest value and then I'm

23
00:01:50,940 --> 00:01:55,290
overriding the value in the local storage.

24
00:01:55,590 --> 00:02:00,260
So we go with local storage and set item online.

25
00:02:00,270 --> 00:02:01,650
We needed to pass them through things.

26
00:02:01,890 --> 00:02:02,520
What is the key?

27
00:02:02,880 --> 00:02:07,860
In my case, I'm going to go with CART and then the second thing is the value.

28
00:02:07,890 --> 00:02:13,840
Now remember that we can only store String's over there and that's why I will go with Georgetown and

29
00:02:13,840 --> 00:02:20,340
then string it and I'll set up my state car and everything is going to work beautifully.

30
00:02:20,340 --> 00:02:27,480
But remember that there's going to be a case where a user just navigate away from the page altogether.

31
00:02:27,990 --> 00:02:36,180
So when he or she comes back, when we initialize the cart, I also want to check my local storage first.

32
00:02:36,300 --> 00:02:42,330
So let me that of course, this is going to work the moment we have empty cart, nothing is there.

33
00:02:42,330 --> 00:02:50,400
But if we go to the products and for example, if I go to this high bench again and if I go with this

34
00:02:50,400 --> 00:02:51,450
one, check it out.

35
00:02:51,720 --> 00:02:57,480
Now, of course, I have the key and I have the value and we're almost ready to start working on our

36
00:02:57,480 --> 00:02:58,170
car content.

37
00:02:58,710 --> 00:03:05,040
But every time we'll make a change, we'll still start from scratch because our cart is just an empty

38
00:03:05,040 --> 00:03:06,510
array by default.

39
00:03:06,780 --> 00:03:14,430
That's why I will scroll up here and create a function that checks whether we have the item in a local

40
00:03:14,430 --> 00:03:16,050
storage by the name of card.

41
00:03:16,590 --> 00:03:21,920
If we do, then I would want to set up my cart equal to that.

42
00:03:21,930 --> 00:03:24,470
If not, it's still going to be an empty array.

43
00:03:24,720 --> 00:03:28,830
So we're going to go here with CONSED and I'll get a local.

44
00:03:29,600 --> 00:03:34,100
Storage, that's my function, and we're going to go let cart.

45
00:03:35,060 --> 00:03:41,160
Is equal to the local storage and as a of remember that this is just a browser API.

46
00:03:41,390 --> 00:03:43,970
That's why we have such a free access to it.

47
00:03:44,210 --> 00:03:51,810
So I'm setting up my card equal to a local storage get item and then cart, and I'm just checking for

48
00:03:51,810 --> 00:03:52,220
the value.

49
00:03:52,550 --> 00:03:58,430
If there's something there, then I would want to return whatever I have in local storage and set it

50
00:03:58,430 --> 00:03:59,270
equal to the card.

51
00:03:59,570 --> 00:04:01,820
If not, it's just going to be empty.

52
00:04:01,830 --> 00:04:02,100
All right.

53
00:04:02,120 --> 00:04:05,000
And by the way, yes, you can write it as a one liner.

54
00:04:05,330 --> 00:04:11,900
There's just some cases where I like to go a bit more explicit because I think that it is easier for

55
00:04:11,900 --> 00:04:13,170
everyone to understand.

56
00:04:13,430 --> 00:04:19,580
So here, I'll say if card so if there's something there, because if there's nothing there, then I'm

57
00:04:19,580 --> 00:04:26,120
just going to get undefined and then will right away go to a place where I'm returning a empty array

58
00:04:26,360 --> 00:04:31,160
or if the item exists, the card item then I'm just going to go return again.

59
00:04:31,200 --> 00:04:36,650
Now I would want to pass it since we started as a string, but now I would want to pass it back and

60
00:04:36,650 --> 00:04:43,430
then we'll pass in the local storage get item and then we set up the card and where we initialize the

61
00:04:43,430 --> 00:04:50,030
state now I'm going to say get local storage and I'm just going to invoke it.

62
00:04:50,330 --> 00:04:58,070
So that way, once we actually add the item, even when we refresh the page, we should see the card

63
00:04:58,070 --> 00:05:02,690
content because we're persisting our data between the vendors.

64
00:05:03,050 --> 00:05:09,470
And if you don't believe me, you can go and add another item here and we'll just say here five, for

65
00:05:09,470 --> 00:05:12,290
example, and we are adding it to the card.

66
00:05:12,500 --> 00:05:15,300
And now I can see that I have two items in the card.

67
00:05:15,470 --> 00:05:21,650
And again, we're just doing that because I don't want to repeat the same steps every time we make a

68
00:05:21,650 --> 00:05:24,200
small change in our return.