1
00:00:03,000 --> 00:00:04,626
We added the logic to

2
00:00:04,626 --> 00:00:06,716
fetch the "cartItems" data.

3
00:00:06,716 --> 00:00:09,349
Now we want to display those items

4
00:00:09,349 --> 00:00:10,279
in the page.

5
00:00:10,279 --> 00:00:13,996
And to do that we can use a standard HTML table.

6
00:00:13,996 --> 00:00:16,783
We're going to do this in two steps.

7
00:00:17,670 --> 00:00:19,576
First I would like you to

8
00:00:19,576 --> 00:00:22,473
simply display the cart data as it is.

9
00:00:22,473 --> 00:00:25,065
So have a table row for each item,

10
00:00:25,065 --> 00:00:28,191
with three columns for the product title,

11
00:00:28,191 --> 00:00:29,716
price, and quantity.

12
00:00:29,716 --> 00:00:32,613
Don't worry about formatting the price

13
00:00:32,613 --> 00:00:34,290
as a currency for now.

14
00:00:35,248 --> 00:00:37,253
As I mentioned, you can use

15
00:00:37,253 --> 00:00:39,557
a standard HTML table for this,

16
00:00:39,557 --> 00:00:42,528
along with some Tailwind utility classes

17
00:00:42,528 --> 00:00:43,717
for the styling,

18
00:00:43,717 --> 00:00:46,392
for example you can use "text-right"

19
00:00:46,392 --> 00:00:48,695
to align numeric cell contents.

20
00:00:49,567 --> 00:00:54,413
Pause the video now and write the JSX elements

21
00:00:54,413 --> 00:00:58,311
to display the cart items in a table.

22
00:00:58,917 --> 00:01:01,057
Ok. Here's how I would do it.

23
00:01:01,557 --> 00:01:03,544
For convenience I have created

24
00:01:03,544 --> 00:01:06,591
a separate React component called "CartTable",

25
00:01:06,591 --> 00:01:09,837
and I'm only displaying it if "cartItems" is set.

26
00:01:09,837 --> 00:01:12,156
Because we cannot display the items

27
00:01:12,156 --> 00:01:14,276
if they haven't been loaded yet.

28
00:01:15,041 --> 00:01:17,260
Now, I wrote the CartTable component

29
00:01:17,260 --> 00:01:18,616
inside this same file,

30
00:01:18,616 --> 00:01:21,636
but it could be moved to its own separate module.

31
00:01:22,260 --> 00:01:24,314
Anyway, this component expects

32
00:01:24,314 --> 00:01:27,739
the "cartItems" in the props, and returns a table.

33
00:01:28,308 --> 00:01:29,771
There's a header row,

34
00:01:29,771 --> 00:01:31,721
showing the column headings,

35
00:01:31,721 --> 00:01:34,090
and I'm using Tailwind CSS classes

36
00:01:34,090 --> 00:01:36,389
to add some padding to each cell.

37
00:01:37,099 --> 00:01:38,587
Then there's the table body,

38
00:01:39,087 --> 00:01:41,852
and here I'm iterating over each element

39
00:01:41,852 --> 00:01:43,581
in the "cartItems" array,

40
00:01:43,581 --> 00:01:46,140
displaying a table row for each item,

41
00:01:46,140 --> 00:01:49,182
with separate cells for the "product.title",

42
00:01:49,182 --> 00:01:51,326
"product.price" and "quantity".

43
00:01:52,103 --> 00:01:54,707
I'm using the "text-right" utility class

44
00:01:54,707 --> 00:01:56,986
for the cells that display numbers,

45
00:01:56,986 --> 00:01:59,395
so they will be aligned to the right.

46
00:02:00,026 --> 00:02:02,206
That's it. It's a fairly simple table.

47
00:02:02,206 --> 00:02:04,099
If you did it in a different way,

48
00:02:04,099 --> 00:02:05,075
that's still fine

49
00:02:05,690 --> 00:02:07,517
as long as you're displaying

50
00:02:07,517 --> 00:02:09,410
a table that looks like this.

51
00:02:09,410 --> 00:02:11,107
Now, let's move to step 2.

52
00:02:11,737 --> 00:02:13,122
We want to add a column

53
00:02:13,122 --> 00:02:14,987
showing the total for each row.

54
00:02:15,548 --> 00:02:17,717
We can easily calculate the total

55
00:02:17,717 --> 00:02:20,412
by multiplying the price by the quantity.

56
00:02:20,978 --> 00:02:24,277
And then we also want a grand total at the end,

57
00:02:24,277 --> 00:02:25,752
as an additional row.

58
00:02:25,752 --> 00:02:29,192
So this will the sum of the totals for each item.

59
00:02:29,832 --> 00:02:31,588
The last improvement we want to make

60
00:02:32,088 --> 00:02:35,401
is to format each price as a dollar amount,

61
00:02:35,401 --> 00:02:38,713
so display a dollar sign before the number,

62
00:02:38,713 --> 00:02:41,409
and always show two decimal places.

63
00:02:42,063 --> 00:02:44,370
That's part two of this challenge.

64
00:02:44,870 --> 00:02:47,340
In terms of code, you'll obviously need

65
00:02:47,340 --> 00:02:50,506
to modify the table you created in the first step.

66
00:02:51,069 --> 00:02:54,625
But you also need to transform the "cartItems" data

67
00:02:54,625 --> 00:02:56,298
to calculate the totals.

68
00:02:56,867 --> 00:02:59,975
At the moment the "cartItems" array looks like this.

69
00:03:00,475 --> 00:03:04,002
What we want to do is add a "total" for each item,

70
00:03:04,002 --> 00:03:06,048
in this case the price is 7.5

71
00:03:06,048 --> 00:03:08,657
multiplied by 3 (that's the quantity)

72
00:03:09,299 --> 00:03:11,405
meaning it should be 22.5.

73
00:03:11,905 --> 00:03:14,078
Let's do the same for the other cart item.

74
00:03:15,337 --> 00:03:19,115
Here the total is 15, because the quantity is 1.

75
00:03:19,615 --> 00:03:22,987
But after this we also want to add a grand total

76
00:03:22,987 --> 00:03:24,392
for the entire cart.

77
00:03:24,962 --> 00:03:26,925
So instead of an array we could

78
00:03:26,925 --> 00:03:28,760
transform this into an object

79
00:03:29,323 --> 00:03:32,650
where the "items" array is just one of the properties.

80
00:03:35,023 --> 00:03:37,878
This way we can add another property

81
00:03:37,878 --> 00:03:40,969
that's the "total" for the entire cart.

82
00:03:40,969 --> 00:03:41,683
22.5 + 15

83
00:03:42,341 --> 00:03:44,046
makes 37.5.

84
00:03:45,174 --> 00:03:47,730
So I suggest writing a helper function

85
00:03:47,730 --> 00:03:50,488
that takes the original "cartItems" array

86
00:03:51,055 --> 00:03:53,093
and transforms it into this object

87
00:03:53,093 --> 00:03:55,191
before you display it in the table.

88
00:03:55,750 --> 00:03:58,516
Once you've implemented these changes,

89
00:03:58,516 --> 00:04:01,209
your cart page should look like this.

90
00:04:01,209 --> 00:04:03,683
It shows line totals, grand total,

91
00:04:03,683 --> 00:04:06,812
and prices are formatted as dollar amounts.

92
00:04:07,530 --> 00:04:12,295
It's that time again when you should stop the video

93
00:04:12,295 --> 00:04:15,285
and make the code modifications.

94
00:04:15,878 --> 00:04:18,185
All right. Here's a possible solution.

95
00:04:18,685 --> 00:04:21,014
I'm calling a "buildCart" function

96
00:04:21,014 --> 00:04:23,342
to transform the "cartItems" array

97
00:04:23,342 --> 00:04:26,972
into a "cart" object, before I display it as a table.

98
00:04:27,608 --> 00:04:29,429
And that "buildCart" function

99
00:04:29,429 --> 00:04:30,622
is defined up here.

100
00:04:31,185 --> 00:04:33,175
You can pause the video if you want to

101
00:04:33,175 --> 00:04:34,275
examine it in detail,

102
00:04:34,827 --> 00:04:36,443
but for each cart item

103
00:04:36,443 --> 00:04:38,646
it calculates the "itemTotal",

104
00:04:38,646 --> 00:04:40,775
adds it to the grand "total",

105
00:04:40,775 --> 00:04:43,051
and builds a new array of items

106
00:04:43,051 --> 00:04:45,327
that include their "itemTotal".

107
00:04:45,327 --> 00:04:47,603
At the end it returns an object

108
00:04:47,603 --> 00:04:51,348
that includes both the items and the grand "total".

109
00:04:52,288 --> 00:04:54,862
Now, I also wrote another helper function here,

110
00:04:55,362 --> 00:04:56,983
called "formatCurrency",

111
00:04:56,983 --> 00:05:00,292
that simply converts numbers into dollar amounts.

112
00:05:00,860 --> 00:05:03,857
Back to the table, after getting a "cart" object

113
00:05:03,857 --> 00:05:05,293
by calling "buildCart",

114
00:05:05,855 --> 00:05:07,646
it displays the "cart" data,

115
00:05:07,646 --> 00:05:10,972
including a new column for the "Total" of each item.

116
00:05:11,536 --> 00:05:13,952
Then in the body, instead of iterating

117
00:05:13,952 --> 00:05:16,369
through the original "cartItems" array

118
00:05:16,932 --> 00:05:20,454
I'm using the "items" property of the "cart" object

119
00:05:20,454 --> 00:05:22,111
returned by "buildCart".

120
00:05:22,680 --> 00:05:24,637
And for each item I'm showing

121
00:05:24,637 --> 00:05:28,079
an additional table cell with the "cartItem.total",

122
00:05:28,079 --> 00:05:31,453
but displayed using the "formatCurrency" function.

123
00:05:32,087 --> 00:05:34,895
Finally, there's now a footer row in the table,

124
00:05:35,395 --> 00:05:37,430
that displays the grand total,

125
00:05:37,430 --> 00:05:40,008
again formatted with "formatCurrency".

126
00:05:40,575 --> 00:05:42,371
I haven't modified anything

127
00:05:42,371 --> 00:05:44,566
in the CartPage component itself.

128
00:05:44,566 --> 00:05:47,359
Again, this is just one possible solution.

129
00:05:47,359 --> 00:05:50,352
As long as you're displaying the right table,

130
00:05:50,352 --> 00:05:53,477
your code is fine even if it's a bit different.