1
00:00:03,000 --> 00:00:06,190
At this point we're using React Query everywhere

2
00:00:06,190 --> 00:00:08,716
when fetching data on the client side,

3
00:00:09,283 --> 00:00:11,466
and we implemented authentication,

4
00:00:11,466 --> 00:00:14,164
so we can add user-specific functionality.

5
00:00:14,729 --> 00:00:18,175
The final feature I want to add to this example

6
00:00:18,175 --> 00:00:19,568
is a shopping cart.

7
00:00:20,142 --> 00:00:22,966
Here on the product page we want to show

8
00:00:22,966 --> 00:00:25,085
a button saying "Add to cart",

9
00:00:25,656 --> 00:00:28,101
and clicking it will add this product

10
00:00:28,101 --> 00:00:30,215
to the user's own shopping cart.

11
00:00:30,215 --> 00:00:32,661
Now, this final section of the course

12
00:00:32,661 --> 00:00:34,907
is a bit different from the others

13
00:00:34,907 --> 00:00:37,617
in that there are really no new concepts.

14
00:00:37,617 --> 00:00:40,657
You should already know pretty much everything

15
00:00:40,657 --> 00:00:43,697
that's needed to implement this functionality.

16
00:00:43,697 --> 00:00:45,745
So this section will consist of

17
00:00:45,745 --> 00:00:48,587
a series of challenges for you to complete,

18
00:00:48,587 --> 00:00:51,164
as a way to practice some of the things

19
00:00:51,164 --> 00:00:52,883
you learned in the course.

20
00:00:54,044 --> 00:00:55,951
But before we start with the challenges

21
00:00:56,451 --> 00:00:58,956
I shall explain to you how to use

22
00:00:58,956 --> 00:01:01,690
the Cart Items collection in Strapi.

23
00:01:02,266 --> 00:01:04,819
This collection will contain one entry

24
00:01:04,819 --> 00:01:08,047
for each product that a user adds to their cart.

25
00:01:08,615 --> 00:01:10,911
Let's start by adding a new cart item

26
00:01:10,911 --> 00:01:12,463
from this user interface.

27
00:01:13,026 --> 00:01:15,937
Now, each cart item has three fields:

28
00:01:16,437 --> 00:01:18,834
There's "User", which is a relationship

29
00:01:18,834 --> 00:01:20,370
to the "Users" collection

30
00:01:20,932 --> 00:01:24,012
so we can only choose one of the existing users

31
00:01:24,012 --> 00:01:25,061
such as "Alice".

32
00:01:25,627 --> 00:01:26,958
Then there's "Product",

33
00:01:26,958 --> 00:01:28,868
and again this is a relationship,

34
00:01:28,868 --> 00:01:31,126
this time to the "Products" collection.

35
00:01:31,742 --> 00:01:33,079
Let's pick "Aloe Vera".

36
00:01:33,579 --> 00:01:35,767
And finally we need a "Quantity",

37
00:01:35,767 --> 00:01:38,354
which means how many "Aloe Vera" plants

38
00:01:38,354 --> 00:01:39,880
does Alice want to buy?

39
00:01:40,513 --> 00:01:41,416
Let's say 3.

40
00:01:41,916 --> 00:01:43,053
We can now save this entry,

41
00:01:43,949 --> 00:01:45,955
and if we go back to the collection page

42
00:01:46,455 --> 00:01:49,111
here we can see our new cart item in the list

43
00:01:49,111 --> 00:01:51,058
with the three values we entered.

44
00:01:51,618 --> 00:01:53,675
Note that it also has an "Id" field

45
00:01:53,675 --> 00:01:55,439
that's assigned automatically.

46
00:01:55,998 --> 00:01:58,105
Anyway, now that we have some data

47
00:01:58,105 --> 00:02:00,833
let's try fetching it using the REST Client.

48
00:02:01,395 --> 00:02:04,704
Here I already have a "GET /cart-items" request.

49
00:02:04,704 --> 00:02:07,118
If you remember we tried it before,

50
00:02:07,118 --> 00:02:09,255
when we discussed why we needed

51
00:02:09,255 --> 00:02:11,531
to add authentication to our app.

52
00:02:12,237 --> 00:02:14,138
If I send this request,

53
00:02:14,138 --> 00:02:16,947
it failed with "401 Unauthorized".

54
00:02:16,947 --> 00:02:20,995
This must be because the token I used is expired.

55
00:02:21,661 --> 00:02:24,084
It expires after 24 hours by default.

56
00:02:24,584 --> 00:02:26,217
I need to get a new token

57
00:02:26,217 --> 00:02:28,178
by logging in a "Alice" again.

58
00:02:28,743 --> 00:02:30,591
And I called our API route,

59
00:02:30,591 --> 00:02:33,054
so the token is in the cookie value.

60
00:02:33,622 --> 00:02:36,397
Anyway, let's use this token instead of the old one.

61
00:02:37,988 --> 00:02:40,362
And if we try getting the cart items again,

62
00:02:40,862 --> 00:02:43,303
this time we get a successful response.

63
00:02:43,803 --> 00:02:46,803
You can see that it returns a JSON array

64
00:02:46,803 --> 00:02:48,903
containing an object that is

65
00:02:48,903 --> 00:02:51,753
the cart item we just added in the UI.

66
00:02:51,753 --> 00:02:54,678
Note that each relationship is expanded

67
00:02:54,678 --> 00:02:56,478
as a full nested object.

68
00:02:56,478 --> 00:02:59,778
Like, for "user" we have all the properties:

69
00:02:59,778 --> 00:03:02,553
"id", "username", "email", and so on.

70
00:03:03,502 --> 00:03:06,363
Same for the "product": we get all the fields,

71
00:03:06,363 --> 00:03:08,353
including the "picture" details.

72
00:03:08,915 --> 00:03:11,272
That's more than we need for our shopping cart,

73
00:03:11,772 --> 00:03:14,689
but we certainly have all the fields we entered,

74
00:03:14,689 --> 00:03:16,208
including the "quantity".

75
00:03:16,769 --> 00:03:18,868
So this response will be useful

76
00:03:18,868 --> 00:03:20,562
if we want to show a page

77
00:03:21,129 --> 00:03:24,171
with all the cart items for a certain user.

78
00:03:24,671 --> 00:03:27,584
But how can we add an item to the cart

79
00:03:27,584 --> 00:03:28,657
using the API?

80
00:03:29,638 --> 00:03:32,195
We'll need to make a different request

81
00:03:32,195 --> 00:03:34,484
that is a "POST" to the same path.

82
00:03:35,051 --> 00:03:37,003
And again we'll need to send

83
00:03:37,003 --> 00:03:38,746
the authentication token,

84
00:03:38,746 --> 00:03:42,161
because the server needs to know who the user is.

85
00:03:42,161 --> 00:03:45,437
Each user can only add items to their own cart.

86
00:03:46,146 --> 00:03:48,599
We'll send some JSON data, so we also need

87
00:03:48,599 --> 00:03:50,467
the right "Content-Type" header.

88
00:03:51,025 --> 00:03:53,290
And the body will be a JSON object

89
00:03:53,290 --> 00:03:55,088
with the cart item details.

90
00:03:55,088 --> 00:03:57,220
This should have the same fields

91
00:03:57,220 --> 00:03:59,418
that we've seen in the Strapi UI,

92
00:04:00,117 --> 00:04:02,959
so in theory we should start with a "user",

93
00:04:03,459 --> 00:04:06,217
but actually we don't need this, because

94
00:04:06,217 --> 00:04:09,528
we're already sending the "Authorization" header

95
00:04:09,528 --> 00:04:13,252
with a token that identifies who's making the request,

96
00:04:13,252 --> 00:04:16,493
so the server will set the "user" automatically

97
00:04:16,493 --> 00:04:17,873
based on that token.

98
00:04:18,649 --> 00:04:20,521
What we do need is a "product",

99
00:04:21,021 --> 00:04:23,394
and this will actually be the product "id".

100
00:04:23,894 --> 00:04:26,669
Let's look at the "Products" collection in Strapi.

101
00:04:27,169 --> 00:04:29,187
We could use the second product,

102
00:04:29,187 --> 00:04:30,132
that has id "2"

103
00:04:30,695 --> 00:04:33,037
and corresponds to the "Golden Pothos".

104
00:04:33,537 --> 00:04:34,942
So let's put "2" here.

105
00:04:35,442 --> 00:04:36,831
Finally we need the "quantity",

106
00:04:37,908 --> 00:04:40,382
that's just a number, for example "1".

107
00:04:40,882 --> 00:04:43,592
Ok. If we send this POST request,

108
00:04:43,592 --> 00:04:45,563
we get a "200" response,

109
00:04:46,145 --> 00:04:48,512
and the body contains the details

110
00:04:48,512 --> 00:04:50,736
of the cart item we just added.

111
00:04:50,736 --> 00:04:53,676
You can see that the "product.id" is "2",

112
00:04:53,676 --> 00:04:55,254
the "quantity" is "1",

113
00:04:55,969 --> 00:04:58,161
and of course the "user" is "Alice".

114
00:04:58,661 --> 00:05:02,473
So that's how you add a cart item through the API.

115
00:05:02,973 --> 00:05:06,115
You can see that there are now two entries here

116
00:05:06,115 --> 00:05:07,653
both for "User: Alice",

117
00:05:08,219 --> 00:05:11,097
and the second one is the "Golden Pothos"

118
00:05:11,097 --> 00:05:13,764
with "Quantity: 1" as per our request.

119
00:05:14,334 --> 00:05:16,580
Obviously we can see the same data

120
00:05:16,580 --> 00:05:19,816
if we make another GET request for "/cart-items".

121
00:05:20,382 --> 00:05:22,994
The array in the response should now contain

122
00:05:22,994 --> 00:05:23,766
two elements,

123
00:05:24,325 --> 00:05:25,812
where the second one has

124
00:05:25,812 --> 00:05:27,857
"Golden Pothos" as the "product".

125
00:05:29,591 --> 00:05:31,923
Now, if you make the same request,

126
00:05:31,923 --> 00:05:34,665
but passing a token for a different user

127
00:05:34,665 --> 00:05:37,476
of course you will not see Alice's items.

128
00:05:38,113 --> 00:05:40,208
Feel free to give it a try:

129
00:05:40,208 --> 00:05:42,380
log in as "Bob" for example,

130
00:05:42,380 --> 00:05:44,086
with password "Bob123"

131
00:05:44,086 --> 00:05:46,956
and if you get the cart items for Bob

132
00:05:46,956 --> 00:05:49,284
you should see an empty array.

133
00:05:49,284 --> 00:05:52,697
Each user has their own separate cart items.

134
00:05:53,584 --> 00:05:56,462
So this is how the backend API works.

135
00:05:56,462 --> 00:05:58,718
In the next video we'll start

136
00:05:58,718 --> 00:06:01,985
by adding a "cart" page to our Next.js app

137
00:06:01,985 --> 00:06:04,163
that displays the cart items

138
00:06:04,163 --> 00:06:06,574
returned by this "GET" request.