1 00:00:00,180 --> 00:00:00,790 Nicely done. 2 00:00:00,810 --> 00:00:08,730 And once we understand how we can share our context throughout our app, I think it's time to tackle 3 00:00:08,730 --> 00:00:15,600 the big beast where of course, we would want to set up the functionality in my app provider and share 4 00:00:15,780 --> 00:00:19,140 her on my app more than just a simple hello. 5 00:00:19,560 --> 00:00:25,890 Now, since it's not our first rodeo, I will set up the whole functionality in this video and also 6 00:00:26,130 --> 00:00:31,030 I'll probably distribute it around our app by the end of this video. 7 00:00:31,050 --> 00:00:34,710 We should have the working up because like I just said, it's not our first time. 8 00:00:34,710 --> 00:00:40,660 So I think we should be fairly comfortable setting up the stage values, setting up the functions and 9 00:00:40,950 --> 00:00:46,450 just access them in home in the sidebar as well as model. 10 00:00:46,730 --> 00:00:48,450 Let's start with two stage values. 11 00:00:48,720 --> 00:00:51,810 I'll have one for model and one for the sidebar. 12 00:00:52,790 --> 00:01:03,260 Where it go with costs, and that is sidebar and then open now I'll go with set is sidebar open and 13 00:01:03,320 --> 00:01:04,970 not by default will be false. 14 00:01:05,480 --> 00:01:08,210 So we go with you state and force. 15 00:01:08,810 --> 00:01:10,310 You can right away copy and paste. 16 00:01:10,610 --> 00:01:13,760 And instead of the sidebar, of course, this is going to be model. 17 00:01:14,180 --> 00:01:15,710 So am I too cautious? 18 00:01:15,710 --> 00:01:20,180 And I'll say set is model open. 19 00:01:20,660 --> 00:01:26,420 So I have both of these state values and now I want to come up with four functions to that open and 20 00:01:26,420 --> 00:01:29,410 close the sidebar and then the same for the model. 21 00:01:29,810 --> 00:01:36,620 So we go with Consed and then I'll call this open sidebar and it's not going to be looking for any parameters 22 00:01:36,620 --> 00:01:45,650 and the only thing it will do is set eres sidebar so that a sidebar open and or set it Ecopetrol. 23 00:01:45,980 --> 00:01:51,440 And you can probably already guess that if we have a function that closes it, the only thing we're 24 00:01:51,440 --> 00:01:53,780 doing is calling it differently. 25 00:01:53,880 --> 00:01:57,510 So in this case, closed sidebar and then of course we pass in the files. 26 00:01:57,860 --> 00:02:02,460 So now this is not Thonglim functionality like we did in previous projects. 27 00:02:02,750 --> 00:02:07,490 So in this case, since I have two separate buttons, one inside the sidebar and then one inside of 28 00:02:07,490 --> 00:02:07,900 the home. 29 00:02:08,150 --> 00:02:13,730 Now, of course, I need to have two different functionalities and I'll copy paste and we just need 30 00:02:13,730 --> 00:02:17,570 to change it around where it's going to be open and closed model. 31 00:02:17,870 --> 00:02:21,920 So again, to Cursus and we're looking for a model here. 32 00:02:22,280 --> 00:02:29,200 And then as far as the function, same spiel part, it is going to be a model like this. 33 00:02:29,630 --> 00:02:35,420 And now what I would want in the value instead of hello, remember, we could pass whatever we want. 34 00:02:35,420 --> 00:02:41,210 And in my case, I would want to pass in the object and in that object I'll pass in my two stage values, 35 00:02:41,600 --> 00:02:46,820 because depending on those values, of course, I will toggle my model on the sidebar. 36 00:02:47,060 --> 00:02:49,640 So is sidebar open as well? 37 00:02:50,200 --> 00:02:56,510 Those are I'm sorry, not the function is sidebar open and then I would want to pass in these four functions. 38 00:02:56,750 --> 00:03:04,730 So open model, open sidebar, close the model and also close the sidebar. 39 00:03:05,090 --> 00:03:12,860 And I guess we can start with home because in the home we would want to grab those two functions to 40 00:03:12,860 --> 00:03:18,540 open the model sidebar since I have two buttons that do exactly that. 41 00:03:18,740 --> 00:03:23,720 So now of course, I'm not looking for data, I'm looking for the object and I would want to write a 42 00:03:23,720 --> 00:03:24,410 way to structure it. 43 00:03:24,410 --> 00:03:26,960 So I'm going to say open sidebar. 44 00:03:27,200 --> 00:03:31,160 I'm not open model model Muchow. 45 00:03:31,380 --> 00:03:33,380 So those are two functions that I'm looking for. 46 00:03:33,860 --> 00:03:35,660 I'm not going to log anything. 47 00:03:36,050 --> 00:03:36,680 All right. 48 00:03:36,680 --> 00:03:45,320 Away had here we're half on click and I will be equal to the sidebar since that is the button that opens 49 00:03:45,320 --> 00:03:45,450 it. 50 00:03:45,720 --> 00:03:48,080 And then of course, the same thing will be for the button. 51 00:03:48,380 --> 00:03:54,500 So on click on that will be equal to a open model. 52 00:03:54,950 --> 00:04:02,330 Now, of course, we won't be able to open them because we also need to pass from the context. 53 00:04:02,450 --> 00:04:08,960 Remember those tetralogy sidebar open and is more open to a model on the sidebar. 54 00:04:09,350 --> 00:04:16,160 So I guess let's start with a sidebar and yes, I'll do a bit of copy pasting, just spruce up. 55 00:04:16,370 --> 00:04:19,340 So in this case, I'm just looking for the global context, of course. 56 00:04:19,700 --> 00:04:24,320 So I'm going to go to my model here and then I'll remove that context. 57 00:04:24,320 --> 00:04:31,550 I don't need it like so I on the same thing like I have in home, of course I would want to access it, 58 00:04:31,940 --> 00:04:33,920 but of course I'm going to be looking for different values. 59 00:04:34,370 --> 00:04:37,700 So copy and paste and I'm not looking for open. 60 00:04:38,060 --> 00:04:38,390 Of course. 61 00:04:38,390 --> 00:04:43,670 Now I would want to grab those two state values and or sorry, one state value. 62 00:04:43,850 --> 00:04:48,850 So is Motal open open Weichsel. 63 00:04:49,130 --> 00:04:52,040 And then also I would want to close the model. 64 00:04:52,040 --> 00:04:56,450 So close model since this is the button that I have. 65 00:04:56,780 --> 00:04:59,870 And I remember I said that where we have the class names. 66 00:05:00,110 --> 00:05:04,940 Yeah, we will set up template string because we will have our ternary operator. 67 00:05:05,270 --> 00:05:13,040 So instead of just one single class, the model overlay, I will set up my interpellation and I'm going 68 00:05:13,040 --> 00:05:14,780 to look for is model open. 69 00:05:15,200 --> 00:05:22,460 If that is the case, then I'll have two classes and then if it is not open, then there's just going 70 00:05:22,460 --> 00:05:24,340 to be one class of model overlay. 71 00:05:24,650 --> 00:05:25,610 So cut it out. 72 00:05:25,610 --> 00:05:31,160 I'll copy and paste and then I'll do the same thing over here where I have two classes. 73 00:05:31,520 --> 00:05:39,410 One will be model overlay and then the second one will be show model copy and paste and then show model. 74 00:05:40,070 --> 00:05:46,670 So what you should notice right now, once you click on a show model and of course we toggle that value 75 00:05:46,910 --> 00:05:51,800 in our global context and of course we can see the model then once I click on. 76 00:05:52,500 --> 00:05:56,360 I should be able to close them all, but of course, I didn't set up the functionality. 77 00:05:56,850 --> 00:05:57,810 So let's go back. 78 00:05:58,210 --> 00:05:59,460 I'm going to go on click. 79 00:05:59,790 --> 00:06:04,620 And once we click on the button, of course, I would want to invoke close model. 80 00:06:04,920 --> 00:06:10,110 And you're not Frank can just go to a bigger browser window. 81 00:06:10,290 --> 00:06:13,380 And then there is I have my provider notice. 82 00:06:13,500 --> 00:06:20,970 Once you click the state value changes, I can see my model and then beautifully I can close it as well. 83 00:06:21,480 --> 00:06:26,300 And if we put two and two together, of course we can do the same thing in a sidebar. 84 00:06:26,490 --> 00:06:30,750 So again, just so we can speed this up a little bit, I'm going to grab my import here. 85 00:06:31,110 --> 00:06:33,180 I'm going to grab my functions. 86 00:06:33,540 --> 00:06:37,350 And I just need to change this around where it's not going to be model. 87 00:06:37,350 --> 00:06:39,420 It is going to be a sidebar. 88 00:06:40,020 --> 00:06:43,560 So is sidebar open? 89 00:06:44,070 --> 00:06:46,080 And we do the same thing. 90 00:06:46,650 --> 00:06:51,650 We set up our interpolation here and we say, is that bar open? 91 00:06:51,660 --> 00:06:54,630 If that is the case, then please do one thing. 92 00:06:54,630 --> 00:06:57,000 Essentially add two classes. 93 00:06:57,150 --> 00:07:00,170 And if not, then just add one seven here. 94 00:07:00,260 --> 00:07:04,470 Let's set up our class of sidebar and learn. 95 00:07:04,860 --> 00:07:09,570 If the sidebar is open, then I also want to add a class. 96 00:07:10,110 --> 00:07:12,120 Let me just double check the name for sure. 97 00:07:12,570 --> 00:07:18,690 And the name was Show Side, Bar Show and sidebar. 98 00:07:18,930 --> 00:07:22,430 And of course we can write or invoke close the sidebar as well. 99 00:07:22,740 --> 00:07:28,830 So we go with Unclick and then we're looking for closed sidebar over here. 100 00:07:29,400 --> 00:07:31,230 Now I can of course save it. 101 00:07:31,500 --> 00:07:36,630 Nonetheless, once I click, I show the sidebar and then I can hide it. 102 00:07:37,050 --> 00:07:43,950 Now, the way I made the sidebar with success is for small screen is going to be spanning all across 103 00:07:43,950 --> 00:07:44,430 the screen. 104 00:07:44,610 --> 00:07:51,810 And then once we get to the bigger screen, then of course it has some kind of with that is just a side 105 00:07:51,810 --> 00:07:52,080 note. 106 00:07:52,380 --> 00:07:54,600 Hopefully everything made sense. 107 00:07:54,780 --> 00:08:02,280 Hopefully you are able to follow that and create that global context so that we can share all around 108 00:08:02,280 --> 00:08:03,240 our application. 109 00:08:03,660 --> 00:08:05,610 And hopefully everyone enjoyed the project. 110 00:08:05,940 --> 00:08:07,290 And I hope to your next one.