1 00:00:00,330 --> 00:00:07,380 So before we get frustrated, because even though we have logged in, we cannot access the dashboard. 2 00:00:07,770 --> 00:00:08,280 Let's fix it. 3 00:00:08,910 --> 00:00:10,470 Let's add the wrapper. 4 00:00:10,780 --> 00:00:13,860 And remember when I showed you the documentation? 5 00:00:13,890 --> 00:00:14,760 What did I say? 6 00:00:15,350 --> 00:00:19,830 That the lowering one is that sucker that causes that. 7 00:00:20,070 --> 00:00:21,660 Now, of course, there is also an error and all that. 8 00:00:21,690 --> 00:00:25,860 But in our case, even when we successfully log in. 9 00:00:26,550 --> 00:00:30,240 Well, the reason why we don't see anything, because we are still in this loading stage. 10 00:00:30,930 --> 00:00:35,850 So when we try to access that page in private or out. 11 00:00:36,540 --> 00:00:44,010 This is still false because authenticator then user, while one is undefined and the other one is false. 12 00:00:44,040 --> 00:00:44,370 Correct. 13 00:00:44,760 --> 00:00:46,740 So that's why this is also false. 14 00:00:47,190 --> 00:00:48,190 So how do we fix that? 15 00:00:48,720 --> 00:00:49,770 And then not show us. 16 00:00:50,160 --> 00:00:51,660 So we would have some kind of wrapper. 17 00:00:52,330 --> 00:00:56,290 And in our case, I think we're going to use that in the abcess. 18 00:00:56,760 --> 00:00:59,790 So we have the wrapper on that in the wrapper. 19 00:01:00,150 --> 00:01:01,690 We will get these things. 20 00:01:01,710 --> 00:01:05,740 The loading and error and all that from the off zero. 21 00:01:06,240 --> 00:01:11,700 And then if the loading will display one spinner, even the error will say something else. 22 00:01:12,110 --> 00:01:17,670 And then, of course, eventually, if everything is correct, we'll just render the children. 23 00:01:18,420 --> 00:01:22,830 So we'll wrap our app Jazz in the wrapper. 24 00:01:23,390 --> 00:01:30,180 And then once we do that, then depending on our stage while we'll display something. 25 00:01:30,330 --> 00:01:30,690 Correct. 26 00:01:31,200 --> 00:01:34,470 So start simply by navigating to objects. 27 00:01:34,850 --> 00:01:37,850 And then we already have imported the author wrapper. 28 00:01:38,370 --> 00:01:39,360 It's in the pages. 29 00:01:39,610 --> 00:01:41,490 And that's the one that's gonna be responsible for that. 30 00:01:41,970 --> 00:01:45,300 So now what I would want is to wrap everything here. 31 00:01:45,670 --> 00:01:49,170 So you say off the wrapper, not provider. 32 00:01:49,530 --> 00:01:51,810 So we're going to go with off provider. 33 00:01:52,320 --> 00:01:54,540 And by the way, this says all the zero provider. 34 00:01:54,600 --> 00:01:58,650 That's not what I would want because the name is off provider. 35 00:01:59,400 --> 00:02:00,760 Please don't mess that one up. 36 00:02:00,780 --> 00:02:01,650 Like I just did. 37 00:02:02,640 --> 00:02:05,760 And I'm going to make sure that I wrap the router as well. 38 00:02:06,300 --> 00:02:07,620 So I'll save it. 39 00:02:08,310 --> 00:02:10,230 Of course it is because I type provider. 40 00:02:10,590 --> 00:02:12,000 So again, my apologies. 41 00:02:12,080 --> 00:02:14,040 Let me delay this essentially. 42 00:02:14,220 --> 00:02:15,900 You just need to use this ortho wrapper. 43 00:02:16,380 --> 00:02:18,690 As you can see, it's very easy to make the mistake. 44 00:02:19,110 --> 00:02:26,490 So make sure you use this ortho wrapper or I don't know, I might change it later to a wrapper or whatever. 45 00:02:26,940 --> 00:02:28,900 Just so there are no confusions like that. 46 00:02:29,430 --> 00:02:31,960 But for timing, I'm just gonna leave it as author wrapper. 47 00:02:32,580 --> 00:02:33,830 We will save it. 48 00:02:34,190 --> 00:02:39,090 And at the moment we just ran author wrapper because of course, we haven't set up any functionality 49 00:02:39,090 --> 00:02:39,350 in there. 50 00:02:39,930 --> 00:02:42,780 So bravely navigate to a ortho wrapper. 51 00:02:43,230 --> 00:02:45,060 We already have all the imports and all that. 52 00:02:45,090 --> 00:02:48,870 And by the way, we have a nice CSF set up as well. 53 00:02:49,440 --> 00:02:55,650 So what I would want to do over here now, my use of OK, got it now at the top. 54 00:02:55,740 --> 00:02:59,340 I would want to grab those two things is loading an hour. 55 00:02:59,690 --> 00:03:04,650 And by the way, which simply are going to copy and paste everything that they're displaying over here. 56 00:03:05,010 --> 00:03:05,340 That's it. 57 00:03:06,030 --> 00:03:07,000 Not much to it. 58 00:03:07,540 --> 00:03:08,970 And we're gonna go at cost. 59 00:03:10,110 --> 00:03:17,420 Is loading with destruction that from the errors as well, and that is coming from use off and we can 60 00:03:17,420 --> 00:03:20,730 Volkert, of course, use off when we invoke it. 61 00:03:21,360 --> 00:03:28,170 After that, I would want to check if I'm loading loading, then if that is the case, I'm going to 62 00:03:28,170 --> 00:03:28,860 do something. 63 00:03:29,340 --> 00:03:31,080 Also, I have if the error. 64 00:03:31,380 --> 00:03:33,290 So we're going to go with an error. 65 00:03:33,690 --> 00:03:35,820 What I would want to do then what I would one after. 66 00:03:36,510 --> 00:03:42,150 And finally, if everything is correct, I'm simply going to return. 67 00:03:43,400 --> 00:03:44,480 A react fragment. 68 00:03:44,660 --> 00:03:49,040 By the way, if you don't know, this is a reac fragment shortcut, which essentially is they don't 69 00:03:49,040 --> 00:03:56,120 have a dev or whatever, some kind of element, because that eventually just leads to a div soup. 70 00:03:56,420 --> 00:03:58,400 In this case, we're seeing a react fragment. 71 00:03:58,760 --> 00:04:01,790 And then author, rapper is going to have a children. 72 00:04:02,270 --> 00:04:06,530 So I'm going to say children, because, of course, I wrap my whole application. 73 00:04:06,530 --> 00:04:06,920 Correct. 74 00:04:07,310 --> 00:04:09,200 I wrapped router and all that. 75 00:04:09,580 --> 00:04:15,620 So on here, I'm going to access those children and I'm going to say if everything is correct, then 76 00:04:16,140 --> 00:04:18,050 I would want to run their dush children. 77 00:04:18,470 --> 00:04:22,880 So, of course, I need to have Coralee braces and I'm going to go for children. 78 00:04:23,090 --> 00:04:27,710 Now, before I say, of course, I would need to come up with what are my displaying. 79 00:04:28,100 --> 00:04:32,810 So if there's gonna be a narrower the way I'm going to display that, I'm going to go with the wrapper 80 00:04:33,190 --> 00:04:36,890 and not in this wrapper, there's going to be a heading one. 81 00:04:37,160 --> 00:04:42,320 And in that having one, I'm just going to display the error message and say error message. 82 00:04:42,800 --> 00:04:45,680 Then if it's loading, what am I doing? 83 00:04:46,070 --> 00:04:48,980 Well, if it's loading, then there's just gonna be a giant spinner. 84 00:04:49,340 --> 00:04:50,630 So this is what I'm talking about. 85 00:04:51,020 --> 00:04:52,850 There are two cases, Poro spinners. 86 00:04:53,340 --> 00:04:57,710 There's one that I'm displaying once I have logged in and I'm searching for user. 87 00:04:58,070 --> 00:04:59,870 And then there is going to be the second one. 88 00:05:00,230 --> 00:05:03,380 That essentially is just taking up the whole screen. 89 00:05:03,860 --> 00:05:05,370 That is by design. 90 00:05:05,400 --> 00:05:07,760 That's how I wanted Cerny here loading. 91 00:05:08,210 --> 00:05:15,440 And then let's return a wrapper wrapper and then inside the wrapper, which is going to place our image. 92 00:05:15,800 --> 00:05:17,840 Now, again, I'm importing my loading one. 93 00:05:18,010 --> 00:05:24,380 So loading Jeff, in this case, as far as the old moves are going to say, Spinner. 94 00:05:25,370 --> 00:05:25,970 Beautiful. 95 00:05:26,330 --> 00:05:26,990 We'll save it. 96 00:05:27,430 --> 00:05:30,510 And it's going to say is loading is not defined meaning? 97 00:05:30,870 --> 00:05:34,100 I checked here for the loading I should have said is loading sake. 98 00:05:34,670 --> 00:05:36,110 Very easy to make a mistake. 99 00:05:36,230 --> 00:05:42,650 And of course, the moment we save, of course, we're going to be directed back to a log page because 100 00:05:42,650 --> 00:05:45,310 we have our private route setup. 101 00:05:46,010 --> 00:05:52,520 But now, once we log in, course, we should be able to go to a dashboard. 102 00:05:52,940 --> 00:05:55,610 So we should be able to render our children. 103 00:05:56,030 --> 00:05:56,680 Let's right out. 104 00:05:57,220 --> 00:05:58,640 Want to go with logging option. 105 00:05:59,300 --> 00:06:00,590 Now, I'm going to log in now. 106 00:06:00,620 --> 00:06:05,390 Again, we can pick which ever we would want, but I think I'm going to go with John in here. 107 00:06:06,050 --> 00:06:11,690 And then once we log in, of course, successfully, we are back in the dashboard. 108 00:06:11,870 --> 00:06:13,790 So now, of course, we can search the user and all that. 109 00:06:14,450 --> 00:06:19,430 Of course, log out not just the shockers that it would work with a get and all that. 110 00:06:19,940 --> 00:06:21,260 We're going to do one more log in. 111 00:06:22,070 --> 00:06:24,910 In this case, I'm going to go with Google and mine. 112 00:06:25,400 --> 00:06:30,050 Of course, now I'm successfully logged in using the social connections. 113 00:06:30,410 --> 00:06:32,410 So that's how we can set up the wrapper. 114 00:06:33,390 --> 00:06:37,160 And that's how we can restrict a route in our application.