1 00:00:00,600 --> 00:00:06,930 Once our alert component is complete next we're going to start changing our front end application depending 2 00:00:06,930 --> 00:00:12,960 on whether the user has logged in and we're gonna do that in three places where currently we have a 3 00:00:12,960 --> 00:00:18,150 log and link the moment when we're a log in there is gonna be a log uplink instead. 4 00:00:18,150 --> 00:00:24,000 So if we haven't logged in we're gonna have a log logging link if we have logged in and of course we're 5 00:00:24,000 --> 00:00:25,440 gonna have a log out. 6 00:00:25,710 --> 00:00:31,690 Also in an now bar we're going to see a link to a check out page and then within the cart we're gonna 7 00:00:31,710 --> 00:00:35,710 have a different value for our link instead of logging. 8 00:00:35,910 --> 00:00:37,430 We're going to have a check up. 9 00:00:37,500 --> 00:00:42,200 So let's head over back to log in I'm going to show you how our successful logging is gonna look like 10 00:00:43,470 --> 00:00:52,590 John of G.M. at com gonna have a password and then like I said once we log in three things happen instead 11 00:00:52,590 --> 00:00:55,490 of a log and we have a log out instead of an empty space. 12 00:00:55,500 --> 00:00:57,700 We have a link to a check out page. 13 00:00:57,810 --> 00:01:02,340 So now we can navigate there as well as in the card component. 14 00:01:02,340 --> 00:01:08,070 Our link directs us to a checkout and also it's something that you cannot see but essentially we're 15 00:01:08,070 --> 00:01:11,620 also going to restrict the access if we haven't logged in. 16 00:01:11,640 --> 00:01:17,040 So essentially even if the user tries to navigate using the URL you're not going to be able to access 17 00:01:17,040 --> 00:01:18,890 the checkout component. 18 00:01:18,930 --> 00:01:25,240 But again we're gonna get there so let's take step by step and I guess let's start working with a card 19 00:01:25,470 --> 00:01:27,870 because I think that's just gonna be an easiest one. 20 00:01:27,870 --> 00:01:32,240 So I'm going to open up the sidebar and let's grab our cart page. 21 00:01:32,280 --> 00:01:37,120 Now remember within the cart page I just had some hardcoded value for the user. 22 00:01:37,140 --> 00:01:40,330 However of course we have right now our user context. 23 00:01:40,650 --> 00:01:48,060 So I'm going to copy and paste and we're going to say here user context user context and you know what. 24 00:01:48,060 --> 00:01:51,710 With your permission I'm gonna do all three of them. 25 00:01:52,080 --> 00:01:57,760 And that way we can just log in one time and then we don't have to do it all the time. 26 00:01:58,140 --> 00:02:02,820 So hopefully you understand we're gonna set up all the functionality for all these three components 27 00:02:03,240 --> 00:02:07,200 whether that's not bar whether that's a log and link and then we're just gonna test it out one time 28 00:02:07,410 --> 00:02:11,350 otherwise again we're just going to have to keep on logging in and logging out. 29 00:02:11,400 --> 00:02:16,440 So we're going to do a user context it is coming from the user. 30 00:02:16,440 --> 00:02:20,630 And in this case user is not gonna be any more equal to False. 31 00:02:20,760 --> 00:02:27,390 We're going to grab the user using the user context and not just to speed it up get a copy and paste 32 00:02:27,810 --> 00:02:30,120 we're going to look for the user. 33 00:02:30,120 --> 00:02:34,280 So let's look for the user it is coming from the user context. 34 00:02:35,240 --> 00:02:40,490 So of course the values user context and then we're going to scroll down and remember where we had the 35 00:02:40,490 --> 00:02:43,040 link and we were checking for the user. 36 00:02:43,040 --> 00:02:48,240 We're not checking for user anymore we're checking for the token because the user object is going to 37 00:02:48,250 --> 00:02:50,970 exist but the token might be no. 38 00:02:51,050 --> 00:02:56,230 And that's the reason why we're gonna set up as a user token instead of a user. 39 00:02:56,330 --> 00:02:56,990 And you know what. 40 00:02:57,080 --> 00:03:02,870 I'm gonna head over to a bigger browser window and I'm gonna get rid of this network on the rise not 41 00:03:02,870 --> 00:03:08,390 only we're gonna check each and every time but if there's gonna be a slow connection it's gonna be even 42 00:03:08,390 --> 00:03:09,350 more annoying. 43 00:03:09,380 --> 00:03:13,990 So let me refresh just for sure we have it and now we have our car. 44 00:03:14,070 --> 00:03:14,870 All right. 45 00:03:15,050 --> 00:03:16,760 Now what else we would want to do. 46 00:03:16,790 --> 00:03:19,250 Well remember we had a header. 47 00:03:19,520 --> 00:03:26,690 So within the header we had enough bar so let's look for our header there is our header again same spiel 48 00:03:26,990 --> 00:03:30,440 we first would want of course grab our user context. 49 00:03:30,440 --> 00:03:38,720 So we're gonna head over up and then right after the car link we're gonna get our user context so user 50 00:03:39,380 --> 00:03:40,000 context. 51 00:03:40,040 --> 00:03:44,860 Again it's coming from and then we're looking for context and then we're looking for the user. 52 00:03:45,080 --> 00:03:51,680 And we didn't add that particular link but the way it's gonna look like is right after the product. 53 00:03:51,890 --> 00:03:56,600 I'm going to set up again my conditional where I'm going to be checking for the user but of course I 54 00:03:56,600 --> 00:03:59,090 kind of check the user because I haven't the structure. 55 00:03:59,270 --> 00:04:01,840 So I just skipped ahead a little bit. 56 00:04:02,030 --> 00:04:08,610 We're looking for the user and that is equal to a react use context. 57 00:04:08,870 --> 00:04:15,910 And then of course we're passing in the user context so user context or passing in. 58 00:04:16,100 --> 00:04:18,360 And then again we're checking for the same thing. 59 00:04:18,470 --> 00:04:26,110 If the user token is equal to some kind of value so it's not now then we're going to display our checkout. 60 00:04:26,270 --> 00:04:34,310 So we're gonna say all right if that value is true then we're gonna display a lie and lie and we're 61 00:04:34,310 --> 00:04:36,440 going to have our link. 62 00:04:36,440 --> 00:04:37,860 So we're going to our check out. 63 00:04:38,300 --> 00:04:40,990 But by the way again we're going to cover that in a sec. 64 00:04:41,000 --> 00:04:46,130 But just because we don't have the link doesn't mean that we cannot navigate to check our page even 65 00:04:46,130 --> 00:04:49,400 if we haven't logged in we haven't restricted the access. 66 00:04:49,410 --> 00:04:54,080 That is something that we're gonna do in a future videos but for now we're just going to restrict access 67 00:04:54,080 --> 00:04:54,890 in the not bar. 68 00:04:54,910 --> 00:04:59,750 So we're not gonna show the length and the value is going to be hey check out. 69 00:04:59,750 --> 00:05:05,570 And once I say I'm gonna get an error because it is not user context of course it is a bit confusing. 70 00:05:05,690 --> 00:05:07,720 It is a use context. 71 00:05:07,860 --> 00:05:09,000 Let's say it one more time. 72 00:05:09,020 --> 00:05:14,570 And of course since we have logged in because again if we're gonna check our local storage last time 73 00:05:14,570 --> 00:05:16,660 we checked in we haven't logged out yet. 74 00:05:16,790 --> 00:05:19,420 Then of course we are displaying our checkout page. 75 00:05:19,460 --> 00:05:23,040 So now we can navigate there and the same works for our car. 76 00:05:23,180 --> 00:05:28,640 Now we're displaying a link to a check out page not to a log in page. 77 00:05:28,640 --> 00:05:32,330 And lastly let's set up our log in link component. 78 00:05:32,420 --> 00:05:34,090 So first of all it's important. 79 00:05:34,310 --> 00:05:37,320 We're gonna head over let's say right after a user context. 80 00:05:37,480 --> 00:05:44,600 When I say import logging link that's gonna work pretty much the same as the cart link there's just 81 00:05:44,600 --> 00:05:50,780 gonna be there a bit more functionality from and then we're gonna navigate to components then within 82 00:05:50,780 --> 00:05:56,280 the components we're looking for the logging link in the same how we set up the cart link we're gonna 83 00:05:56,300 --> 00:06:03,200 copy and paste we're gonna call this a log in link log and link and now we're gonna head over to our 84 00:06:03,200 --> 00:06:09,110 logging link because currently we have a adding one and we're gonna do more functionality order. 85 00:06:09,110 --> 00:06:11,230 So let me open up the sidebar. 86 00:06:11,270 --> 00:06:15,460 I'm gonna look for our logging link component and we're going to start by imports. 87 00:06:15,470 --> 00:06:23,530 So first we're gonna get a link from react when our gnome link from react wrote her down. 88 00:06:23,840 --> 00:06:33,600 Then we're gonna get our user context import user context user context it is coming from our user. 89 00:06:33,690 --> 00:06:38,820 So let's head over the context then we have the user and we're going to copy and paste and we're gonna 90 00:06:38,910 --> 00:06:41,040 get also a court context. 91 00:06:41,040 --> 00:06:42,820 Why are we getting the court context. 92 00:06:43,350 --> 00:06:46,710 Well because once I log out I would want to clear the card. 93 00:06:46,740 --> 00:06:52,740 Remember when we were setting up the context for the card we had the function correct. 94 00:06:52,770 --> 00:06:58,020 We had a remove item increase item and then all the Winterbottom we had our clear card. 95 00:06:58,500 --> 00:07:01,440 So this is exactly what we're going to do right now. 96 00:07:01,440 --> 00:07:02,280 We're gonna save it. 97 00:07:02,520 --> 00:07:05,750 And within the log the link we're gonna use that particular function. 98 00:07:05,850 --> 00:07:08,580 And this is of course coming from the card. 99 00:07:08,640 --> 00:07:12,790 Let me close the sidebar and I'm done with my imports. 100 00:07:12,990 --> 00:07:19,920 Now within the logging link first I would like to access the values that I'm looking for from the art 101 00:07:19,920 --> 00:07:22,330 context as well as the user context. 102 00:07:22,380 --> 00:07:25,720 So let's go with concern from the user context. 103 00:07:25,750 --> 00:07:28,180 I'm looking for the user value. 104 00:07:28,350 --> 00:07:36,030 So depending on that value again I'm going to display particular things in my g six as well as user 105 00:07:36,510 --> 00:07:40,980 logout because I would want to set up my logger functionality here. 106 00:07:41,070 --> 00:07:47,190 We're going to look for react in this case I'm going to type it properly use context we're passing in 107 00:07:47,190 --> 00:07:52,860 the user context in this case we're going to copy and paste it is coming from the card context in this 108 00:07:52,860 --> 00:07:58,780 case then we're gonna head over and we're going to look for clear cut instead of user. 109 00:07:58,920 --> 00:08:05,640 So we're going to look for clear cut and now we can set up our J six as far as J six was get her of 110 00:08:05,640 --> 00:08:12,380 d having one first then we're going to have our if statement like so we're gonna have if and I'm going 111 00:08:12,380 --> 00:08:19,620 to check if user again token exists then I would want to do one thing and if it doesn't exist then I'm 112 00:08:19,620 --> 00:08:20,990 gonna do something else. 113 00:08:21,090 --> 00:08:26,610 So if the user does not exist it's just gonna be simply a link that we're turning so we're going to 114 00:08:26,730 --> 00:08:34,190 return a link to and this is gonna be to a log in page and then as a text we're going to return a log 115 00:08:34,190 --> 00:08:36,400 and that's all we have to do then. 116 00:08:36,450 --> 00:08:42,930 If the user does exist then of course we need to set up a log of functionality and we're going to do 117 00:08:42,930 --> 00:08:44,190 that by button. 118 00:08:44,190 --> 00:08:47,370 So there's gonna be a button then we're gonna have click. 119 00:08:47,370 --> 00:08:49,320 So we're gonna be listening for a click event. 120 00:08:49,320 --> 00:08:54,990 We're gonna pass in the anonymous function first and we're gonna call user logout. 121 00:08:54,990 --> 00:08:59,590 So we're gonna log out our user as well as we're going to clear the card. 122 00:09:00,000 --> 00:09:07,860 So clearly card both functions coming from the context and then we're gonna say logout button we're 123 00:09:07,860 --> 00:09:13,050 going to save it like so and then in this case I'm gonna have an error because I'm not returning it 124 00:09:13,050 --> 00:09:13,590 of course. 125 00:09:13,890 --> 00:09:18,110 So I forgot to have the return and now everything is gonna work out fine. 126 00:09:18,360 --> 00:09:21,100 And there's one thing missing that is the styling. 127 00:09:21,210 --> 00:09:22,890 So why don't we do this. 128 00:09:22,890 --> 00:09:32,800 Why don't we say Button class name and then we're gonna look for a log in B10 and once we set up our 129 00:09:32,800 --> 00:09:39,310 log and link component going to head over back to our header and we're just gonna remove our log and 130 00:09:39,310 --> 00:09:39,900 link. 131 00:09:40,150 --> 00:09:41,790 That's step number one. 132 00:09:41,790 --> 00:09:45,530 Gonna move our log and link above the card link. 133 00:09:45,530 --> 00:09:50,230 Let's say that and now let's try to log out as well as logging. 134 00:09:50,380 --> 00:09:56,930 Again we're going to head over to a bigger browser window to refresh since we have already logged in. 135 00:09:56,950 --> 00:10:00,150 Of course we have a logo then check it out once I click it. 136 00:10:00,250 --> 00:10:01,810 I'm gonna have my logging. 137 00:10:02,260 --> 00:10:03,720 So let's try to log in. 138 00:10:03,880 --> 00:10:12,430 I'm going to go with John and Jim I'll dot com turn whatever password and if we're successful then we're 139 00:10:12,430 --> 00:10:14,330 going to have our checkout link. 140 00:10:14,530 --> 00:10:20,110 We're going to have the logout link instead of a log in and then in the cart page we're going to see 141 00:10:20,110 --> 00:10:23,770 of course a link to your account page it's tried to submit. 142 00:10:23,770 --> 00:10:25,000 We are successful. 143 00:10:25,000 --> 00:10:26,080 We have a log. 144 00:10:26,090 --> 00:10:29,040 Then we are displaying the user name in our alert. 145 00:10:29,090 --> 00:10:31,160 Now of course we have a checkout page. 146 00:10:31,270 --> 00:10:35,260 We have a logout link as well as within the cart. 147 00:10:35,260 --> 00:10:38,430 Of course we're pointing to a checkout page. 148 00:10:38,500 --> 00:10:44,950 So if let's say you want to log out then I'm removing my items from the user and if I'm going to head 149 00:10:44,950 --> 00:10:52,660 over to inspect and see that in the application right now my cart is empty as well as there is no user 150 00:10:52,660 --> 00:10:54,520 key in my local storage.