1 00:00:00,180 --> 00:00:00,520 All right. 2 00:00:00,540 --> 00:00:07,140 And before we switch over to a server and start setting it up everything in there, I want to also add 3 00:00:07,440 --> 00:00:09,300 clear alert functionality. 4 00:00:10,410 --> 00:00:17,040 And technically, this is optional, but it is my preference that we also hide alert in certain time 5 00:00:17,610 --> 00:00:23,160 because at the moment our functionality is falling, where if we try to submit and one of the values 6 00:00:23,160 --> 00:00:30,000 is empty, then basically we'll get the alert and it will stay here unless we navigate away from the 7 00:00:30,000 --> 00:00:37,350 page or unless we set up some functionality once we successfully log in or is there, for example, 8 00:00:37,620 --> 00:00:44,160 eventually we'll display there, created user successfully or log in successful and stuff along those 9 00:00:44,160 --> 00:00:44,460 lines. 10 00:00:44,670 --> 00:00:49,290 So technically it is optional, but it's definitely my preference to also clear the alert. 11 00:00:50,100 --> 00:00:51,480 I will do that first. 12 00:00:51,480 --> 00:00:56,850 We'll start working in the actions, so we'll create our clear alert action. 13 00:00:57,480 --> 00:00:59,910 Then we will set up the imports again. 14 00:01:00,390 --> 00:01:06,290 This is pretty much given every time you set up an action, you need to set up those imports in the 15 00:01:06,300 --> 00:01:08,490 reducer as well as context. 16 00:01:09,000 --> 00:01:11,100 And then when it comes to a reducer. 17 00:01:12,350 --> 00:01:14,810 I want to set up clear alert one. 18 00:01:15,230 --> 00:01:22,190 So action type is equal to clearer alert online as far as logic stores are in the state, and I want 19 00:01:22,190 --> 00:01:29,060 to set the alert back to false and then both the alert type as well as the alert text. 20 00:01:29,600 --> 00:01:36,320 I want to set it empty, so I want them to be empty and light when it comes to context. 21 00:01:36,530 --> 00:01:40,070 Remember, we have display alert function. 22 00:01:40,400 --> 00:01:40,790 Correct. 23 00:01:41,270 --> 00:01:42,680 And what are we doing over there? 24 00:01:42,980 --> 00:01:52,280 Well, we're dispatching display alert for what we can also do is set up clear alert function and dispatch 25 00:01:52,280 --> 00:01:52,940 clear alert. 26 00:01:53,210 --> 00:01:57,200 But the difference is going to be that we will do that in three seconds. 27 00:01:58,210 --> 00:02:01,040 So we will set up the timeout timeout. 28 00:02:01,070 --> 00:02:06,580 In my case, is going to be in three seconds, but of course you can set up whatever time you want and 29 00:02:06,580 --> 00:02:08,020 learn in those 30 seconds. 30 00:02:08,470 --> 00:02:15,940 We will dispatch clear alert and back in display alert right after I dispatch display alert. 31 00:02:16,390 --> 00:02:18,610 I'm actually going to call myself clear. 32 00:02:20,420 --> 00:02:26,210 As a result, what is going to happen every time we display an alert in three seconds, we hide it. 33 00:02:26,780 --> 00:02:33,110 So let's start working on that one, going to copy and paste and as a sign of the rest of the actions 34 00:02:33,110 --> 00:02:38,320 that are going to be exactly the same as far as the name of the variable and the value, I just want 35 00:02:38,690 --> 00:02:39,140 the different. 36 00:02:39,140 --> 00:02:40,040 We're the first one. 37 00:02:40,220 --> 00:02:40,880 Certain here. 38 00:02:41,270 --> 00:02:44,510 Let me just select everything the lead. 39 00:02:45,380 --> 00:02:46,820 Same is going to be with the value. 40 00:02:47,940 --> 00:02:53,010 And then let's just add to cursors and learn our name. 41 00:02:53,520 --> 00:02:57,560 And that is going to be clear, underscore and alert. 42 00:02:58,080 --> 00:03:05,280 Let's save it when we want to go to a producer and learn the fastest way is going to be company based. 43 00:03:05,610 --> 00:03:07,230 So let me just select everything. 44 00:03:07,680 --> 00:03:13,650 The action that we're looking for is clear alert and in my case, I already went ahead and imported. 45 00:03:14,340 --> 00:03:17,790 And then we want to set it up in our if condition. 46 00:03:17,970 --> 00:03:19,050 So clear alert. 47 00:03:19,320 --> 00:03:23,220 And if that is the case, then Charlotte will be false. 48 00:03:23,460 --> 00:03:31,650 Like I said, man, when it comes to alert type as well as this one, the alert text basically want 49 00:03:31,650 --> 00:03:33,870 to send back to your empty values. 50 00:03:34,410 --> 00:03:38,340 And then lastly, remember, we have app context, correct? 51 00:03:38,820 --> 00:03:40,020 So let's navigate here. 52 00:03:40,200 --> 00:03:46,350 First, we want to get the clear alert one one right after the display alert. 53 00:03:46,800 --> 00:03:48,300 Let's first set up the function. 54 00:03:48,660 --> 00:03:50,190 So clear alert. 55 00:03:51,000 --> 00:03:57,150 I'm I to start with concern, so clear alert function and then set of the function body. 56 00:03:57,150 --> 00:03:58,920 This is where we have our set time up. 57 00:03:59,280 --> 00:04:06,630 So before we do anything right after dispatch, let's call clear alert in the display alert one and 58 00:04:06,630 --> 00:04:07,230 then here. 59 00:04:08,200 --> 00:04:16,480 When we want to do is go set time timeout and in whatever time we will dispatch, the clear alert got, 60 00:04:16,480 --> 00:04:18,700 in my case, that is going to be in 30 seconds. 61 00:04:19,269 --> 00:04:24,880 So let's go here, let's say dispatch and then remember we need to pass in the time that was very, 62 00:04:24,880 --> 00:04:25,540 very important. 63 00:04:26,210 --> 00:04:27,400 And then what is the type? 64 00:04:27,400 --> 00:04:29,460 Well, that is we alert. 65 00:04:30,130 --> 00:04:30,850 Let's save it. 66 00:04:31,120 --> 00:04:33,190 And now it's noticed the functionality. 67 00:04:33,670 --> 00:04:37,210 Think I'm going to have to refresh this time so I can do this here? 68 00:04:37,780 --> 00:04:41,500 And then if I'll try to submit and one value is empty. 69 00:04:41,800 --> 00:04:42,310 Check it out. 70 00:04:42,640 --> 00:04:46,990 I still have the alert, but then in three seconds is going to disappear. 71 00:04:47,560 --> 00:04:51,280 So that's how we can set up clear alert functionality.