1 00:00:00,580 --> 00:00:05,180 With our alert functionality in place now I'm going to open up my sidebar. 2 00:00:05,230 --> 00:00:08,710 I'm gonna remove again all the tabs that I had open. 3 00:00:08,740 --> 00:00:14,050 Then we're going to look for alert component and that is within the components so we have components 4 00:00:14,050 --> 00:00:14,590 folder. 5 00:00:14,740 --> 00:00:16,720 And then we're looking for dealer. 6 00:00:16,720 --> 00:00:18,610 We're going to start with our imports. 7 00:00:18,610 --> 00:00:24,940 So let me close again the sidebar and we're going to need to have a fantastic Mike on because we're 8 00:00:24,940 --> 00:00:27,050 going to use it for our close button. 9 00:00:27,130 --> 00:00:36,830 So let's import the icon name is FAA window close and that is coming from and then we have react icons 10 00:00:36,830 --> 00:00:43,700 of course forward slash FAA and then also we need to have a user context because depending on whether 11 00:00:43,700 --> 00:00:48,730 we have the value of shelf true then we are going to display or hide the alert. 12 00:00:49,130 --> 00:00:54,470 And also we're gonna be toggling between the colors because remember we have an option of either success 13 00:00:54,530 --> 00:00:59,670 meaning green or we have a danger which means that alert is going to be red. 14 00:00:59,690 --> 00:01:06,120 So let's import first our user context again name the import it is coming from and then Let's navigate 15 00:01:06,120 --> 00:01:10,100 it to a context Let's navigate to a user again I was lazy. 16 00:01:10,310 --> 00:01:15,040 If you want you can set up of course a global context where you have maybe more things. 17 00:01:15,050 --> 00:01:18,580 But I just went with the user and then we have our alert. 18 00:01:18,620 --> 00:01:19,490 Awesome. 19 00:01:19,520 --> 00:01:22,880 Now probably let's get alert and high alert. 20 00:01:22,880 --> 00:01:29,390 So we need to first have access to our state value alert and then also we need to have access to high 21 00:01:29,390 --> 00:01:29,720 dollar. 22 00:01:30,200 --> 00:01:33,500 So let's grab a alert then hide. 23 00:01:33,900 --> 00:01:34,540 Alert. 24 00:01:34,670 --> 00:01:36,520 It is coming from react. 25 00:01:36,710 --> 00:01:45,020 So we're going to use react use context and let's access the user context let's access user context 26 00:01:45,520 --> 00:01:51,900 and once we have access to alert as well as high alert then we're going to set up our systems variable. 27 00:01:51,950 --> 00:01:54,000 You could definitely do it differently. 28 00:01:54,080 --> 00:02:00,420 You could use ternary operator in your sex but for this case I just chose this particular setup. 29 00:02:00,530 --> 00:02:03,740 If you don't like it I can just change it up to your liking. 30 00:02:04,040 --> 00:02:08,600 So the way I'm going to do it I'm going to have a c as this variable and then it's going to be equal 31 00:02:08,600 --> 00:02:10,280 to a initial class. 32 00:02:10,280 --> 00:02:13,980 So I'm going to stay alert and then I'm going to have a container. 33 00:02:14,150 --> 00:02:16,080 And for now that's all we're going to have. 34 00:02:16,160 --> 00:02:21,080 And then the second we're going to set up a if statement where we're going to check alert show as well 35 00:02:21,080 --> 00:02:22,500 as alert type. 36 00:02:22,670 --> 00:02:29,230 And as far as our Jeff Sachs we're going to have a div we're going to have some kind of div. 37 00:02:29,230 --> 00:02:30,670 It's gonna have a class. 38 00:02:30,710 --> 00:02:33,360 Now that class is gonna be our CSR is variable. 39 00:02:33,500 --> 00:02:39,380 So whatever we have here your name the differently of course access it also correctly then within a 40 00:02:39,380 --> 00:02:43,960 day if there's gonna be a div with a class of alert. 41 00:02:44,060 --> 00:02:49,760 So let's write div with the class of alert and then we're gonna have our paragraph and the paragraph 42 00:02:49,760 --> 00:02:53,540 is going to access to things it's going to access alerts show. 43 00:02:53,600 --> 00:02:57,410 So if the value is true then we would want to display the message. 44 00:02:57,470 --> 00:02:59,930 So we're gonna go here with a paragraph. 45 00:02:59,930 --> 00:03:05,520 You know what I mean to set up paragraph and then the text is gonna be dependent in fact on alert show. 46 00:03:05,570 --> 00:03:09,000 So we're gonna go with alert show. 47 00:03:09,430 --> 00:03:18,070 So if of course that value is true if alerts show is true then I would want to show alert message. 48 00:03:18,130 --> 00:03:20,660 So whatever message we're passing in. 49 00:03:20,920 --> 00:03:23,400 And then also I would want to have my close button. 50 00:03:23,590 --> 00:03:30,900 So let's head over here and let's say that we're gonna have a button man as far as the classes we're 51 00:03:30,900 --> 00:03:38,310 gonna go with class name alert clothes and then also maybe set up a font. 52 00:03:38,310 --> 00:03:45,270 Awesome icon so font awesome close and then let's add also a on click. 53 00:03:45,270 --> 00:03:49,980 So we're going to have on a click so click event listener and we're gonna run the high dollar. 54 00:03:50,460 --> 00:03:56,890 So once we click on our font awesome icon then we're gonna Heidelberg and with our J sex in place. 55 00:03:57,060 --> 00:03:58,930 Let's set up our if statement. 56 00:03:58,980 --> 00:04:03,150 So what we're gonna be checking and why I set up this as a variable. 57 00:04:03,240 --> 00:04:09,120 You see I'm gonna have three classes I'm gonna have possibly alert container that is always gonna be 58 00:04:09,120 --> 00:04:16,290 there then I'm also gonna have alerts show that is going to display the alert and then depending on 59 00:04:16,290 --> 00:04:21,000 whether my type is danger I also would want to open the alert danger. 60 00:04:21,180 --> 00:04:24,040 So I'm gonna have possibly three classes. 61 00:04:24,150 --> 00:04:28,930 So that's the reason why I set this up as a variable and then I'm going to have a if statement. 62 00:04:28,980 --> 00:04:38,010 So first I'm gonna check if I'll alert show if it is true then I will want to open to my C assess a 63 00:04:38,190 --> 00:04:39,420 alert show. 64 00:04:39,420 --> 00:04:45,660 So we're gonna go and see assess plus and we're gonna go with alert show. 65 00:04:45,780 --> 00:04:51,950 Just please make sure that you have here a space so alert show but in a beginning of string. 66 00:04:51,950 --> 00:04:53,040 Just add a space. 67 00:04:53,310 --> 00:04:54,720 That's my first check. 68 00:04:54,730 --> 00:04:59,450 If that is the case if I want to show alert that I'm just gonna add the class and the class is gonna 69 00:04:59,460 --> 00:05:01,520 be the one that displays the alert. 70 00:05:01,590 --> 00:05:08,280 Then also depending on whether my alert is danger or success I would want to add another class that 71 00:05:08,280 --> 00:05:10,750 is gonna be responsible for my colors. 72 00:05:10,830 --> 00:05:15,540 So I'm not sorry if and then we're going to go with alert type. 73 00:05:15,670 --> 00:05:20,500 And if the type is equal to a danger then we're going to add one more class. 74 00:05:20,520 --> 00:05:23,400 So then we're going to up and to our CFS variable. 75 00:05:23,430 --> 00:05:24,280 One more class. 76 00:05:24,570 --> 00:05:27,240 So we're gonna we're gonna do CFS plus. 77 00:05:27,270 --> 00:05:32,660 So we're up ending this and we're gonna go with alert and the class name is danger. 78 00:05:32,670 --> 00:05:39,240 So hyphen danger and with our alert component complete now we would want to see how it's gonna look 79 00:05:39,240 --> 00:05:39,930 like. 80 00:05:39,930 --> 00:05:44,140 So I'm gonna head over to a map because we would need to render it. 81 00:05:44,260 --> 00:05:49,470 We're gonna head over to AB whereas our app component there it is and we're going to have to import 82 00:05:49,860 --> 00:05:50,870 our alert. 83 00:05:50,910 --> 00:05:56,190 So right after the header we just copy and paste we're gonna be looking for the app. 84 00:05:56,580 --> 00:06:02,030 We're gonna look for the app and we're looking for the app component so let's look for components. 85 00:06:02,100 --> 00:06:08,430 The name is alert and I don't know why I said app because of course I'm looking for alert and then right 86 00:06:08,430 --> 00:06:15,380 after the header or before the header does matter we can just render our alert component which currently 87 00:06:15,380 --> 00:06:16,640 is not going to display. 88 00:06:16,690 --> 00:06:21,410 And the reason for that is very simple because of course our show is equal to False. 89 00:06:21,530 --> 00:06:26,390 So I'm gonna head over back to user and I'm just going to hard code that the show is gonna be equal 90 00:06:26,390 --> 00:06:27,760 to true. 91 00:06:27,840 --> 00:06:30,760 I was going to be equal to true and the message is gonna be. 92 00:06:30,770 --> 00:06:33,110 Hello world. 93 00:06:33,110 --> 00:06:36,620 Let's say it and then right away we're gonna have our alert. 94 00:06:36,620 --> 00:06:37,890 Why do we have the alert. 95 00:06:37,910 --> 00:06:41,260 Because again we're gonna head over back to our component. 96 00:06:41,480 --> 00:06:44,380 We're getting two things from our user context. 97 00:06:44,420 --> 00:06:48,010 We're getting alert as well as we're getting high dollar. 98 00:06:48,140 --> 00:06:53,470 So then we set up our success which initially is always always gonna be this container. 99 00:06:53,630 --> 00:06:59,190 If I want to show my alert then the property of course is going to be equal to Trump. 100 00:06:59,190 --> 00:06:59,890 Correct. 101 00:06:59,900 --> 00:07:04,540 Now of course right now we're just hard coding that just saying Show is equal to true. 102 00:07:04,730 --> 00:07:08,570 But eventually we're going to do that with our show alert function. 103 00:07:08,630 --> 00:07:16,460 Then once we check what is in fact the value for the show then we just add to our CSI as a class a class 104 00:07:16,460 --> 00:07:20,900 that displays our alert and then we have one more check then we check. 105 00:07:20,930 --> 00:07:22,110 Well what is the time. 106 00:07:22,340 --> 00:07:25,620 And like I said by default it's always going to be success. 107 00:07:25,620 --> 00:07:26,900 So I'm like Whatever. 108 00:07:26,900 --> 00:07:29,580 Just always always had it as an excess. 109 00:07:29,870 --> 00:07:35,430 Now if you wouldn't want it to be a success if you'd want to be a danger then we specifically are going 110 00:07:35,430 --> 00:07:38,750 to add that you know what I would want to show this as a danger. 111 00:07:38,750 --> 00:07:43,230 How danger is going to look like it just hardcoded for now. 112 00:07:43,250 --> 00:07:48,020 You say danger and of course our alert is going to be around again. 113 00:07:48,020 --> 00:07:49,670 Let's roll back to alert. 114 00:07:49,670 --> 00:07:54,720 That is how we set up our systems and then eventually we just access DC assess. 115 00:07:54,740 --> 00:07:59,200 Then we have a class name for alert and then whatever message we are showing. 116 00:07:59,320 --> 00:08:05,180 And if the alert show is equal to true then of course we can always also close it. 117 00:08:05,210 --> 00:08:06,220 How do we close it. 118 00:08:06,350 --> 00:08:07,590 Just click on a button. 119 00:08:07,700 --> 00:08:13,690 And of course then we run our function hide alert function and with our component place. 120 00:08:13,760 --> 00:08:16,790 Now we can utilize it within the logging. 121 00:08:16,790 --> 00:08:17,240 Page.