1 00:00:00,300 --> 00:00:03,630 Nice work, our initial functionality works really, really well. 2 00:00:03,990 --> 00:00:10,500 We can register the user, we can set up everything in a state, but the problem is going to be that 3 00:00:10,710 --> 00:00:15,660 if the user refreshes the page, we won't persist those values. 4 00:00:16,140 --> 00:00:17,670 And why is that going to be the problem? 5 00:00:17,670 --> 00:00:22,440 Because eventually in a dashboard, we'll check for that user. 6 00:00:22,750 --> 00:00:28,230 And if the user does not exist well, then don't just log the person out. 7 00:00:29,490 --> 00:00:33,390 In order to fix that, we need to process this in local storage. 8 00:00:33,660 --> 00:00:35,580 So it may just showcase the problem first. 9 00:00:36,000 --> 00:00:42,720 So I'm going to go here with Susan Van and I will be equal to Susan at gmail.com. 10 00:00:43,500 --> 00:00:45,480 And then let's batten dummy values. 11 00:00:45,480 --> 00:00:46,650 Let's register. 12 00:00:47,070 --> 00:00:48,340 We are good to go. 13 00:00:48,370 --> 00:00:49,740 Notice we have everything. 14 00:00:49,980 --> 00:00:51,690 We're back in the dashboard page. 15 00:00:52,140 --> 00:00:57,930 But if I refresh more, do you know I don't have anything anymore here? 16 00:00:57,990 --> 00:00:58,710 User no. 17 00:00:58,950 --> 00:00:59,640 Token No. 18 00:00:59,910 --> 00:01:02,760 And the same goes for location now. 19 00:01:02,760 --> 00:01:09,690 In order to set everything up in the app, context address will create a function add user to local 20 00:01:09,690 --> 00:01:15,390 storage, which is going to be looking for three things Can we be looking for user token and location? 21 00:01:15,960 --> 00:01:17,460 Why am I asking for these three things? 22 00:01:17,460 --> 00:01:20,850 Because that's what I know I have in the response, correct? 23 00:01:21,270 --> 00:01:26,190 And then in order to add something to what was storage, we go with local storage, said Item. 24 00:01:26,190 --> 00:01:30,660 And then user is going to be the only one where we need to string a five because remember, we can only 25 00:01:30,660 --> 00:01:35,340 store strings and we're getting back the object now when it comes to token location. 26 00:01:35,610 --> 00:01:38,310 Well, both of them are pretty much strengths. 27 00:01:38,310 --> 00:01:41,100 So we can right away go to the item and then token. 28 00:01:41,520 --> 00:01:46,950 Now I'll right away also set up remove from local storage because as you can see, functionality is 29 00:01:46,950 --> 00:01:48,900 pretty much the same on this case. 30 00:01:48,900 --> 00:01:53,580 We are removing that and we'll use this one more on, for example, we logout. 31 00:01:54,460 --> 00:01:56,260 And not in registered user. 32 00:01:56,620 --> 00:02:00,250 Right after we successfully get the response back. 33 00:02:00,430 --> 00:02:04,600 So in the tribe, look, I want to invoke my function again. 34 00:02:04,600 --> 00:02:11,860 I have the object model for three things over here and at the very, very end, we also want to pull 35 00:02:11,860 --> 00:02:14,260 them out at the initial setup. 36 00:02:14,920 --> 00:02:21,070 So once we start up the application, once we refresh the page, I want to go to local storage and look 37 00:02:21,070 --> 00:02:23,140 for all of these three things. 38 00:02:23,410 --> 00:02:25,760 I'm an initial state now. 39 00:02:25,760 --> 00:02:31,900 I'll check for user and if the user exists over here, then I'll have to pass it. 40 00:02:32,230 --> 00:02:36,370 Because remember again, we start as a string, but we want to use it as an object. 41 00:02:36,640 --> 00:02:38,440 If it doesn't exist, we go with no. 42 00:02:38,830 --> 00:02:44,020 And here token is equal to token and then user location or empty string. 43 00:02:44,350 --> 00:02:44,740 So. 44 00:02:45,650 --> 00:02:52,690 Let's start setting everything up where I'm going to go to map context online right after my register 45 00:02:52,700 --> 00:02:54,680 or not to do it above. 46 00:02:55,040 --> 00:03:04,670 So here and we're going to go with Konst and I'm looking for that ad user to local online storage. 47 00:03:05,150 --> 00:03:07,430 Now, or pass in the object here. 48 00:03:08,030 --> 00:03:14,450 So let's say here, user token and then location, and I'll try not to repeat myself how I know that 49 00:03:14,450 --> 00:03:16,130 I'll have all of those three values. 50 00:03:16,520 --> 00:03:22,480 And then let's just say with a local storage and then set item online user. 51 00:03:22,670 --> 00:03:28,220 And like I just said, here's an object, so we need to go with JSON string or for a minimal processing 52 00:03:28,220 --> 00:03:28,760 the user. 53 00:03:29,180 --> 00:03:30,470 And then I have two more. 54 00:03:30,710 --> 00:03:33,530 I have local storage, then set item. 55 00:03:33,800 --> 00:03:39,830 And in this case, I'm looking for token token over here and I'm going to name my value token. 56 00:03:40,100 --> 00:03:43,880 And as far as the actual value that will be equal to the token. 57 00:03:44,150 --> 00:03:45,190 Let's copy and paste. 58 00:03:45,200 --> 00:03:53,720 And here we're looking for location and the item name will be also location value in order to speed 59 00:03:53,720 --> 00:03:54,300 everything up. 60 00:03:54,320 --> 00:04:01,040 We're going to go with Konst and then a remove user from the local storage and in the function body. 61 00:04:01,400 --> 00:04:07,550 We want to go here with local storage and then we go with a remove item and then we just want to pass 62 00:04:07,580 --> 00:04:08,300 all three of them. 63 00:04:08,540 --> 00:04:11,460 So token user and location. 64 00:04:11,480 --> 00:04:13,070 So let's set them up one by one. 65 00:04:13,550 --> 00:04:19,370 This is going to be equal to user and nine and we're going to have the location as well when we want 66 00:04:19,370 --> 00:04:20,329 to use this function. 67 00:04:20,579 --> 00:04:27,650 The first add user to the local storage and where we have the registered user right after we dispatch, 68 00:04:27,950 --> 00:04:29,330 we also want to invoke it. 69 00:04:29,690 --> 00:04:29,960 Right. 70 00:04:30,260 --> 00:04:36,440 So let's say here, add users to the local storage and let's passing the user your token as well as 71 00:04:36,440 --> 00:04:37,190 the location. 72 00:04:37,640 --> 00:04:45,080 And then lastly, since I want to set up my user the moment application loads, let's scroll up. 73 00:04:45,450 --> 00:04:50,030 Let's grab all of those things from the local storage on initial load. 74 00:04:50,950 --> 00:04:56,710 And I'm going to do that right above the initial state, just so it's clear when is that happening? 75 00:04:56,740 --> 00:05:03,520 And here I'm going to go with token and then that one is equal to the local storage and not get item. 76 00:05:03,790 --> 00:05:06,630 And in here, I want to pass in the token. 77 00:05:06,640 --> 00:05:10,270 So copy and paste and here we just need to change these rules around. 78 00:05:10,270 --> 00:05:10,660 That's it. 79 00:05:11,050 --> 00:05:12,490 So I'll have two of them. 80 00:05:12,500 --> 00:05:18,070 I'll say I'm looking for user and the last one is going to be here, the location. 81 00:05:18,280 --> 00:05:20,080 So let's do the same thing. 82 00:05:20,440 --> 00:05:22,000 Let's set up a location. 83 00:05:22,330 --> 00:05:24,340 And now in the initial state. 84 00:05:24,490 --> 00:05:25,360 What do we want to do? 85 00:05:25,600 --> 00:05:29,260 Well, I want to check for my user property and then set up deterring operator. 86 00:05:29,620 --> 00:05:35,590 So if the user exists, then let's go with pass and then pass the user, so we'll get back our object. 87 00:05:35,740 --> 00:05:39,640 If not, it's going to be equal to no more than token will be equal to a token. 88 00:05:40,000 --> 00:05:45,370 And then when it comes to these to the user location of the job location, I want to check for my location 89 00:05:45,700 --> 00:05:48,040 and set it equal to an empty string. 90 00:05:48,400 --> 00:05:53,350 If there is no value in the local storage, but you know what I think is going to make a little bit 91 00:05:53,350 --> 00:05:57,160 more sense if I go use their location, at least to me. 92 00:05:57,520 --> 00:06:04,870 So I will say here user location, and if it doesn't exist, then we'll go with empty string. 93 00:06:05,410 --> 00:06:06,460 So this should do it. 94 00:06:06,610 --> 00:06:07,870 So let's quickly test that out. 95 00:06:07,870 --> 00:06:09,790 I'm going to go to the big browser window. 96 00:06:10,240 --> 00:06:15,940 I'll make sure that there's nothing in the local storage because I mean, it might save it to right 97 00:06:15,940 --> 00:06:19,180 away online and let me navigate to a register. 98 00:06:19,570 --> 00:06:20,410 I want to register. 99 00:06:20,860 --> 00:06:22,090 Let's go with Anna. 100 00:06:23,040 --> 00:06:25,920 So, Anna, at Gmail dot com. 101 00:06:26,800 --> 00:06:31,330 I'm learning here on how to set up a password and if everything is correct. 102 00:06:32,430 --> 00:06:38,100 Not only I have the honor in my components, but I also have in local storage. 103 00:06:38,520 --> 00:06:45,210 And what that means is that when I refresh, I also should see that in my state and hours over here, 104 00:06:45,450 --> 00:06:47,280 I still have all the values. 105 00:06:47,670 --> 00:06:52,710 And with this in place now, I can focus on the log in user functionality.