1 00:00:06,670 --> 00:00:07,800 Welcome back. 2 00:00:07,810 --> 00:00:08,830 In this video. 3 00:00:08,830 --> 00:00:12,050 Let's work on the account details. 4 00:00:12,070 --> 00:00:18,190 But before we continue on, let's change this text to total income, total expenses, and let's see 5 00:00:18,190 --> 00:00:18,940 balance. 6 00:00:18,970 --> 00:00:25,360 Let's go to the component dashboard and then the account summary. 7 00:00:25,720 --> 00:00:30,400 So here I will make it as total income. 8 00:00:32,110 --> 00:00:37,780 And next is scroll down and we're going to see total orders here. 9 00:00:37,780 --> 00:00:40,180 Change this one to total expenses. 10 00:00:40,720 --> 00:00:45,700 And lastly, I'm going to be the balance that we have. 11 00:00:45,730 --> 00:00:48,100 So I'll change this one to balance. 12 00:00:49,990 --> 00:00:50,380 All right. 13 00:00:50,380 --> 00:00:51,340 So let's see. 14 00:00:51,430 --> 00:00:52,990 Yeah, I think this one is okay. 15 00:00:52,990 --> 00:00:59,980 So what we are going to do is that when we click on the View account, I want to display the account 16 00:00:59,980 --> 00:01:01,480 details component. 17 00:01:01,480 --> 00:01:05,200 And for that one too, I'm going to provide the component for you. 18 00:01:05,200 --> 00:01:07,100 So here we go. 19 00:01:07,130 --> 00:01:15,050 Inside the dashboard, I'm going to copy the account details component and this is the account details 20 00:01:15,050 --> 00:01:16,130 component. 21 00:01:16,130 --> 00:01:18,620 So let's go ahead and then render that. 22 00:01:18,620 --> 00:01:23,660 So inside the app, let's require the account details. 23 00:01:24,230 --> 00:01:27,200 And this I'm going to be a dynamic component. 24 00:01:27,200 --> 00:01:29,780 So we're going to provide a param. 25 00:01:29,780 --> 00:01:35,090 So let me copy this one and change this one to account details. 26 00:01:35,090 --> 00:01:37,430 And here is going to be let me look at the path. 27 00:01:37,430 --> 00:01:50,150 Well, we're going to be account details for slash ID, so here you go, account dash details and for 28 00:01:50,150 --> 00:01:55,010 slash colon ID, I'll make this one as account ID. 29 00:01:57,440 --> 00:02:00,800 All right, So now let's refresh it and let's see. 30 00:02:00,890 --> 00:02:07,250 And I need to require the link component from React Router Dom. 31 00:02:07,260 --> 00:02:14,690 So here let's require the link component and now everything will be set. 32 00:02:15,050 --> 00:02:16,400 Let's refresh it. 33 00:02:16,400 --> 00:02:23,390 And well, I got some error here because I'm trying to access some property, but it doesn't exist. 34 00:02:23,510 --> 00:02:25,760 So let's see more about that. 35 00:02:25,790 --> 00:02:27,500 Why are we getting that error? 36 00:02:28,040 --> 00:02:32,540 So let's go to the console and above. 37 00:02:32,540 --> 00:02:37,970 Okay, in the link component cannot read path undefined. 38 00:02:38,300 --> 00:02:42,650 So let's read more about that inside the component of link. 39 00:02:42,650 --> 00:02:49,850 Let's see if we have some dynamic value here where we need to provide the two attributes because I have 40 00:02:49,850 --> 00:02:50,930 commented that one out. 41 00:02:50,930 --> 00:02:51,520 That is why. 42 00:02:51,530 --> 00:02:53,390 So let's remove this one. 43 00:02:54,110 --> 00:03:01,950 And next is let's also bring this one here and let's remove the dynamic ID, or I can provide any ID 44 00:03:01,950 --> 00:03:02,580 here. 45 00:03:02,590 --> 00:03:03,780 It's okay. 46 00:03:03,780 --> 00:03:08,820 And now React is happy and this is the account details. 47 00:03:08,820 --> 00:03:12,660 So let me change the text to the name of the account. 48 00:03:12,660 --> 00:03:15,210 So here I'm going to be the name of the account. 49 00:03:15,210 --> 00:03:20,100 For the meantime, I'll call this one as mom's building. 50 00:03:21,420 --> 00:03:23,610 And for the text, you can change it. 51 00:03:23,640 --> 00:03:24,060 Right. 52 00:03:24,090 --> 00:03:24,600 Great. 53 00:03:24,600 --> 00:03:28,140 So I'm going to populate this one with a read name of my account. 54 00:03:28,140 --> 00:03:30,810 For the meantime, let's maintain this one. 55 00:03:30,840 --> 00:03:38,790 The next step is that I want to display the list of account down here, and I have a component for that. 56 00:03:38,790 --> 00:03:40,710 So here we go. 57 00:03:40,890 --> 00:03:44,190 I'm going to provide that component also for you. 58 00:03:44,310 --> 00:03:50,610 So inside the dashboard, let me place that in here and inside the account details. 59 00:03:50,640 --> 00:03:55,590 Let's require the account list, all transactions. 60 00:03:55,590 --> 00:03:57,030 And here we go. 61 00:03:57,330 --> 00:03:59,760 I'm going to place it down here. 62 00:03:59,760 --> 00:04:01,890 And let me remove this comment. 63 00:04:03,090 --> 00:04:03,690 All right. 64 00:04:03,690 --> 00:04:06,300 So let me remove the prop here for the meantime. 65 00:04:06,300 --> 00:04:09,090 So let's save it and let's see the account list. 66 00:04:09,090 --> 00:04:12,000 Or you can see the account is not defined. 67 00:04:12,000 --> 00:04:15,210 So let's go to the transaction component. 68 00:04:15,210 --> 00:04:20,399 So here we can trick JavaScript to be able to use the variable called account. 69 00:04:20,399 --> 00:04:24,300 So is equal to undefined or an object. 70 00:04:24,420 --> 00:04:25,230 Yes. 71 00:04:25,230 --> 00:04:26,400 So now let's save it. 72 00:04:26,400 --> 00:04:27,600 And now let's see. 73 00:04:27,600 --> 00:04:33,000 And here we are going to display the list of transactions from the back end. 74 00:04:33,000 --> 00:04:35,970 So now we have the components ready. 75 00:04:36,000 --> 00:04:41,790 What has left is about creating the action to find a single account. 76 00:04:41,820 --> 00:04:44,340 Let's get into that in the next video.