1 00:00:00,240 --> 00:00:00,600 All right. 2 00:00:00,930 --> 00:00:03,930 And once we have the functionality in place on the backend. 3 00:00:04,380 --> 00:00:07,740 Now let's start patching those that's on the frontend. 4 00:00:08,100 --> 00:00:10,530 First, we want to set up the actions in this case. 5 00:00:10,530 --> 00:00:18,120 Again, we'll go with begin and success because we do want to pass the data to the state. 6 00:00:18,510 --> 00:00:24,000 But if again, we have we're a one or 500 or right away log out the user. 7 00:00:24,540 --> 00:00:27,510 I'm not going to repeat why that is my preference. 8 00:00:27,910 --> 00:00:33,180 We also want to add stats and monthly applications in the initial state. 9 00:00:33,600 --> 00:00:38,610 So don't forget about that when we'll create a show starts function. 10 00:00:39,450 --> 00:00:41,040 This is where we'll set up the loading. 11 00:00:41,400 --> 00:00:48,990 We'll go with a weight off fetch and remember, if we don't pass any method, then automatically, this 12 00:00:48,990 --> 00:00:52,680 is Geth, and that's where I will go here with jobs and stats. 13 00:00:52,950 --> 00:00:54,390 So that's the root run. 14 00:00:54,390 --> 00:01:00,120 If everything is correct, we want to go with dispatch and show that success as far as the payload, 15 00:01:00,480 --> 00:01:03,390 passing stats and monthly applications. 16 00:01:04,360 --> 00:01:10,180 And you can probably already guess that in the reduced year, we'll just set those values in the state. 17 00:01:10,600 --> 00:01:17,920 Now, if there is an error for time being, log it and eventually I'll have log out the user and eventually 18 00:01:17,920 --> 00:01:26,170 it will clearly alert just in case you have some kind of setup where the alert is present again, in 19 00:01:26,170 --> 00:01:31,870 our case, it's not going to be the case, and fact will also make sure that we hide the alert once 20 00:01:31,870 --> 00:01:32,650 we start loading. 21 00:01:32,650 --> 00:01:39,880 But again, you might have a different set up where there is an alert, so it's a good case to always 22 00:01:39,880 --> 00:01:40,180 hide it. 23 00:01:40,180 --> 00:01:43,630 So go ahead with clear alert, which in this case is optional. 24 00:01:44,140 --> 00:01:49,960 I will pass in the value the show starts and not in the reducer show stats begin. 25 00:01:50,050 --> 00:01:55,300 We set up the loading and not as far as the success we go with stats, monthly applications and not 26 00:01:55,300 --> 00:01:59,530 as equal to action, payload and both of those failures. 27 00:02:00,010 --> 00:02:01,900 So let's navigate to the client. 28 00:02:02,500 --> 00:02:07,270 I guess let's start by setting up everything in the actions. 29 00:02:07,900 --> 00:02:12,960 So I'll start with show starts begin as well as the success one. 30 00:02:13,570 --> 00:02:18,790 So let me comment this one where I'm sorry, let me copy this one, and let's move it down a little 31 00:02:18,790 --> 00:02:19,060 bit. 32 00:02:19,930 --> 00:02:24,670 Select both of them over here, and let's go to show start. 33 00:02:25,450 --> 00:02:27,880 And let's set it up as begin. 34 00:02:28,210 --> 00:02:29,200 Copy and paste. 35 00:02:29,650 --> 00:02:33,760 And this won't be a success, one of responded correctly. 36 00:02:34,120 --> 00:02:35,620 So now let's set up the imports. 37 00:02:36,100 --> 00:02:39,100 I think I'm going to go with apt context first. 38 00:02:39,100 --> 00:02:40,930 So when I would here. 39 00:02:42,200 --> 00:02:49,040 And right after at a job, let's copy and paste this one, and then we'll go with success. 40 00:02:49,530 --> 00:02:53,720 Then let's also right away set up those two things in a state. 41 00:02:54,080 --> 00:02:56,440 So that's going to be our default one starts. 42 00:02:56,840 --> 00:03:05,330 And then we also want monthly applications, which will stay as our monthly applications. 43 00:03:05,850 --> 00:03:08,000 And this will be set to an empty array. 44 00:03:08,750 --> 00:03:10,160 And let's keep on scrolling. 45 00:03:10,850 --> 00:03:11,840 Navigate here. 46 00:03:12,950 --> 00:03:15,230 And then let's set up that show starts one. 47 00:03:15,950 --> 00:03:17,870 So let's go with Khan's show. 48 00:03:18,800 --> 00:03:20,020 What's the function? 49 00:03:20,060 --> 00:03:22,620 Let's remember to set it up as a sink. 50 00:03:23,420 --> 00:03:27,500 All right away at it or here, just in case I forgot to do that later. 51 00:03:27,860 --> 00:03:30,410 So show starts beautiful. 52 00:03:30,920 --> 00:03:32,690 And then as far as the functionality. 53 00:03:33,020 --> 00:03:35,840 Let's start by dispatching the begin one. 54 00:03:36,290 --> 00:03:40,580 So type will be equal to show stats and not success. 55 00:03:41,360 --> 00:03:45,140 We're actually looking for again and then try and catch. 56 00:03:45,660 --> 00:03:50,150 And let's right away clear of values, because I might forget about that as well. 57 00:03:50,610 --> 00:03:51,460 And then let's go. 58 00:03:51,470 --> 00:03:52,160 Here it comes. 59 00:03:52,250 --> 00:03:54,190 Data is equal to. 60 00:03:54,830 --> 00:03:56,500 And we're going to go with a weight. 61 00:03:57,260 --> 00:04:03,860 Like I said, we have another option here where effectively, if we go with off fashion, I know that 62 00:04:04,010 --> 00:04:05,120 it is a get request. 63 00:04:05,420 --> 00:04:06,920 I can omit the get one. 64 00:04:07,190 --> 00:04:08,060 You can always add it. 65 00:04:08,060 --> 00:04:13,520 But if you don't have it, then by default it's going to be a get request went as far as the URL. 66 00:04:13,520 --> 00:04:19,970 Well, we go with API version one, which is already set up in the north, which has a base value. 67 00:04:20,810 --> 00:04:26,210 The base URL go here with jobs and then stats or that's the round. 68 00:04:26,420 --> 00:04:26,870 Awesome. 69 00:04:27,200 --> 00:04:28,520 And knowledge dispatch it. 70 00:04:29,060 --> 00:04:31,700 So first, let's set up our type, not begin. 71 00:04:31,820 --> 00:04:34,340 Say it's always recommending the other one. 72 00:04:34,760 --> 00:04:39,350 So we'll go here with payload and as far as the payload is going to be an object and then we go, it 73 00:04:39,350 --> 00:04:39,950 starts. 74 00:04:40,340 --> 00:04:41,630 That is equal to data. 75 00:04:41,630 --> 00:04:44,780 And as you can see, in this case, I'm not structuring it. 76 00:04:45,050 --> 00:04:46,610 I just think that it's easier. 77 00:04:46,640 --> 00:04:48,080 Remember, this is defaults. 78 00:04:48,080 --> 00:04:54,140 That's not stats and the comma and we're going to go with the monthly applications is equal to data 79 00:04:54,380 --> 00:04:56,490 and then monthly applications. 80 00:04:56,490 --> 00:04:59,210 So that is going to be exactly the same thing. 81 00:04:59,270 --> 00:05:06,560 Let's save it for now where we have the catch that's logged temporarily both error. 82 00:05:07,500 --> 00:05:08,970 And a response. 83 00:05:09,980 --> 00:05:16,100 And then finally, that's also the log out user for the time being, I'll just comment this one out 84 00:05:16,640 --> 00:05:17,810 with this in place. 85 00:05:17,840 --> 00:05:19,610 Now again, let me navigate it up. 86 00:05:20,030 --> 00:05:23,960 I'll grab both of them right away the success and begin. 87 00:05:24,230 --> 00:05:27,500 And back in the user, I'm sorry, reducer. 88 00:05:28,280 --> 00:05:29,900 I want to go here. 89 00:05:31,010 --> 00:05:31,580 Both of them. 90 00:05:32,100 --> 00:05:33,860 Copy and paste one. 91 00:05:33,920 --> 00:05:39,530 Let's navigate down where we have the error, and I'll set up the functionality where again, we'll 92 00:05:39,530 --> 00:05:46,100 have begin, where we hide the alert and set up the loading and then show that's success. 93 00:05:46,820 --> 00:05:48,290 So let me see. 94 00:05:48,800 --> 00:05:51,770 I think we're going to go over here. 95 00:05:51,800 --> 00:05:55,580 I'm going to grab these runs now, but it's going to be some changes. 96 00:05:55,580 --> 00:05:58,550 But a lot of the things that are going to be exactly the same. 97 00:05:58,700 --> 00:06:00,590 Copy and paste action type. 98 00:06:00,590 --> 00:06:02,510 It's not going to be edit job again. 99 00:06:03,290 --> 00:06:09,940 We're going to go with our show and then stance begin is loading true again? 100 00:06:09,950 --> 00:06:15,860 Optionally, I'll add this show alert and false just in case. 101 00:06:16,760 --> 00:06:25,610 And then also where I have the success one, we want to make some changes where the type will be show 102 00:06:25,910 --> 00:06:31,760 that success is loading will be false, but we're not going to be displaying any kind of alert. 103 00:06:32,090 --> 00:06:39,620 We're just going to go here would start an action payload and then stats and the same thing we want 104 00:06:39,620 --> 00:06:41,030 to do with monthly application. 105 00:06:41,300 --> 00:06:49,210 This is going to be a doozy for me to spell some monthly applications here, not as equal to stats, 106 00:06:49,220 --> 00:06:56,540 worms or action, action, payload, payload and monthly applications. 107 00:06:57,080 --> 00:07:02,510 Now we're not going to invoke it because I want to do that in the actual stats page. 108 00:07:02,510 --> 00:07:08,150 And since we don't have it right now, I really don't see the point of setting up the use effect and 109 00:07:08,150 --> 00:07:08,840 all that stuff. 110 00:07:09,290 --> 00:07:16,790 So in the next video, we will set up some basics as far as our stats, and that's when we will invoke 111 00:07:16,790 --> 00:07:16,940 it.