1 00:00:00,810 --> 00:00:02,640 -: Our application is looking pretty good. 2 00:00:02,640 --> 00:00:05,190 The sign in form is pretty darn robust 3 00:00:05,190 --> 00:00:07,920 but we still don't have some pretty hefty amounts 4 00:00:07,920 --> 00:00:10,020 of our application put together just yet. 5 00:00:10,020 --> 00:00:12,330 For example, when a user signs in 6 00:00:12,330 --> 00:00:15,420 we're not updating the header to no longer say "Sign in." 7 00:00:15,420 --> 00:00:16,350 And as a matter of fact 8 00:00:16,350 --> 00:00:18,480 the sign in text right here isn't even clickable. 9 00:00:18,480 --> 00:00:20,250 It's not even a link right now. 10 00:00:20,250 --> 00:00:22,440 So I think a really good place to brush up on 11 00:00:22,440 --> 00:00:24,450 is to gonna be improve our header 12 00:00:24,450 --> 00:00:26,940 and make sure that whatever links that's displaying 13 00:00:26,940 --> 00:00:28,620 at any given time actually work, 14 00:00:28,620 --> 00:00:31,770 number one and number two, makes sense. 15 00:00:31,770 --> 00:00:34,110 The links that we show up here on top. 16 00:00:34,110 --> 00:00:36,990 So let's work on our header component inside this section. 17 00:00:36,990 --> 00:00:39,900 If you think back to the mocks that we've been working on 18 00:00:39,900 --> 00:00:41,850 by default we wanna show a link back 19 00:00:41,850 --> 00:00:44,100 to the homepage or the root route. 20 00:00:44,100 --> 00:00:45,150 And then depending on whether 21 00:00:45,150 --> 00:00:47,340 or not the user is currently authenticated, 22 00:00:47,340 --> 00:00:51,060 we wanna show a link to sign in or sign up. 23 00:00:51,060 --> 00:00:52,440 And if they are authenticated 24 00:00:52,440 --> 00:00:54,663 we wanna show a button to just sign out. 25 00:00:55,620 --> 00:00:57,270 So pretty straightforward header, 26 00:00:59,160 --> 00:01:00,840 perhaps not putting it together 27 00:01:00,840 --> 00:01:01,950 is gonna be very straightforward 28 00:01:01,950 --> 00:01:03,570 but I can definitely say that it behaves 29 00:01:03,570 --> 00:01:07,470 as many other headers that you're probably used to working. 30 00:01:07,470 --> 00:01:08,850 So let's give this a shot. 31 00:01:08,850 --> 00:01:10,890 I'm gonna flip back over to my code editor 32 00:01:10,890 --> 00:01:13,263 and I'm inside of my header component here. 33 00:01:14,100 --> 00:01:16,260 I really encourage you at this point in time 34 00:01:16,260 --> 00:01:19,110 maybe pause the video for a little bit. 35 00:01:19,110 --> 00:01:21,120 Make a backup of this file right here 36 00:01:21,120 --> 00:01:23,400 and give a shot at putting this header together. 37 00:01:23,400 --> 00:01:27,090 We've now got our authentication state put together 38 00:01:27,090 --> 00:01:28,473 to a pretty good degree. 39 00:01:29,880 --> 00:01:31,350 We can figure out whether or not 40 00:01:31,350 --> 00:01:33,060 our user is currently authenticated 41 00:01:33,060 --> 00:01:37,080 by just looking at this authenticated true flag right here. 42 00:01:37,080 --> 00:01:40,023 So I encourage you to give a shot at say, 43 00:01:40,980 --> 00:01:42,150 putting together the header, 44 00:01:42,150 --> 00:01:45,000 making sure that if the user is authenticated, 45 00:01:45,000 --> 00:01:47,670 show the correct text and if they're not authenticated 46 00:01:47,670 --> 00:01:49,530 show the correct text in that case as well. 47 00:01:49,530 --> 00:01:52,050 So if you wanna give it a shot, go for it. 48 00:01:52,050 --> 00:01:53,430 Otherwise we're gonna get started 49 00:01:53,430 --> 00:01:55,143 on the header component right now. 50 00:01:57,330 --> 00:01:59,010 Okay, so inside the header 51 00:01:59,010 --> 00:02:02,010 we definitely have one big consideration here. 52 00:02:02,010 --> 00:02:05,520 We want to render some different jsx to the page 53 00:02:05,520 --> 00:02:07,770 or HTML to the page depending on whether or not 54 00:02:07,770 --> 00:02:10,199 the user is currently authenticated. 55 00:02:10,199 --> 00:02:12,240 So a great place to start on the header 56 00:02:12,240 --> 00:02:14,130 is to make sure that the header is aware 57 00:02:14,130 --> 00:02:16,320 of whether or not the user is authenticated. 58 00:02:16,320 --> 00:02:19,080 So that means we're gonna need to make it into a container 59 00:02:19,080 --> 00:02:21,903 and just hand it that authentication piece of state. 60 00:02:22,800 --> 00:02:25,500 To turn header into a container, we'll first 61 00:02:25,500 --> 00:02:30,500 import the connect helper from react-redux. 62 00:02:30,720 --> 00:02:34,260 And then I'm also gonna import the link tag right now 63 00:02:34,260 --> 00:02:36,570 because I just guarantee you we're gonna need 64 00:02:36,570 --> 00:02:37,923 to use it very shortly. 65 00:02:38,760 --> 00:02:41,250 Remember, just about everything up inside the header 66 00:02:41,250 --> 00:02:43,440 is going to be a navigable link 67 00:02:43,440 --> 00:02:45,510 so, something that a user can click on 68 00:02:45,510 --> 00:02:47,490 and change the view that they're looking at. 69 00:02:47,490 --> 00:02:48,750 Really makes sense that we're probably 70 00:02:48,750 --> 00:02:50,750 gonna need the link tag up here as well. 71 00:02:52,500 --> 00:02:55,000 So we'll make immediate use of the connect helper. 72 00:02:56,730 --> 00:02:59,070 First we'll set up the connect statement. 73 00:02:59,070 --> 00:03:02,760 So one set of parens and the second set of parens. 74 00:03:02,760 --> 00:03:06,783 And then I'm gonna define my map state to props. 75 00:03:08,460 --> 00:03:11,770 We'll take our state object and I'm gonna return 76 00:03:13,410 --> 00:03:16,230 simply whether or not the user is authenticated. 77 00:03:16,230 --> 00:03:20,700 So state dot auth dot authenticated. 78 00:03:20,700 --> 00:03:22,650 So now we've got a very simple flag 79 00:03:22,650 --> 00:03:24,330 inside of our component that says, Hey 80 00:03:24,330 --> 00:03:26,640 should I show a link that says sign in, 81 00:03:26,640 --> 00:03:28,863 or should I show a link that says sign out? 82 00:03:33,450 --> 00:03:35,760 So let's do our links one at a time. 83 00:03:35,760 --> 00:03:37,350 The very first thing that we want to have 84 00:03:37,350 --> 00:03:39,300 on our nav bar that it should be visible 85 00:03:39,300 --> 00:03:43,170 at all times, should be a link back to the root route. 86 00:03:43,170 --> 00:03:48,170 So I'm gonna add a link tag in here back to the root route 87 00:03:49,710 --> 00:03:52,860 and I'm gonna give it a class name of navbar brand. 88 00:03:52,860 --> 00:03:56,850 And again, this is just some bootstrap magic 89 00:03:56,850 --> 00:03:57,930 for the class names in here. 90 00:03:57,930 --> 00:03:59,520 Just some stuff to make sure 91 00:03:59,520 --> 00:04:01,470 that everything looks pretty good. 92 00:04:01,470 --> 00:04:05,670 And I'm gonna give it a brand text of redux auth. 93 00:04:05,670 --> 00:04:07,560 I'll say that'll be just a very simple name 94 00:04:07,560 --> 00:04:08,733 of our application. 95 00:04:10,140 --> 00:04:13,500 All right, now onto the actual links themselves. 96 00:04:13,500 --> 00:04:16,529 So again, we wanna make sure that if a user is 97 00:04:16,529 --> 00:04:19,529 authenticated, they should see a button that allows them to 98 00:04:19,529 --> 00:04:21,153 sign in or sign up. 99 00:04:22,710 --> 00:04:23,940 Excuse me, reverse there. 100 00:04:23,940 --> 00:04:26,220 If they're not authenticated, they should see a button 101 00:04:26,220 --> 00:04:27,990 that says sign in or sign up. 102 00:04:27,990 --> 00:04:30,360 If they are authenticated, they should have the ability 103 00:04:30,360 --> 00:04:31,860 to sign out. 104 00:04:31,860 --> 00:04:35,550 Now, we haven't implemented the routes for sign out or sign 105 00:04:35,550 --> 00:04:38,160 up just yet, but we can reasonably put together 106 00:04:38,160 --> 00:04:40,560 some links in here so we don't have to come back later on 107 00:04:40,560 --> 00:04:41,790 and put it all together. 108 00:04:41,790 --> 00:04:44,790 Again, putting together authentication is really a pain 109 00:04:44,790 --> 00:04:46,470 in the rear when you really think about it. 110 00:04:46,470 --> 00:04:48,900 Have to do development on a lot of different fronts 111 00:04:48,900 --> 00:04:51,480 and kind of very parallel nature. 112 00:04:51,480 --> 00:04:55,680 There's not always a very distinct or serial course 113 00:04:55,680 --> 00:04:56,763 for development here. 114 00:04:58,290 --> 00:05:01,470 So since we have some logic to decide what we want to 115 00:05:01,470 --> 00:05:04,140 render here, I'm gonna create a helper method 116 00:05:04,140 --> 00:05:09,140 called render links. 117 00:05:11,220 --> 00:05:13,410 And then inside of render links, I'm gonna decide what 118 00:05:13,410 --> 00:05:14,973 links I wanna show to the user. 119 00:05:16,200 --> 00:05:20,160 So instead of showing the LI by default, I'm going to 120 00:05:20,160 --> 00:05:24,180 cut this and paste it up here and I'm gonna make use 121 00:05:24,180 --> 00:05:25,260 of it very shortly. 122 00:05:25,260 --> 00:05:27,220 But for right now, I just want to 123 00:05:28,770 --> 00:05:32,257 call this dot render links. 124 00:05:38,220 --> 00:05:43,220 Okay, so if our user is authenticated 125 00:05:44,790 --> 00:05:47,190 this is gonna be the case in which we want to 126 00:05:47,190 --> 00:05:51,063 show a link to logout, excuse me, sign out. 127 00:05:54,690 --> 00:05:57,880 Otherwise, I wanna show a link to my users that allow them 128 00:05:59,310 --> 00:06:01,920 to sign in or sign up. 129 00:06:01,920 --> 00:06:03,543 So two different cases here. 130 00:06:04,680 --> 00:06:07,713 I'm gonna move this into the sign in block first. 131 00:06:08,820 --> 00:06:10,920 And I think probably the best way to take care 132 00:06:10,920 --> 00:06:14,820 of this is going to be to, let's do the easy case first 133 00:06:14,820 --> 00:06:17,430 which is just to show a sign out link. 134 00:06:17,430 --> 00:06:22,430 So I'm gonna add an LI with a class name of nav-item. 135 00:06:30,570 --> 00:06:31,770 I'm gonna give it a key. 136 00:06:32,790 --> 00:06:34,260 Excuse me, we don't need a key just yet. 137 00:06:34,260 --> 00:06:35,370 Let's leave off the key. 138 00:06:35,370 --> 00:06:36,480 There is a reason to the key. 139 00:06:36,480 --> 00:06:38,430 I'll come back to it though. 140 00:06:38,430 --> 00:06:41,040 So then inside of this LI, we'll show a link 141 00:06:41,040 --> 00:06:44,703 that has a class name of nav-link. 142 00:06:47,430 --> 00:06:49,410 And if you think about what the purpose of this sign 143 00:06:49,410 --> 00:06:51,240 out thing is here, it makes a lot of sense to 144 00:06:51,240 --> 00:06:54,330 give it the text Sign Out. 145 00:06:54,330 --> 00:06:56,400 And whenever someone clicks on it 146 00:06:56,400 --> 00:07:01,400 we want them to go to the route, probably Sign Out. 147 00:07:01,410 --> 00:07:04,800 Again, we haven't created the sign out route just yet, 148 00:07:04,800 --> 00:07:06,420 but we will go back to our router 149 00:07:06,420 --> 00:07:08,043 and add that functionality in. 150 00:07:09,000 --> 00:07:10,920 So now we need to take care of the case where we want to 151 00:07:10,920 --> 00:07:12,870 have a link to sign in or sign up. 152 00:07:12,870 --> 00:07:15,663 It's gonna look very similar to our existing link tag. 153 00:07:17,580 --> 00:07:20,370 One thing that I did neglect was to put a return tag 154 00:07:20,370 --> 00:07:21,660 on this existing LI. 155 00:07:21,660 --> 00:07:23,133 So there's our return tag. 156 00:07:24,900 --> 00:07:27,180 And I'm gonna put in the return tag here. 157 00:07:27,180 --> 00:07:29,190 Now I'm gonna do something a little bit strange here. 158 00:07:29,190 --> 00:07:30,930 It's gonna look just a little bit strange. 159 00:07:30,930 --> 00:07:35,190 You'll notice that we are returning some LI here 160 00:07:35,190 --> 00:07:37,470 and they're gonna be placed inside of a UL. 161 00:07:37,470 --> 00:07:41,550 For some real semantic html that actually makes sense 162 00:07:41,550 --> 00:07:45,000 I don't want to have kind of a div-tag here or something 163 00:07:45,000 --> 00:07:48,000 like that to contain the two LI's that I need to make 164 00:07:48,000 --> 00:07:52,350 to contain the sign in and sign up links. 165 00:07:52,350 --> 00:07:54,780 So we're gonna make use of a little feature inside 166 00:07:54,780 --> 00:07:57,180 of React where we are allowed to return 167 00:07:57,180 --> 00:07:59,160 arrays of components. 168 00:07:59,160 --> 00:08:02,193 So we can return two separate LIs. 169 00:08:03,300 --> 00:08:04,710 And it's basically just gonna say, "Hey 170 00:08:04,710 --> 00:08:06,120 I wanna render both of these components. 171 00:08:06,120 --> 00:08:08,400 I wanna render them just right next to each other 172 00:08:08,400 --> 00:08:10,338 but I don't want to have to necessarily have 173 00:08:10,338 --> 00:08:15,338 some type of wrapping element between the LI and the UL." 174 00:08:16,110 --> 00:08:17,580 So the first link that I'm gonna put 175 00:08:17,580 --> 00:08:19,590 in here is gonna be the sign in link. 176 00:08:19,590 --> 00:08:21,440 And then I'm gonna place another link 177 00:08:26,940 --> 00:08:31,083 that will be used for sign up. 178 00:08:33,270 --> 00:08:35,703 Now all we have to do is place our link tags. 179 00:08:40,080 --> 00:08:41,673 Add our class names. 180 00:08:46,260 --> 00:08:50,043 And on sign in, I definitely want to send a user to sign in. 181 00:08:51,390 --> 00:08:53,760 Oh, it looks like I missed a quote there. 182 00:08:53,760 --> 00:08:55,800 And on the signup, again, even 183 00:08:55,800 --> 00:09:00,180 though we don't have the route defined 184 00:09:00,180 --> 00:09:02,103 for it just yet, we will very shortly. 185 00:09:03,870 --> 00:09:07,500 And for here, we'll make this a nav-link 186 00:09:07,500 --> 00:09:09,783 with a route to sign up. 187 00:09:11,400 --> 00:09:13,470 All right, so this is looking pretty good. 188 00:09:13,470 --> 00:09:15,270 If our user is authenticated 189 00:09:15,270 --> 00:09:18,300 we're gonna show a link that allows them to sign out. 190 00:09:18,300 --> 00:09:20,310 Otherwise they're gonna have the ability to 191 00:09:20,310 --> 00:09:22,380 sign in or sign up. 192 00:09:22,380 --> 00:09:24,540 Let's give this a shot inside the browser. 193 00:09:24,540 --> 00:09:25,893 I'm gonna refresh. 194 00:09:27,900 --> 00:09:32,070 We do have an immediate error about a key prop. 195 00:09:32,070 --> 00:09:33,600 So that is one catch 196 00:09:33,600 --> 00:09:36,690 on our LIs here where we're returning an array. 197 00:09:36,690 --> 00:09:38,430 React is gonna think that this is a list 198 00:09:38,430 --> 00:09:41,250 of components and it's gonna want us to add a key to it. 199 00:09:41,250 --> 00:09:43,140 And so we can definitely put a key in here. 200 00:09:43,140 --> 00:09:46,740 Since this is a static or very hard coded list, it 201 00:09:46,740 --> 00:09:50,250 is totally appropriate to just use say, a plain integer here 202 00:09:50,250 --> 00:09:51,870 since we're never gonna be swapping data 203 00:09:51,870 --> 00:09:53,570 or anything like that out of here. 204 00:09:54,600 --> 00:09:55,433 So now we'll refresh. 205 00:09:55,433 --> 00:09:56,403 Okay, looks good. 206 00:09:57,420 --> 00:10:00,060 So now we are currently not signed in. 207 00:10:00,060 --> 00:10:02,490 So I see the sign in and sign up links. 208 00:10:02,490 --> 00:10:07,490 Let me go ahead and put in a test, 1, 2, 3, and password. 209 00:10:10,050 --> 00:10:11,310 I can click the link. 210 00:10:11,310 --> 00:10:12,900 And it looks like we're getting an error here 211 00:10:12,900 --> 00:10:16,200 about still, you know hey feature didn't match any routes, 212 00:10:16,200 --> 00:10:18,930 but it didn't look like our link tags at the top 213 00:10:18,930 --> 00:10:20,370 updated just yet. 214 00:10:20,370 --> 00:10:23,070 So we've done a lot of stuff, covered, a lot of typing, 215 00:10:23,070 --> 00:10:24,600 a lot of code inside this section. 216 00:10:24,600 --> 00:10:25,433 Let's do a little bit 217 00:10:25,433 --> 00:10:27,630 of debugging on this inside the next section. 218 00:10:27,630 --> 00:10:28,580 I'll see you there.