1
00:00:00,150 --> 00:00:07,590
Nice work on setting up the colors next hour, I want to work on the buttons so increased and increased

2
00:00:07,590 --> 00:00:11,030
functionality as well as add to cart link.

3
00:00:11,490 --> 00:00:15,390
So I'm going to navigate back to my add to cart component.

4
00:00:15,840 --> 00:00:20,000
And in here I would want to set up one more state value.

5
00:00:20,430 --> 00:00:23,220
And this is going to be equal to my amounts.

6
00:00:23,240 --> 00:00:29,940
I'm going to go with an amount and of course a set amount and that one will be equal to use state.

7
00:00:30,360 --> 00:00:36,920
And since there's no point on adding zero items to the card, by default, it is going to be one.

8
00:00:37,290 --> 00:00:39,060
And of course, there's going to be two functions.

9
00:00:39,400 --> 00:00:42,210
There's going to be one for increase and one for decrease.

10
00:00:42,510 --> 00:00:47,730
Now, since I'm going to be passing them down into amount buttons component, I'm just going to set

11
00:00:47,730 --> 00:00:48,540
up placeholders.

12
00:00:48,660 --> 00:00:52,350
So that way I don't have to hop back and forth.

13
00:00:52,680 --> 00:00:55,560
Sauniere will go with const increase.

14
00:00:56,490 --> 00:01:02,120
Is equal to my function, but said I'm not going to even consider going to think of everything works

15
00:01:02,580 --> 00:01:09,890
and we also have a decrease show and again, we just set up nice placeholders.

16
00:01:10,320 --> 00:01:16,890
Now, once we have everything in place as far as the state's value and two functions now, I would want

17
00:01:16,890 --> 00:01:18,900
to work on my return.

18
00:01:19,380 --> 00:01:20,730
So scroll down a little bit.

19
00:01:20,980 --> 00:01:27,990
I'm going to remember we had our B10 container and instead of this B10 container, there's going to

20
00:01:27,990 --> 00:01:31,410
be a Mountbatten's component like so.

21
00:01:31,710 --> 00:01:34,530
And then the second thing is going to be a link again.

22
00:01:34,930 --> 00:01:40,680
Eventually, once we click on a link, we will invoke have the card function for the time being is just

23
00:01:40,680 --> 00:01:42,870
going to be a link to a card page.

24
00:01:43,260 --> 00:01:46,560
So we're using Dehlin components from reactor down.

25
00:01:46,830 --> 00:01:55,140
We add here card and we'll add also a class name of B10 just so we have nice styling and as far as decks

26
00:01:55,230 --> 00:01:57,570
we're going to go with add to CART.

27
00:01:58,020 --> 00:02:06,900
We save it for now so we should see our link and my buttons and any buttons will pass and three things

28
00:02:07,320 --> 00:02:12,090
will pass in the amount of pass and increase as well as the decoration.

29
00:02:13,150 --> 00:02:20,860
So where we have the amount buttons, three props amount is equal to the amount that increase is equal

30
00:02:20,860 --> 00:02:23,630
to increase and then decrease is equal to decrease.

31
00:02:24,160 --> 00:02:30,610
So three things over here decrease and you can probably already guess that we'll just set up the return

32
00:02:30,880 --> 00:02:32,500
in the amount buttons.

33
00:02:33,070 --> 00:02:39,070
So, of course, all our logic is in place and then we'll deal with these functions and essentially

34
00:02:39,070 --> 00:02:43,390
increase and decrease is going to be pretty much the same like we have worked before.

35
00:02:43,780 --> 00:02:51,400
But the difference in this case is we'll have to check for the stock if the amount gets bigger than

36
00:02:51,400 --> 00:02:57,790
that value, because, of course, I would always want to add only the amount of items that I have in

37
00:02:57,790 --> 00:02:58,200
the stock.

38
00:02:58,510 --> 00:03:03,290
I don't want to add 30 items to the cart, even though I can sell maybe only five.

39
00:03:03,580 --> 00:03:04,660
Hopefully that makes sense.

40
00:03:05,110 --> 00:03:11,020
And like I said, I would want to navigate right now to my buttons and set up my return.

41
00:03:11,410 --> 00:03:20,080
So the structure, all these three things might let me close the sidebar increase, decrease as well

42
00:03:20,080 --> 00:03:20,860
as the amount.

43
00:03:21,340 --> 00:03:26,020
And then when it comes to wrapper, I'll have a component style component.

44
00:03:26,020 --> 00:03:32,020
But I also would want the class name, because this is going to be another case where there's some styling

45
00:03:32,230 --> 00:03:33,370
from the outside.

46
00:03:33,700 --> 00:03:38,530
So we're going to go with amount and then beat the arms like Shell.

47
00:03:38,860 --> 00:03:44,440
And inside of this component, what we're going to do is just set up three buttons.

48
00:03:44,740 --> 00:03:47,920
So we're going to go with button will add type or A..

49
00:03:47,920 --> 00:03:51,390
Sorry, two buttons and then one having to type.

50
00:03:51,400 --> 00:03:53,080
Is it going to be equal to a button?

51
00:03:53,440 --> 00:03:58,900
Then let's add a class name of amount between amount Mithian.

52
00:03:59,230 --> 00:04:06,280
So and since this is going to be decreased one will say on KLAC, so once we click we're going to decrease

53
00:04:06,280 --> 00:04:07,060
the amount.

54
00:04:07,210 --> 00:04:09,640
So of course we'll invoke the function.

55
00:04:09,880 --> 00:04:16,990
Now in this case, we already set up all the functionality in the card so I can simply pass it as a

56
00:04:16,990 --> 00:04:17,470
reference.

57
00:04:17,740 --> 00:04:21,970
And then as far as the actual button, I'm just going to say five minutes.

58
00:04:22,270 --> 00:04:24,850
That is the icon that I would want on display.

59
00:04:25,120 --> 00:04:30,340
And of course, I just need to change this around copy and paste and it's still going to have the class

60
00:04:30,340 --> 00:04:32,530
of a button, but on click.

61
00:04:33,840 --> 00:04:42,300
We're going to go with increase, I'm afraid my nose is going to turn into F.A.A. plus and then in between

62
00:04:42,300 --> 00:04:49,620
them, why don't we set up a heading tale with a last name amount and inside of it, we're going to

63
00:04:49,620 --> 00:04:51,570
pass in whatever is the amount.

64
00:04:51,750 --> 00:04:55,100
And remember, by default, we were setting this up as one.

65
00:04:55,470 --> 00:04:59,830
So once we save, we should have two buttons as well as the amount.

66
00:04:59,850 --> 00:05:05,600
Now, of course, nothing happens because we haven't set up the functionality in ATM card.

67
00:05:05,880 --> 00:05:11,610
So now I'm going to navigate back to court and I guess I'm going to start with increased.

68
00:05:11,800 --> 00:05:13,530
Doesn't really matter which one.

69
00:05:13,530 --> 00:05:14,880
Again, the Gotcher is going to be that.

70
00:05:15,120 --> 00:05:19,260
We'll have to check that we don't go over the stock value.

71
00:05:19,590 --> 00:05:25,320
So instead of the increase, I'm going to invoke my set amount function that controls that that value.

72
00:05:25,560 --> 00:05:27,840
And I'm just going to go with functional approach.

73
00:05:28,810 --> 00:05:34,780
And in this case, I'm going to say that the parameter name will be all the amount, so that is the

74
00:05:34,780 --> 00:05:36,150
value before the update.

75
00:05:36,160 --> 00:05:41,690
And then remember, whatever we are returning from this function is going to be that new value.

76
00:05:42,040 --> 00:05:45,380
So say that amount is equal or not?

77
00:05:45,400 --> 00:05:46,870
I'm going to call the stamp amount.

78
00:05:47,410 --> 00:05:55,910
My stamp amount is equal to all the amount plus one since we're increasing all the amount plus one.

79
00:05:56,260 --> 00:05:57,610
But here's the gotcha.

80
00:05:57,610 --> 00:06:04,090
I would want to check if the Temple Mount is bigger than stock, if it is bigger than stock value.

81
00:06:04,300 --> 00:06:09,270
So how many items I have in the stock then of course I'm just going to set it equal to the stock so

82
00:06:09,280 --> 00:06:16,060
that our user can click all day long, but he or she won't be able to increase more than the actual

83
00:06:16,240 --> 00:06:18,160
amount of items I have in stock.

84
00:06:18,490 --> 00:06:22,480
So and say let's say Temple Mount is bigger than stock.

85
00:06:22,720 --> 00:06:23,920
If that is the case.

86
00:06:24,280 --> 00:06:29,110
And of course I would want to set my Temple Mount is equal to the stock.

87
00:06:29,410 --> 00:06:34,350
And then eventually remember, whatever we were returning is going to be that Newsted value.

88
00:06:34,660 --> 00:06:42,100
So we just go with time and now we just need to do the same thing for decrease the copy and paste.

89
00:06:42,420 --> 00:06:46,960
And I'm going to rename it, by the way, I already have decreased my bad.

90
00:06:48,270 --> 00:06:54,930
So in this case, I can just delete my placeholder here and say decreased set amount, all the money

91
00:06:54,930 --> 00:07:00,510
that still stays the same, but of course, since I'm decreasing, is going to be minus one and I'm

92
00:07:00,510 --> 00:07:01,830
not going to be checking for the stock.

93
00:07:02,130 --> 00:07:06,960
I'm going to be checking for the value that is less than one, because like I said, there's no point

94
00:07:06,960 --> 00:07:09,390
to add zero items to the car.

95
00:07:09,780 --> 00:07:16,930
So I'll say if that amount is less than one, that amount is equal to one.

96
00:07:16,980 --> 00:07:19,450
And again, we're returning a temperament.

97
00:07:19,770 --> 00:07:26,820
And what you'll notice is that you're clicking notice you should get to the lemon, because that is

98
00:07:26,820 --> 00:07:31,050
the amount of items that this product has in stock.

99
00:07:31,290 --> 00:07:32,910
So we cannot go more than 11.

100
00:07:33,210 --> 00:07:37,020
And if the user tries to totally remove the items.

101
00:07:37,050 --> 00:07:37,830
It's not possible.

102
00:07:37,860 --> 00:07:38,170
Oswal.

103
00:07:38,400 --> 00:07:43,110
So we'll always have one because it doesn't make sense to have zero items to the card.

104
00:07:43,500 --> 00:07:48,110
And of course, once you click on Add to Cart, we just navigate to the card page because we haven't

105
00:07:48,120 --> 00:07:49,390
set up the functionality.

106
00:07:49,710 --> 00:07:52,620
Now let me take a look at the other product.

107
00:07:53,500 --> 00:07:59,110
Maybe this one, so this one has one, and again, it only has two items in stock.

108
00:07:59,510 --> 00:08:05,870
That's why we cannot go below one and we cannot add more than two items to the cart.

109
00:08:06,610 --> 00:08:11,830
Hopefully we are all in good shape and now we can move on to the next step.