1
00:00:00,510 --> 00:00:03,630
OK, so now we'll work on the transaction component.

2
00:00:03,960 --> 00:00:09,840
So right now, I don't think we have a transaction, we have just the list of the transaction, but

3
00:00:09,840 --> 00:00:20,310
now we'll create another component and we limit our transaction on Dargis or on our audience.

4
00:00:20,910 --> 00:00:26,820
And so this what we will do is that, first of all, we create a boilerplate code or with this.

5
00:00:27,540 --> 00:00:31,710
So that is the R a f.

6
00:00:34,210 --> 00:00:35,590
Who did something like that?

7
00:00:36,190 --> 00:00:42,490
And after that, we'll, first of all, important use context to.

8
00:00:44,050 --> 00:00:47,410
By this, we lose context.

9
00:00:48,130 --> 00:00:49,780
And next will come to.

10
00:00:51,070 --> 00:00:52,840
And welcome to our return.

11
00:00:53,260 --> 00:00:55,660
And Howard will include.

12
00:00:57,090 --> 00:01:01,920
Most of all will create a list, and that list will be.

13
00:01:05,990 --> 00:01:13,760
We don't want to move forward or something like that, we just have to give it a class name, so class

14
00:01:13,760 --> 00:01:14,330
name.

15
00:01:17,850 --> 00:01:20,850
Last name would be maybe minus.

16
00:01:21,840 --> 00:01:22,340
No, sir.

17
00:01:22,680 --> 00:01:26,770
Inside the fence, I created a label.

18
00:01:26,790 --> 00:01:27,570
Oh my God.

19
00:01:27,910 --> 00:01:29,340
I won't read a listing.

20
00:01:30,580 --> 00:01:33,030
Nutrition labels on it is to rename it.

21
00:01:34,110 --> 00:01:36,270
And this the list.

22
00:01:37,710 --> 00:01:45,590
Inside this, what will do is that will display the transaction text, but right now we don't have any

23
00:01:45,590 --> 00:01:48,080
dynamic text line.

24
00:01:48,080 --> 00:01:53,660
Text is white liberals who have we will just try to.

25
00:01:54,930 --> 00:01:57,380
Maybe we can write or.

26
00:01:58,480 --> 00:02:03,750
Sadly or no sense, sadly.

27
00:02:03,940 --> 00:02:08,830
Next, we'll have a spin inside this store, not.

28
00:02:10,780 --> 00:02:11,100
OK.

29
00:02:11,350 --> 00:02:11,920
What are you?

30
00:02:13,330 --> 00:02:18,880
We'll have us back inside the sperm bag, we'll we'll have the sign.

31
00:02:19,390 --> 00:02:21,910
So right now we are just hard coding and word after.

32
00:02:21,910 --> 00:02:30,430
Sometimes we'll will be adding like feature to it and then we'll have an amount to us, maybe 50000.

33
00:02:31,860 --> 00:02:35,070
So that's it, and then we'll have a button.

34
00:02:35,640 --> 00:02:42,060
This button will be for deleting the transaction or deleting the history.

35
00:02:42,360 --> 00:02:45,330
But right now, we are not adding any functionality to it.

36
00:02:45,390 --> 00:02:48,150
So we'll just be as it is.

37
00:02:49,620 --> 00:02:56,790
Why it's not providing the essentials, it provides school aid and inside this will just provide X,

38
00:02:57,150 --> 00:02:58,140
which means they need.

39
00:02:59,280 --> 00:02:59,670
So.

40
00:03:00,940 --> 00:03:01,510
That's right.

41
00:03:01,930 --> 00:03:13,030
But what it will do is that it will just show minus here, uh, like, uh, like minus or plus if I

42
00:03:13,030 --> 00:03:21,580
do plus here on inside this school, what is I'm what I'm trying to say is that it should automatically

43
00:03:21,580 --> 00:03:27,070
detect like, first of all, if you have entered plus sign while giving the input.

44
00:03:27,070 --> 00:03:33,160
So in the history, you should automatically detect that it is a plus sign and you have to show green

45
00:03:33,520 --> 00:03:34,060
folder.

46
00:03:34,300 --> 00:03:40,120
So where I am talking about the green model, I'm talking about here and it should show the green border

47
00:03:40,120 --> 00:03:41,350
when it does a plus sign.

48
00:03:41,350 --> 00:03:43,570
And if this is a minus sign, there, sure, sure are.

49
00:03:45,010 --> 00:03:46,900
Like this red color pink?

50
00:03:47,110 --> 00:03:53,080
So that is what I'm trying to say is whatever we are doing here, is this this because of that?

51
00:03:53,080 --> 00:03:54,670
Only two?

52
00:03:55,930 --> 00:03:58,270
Maybe we can just do now, right?

53
00:03:58,650 --> 00:04:04,930
Or like final function before that, what we need is that.

54
00:04:06,820 --> 00:04:08,790
You'll have to import are.

55
00:04:10,660 --> 00:04:18,610
Important context bar that will need for the delete button if we add a functionality to the delete button,

56
00:04:18,610 --> 00:04:27,370
but right now I'm more interested in getting the glasses like dynamically who right now I hardcoded

57
00:04:27,370 --> 00:04:28,690
this glass than glass.

58
00:04:29,020 --> 00:04:31,390
But I want this glass to change.

59
00:04:31,730 --> 00:04:33,130
We are to some minus sign.

60
00:04:33,520 --> 00:04:37,670
And if the glass name is changing in the system, you can change the color of the water.

61
00:04:37,930 --> 00:04:38,290
OK.

62
00:04:38,440 --> 00:04:40,760
So for that, I will try just to.

63
00:04:42,270 --> 00:04:50,670
I will write one line of one piece of code here that will be forced to resign and it can be called to.

64
00:04:52,990 --> 00:04:54,430
From section.

65
00:04:56,240 --> 00:04:57,490
On election board.

66
00:05:00,070 --> 00:05:00,810
A moment.

67
00:05:02,040 --> 00:05:02,640
If it's.

68
00:05:03,970 --> 00:05:04,760
If it's like.

69
00:05:06,330 --> 00:05:16,610
Less than zero, then you have to put it on a minus sign right now, I'm not doing for the class name,

70
00:05:16,620 --> 00:05:20,160
I'm just doing for the sign class name we would do in the inland sea.

71
00:05:20,910 --> 00:05:26,490
And if it's false and just on the plus side, OK, this is this of our design.

72
00:05:26,850 --> 00:05:31,410
But how do we do about about the class name?

73
00:05:31,450 --> 00:05:35,130
So for that, we'll write JavaScript insiders.

74
00:05:35,550 --> 00:05:37,530
That's why I've provided the collaborators.

75
00:05:37,830 --> 00:05:45,450
So here I'll write transaction the short amount if it's less than zero.

76
00:05:46,230 --> 00:05:49,100
So what will be the class name?

77
00:05:49,110 --> 00:05:50,640
The class name would be my.

78
00:05:51,890 --> 00:05:52,310
Fine.

79
00:05:52,610 --> 00:05:56,570
And if it's greater than zero, so the class name wouldn't be.

80
00:05:58,900 --> 00:06:00,380
The last name would be plus.

81
00:06:02,140 --> 00:06:03,840
OK, let me just say it.

82
00:06:04,900 --> 00:06:13,290
And what is next is that we have to see how it is looking so far that we need to inform this inside

83
00:06:13,410 --> 00:06:20,620
the transaction list, who will have to import it here because right now it's nowhere.

84
00:06:21,070 --> 00:06:27,100
It's important to know that for now, I'm in that transaction list and I will import the transaction.

85
00:06:27,100 --> 00:06:31,120
First of all, the transaction component, so I import.

86
00:06:33,090 --> 00:06:37,440
Transaction from transaction 08, our team portrait for me.

87
00:06:38,040 --> 00:06:40,860
So next, what we'll do is we'll.

88
00:06:42,590 --> 00:06:49,230
Create the global context here, like we'll call the global context from importing it.

89
00:06:49,950 --> 00:06:51,650
So how do we import it?

90
00:06:51,920 --> 00:06:52,640
Will import?

91
00:06:54,200 --> 00:06:58,330
Global context, global context from context, okay.

92
00:06:58,380 --> 00:06:59,060
That is done.

93
00:06:59,540 --> 00:07:00,830
Next, we'll.

94
00:07:02,580 --> 00:07:09,310
And we've already exported this and also inside Britain, what will do is that history is already there.

95
00:07:09,330 --> 00:07:11,460
Gold gold for us is already there.

96
00:07:11,850 --> 00:07:16,470
Inside this, we will provide inside this unordered list.

97
00:07:16,800 --> 00:07:18,930
We will provide some dynamic gate unlock.

98
00:07:19,410 --> 00:07:25,050
So first of all, let me provide a class name for the stylings of class name would be list.

99
00:07:26,700 --> 00:07:33,930
And inside this list, we'll provide some JavaScript to ward off group do that, we are going to use

100
00:07:33,930 --> 00:07:35,190
the map function.

101
00:07:35,490 --> 00:07:38,610
We are going to map all the transactions right one by one.

102
00:07:38,610 --> 00:07:41,310
We have to map it and we have to print it, right?

103
00:07:41,760 --> 00:07:46,020
So how do we like transaction?

104
00:07:48,100 --> 00:07:49,240
Dark map.

105
00:07:51,810 --> 00:07:52,070
Are.

106
00:07:57,430 --> 00:08:06,940
Bond funds start map and inside this that is a function, so that will be coming back showing.

107
00:08:08,450 --> 00:08:10,040
And a narrow function.

108
00:08:11,120 --> 00:08:21,530
What it will do is have to like it done this transaction only transaction component and not transaction

109
00:08:21,650 --> 00:08:27,050
is just a transaction which we import today, right, to have to have done this with some of the props.

110
00:08:27,560 --> 00:08:30,050
So that will be a key and the key will be.

111
00:08:32,070 --> 00:08:33,570
Sounds excellent or tidy.

112
00:08:34,170 --> 00:08:37,920
And there will be transactions for.

113
00:08:39,260 --> 00:08:42,650
Transaction is equal to.

114
00:08:44,030 --> 00:08:49,370
Transaction, we can also use a separate operator, but you're just using this for now.

115
00:08:50,300 --> 00:08:56,420
So let me close this after this, I have to close it.

116
00:08:57,430 --> 00:08:59,320
And I guess things are.

117
00:09:00,230 --> 00:09:00,860
For now.

118
00:09:02,190 --> 00:09:06,870
There is some parrot here, which sees that I have not.

119
00:09:08,440 --> 00:09:13,000
Yeah, because we have not created a context using their transactions.

120
00:09:13,570 --> 00:09:18,070
So let me just go in this in the technical it.

121
00:09:18,580 --> 00:09:20,410
I forgot to create this constant.

122
00:09:21,130 --> 00:09:24,290
So it will be transactions.

123
00:09:24,310 --> 00:09:31,060
And here it will be use context because we know you make use of the use context, right?

124
00:09:31,690 --> 00:09:34,060
So inside this, that will be global context.

125
00:09:34,980 --> 00:09:37,030
So let me just say it and now should work.

126
00:09:38,010 --> 00:09:38,280
And.

127
00:09:39,790 --> 00:09:44,800
OK, because I made a typo out of the spendings wrong transactions.

128
00:09:46,640 --> 00:09:47,540
Spelling is wrong.

129
00:09:47,690 --> 00:09:52,000
So let me just save it, and some action is not defined.

130
00:09:52,920 --> 00:09:56,390
If there is a lot of missed out on this.

131
00:09:57,400 --> 00:09:59,500
And he and.

132
00:10:02,520 --> 00:10:03,010
OK.

133
00:10:03,550 --> 00:10:06,510
Our ball and also do the wrong.

134
00:10:08,410 --> 00:10:09,650
A lot of mistakes.

135
00:10:15,490 --> 00:10:16,440
Transaction.

136
00:10:16,960 --> 00:10:18,540
And also there a mistake.

137
00:10:18,910 --> 00:10:24,370
Why aren't I am this is it being like coming from somewhere else?

138
00:10:25,000 --> 00:10:27,880
Transactions and online?

139
00:10:27,880 --> 00:10:28,600
No.

140
00:10:29,140 --> 00:10:29,620
Or.

141
00:10:31,620 --> 00:10:32,070
In.

142
00:10:33,940 --> 00:10:39,220
Showing the error in the transaction, so basically, I need to pass this as an argument.

143
00:10:39,760 --> 00:10:45,520
So transactions, so if I see it now should give me a proper thing.

144
00:10:46,100 --> 00:10:52,450
So now if I go to the browser and I see there is some error and refreshing.

145
00:10:53,440 --> 00:10:55,330
The church, to me, saw.

146
00:10:57,280 --> 00:10:57,670
OK.

147
00:10:58,690 --> 00:10:59,740
As an object.

148
00:11:01,250 --> 00:11:08,320
And object, this is undefined on line and with six tons action and action list.

149
00:11:09,170 --> 00:11:12,050
Let me just go to forward.

150
00:11:13,450 --> 00:11:14,050
We'll here.

151
00:11:16,150 --> 00:11:21,000
It is showing me in the transaction list that this is not defiance.

152
00:11:21,040 --> 00:11:22,330
Wait, let me check.

153
00:11:23,540 --> 00:11:30,490
We might lose all this while working on this long, you don't have to worry much about this soil while

154
00:11:30,490 --> 00:11:31,600
courting, we'll.

155
00:11:33,150 --> 00:11:36,900
We'll try to figure it out like water issue as of now.

156
00:11:37,110 --> 00:11:44,430
Don't worry about this warnings and errors because we're not done with the project because as we progress

157
00:11:44,430 --> 00:11:52,260
and Iran will resolve and we will be able to tackle what it's like happening to next, what we'll do

158
00:11:52,260 --> 00:11:58,230
is we will add more functionality to the project and I just found the action list.

159
00:11:58,230 --> 00:12:05,220
I'll add button also to delete the transaction to delete like history reader transaction from the history

160
00:12:05,220 --> 00:12:08,010
so that we are going to do in the next review.