1 00:00:07,830 --> 00:00:08,820 In this video. 2 00:00:08,820 --> 00:00:13,920 Let's see how we are going to add a count right from the client side. 3 00:00:14,250 --> 00:00:21,270 Well, one thing I like about programming is that if you know how to do something, the rest is like 4 00:00:21,270 --> 00:00:22,000 repetition. 5 00:00:22,020 --> 00:00:23,490 Copy and paste. 6 00:00:23,530 --> 00:00:25,020 Have you seen the format now? 7 00:00:25,050 --> 00:00:29,820 Just create a context handle for use it and that is it. 8 00:00:29,940 --> 00:00:33,990 And here we already have the account context. 9 00:00:33,990 --> 00:00:36,490 And let me look at the action type. 10 00:00:36,510 --> 00:00:41,610 What I want is the account creation, success and account creation. 11 00:00:42,390 --> 00:00:46,620 If we want to implement what is called account creation started, you can use this one. 12 00:00:46,620 --> 00:00:51,660 But for the meantime, let's ignore this and let's focus on these two action types. 13 00:00:51,810 --> 00:00:56,400 So now back to the account here and the action type. 14 00:00:56,610 --> 00:00:58,830 Then this one going to be the fields. 15 00:00:58,830 --> 00:00:59,910 Let me check the field. 16 00:00:59,910 --> 00:01:03,690 Well, otherwise, you're going to have some beautiful errors. 17 00:01:03,900 --> 00:01:04,440 Right. 18 00:01:04,440 --> 00:01:06,600 So here as the field. 19 00:01:06,900 --> 00:01:07,530 Great. 20 00:01:07,530 --> 00:01:08,960 So now let's collapse it. 21 00:01:08,970 --> 00:01:10,380 We are done with you. 22 00:01:10,620 --> 00:01:12,270 So let's look at the end point. 23 00:01:12,270 --> 00:01:18,480 At the back end for the accounts account, create first large account. 24 00:01:18,960 --> 00:01:19,320 Right. 25 00:01:19,320 --> 00:01:21,900 So let's get back to the context. 26 00:01:22,170 --> 00:01:25,410 And that's why I added the account for that. 27 00:01:25,410 --> 00:01:31,260 For this one, it can hold a single account that is account details and account creation. 28 00:01:31,590 --> 00:01:39,260 So down here, we are going to copy one of the end points for getting account details. 29 00:01:39,270 --> 00:01:42,330 So here, let's copy this one. 30 00:01:42,330 --> 00:01:45,480 Let me collapse it and I can copy it. 31 00:01:46,110 --> 00:01:52,620 And down here, let me paste it here and let me change this one to create account 32 00:01:54,900 --> 00:01:57,030 action, remove the details. 33 00:01:58,140 --> 00:02:03,240 And for this one, we are going to pass in the form data, right? 34 00:02:03,240 --> 00:02:07,380 So here we need to pass in the token. 35 00:02:07,420 --> 00:02:09,270 Supposed to be content type. 36 00:02:09,419 --> 00:02:09,960 Yeah. 37 00:02:09,960 --> 00:02:10,699 Sorry. 38 00:02:12,260 --> 00:02:13,710 Going to be great. 39 00:02:14,880 --> 00:02:16,320 Yeah, good. 40 00:02:16,500 --> 00:02:22,860 And as a second I demand to this one, I'm going to pass in the entire form data. 41 00:02:22,860 --> 00:02:27,840 And lastly, the config because this endpoint is a protected endpoint. 42 00:02:28,050 --> 00:02:34,980 And here, let's change the action type to account creation success. 43 00:02:35,340 --> 00:02:44,160 And here is going to be account creation fail and the same response as before. 44 00:02:44,340 --> 00:02:49,050 So lastly is I need to export this function from here. 45 00:02:49,590 --> 00:02:51,570 And there we go. 46 00:02:51,780 --> 00:02:54,820 I can also export the error also. 47 00:02:54,870 --> 00:02:55,470 Right. 48 00:02:55,470 --> 00:02:57,120 So error. 49 00:03:00,140 --> 00:03:03,160 Is equal to the states. 50 00:03:03,380 --> 00:03:08,380 And then on that, we have the error rate. 51 00:03:08,390 --> 00:03:12,300 So last thing is I need to handle the reducer function here. 52 00:03:12,650 --> 00:03:19,310 So I'm going to copy this one and let me give this one very few comments as details. 53 00:03:19,820 --> 00:03:24,530 And before the defaults, I'm going to paste this one for creation. 54 00:03:24,920 --> 00:03:28,430 So here is going to be great. 55 00:03:30,920 --> 00:03:42,980 The case here is going to be as action, as account creation X and here is going to be account creation 56 00:03:42,980 --> 00:03:44,630 fail grade. 57 00:03:44,630 --> 00:03:52,430 So for success, definitely I need to add the payload on the accounts and loading false error false 58 00:03:52,430 --> 00:03:55,760 and for failure I want to empty. 59 00:03:55,760 --> 00:03:59,360 Sorry supposed to be account, not action. 60 00:04:01,840 --> 00:04:04,540 So I think we missed a mistake here. 61 00:04:04,990 --> 00:04:07,870 Or supposed to be account. 62 00:04:08,890 --> 00:04:10,300 I'm happy I've seen it. 63 00:04:11,470 --> 00:04:11,890 Great. 64 00:04:11,890 --> 00:04:13,120 So that is it. 65 00:04:13,120 --> 00:04:13,690 That is it. 66 00:04:13,690 --> 00:04:15,460 About the action, guys. 67 00:04:15,460 --> 00:04:16,480 We are done with it. 68 00:04:16,899 --> 00:04:22,390 The next step is that let's go ahead and then dispatch it and let's see if we can create, right? 69 00:04:22,630 --> 00:04:28,480 So let's go ahead and then require this one inside the ADD account. 70 00:04:28,540 --> 00:04:30,520 So it forms add account. 71 00:04:30,520 --> 00:04:34,780 And here let me bring back the components and that is it. 72 00:04:34,780 --> 00:04:37,030 And I also need the error. 73 00:04:39,230 --> 00:04:40,270 All right, guys. 74 00:04:40,280 --> 00:04:42,410 So let me bring back the action. 75 00:04:42,860 --> 00:04:44,180 You see how easy it is. 76 00:04:44,920 --> 00:04:47,450 Okay, so now I'm done. 77 00:04:47,540 --> 00:04:48,080 I'm done. 78 00:04:48,080 --> 00:04:49,340 Guys, you are done. 79 00:04:49,640 --> 00:04:55,490 So inside the of context, let's try to display something to make sure that everything is correct. 80 00:04:55,490 --> 00:04:56,660 So consider 81 00:04:58,970 --> 00:05:01,340 the response. 82 00:05:01,880 --> 00:05:02,540 Okay. 83 00:05:03,020 --> 00:05:03,620 So now. 84 00:05:03,620 --> 00:05:06,930 Oh, I got some beautiful arrow here of context is undefined. 85 00:05:06,950 --> 00:05:11,960 So inside the add context here, let's bring in the of context. 86 00:05:13,760 --> 00:05:14,900 The account context. 87 00:05:14,900 --> 00:05:20,660 Sorry, going to be account context and then use context. 88 00:05:24,130 --> 00:05:24,700 Yeah. 89 00:05:24,910 --> 00:05:27,280 So now we are all set. 90 00:05:28,180 --> 00:05:30,460 Again, ID is not defined. 91 00:05:31,000 --> 00:05:32,500 Which is. 92 00:05:34,330 --> 00:05:39,460 Account contest line number 990 999. 93 00:05:40,720 --> 00:05:41,810 Oh, sorry. 94 00:05:41,830 --> 00:05:45,730 It's supposed to be for a slash account. 95 00:05:45,980 --> 00:05:48,940 That's a path from the back end, as I showed you. 96 00:05:48,970 --> 00:05:50,410 Now it is happy. 97 00:05:50,710 --> 00:05:54,400 So let's check the console and let's try our luck. 98 00:05:55,170 --> 00:06:00,550 All right, so for this account, I will name this one as personal. 99 00:06:00,580 --> 00:06:02,140 No, I have personal account. 100 00:06:02,320 --> 00:06:05,110 Let me call this one as software. 101 00:06:07,270 --> 00:06:14,220 And for initial deposit, let me say 2004, the account type. 102 00:06:14,230 --> 00:06:18,130 I want to choose personal and nodes. 103 00:06:18,130 --> 00:06:20,290 Let me say account. 104 00:06:22,180 --> 00:06:23,830 All right, so let me hit add. 105 00:06:24,460 --> 00:06:31,000 And down here, I got some message, but it seems I don't have the response. 106 00:06:31,270 --> 00:06:35,260 Meaning that our dispatching is not working well. 107 00:06:35,290 --> 00:06:36,760 Oh, sorry, guys. 108 00:06:37,150 --> 00:06:39,310 This one is post request. 109 00:06:40,180 --> 00:06:40,960 Great. 110 00:06:41,710 --> 00:06:44,830 So let's try again for this one. 111 00:06:44,830 --> 00:06:46,500 Let me enter anything here. 112 00:06:46,510 --> 00:06:48,340 I want to make sure that is being called. 113 00:06:48,520 --> 00:06:49,390 Anything here? 114 00:06:49,420 --> 00:06:51,780 Let me hit send again. 115 00:06:51,790 --> 00:06:57,670 We don't see the response, so let's try to handle the error here or console.log the error here. 116 00:06:57,670 --> 00:06:58,540 And let's see. 117 00:06:59,170 --> 00:07:01,180 So here we go. 118 00:07:01,660 --> 00:07:05,270 Or I think the problem is the end point. 119 00:07:05,290 --> 00:07:06,340 Let's look it. 120 00:07:07,150 --> 00:07:11,110 The API account URL. 121 00:07:12,510 --> 00:07:14,900 Oh, we have the account here first. 122 00:07:14,910 --> 00:07:15,510 Last account. 123 00:07:15,510 --> 00:07:18,240 So here we are going to ignore that. 124 00:07:18,570 --> 00:07:23,050 So here, let's remove the account. 125 00:07:23,070 --> 00:07:25,170 We have it inside the base. 126 00:07:25,170 --> 00:07:26,160 You are error. 127 00:07:26,460 --> 00:07:27,710 So that is it. 128 00:07:27,720 --> 00:07:28,440 That is it. 129 00:07:28,440 --> 00:07:29,430 I believe that. 130 00:07:29,430 --> 00:07:30,450 I believe that. 131 00:07:30,750 --> 00:07:36,150 Now let's scroll down here and let's enter software. 132 00:07:38,310 --> 00:07:50,490 The initial deposit 2000 account type is going to be personal account and software hits ADD and let's 133 00:07:50,490 --> 00:07:51,450 have a look. 134 00:07:52,900 --> 00:07:56,710 Well, again, there is no feedback on that. 135 00:07:57,960 --> 00:07:59,970 Well, this is strange, right? 136 00:08:00,900 --> 00:08:04,020 So let's see if our action is being called. 137 00:08:05,220 --> 00:08:10,110 All right, so what about constant logging, the error here, inside here? 138 00:08:10,470 --> 00:08:11,310 Let's see. 139 00:08:11,940 --> 00:08:13,530 They're going to be the error. 140 00:08:15,660 --> 00:08:18,690 And anything here. 141 00:08:25,640 --> 00:08:27,500 Oh, you can see the error. 142 00:08:27,980 --> 00:08:32,360 It says that content type is not a valid HTTP header field. 143 00:08:32,539 --> 00:08:35,470 It means we are making some mistake here. 144 00:08:35,559 --> 00:08:36,620 Or is this one? 145 00:08:36,890 --> 00:08:37,850 Oh, no. 146 00:08:38,900 --> 00:08:41,870 So now I think we'd be good to go. 147 00:08:41,870 --> 00:08:43,809 So let me enter the software again. 148 00:08:43,820 --> 00:08:44,600 This account. 149 00:08:44,600 --> 00:08:45,770 No one to be created. 150 00:08:45,770 --> 00:08:46,280 Right? 151 00:08:46,730 --> 00:08:48,410 So any value here. 152 00:08:48,800 --> 00:08:50,120 Any value here. 153 00:08:50,150 --> 00:08:50,980 Hit add. 154 00:08:50,990 --> 00:08:53,600 And this time around, I got some beautiful error. 155 00:08:53,870 --> 00:08:57,500 Let's have a look on the response. 156 00:08:57,530 --> 00:08:59,150 Invalid token. 157 00:08:59,390 --> 00:09:04,370 The problem is that we are not attaching the token to the header. 158 00:09:04,550 --> 00:09:09,800 Look here we are using the user of which is token. 159 00:09:09,800 --> 00:09:12,490 But in the state we don't have the token. 160 00:09:12,500 --> 00:09:17,920 So here we want to what populate the token from the local storage. 161 00:09:17,930 --> 00:09:26,090 So here I'm going to add a property called user off because I will need the token for that user off 162 00:09:26,270 --> 00:09:40,010 and I'm going to use the JSON dot pass and here look at storage dot get item and I need the user of. 163 00:09:43,170 --> 00:09:44,490 All right, that is it. 164 00:09:44,530 --> 00:09:46,170 So now here we go. 165 00:09:46,710 --> 00:09:49,170 So now everything is set. 166 00:09:49,200 --> 00:09:53,280 Let's try and create the software account. 167 00:09:54,300 --> 00:09:56,240 So let me collapse this one. 168 00:09:56,250 --> 00:09:59,640 Let me fill up the software account. 169 00:10:00,360 --> 00:10:07,020 Initial deposit, 4000 personal account and software. 170 00:10:08,790 --> 00:10:11,400 Let me check the console and let's see. 171 00:10:12,680 --> 00:10:13,640 Objects. 172 00:10:14,090 --> 00:10:17,600 And this time around, it has been created. 173 00:10:17,630 --> 00:10:23,540 You see, I have software with initial deposit and then the account type is personal. 174 00:10:24,870 --> 00:10:25,600 Great. 175 00:10:25,620 --> 00:10:34,380 So inside my dashboard, if I go to Dashboard and look at my account, I have one account and I click 176 00:10:34,380 --> 00:10:35,720 on View Account. 177 00:10:35,730 --> 00:10:41,640 You see that this account don't have any transaction, so I can go ahead and add transaction. 178 00:10:41,640 --> 00:10:45,360 And for that one we are going to work on it in the next video.