1 00:00:00,740 --> 00:00:06,620 With our alert functionality complete we can technically start working on our checkout page. 2 00:00:06,670 --> 00:00:08,980 However there is a catch. 3 00:00:09,100 --> 00:00:16,420 If we're going to head over to our application and if let's say even we're not going to log in we're 4 00:00:16,420 --> 00:00:22,000 still going to be able to access the checkout page and you're probably saying no you cannot because 5 00:00:22,000 --> 00:00:23,150 you don't have the link. 6 00:00:23,320 --> 00:00:28,130 You don't have the option in the cart page as well as we can clearly see that we haven't logged in. 7 00:00:28,840 --> 00:00:29,160 All right. 8 00:00:29,170 --> 00:00:33,760 What if I would draw your mind grenade that if we're gonna head over to our URL and if I'm going to 9 00:00:33,750 --> 00:00:40,420 delete and let's say for WE'RE GONNA TYPE our check out even when we haven't logged in yet still access 10 00:00:40,420 --> 00:00:46,060 the page not something we would want to restrict correct otherwise what is the point of logging in if 11 00:00:46,510 --> 00:00:50,140 user can just bypass that by heading over to a euro. 12 00:00:50,490 --> 00:00:53,650 And the way we're gonna do that we're gonna set up a private or out. 13 00:00:53,710 --> 00:00:58,870 So essentially there's gonna be a wrapper component for our out and then within that wrapper component 14 00:00:59,260 --> 00:01:01,550 we're gonna decide what are we going to render. 15 00:01:01,600 --> 00:01:03,610 Are we gonna render the checkout page. 16 00:01:03,610 --> 00:01:09,190 And of course we're only going to render if the user has logged in or we're just gonna redirect the 17 00:01:09,190 --> 00:01:11,630 user back to a log in page. 18 00:01:11,710 --> 00:01:17,050 So if we're gonna take a look at the finished application you're gonna notice that if I log out and 19 00:01:17,110 --> 00:01:20,980 even if I tried to go to a checkout page. 20 00:01:20,980 --> 00:01:22,130 So let's say checkout. 21 00:01:22,150 --> 00:01:24,770 And of course I need to type it properly. 22 00:01:24,890 --> 00:01:26,230 Checkout page. 23 00:01:26,330 --> 00:01:27,590 Check out page. 24 00:01:27,580 --> 00:01:29,680 Then we're heading over to a signing. 25 00:01:30,040 --> 00:01:34,870 So unless I have logged in I have no access to a check out page. 26 00:01:34,870 --> 00:01:37,090 We're gonna draw back to our application. 27 00:01:37,090 --> 00:01:41,800 I'm going to open up the sidebar first of all I'm going to close all the tabs that I have an open and 28 00:01:41,800 --> 00:01:47,020 the component we're looking for is this private route not private route is within the component we have 29 00:01:47,020 --> 00:01:52,350 the components and then we have the private route but we first need to import it within the app. 30 00:01:52,410 --> 00:01:52,690 Yes. 31 00:01:52,720 --> 00:01:58,330 So I'm gonna open up the app Jess and also we're gonna open up the private road and then as far as importing 32 00:01:58,390 --> 00:02:01,030 within the app Jess we're going to scroll up a bit. 33 00:02:01,030 --> 00:02:04,720 I'm gonna copy and paste and I'm just gonna change the name in here. 34 00:02:04,900 --> 00:02:06,910 So it's not gonna be alert. 35 00:02:06,910 --> 00:02:11,120 It is going to be a private private road. 36 00:02:11,190 --> 00:02:15,640 Like so then we're gonna head down and find our checkout page. 37 00:02:15,640 --> 00:02:21,430 Remember we had a route for The Checkout however in this case instead of her out we're gonna go with 38 00:02:21,430 --> 00:02:22,610 private road. 39 00:02:22,810 --> 00:02:31,030 So let's delete our component and let's write private route which at the moment again is not gonna do 40 00:02:31,030 --> 00:02:35,400 anything because of course all the functionality is gonna be within the private road. 41 00:02:35,800 --> 00:02:41,190 So we're gonna head over to a private road and the imports we're looking for are route and redirect. 42 00:02:41,500 --> 00:02:50,560 So let me write the import route and redirect and that is coming from reactor road or down reactor over 43 00:02:50,560 --> 00:02:51,350 nome. 44 00:02:51,370 --> 00:02:57,670 And then we would want to get a user context as well because again we're gonna check for our token and 45 00:02:57,730 --> 00:03:02,800 if the token is there then of course we know that the user has logged in even the token is not there 46 00:03:03,100 --> 00:03:06,370 then essentially we're going to redirect our user. 47 00:03:06,550 --> 00:03:14,650 So let's go with import and then we're gonna go with user context user context and that of course is 48 00:03:14,650 --> 00:03:21,980 coming from and then we look in the context we look in the user file we have our imports awesome. 49 00:03:22,180 --> 00:03:24,950 And then we're gonna start working on the private road. 50 00:03:25,130 --> 00:03:29,630 And first I would want to access some props and what perhaps I'm looking for. 51 00:03:29,630 --> 00:03:35,860 Well first of all I'm looking for children because keep in mind the private road right now has a child 52 00:03:35,860 --> 00:03:36,400 of checkout. 53 00:03:37,150 --> 00:03:43,040 And again depending on some values we would want to either show it or we're going to redirect the user. 54 00:03:43,150 --> 00:03:47,480 But first I would want to access it on one for sure access my children. 55 00:03:47,500 --> 00:03:52,870 So we're gonna head our back and remember we had the props object and then we could look for the children 56 00:03:53,350 --> 00:03:54,560 and then there is another one. 57 00:03:54,670 --> 00:03:56,400 Another one is a rest. 58 00:03:56,860 --> 00:03:58,660 So we're gonna use a rest. 59 00:03:58,680 --> 00:04:06,190 Operator again coming from me a sixth where I can just get rest of the props that are added to my private 60 00:04:06,190 --> 00:04:06,760 road. 61 00:04:06,760 --> 00:04:12,700 Currently the only prop we have is path but just so we get an idea I'm just gonna add some dummy ones. 62 00:04:12,730 --> 00:04:14,830 Same name John. 63 00:04:15,210 --> 00:04:18,230 And let's say a message is gonna be a hello. 64 00:04:18,730 --> 00:04:25,180 And whenever as always you are in doubt just head over to a right and try to in fact console log what 65 00:04:25,180 --> 00:04:30,670 you're gonna have as a rest because maybe the first time when you see this type of syntax you're like 66 00:04:31,000 --> 00:04:36,060 OK what is happening so let's go with console lan let's console out the rest. 67 00:04:36,060 --> 00:04:39,580 And now in this case of course we're gonna have to navigate to our checkout bridge. 68 00:04:39,670 --> 00:04:44,890 So either you can log in or in my case I'm just going to use the URL again where I must say check out 69 00:04:45,280 --> 00:04:51,340 and if we're going to head over to our dev tools and console we're gonna see a object on what is the 70 00:04:51,340 --> 00:04:53,290 object within the object. 71 00:04:53,440 --> 00:04:54,910 These are the properties. 72 00:04:54,910 --> 00:05:01,260 So essentially what is happening we are collecting whatever parameters are being now the one that we're 73 00:05:01,260 --> 00:05:06,930 really looking for is this parsimonious sports because this is going to direct our user to a proper 74 00:05:06,930 --> 00:05:07,620 page. 75 00:05:07,620 --> 00:05:12,180 But just because I wanted to show you what kind of values you're getting you know it is that each and 76 00:05:12,180 --> 00:05:18,270 every prop that I'm adding to my profile is gonna be available within my arrest. 77 00:05:18,300 --> 00:05:22,740 So that's the reason why we just collect the rest of them instead of writing them one by one we just 78 00:05:22,750 --> 00:05:27,540 say dot dot dot and then just collect the rest of the parameters. 79 00:05:27,540 --> 00:05:33,000 Or in our case of course that is the props and have access them in one object. 80 00:05:33,030 --> 00:05:33,270 All right. 81 00:05:33,510 --> 00:05:35,070 So what are we doing next. 82 00:05:35,070 --> 00:05:42,060 Well we're going to first access the user so let's say cost user of course that is coming from. 83 00:05:42,270 --> 00:05:47,620 React then use context and then we're using the user context. 84 00:05:47,640 --> 00:05:49,510 So now we have access to the user. 85 00:05:49,710 --> 00:05:51,640 And then we're going to return a route. 86 00:05:51,990 --> 00:05:54,680 So we always always are going to turn this route. 87 00:05:54,960 --> 00:05:58,290 We're going to go with a route that has of course our component. 88 00:05:58,290 --> 00:06:00,300 Then we're going to remove the text. 89 00:06:00,300 --> 00:06:02,530 We don't need this particular dummy text. 90 00:06:02,790 --> 00:06:09,570 And then as far as the route first of all I would want to add my props on how I can access my props. 91 00:06:09,570 --> 00:06:13,170 Well you're going to remember we had dot dot dot and then we had the rest. 92 00:06:13,500 --> 00:06:19,650 So this is very similar to what we did previously remember when we were working with the product when 93 00:06:19,650 --> 00:06:26,430 we had the item we were iterating over the items and I just spread out all the properties that I had. 94 00:06:26,430 --> 00:06:26,730 Correct. 95 00:06:27,120 --> 00:06:32,460 So whatever properties I had within that item they were added as a prop. 96 00:06:32,460 --> 00:06:37,260 So that way within the product I could just access them one by one whether that was the image whether 97 00:06:37,260 --> 00:06:43,770 that was title idea in price and this works exactly the same where I'm just collecting whatever props 98 00:06:43,860 --> 00:06:46,180 have been added to my private world. 99 00:06:46,230 --> 00:06:50,760 And then when I render my world component well just add them. 100 00:06:50,760 --> 00:06:56,340 So essentially I just passed them from my private road to a route component and that's it. 101 00:06:56,340 --> 00:07:02,790 And then for the road component we're gonna use a render prop when I say render and then it is going 102 00:07:02,790 --> 00:07:04,000 to be a function. 103 00:07:04,130 --> 00:07:09,840 So we're gonna pass it here as a function by the way let me close the sidebar and then within the function 104 00:07:10,170 --> 00:07:11,280 we're gonna return. 105 00:07:11,280 --> 00:07:17,250 So from the function we're going to turn and we're going to turn either the children so the children 106 00:07:17,250 --> 00:07:24,310 that are within the private route which is the checkout page or we're gonna return a redirect. 107 00:07:24,330 --> 00:07:27,270 So first we're gonna check the user. 108 00:07:27,270 --> 00:07:33,960 We're gonna say user token we're gonna set up our ternary operator if the user token of course exists 109 00:07:34,410 --> 00:07:39,720 then we're gonna go with children then we're going to render the children if the user token does not 110 00:07:39,720 --> 00:07:43,070 exist if it is equal to no then of course it is false. 111 00:07:43,080 --> 00:07:50,370 So now we can use a redirect can have a redirect then let's close out our component and then for redirect 112 00:07:50,370 --> 00:07:56,040 we just need to say where we would want to redirect our user so in my case I'm going to go for logging 113 00:07:56,220 --> 00:08:02,310 of course you can point to any page you'd want we're gonna save it and now what happens the moment we 114 00:08:02,310 --> 00:08:02,900 refresh. 115 00:08:02,970 --> 00:08:07,100 Notice how we head over to a logging bridge what is the reason. 116 00:08:07,110 --> 00:08:10,170 Because we have restricted correctly the access. 117 00:08:10,170 --> 00:08:17,750 So even if I'm trying to access the component or I guess in our case a page using the URL while we cannot 118 00:08:17,760 --> 00:08:23,760 do that anymore because we set up a wrapper and again probably the most confusing part is this one where 119 00:08:23,760 --> 00:08:28,520 essentially we're just gathering rest of the props and we're just setting up the road. 120 00:08:28,770 --> 00:08:34,470 And then within the rules there is a render problem and then within that render Pop we just pass a function 121 00:08:34,920 --> 00:08:38,980 and whatever we return from that function this is what we're going to render. 122 00:08:39,090 --> 00:08:44,640 And then of course within the return we set up our ternary operator where we just check has the user 123 00:08:44,640 --> 00:08:51,030 logged in if he or she has and of course just rendered the children and as always children could be 124 00:08:51,030 --> 00:08:51,730 anything. 125 00:08:51,840 --> 00:08:57,600 In our case it is check our page but you can set up the same functionality for any route you'd want. 126 00:08:57,600 --> 00:09:04,350 Or if the user hasn't logged in then of course we're going to render the redirect component that just 127 00:09:04,350 --> 00:09:05,730 points to some other page.