1
00:00:01,640 --> 00:00:06,050
Let's make sure we've got an index route of sorts that shows the user a list of all the different orders

2
00:00:06,050 --> 00:00:06,800
that belong to them.

3
00:00:07,610 --> 00:00:11,630
So back inside, my editor going to find my pages directory.

4
00:00:12,260 --> 00:00:13,400
Inside there is orders.

5
00:00:13,460 --> 00:00:16,460
And inside of that, I'm going to make a new file of Index J.S..

6
00:00:17,030 --> 00:00:21,740
So if we now go to just flash orders, it's going to show the component that we export from this index,

7
00:00:21,740 --> 00:00:21,860
J.

8
00:00:21,870 --> 00:00:22,430
S file.

9
00:00:23,440 --> 00:00:25,150
At the very top, let's make an order.

10
00:00:26,470 --> 00:00:27,460
Index components.

11
00:00:30,020 --> 00:00:31,580
And right now, Distri turn a d'Hiv.

12
00:00:32,670 --> 00:00:33,870
It says order index.

13
00:00:35,500 --> 00:00:37,780
I will export default order index.

14
00:00:38,930 --> 00:00:41,380
And then let's define a get initial props function.

15
00:00:41,620 --> 00:00:44,050
This is where we're going to fetch our initial list of orders.

16
00:00:45,260 --> 00:00:48,440
The order index not get initial props.

17
00:00:53,010 --> 00:00:56,620
This function will be called with a context, argument and client.

18
00:00:56,670 --> 00:00:58,270
We don't only care about context in this case.

19
00:00:58,300 --> 00:00:59,500
We really just care about the client.

20
00:00:59,850 --> 00:01:02,680
We want to make a request where order service and get the list of orders.

21
00:01:03,900 --> 00:01:08,400
We'll get some data from a weight line to get API.

22
00:01:13,960 --> 00:01:17,770
I'll then return an object with orders that references that data.

23
00:01:20,470 --> 00:01:25,240
Now, before we test this out, we should probably go take a little quick peek at our order service

24
00:01:25,300 --> 00:01:29,410
and make sure that it only returns orders related to the user who is making the request.

25
00:01:31,240 --> 00:01:36,280
So back inside of my orders service, I'm going to take a look at my roots directory and find index

26
00:01:36,280 --> 00:01:37,390
dot to yes inside there.

27
00:01:37,920 --> 00:01:38,410
And it looks like.

28
00:01:38,490 --> 00:01:38,650
Yep.

29
00:01:38,920 --> 00:01:42,610
We definitely filter by the user I.D. or the person who is making the request.

30
00:01:44,870 --> 00:01:50,810
Now, back inside the index J.S. file, we can receive that list of orders as a prop into order index.

31
00:01:54,170 --> 00:01:57,650
And then maybe rather than returning to dive right here that we just put together.

32
00:01:57,980 --> 00:02:01,580
Maybe we should just return some kind of you well with the list of allies inside of it.

33
00:02:01,730 --> 00:02:04,190
That just list out all the different orders and their status.

34
00:02:05,000 --> 00:02:07,190
So I'm going to go ahead and just delete that div right there.

35
00:02:07,190 --> 00:02:09,950
Cyper making you write it even though we just deleted it.

36
00:02:10,580 --> 00:02:11,540
I got a place to well.

37
00:02:12,870 --> 00:02:14,990
That side, they're going to place some curly braces.

38
00:02:15,550 --> 00:02:17,360
I'm going to map over my list of orders.

39
00:02:17,420 --> 00:02:23,480
And for every order, I'm going to render an ally that displays maybe the title of the ticket that is

40
00:02:23,480 --> 00:02:26,090
associated with this order and the order status as well.

41
00:02:27,940 --> 00:02:30,790
So orders dot map and for every order.

42
00:02:32,130 --> 00:02:33,810
I'm going to return an ally.

43
00:02:36,510 --> 00:02:40,740
A place to keep up on that ally, though, ordered an I.D. will be Michy.

44
00:02:43,250 --> 00:02:48,980
And then inside of the ally itself, I'm going to print out the order ticket title.

45
00:02:50,740 --> 00:02:56,530
And then a little dash and then I'll print out the status of the order, the order dot status.

46
00:02:58,100 --> 00:03:00,460
Get let's say this and see what it looks like.

47
00:03:02,000 --> 00:03:03,070
It's going to refresh the page.

48
00:03:03,150 --> 00:03:09,450
While Achmat slash orders and there is our list, it looks like I've had many attempts to purchase that

49
00:03:09,510 --> 00:03:13,320
first client ticket and then eventually I completed one.

50
00:03:13,500 --> 00:03:15,240
So that is my order right there.

51
00:03:15,450 --> 00:03:16,470
That has been completed.

52
00:03:16,590 --> 00:03:18,000
I own that ticket.

53
00:03:18,870 --> 00:03:23,250
And then finally, between last video on this one, I tried to create an order for the other ticket

54
00:03:23,250 --> 00:03:25,260
I created and I let it time out as well.

55
00:03:25,320 --> 00:03:26,820
And so it got marked as canceled.

56
00:03:28,040 --> 00:03:32,880
Well, well, the very last thing that I would like to do is to make sure that after you successfully

57
00:03:32,940 --> 00:03:34,080
purchase a ticket.

58
00:03:34,590 --> 00:03:36,510
So in other words, we provide a payment for an order.

59
00:03:36,600 --> 00:03:41,490
I would like to redirect the user over to this big list of orders to be pretty straightforward.

60
00:03:41,580 --> 00:03:42,570
So let's just do it right now.

61
00:03:45,240 --> 00:03:47,530
I going to go back over to our page.

62
00:03:48,680 --> 00:03:51,620
Or orders show, though, inside the orders folder.

63
00:03:51,650 --> 00:03:53,270
I'll find the order I.D. file.

64
00:03:53,840 --> 00:03:55,280
That is our order show component.

65
00:03:56,680 --> 00:04:01,960
Rather than doing a console log of the payment that we got back, let's instead redirect the user over

66
00:04:01,960 --> 00:04:06,580
to the big list of orders and they should hopefully see that the order they just kippin that they had

67
00:04:06,580 --> 00:04:08,470
just created gets marked as complete.

68
00:04:09,670 --> 00:04:15,340
To redirect the user, we're going to again import Rueter from next router at the top.

69
00:04:17,270 --> 00:04:21,530
And then instead of doing that console log of the payment, I don't really need that payment argument.

70
00:04:22,710 --> 00:04:23,500
Or the council log.

71
00:04:23,730 --> 00:04:27,540
I'm going to replace it with router dot push to slash orders.

72
00:04:31,660 --> 00:04:33,730
Let's now try to purchase another ticket.

73
00:04:33,760 --> 00:04:37,930
And after we purchase the ticket, we should be redirected back over to the list of orders.

74
00:04:40,060 --> 00:04:41,700
I'm going to go back to my main landing page.

75
00:04:41,790 --> 00:04:43,110
So here's the ticket I want to buy.

76
00:04:43,440 --> 00:04:46,860
If you do not have a ticket at this point, just go ahead and create one really quickly.

77
00:04:48,080 --> 00:04:50,270
So I can tell you that tickets are purchased at.

78
00:04:51,330 --> 00:04:52,360
Going to pay off my credit card.

79
00:04:54,520 --> 00:04:59,590
And remember, our magic credit card number is or two four two four two one in my date.

80
00:05:00,580 --> 00:05:02,620
The security code and pay.

81
00:05:04,390 --> 00:05:08,240
So now I should be automatically redirected back over to my big list of orders.

82
00:05:08,660 --> 00:05:10,520
And there is my completed order right there.

83
00:05:10,610 --> 00:05:12,590
And so that ticket, in theory, belongs to me.

84
00:05:13,490 --> 00:05:14,300
And that's pretty much it.

85
00:05:15,690 --> 00:05:19,470
Well, I know that these styling on this application is not great at all.

86
00:05:19,710 --> 00:05:23,640
And some of the screens are just plain confusing, like the screen right here, kind of unclear what

87
00:05:23,640 --> 00:05:24,210
is going on.

88
00:05:24,720 --> 00:05:28,390
But I'm going to leave improvements to the styling and changing some the mechanics around us.

89
00:05:28,500 --> 00:05:33,510
Up to you, because really there are an infinite number of ways that we could further develop this application.

90
00:05:34,240 --> 00:05:38,760
The other thing on dimensioned is that when a user purchases a ticket, we don't really have any information

91
00:05:38,790 --> 00:05:40,770
or anything like that being exposed to the user.

92
00:05:41,160 --> 00:05:45,030
There's not really like US ticket that they really receive in the e-mail or anything like that.

93
00:05:45,420 --> 00:05:48,000
We're solely saying that once the order has been paid for.

94
00:05:48,300 --> 00:05:48,750
That's it.

95
00:05:48,780 --> 00:05:51,000
The ordered me the ticket now belongs that user.

96
00:05:51,030 --> 00:05:53,670
And that's kind of the end of the entire workflow.

97
00:05:54,210 --> 00:05:56,280
That's a little bit not that great.

98
00:05:56,310 --> 00:05:58,350
You know, we could have gone a little bit further in developing that.

99
00:05:58,590 --> 00:06:02,700
But again, these are some things I had to leave up to you so you can add on maybe an additional service,

100
00:06:02,970 --> 00:06:06,510
maybe some additional features or something like that and expand out this application.

101
00:06:07,870 --> 00:06:08,900
So we're gonna call the front end.

102
00:06:09,260 --> 00:06:10,940
Pretty much good for right here.

103
00:06:11,750 --> 00:06:12,800
We're gonna take a pause right here.

104
00:06:13,160 --> 00:06:14,060
Continue in just a minute.

105
00:06:14,120 --> 00:06:19,280
I mean, to start to take a look at adding in some test automation and deployment options for our application.