1
00:00:03,000 --> 00:00:05,629
We're now displaying an "Add to cart" button

2
00:00:05,629 --> 00:00:06,885
on each product page,

3
00:00:07,445 --> 00:00:09,080
but at the moment all it does

4
00:00:09,080 --> 00:00:10,998
is print something to the console.

5
00:00:11,554 --> 00:00:14,995
The final step is to trigger a POST request

6
00:00:14,995 --> 00:00:16,755
to our cart API route.

7
00:00:17,335 --> 00:00:18,689
If we look at the code,

8
00:00:18,689 --> 00:00:21,456
rather than calling the API in the product page

9
00:00:22,015 --> 00:00:24,691
we could do that directly in AddToCartWidget,

10
00:00:25,191 --> 00:00:27,575
so we keep all the cart functionality

11
00:00:27,575 --> 00:00:30,023
nicely encapsulated in this component.

12
00:00:30,588 --> 00:00:32,505
In practice what we want to do

13
00:00:32,505 --> 00:00:34,168
is call "useMutation" here

14
00:00:35,454 --> 00:00:37,311
to prepare the API request

15
00:00:37,311 --> 00:00:39,097
that we then want to send

16
00:00:39,097 --> 00:00:41,027
when the button is clicked.

17
00:00:41,670 --> 00:00:43,569
And we should also be careful

18
00:00:43,569 --> 00:00:46,910
to prevent the user from submitting multiple times,

19
00:00:46,910 --> 00:00:49,792
by hiding the button once it's been clicked,

20
00:00:49,792 --> 00:00:51,953
while the request is in progress,

21
00:00:51,953 --> 00:00:54,442
that is checking the "isLoading" flag.

22
00:00:55,204 --> 00:00:55,940
Once you've done this,

23
00:00:56,604 --> 00:00:58,948
you should be able to go to a product page,

24
00:00:58,948 --> 00:01:00,528
like for the "Golden Pothos",

25
00:01:01,082 --> 00:01:03,071
select a quantity, say 3,

26
00:01:03,649 --> 00:01:04,781
click "Add to cart",

27
00:01:04,781 --> 00:01:07,103
and this should take you to the cart page

28
00:01:07,659 --> 00:01:10,220
showing the "Golden Pothos" product

29
00:01:10,220 --> 00:01:11,609
with 3 as quantity.

30
00:01:11,609 --> 00:01:14,242
So clicking the "Add to cart" button

31
00:01:14,242 --> 00:01:16,290
should not only add the item

32
00:01:16,290 --> 00:01:19,582
but it should also navigate to the Cart page.

33
00:01:20,375 --> 00:01:22,616
Of course you should also be able to add

34
00:01:22,616 --> 00:01:24,465
other products, like "Aloe Vera".

35
00:01:25,022 --> 00:01:27,661
Let's change the quantity to 2 for example,

36
00:01:27,661 --> 00:01:28,336
and add it.

37
00:01:28,898 --> 00:01:30,504
The Cart page now shows

38
00:01:30,504 --> 00:01:33,090
both "Golden Pothos" and "Aloe Vera".

39
00:01:33,660 --> 00:01:38,046
Ok, so this is your final challenge.

40
00:01:38,046 --> 00:01:40,483
Go and implement it.

41
00:01:41,105 --> 00:01:43,128
Let's look at how I have done it.

42
00:01:43,628 --> 00:01:45,919
In the AddToCartWidget component

43
00:01:46,419 --> 00:01:48,878
I'm first getting the "router" instance,

44
00:01:48,878 --> 00:01:50,845
that we'll need to send the user

45
00:01:50,845 --> 00:01:52,075
to the "/cart" page.

46
00:01:52,698 --> 00:01:55,797
Then I'm creating a React Query mutation,

47
00:01:55,797 --> 00:01:59,350
making a POST request for the "/api/cart" route

48
00:01:59,350 --> 00:02:02,223
and passing "productId" and "quantity"

49
00:02:02,223 --> 00:02:03,735
in the request body.

50
00:02:04,462 --> 00:02:06,686
Then, in response to a button click

51
00:02:07,186 --> 00:02:08,940
I'm calling "mutateAsync"

52
00:02:08,940 --> 00:02:11,256
to actually send the API request.

53
00:02:11,256 --> 00:02:14,555
And when it completes I'm calling "router.push"

54
00:02:14,555 --> 00:02:16,801
to navigate to the "/cart" page.

55
00:02:17,512 --> 00:02:19,919
Finally, to avoid duplicate submissions

56
00:02:20,419 --> 00:02:23,278
I'm checking the "mutation.isLoading" flag

57
00:02:23,778 --> 00:02:25,587
and displaying a "Loading" text

58
00:02:25,587 --> 00:02:26,813
instead of the button

59
00:02:26,813 --> 00:02:28,739
while the request is in progress.

60
00:02:29,356 --> 00:02:30,292
And that's it.

61
00:02:30,792 --> 00:02:32,976
I kept all the mutation code in here

62
00:02:32,976 --> 00:02:34,008
for this example,

63
00:02:34,569 --> 00:02:37,507
but ideally you could move it to a separate

64
00:02:37,507 --> 00:02:38,737
custom React hook.

65
00:02:38,737 --> 00:02:41,403
Either way, this was the last challenge

66
00:02:41,403 --> 00:02:44,341
so congratulations if you made it this far!