1
00:00:09,080 --> 00:00:16,309
In this video, let's implement how we can add a transaction to a specific account.

2
00:00:16,490 --> 00:00:24,170
So if you go to Dashboard and then I click on View Account and here I have ADD new transaction.

3
00:00:24,470 --> 00:00:32,180
When I click on that, I have the form and we have implemented the context that is the action and then

4
00:00:32,180 --> 00:00:34,700
the component already in the previous video.

5
00:00:34,970 --> 00:00:39,920
But unluckily for this component, we are not handling the states.

6
00:00:40,190 --> 00:00:45,020
So I'm going to replace with the one I have finished handling the form.

7
00:00:45,020 --> 00:00:52,850
So inside the form here, we are going to cut this one from here and I'll provide that component for

8
00:00:52,850 --> 00:00:53,380
you.

9
00:00:53,390 --> 00:00:57,020
So I'm going to drop that component inside that.

10
00:00:57,140 --> 00:01:03,200
And always the way we handle the form is the same concept but with different fields.

11
00:01:03,320 --> 00:01:10,820
So for the transaction we are keeping track about a name, transaction type amount, category note,

12
00:01:10,820 --> 00:01:12,290
color and end date.

13
00:01:12,530 --> 00:01:18,320
And here is a handle for input change and this one is for the creation, right?

14
00:01:18,320 --> 00:01:20,660
But for the meantime, let me comment this one.

15
00:01:20,660 --> 00:01:26,030
I will talk about it and then let's look at the input field here.

16
00:01:26,030 --> 00:01:33,410
I have used on handle, submit and for individual input we have name, value and change as before.

17
00:01:33,800 --> 00:01:39,200
The difference here is about a transaction type because here we are using the select.

18
00:01:39,200 --> 00:01:44,930
So we need to use the value and we change on the select but not on the options.

19
00:01:45,110 --> 00:01:51,140
And for the options, the value we see here is going to be sent to the back end, but not this one.

20
00:01:51,710 --> 00:01:52,100
All right.

21
00:01:52,100 --> 00:01:56,660
So here you have a value income and then the expense and the amount.

22
00:01:56,660 --> 00:01:58,910
Likewise, name, value and change.

23
00:01:58,910 --> 00:02:01,910
And then the category the same as before.

24
00:02:02,180 --> 00:02:09,500
And for the color, I also added a value and then the name and the change with some inline assets to

25
00:02:09,500 --> 00:02:19,130
have something like circle and down here is for the date and down here is a note and that is a button

26
00:02:19,610 --> 00:02:20,930
with a type submit.

27
00:02:20,930 --> 00:02:22,700
So now we are going to go.

28
00:02:22,970 --> 00:02:28,400
The next step is that I need to bring in the create transaction action.

29
00:02:28,640 --> 00:02:35,720
So now let's go to the context and transaction and then transaction context and this what I want create

30
00:02:35,720 --> 00:02:36,740
transaction.

31
00:02:36,740 --> 00:02:43,910
So inside here add transaction, I think I see dash one then rename this 1 to 1.

32
00:02:44,270 --> 00:02:44,840
Yeah.

33
00:02:45,050 --> 00:02:45,440
Great.

34
00:02:45,440 --> 00:02:45,950
Yeah.

35
00:02:46,160 --> 00:02:48,110
So let's see if it's being rendered.

36
00:02:48,110 --> 00:02:50,120
Yeah, it's being rendered good.

37
00:02:50,510 --> 00:03:02,000
So what I are going to do is that I need to bring in the use context, use use context and I need the

38
00:03:02,000 --> 00:03:03,940
transaction context also.

39
00:03:04,720 --> 00:03:06,620
All right, as before.

40
00:03:06,980 --> 00:03:13,580
So here use context then are pass in the transaction context.

41
00:03:14,060 --> 00:03:19,580
And what I want from this one is going to be the create transaction, which is this one.

42
00:03:20,000 --> 00:03:24,620
And I also want the error and equal to that.

43
00:03:25,250 --> 00:03:25,670
Perfect.

44
00:03:25,670 --> 00:03:27,620
So here I can remove this one.

45
00:03:27,830 --> 00:03:33,320
And remember, for the creation of a transaction, we need the ID.

46
00:03:33,320 --> 00:03:38,030
So here I need to grab the ID from the URL.

47
00:03:38,030 --> 00:03:46,790
And as we did for fetching a single account, we are going to use what is called use params from react

48
00:03:46,790 --> 00:03:47,270
root.

49
00:03:48,000 --> 00:04:01,010
And here let's create a one as const params is equal to use, params is supposed to be params and we

50
00:04:01,010 --> 00:04:05,120
can quickly restructure the account ID.

51
00:04:05,120 --> 00:04:09,620
So I'll make it as ID because that's what I specify inside the app.

52
00:04:09,800 --> 00:04:14,360
If you go to app, that's what I specified as ID.

53
00:04:14,360 --> 00:04:20,730
So I have this structure that so now here I need to pass in the ID also.

54
00:04:20,850 --> 00:04:29,540
So here I specify the account float because for the API that is what is asking us to provide, you see

55
00:04:29,720 --> 00:04:32,240
to provide the account float.

56
00:04:32,450 --> 00:04:36,470
That's why I add it as account and I use the ID.

57
00:04:36,470 --> 00:04:43,760
So here is ID and now I sprayed all the input fields into that.

58
00:04:43,790 --> 00:04:45,800
Now we are all set.

59
00:04:45,950 --> 00:04:50,240
So now let's try our luck to make sure that everything is working fine.

60
00:04:50,450 --> 00:04:57,200
So to make sure it's working, let's go ahead and then console that, log the response from the context.

61
00:04:57,470 --> 00:05:04,520
So transaction context and for success, which is this one, let's go ahead and then console.log.

62
00:05:04,520 --> 00:05:08,030
The response now moment of.

63
00:05:08,560 --> 00:05:14,290
So the name of this transaction, of course, is one as transportation.

64
00:05:16,580 --> 00:05:20,720
An IT type is expense and then amount is 300.

65
00:05:20,990 --> 00:05:22,880
And then transportation.

66
00:05:22,970 --> 00:05:31,100
And then the color choose this one, the date and then not let me say anything.

67
00:05:31,370 --> 00:05:33,650
Any let me add transaction.

68
00:05:34,190 --> 00:05:36,230
Let me check the console.

69
00:05:36,440 --> 00:05:46,160
Where line number 54 let's see the data and I got a beautiful error that explains is not a valid enumerable

70
00:05:46,160 --> 00:05:46,970
value.

71
00:05:47,090 --> 00:05:53,660
So it means that I need to change that one to expenses because that's what we specify in the back end.

72
00:05:53,780 --> 00:05:55,970
Let me show you the model for that.

73
00:05:56,090 --> 00:06:05,240
If you go to model transaction and for the transaction type, I provided expenses but not expense.

74
00:06:05,360 --> 00:06:08,640
So I need to match the same thing from the front end.

75
00:06:08,660 --> 00:06:14,300
So here the value is going to be expenses and that is it.

76
00:06:14,960 --> 00:06:15,440
Great.

77
00:06:15,440 --> 00:06:20,480
So now let's try again and let me hit send.

78
00:06:21,890 --> 00:06:22,520
Mr. Moran.

79
00:06:22,520 --> 00:06:23,450
Oh, I go.

80
00:06:23,480 --> 00:06:25,430
Success is correct.

81
00:06:25,460 --> 00:06:27,770
Have a look inside the data.

82
00:06:27,770 --> 00:06:31,900
I have success and I have the transaction details.

83
00:06:31,910 --> 00:06:37,370
So now if I go to my dashboard, when I go to that's what he aimed.

84
00:06:37,730 --> 00:06:40,820
And for this when I click on view account.

85
00:06:40,850 --> 00:06:50,470
Now you can see that I have my expenses which is this one a great so next is when I click on add new

86
00:06:50,480 --> 00:06:55,910
transaction here I want to render that form so the same step as we did.

87
00:06:55,910 --> 00:07:00,260
So we inside the account details where we are looking through.

88
00:07:00,260 --> 00:07:05,930
Let's locate that and that is the account details here.

89
00:07:05,930 --> 00:07:07,010
Account details.

90
00:07:07,460 --> 00:07:09,950
And we are looking through the table.

91
00:07:10,280 --> 00:07:11,900
Let's scroll down.

92
00:07:13,150 --> 00:07:14,710
Supposed to be all transactions.

93
00:07:14,760 --> 00:07:15,350
Sorry.

94
00:07:15,410 --> 00:07:19,700
Here, let's go to all transaction components, which is this one.

95
00:07:20,480 --> 00:07:24,560
So here, how can we get the ID of the transaction?

96
00:07:24,560 --> 00:07:26,630
Because this one is plural.

97
00:07:26,750 --> 00:07:29,210
We have all transactions here.

98
00:07:29,690 --> 00:07:32,420
Well, let's have a look inside the params.

99
00:07:32,430 --> 00:07:40,460
So it means that I can grab it from here or I can pass as params from the account details to this component.

100
00:07:40,490 --> 00:07:40,880
Right.

101
00:07:40,880 --> 00:07:42,560
So here we go.

102
00:07:43,040 --> 00:07:52,910
So I have the params here account ID, so I'm going to pass that one as a second prop to the transaction

103
00:07:52,910 --> 00:07:55,280
because I have that component inside that.

104
00:07:55,730 --> 00:08:07,100
So I need to provide another prop or account ID and is equal to account ID and for all transactions.

105
00:08:07,100 --> 00:08:14,070
I'm going to grab from here and let me move this one from here, from the previous video and here I

106
00:08:14,070 --> 00:08:20,030
will provide the account ID where account is not defined.

107
00:08:20,840 --> 00:08:21,920
Which line?

108
00:08:21,920 --> 00:08:23,990
Let me see a line of my 69.

109
00:08:25,680 --> 00:08:29,970
It seems I'm using a wrong verbal line about 69.

110
00:08:32,370 --> 00:08:34,539
So I need to use that transaction, rather.

111
00:08:34,559 --> 00:08:35,010
Yeah.

112
00:08:35,280 --> 00:08:37,740
So let's see how it's going to work.

113
00:08:37,919 --> 00:08:38,450
All right.

114
00:08:38,460 --> 00:08:41,320
Now everything is okay when I click on this one.

115
00:08:41,340 --> 00:08:48,990
Well, I don't see that because the path is not transaction, but instead it's going to be a transaction

116
00:08:48,990 --> 00:08:50,100
with some ID.

117
00:08:50,250 --> 00:08:54,450
Let me find out, is our transaction this one?

118
00:08:54,660 --> 00:08:56,970
So let's go to all transaction.

119
00:08:56,970 --> 00:09:04,650
And for the table which is down here, add new transaction service or transaction rather.

120
00:09:05,250 --> 00:09:08,310
And let's look at new transaction.

121
00:09:08,350 --> 00:09:10,800
Yeah, the path is like this.

122
00:09:11,950 --> 00:09:13,960
Yes at transaction.

123
00:09:14,410 --> 00:09:18,430
So when I click on this one and now I can add a transaction.

124
00:09:18,550 --> 00:09:26,790
How it is this time around, let me add let's say I got my salary and I'm going to add to my budget.

125
00:09:26,800 --> 00:09:32,110
So here is going to be income and the amount is 7000.

126
00:09:33,040 --> 00:09:42,550
Donors and it's going to be salary or other or on categories and the color also to be read.

127
00:09:42,580 --> 00:09:46,780
Don't worry our fees are color issue and the dates.

128
00:09:46,780 --> 00:09:49,570
And then let me say salary.

129
00:09:50,950 --> 00:09:51,510
Act.

130
00:09:52,480 --> 00:09:55,090
And now let me check my dashboard.

131
00:09:55,480 --> 00:09:57,820
Go to software account.

132
00:09:57,820 --> 00:10:05,260
And now I can see that it has been added automatically, meaning 300 plus over hundred is 1000.

133
00:10:05,260 --> 00:10:06,730
Plus -1000.

134
00:10:06,760 --> 00:10:09,020
That is 11,000, guys.

135
00:10:09,070 --> 00:10:14,720
What has led is about deleting, updating and let's say validation.

136
00:10:14,740 --> 00:10:17,590
Well, so you can improve this application, right?

137
00:10:17,590 --> 00:10:19,000
So let's go rock.