1 00:00:00,210 --> 00:00:01,680 - So to get started with this project, 2 00:00:01,680 --> 00:00:02,700 the very first thing we need to do 3 00:00:02,700 --> 00:00:04,440 is just create a Vite application. 4 00:00:04,440 --> 00:00:06,840 We want to use TypeScript instead of JavaScript. 5 00:00:06,840 --> 00:00:10,500 So we can say "$ npm create vite@latest". 6 00:00:10,500 --> 00:00:12,180 We wanna do it in the current folder. 7 00:00:12,180 --> 00:00:13,620 And what I wanna do is I wanna go to React, 8 00:00:13,620 --> 00:00:14,790 I'm gonna use TypeScript with SWC 9 00:00:14,790 --> 00:00:16,950 'cause it's a little bit faster. 10 00:00:16,950 --> 00:00:18,990 Let's install these dependencies. 11 00:00:18,990 --> 00:00:21,237 And we're going to run the development server for this. 12 00:00:21,237 --> 00:00:23,160 And then the next step after that, 13 00:00:23,160 --> 00:00:24,110 if we look at our README here, 14 00:00:24,110 --> 00:00:26,340 is just to kind of get the basic calendar done. 15 00:00:26,340 --> 00:00:27,173 As you can see here, 16 00:00:27,173 --> 00:00:28,290 we wanna create the calendar component 17 00:00:28,290 --> 00:00:30,840 that has those buttons to jump backward and forward. 18 00:00:30,840 --> 00:00:31,850 So really the first thing I wanna do 19 00:00:31,850 --> 00:00:35,250 is just get a basic calendar rendered out onto my screen, 20 00:00:35,250 --> 00:00:36,750 and we're gonna be using date-fns 21 00:00:36,750 --> 00:00:37,950 for a lot of the libraries for this. 22 00:00:37,950 --> 00:00:39,240 Again, similar to some of the projects 23 00:00:39,240 --> 00:00:40,920 we've done in the past on this course. 24 00:00:40,920 --> 00:00:42,270 Just to make it a little bit easier, 25 00:00:42,270 --> 00:00:43,590 some of the stuff that we're gonna be talking about 26 00:00:43,590 --> 00:00:44,520 should be rather familiar 27 00:00:44,520 --> 00:00:47,490 because the date picker uses a lot of the same logic. 28 00:00:47,490 --> 00:00:48,750 So let's go into the after folder here, 29 00:00:48,750 --> 00:00:50,340 you can see we have everything we need. 30 00:00:50,340 --> 00:00:52,800 And I wanna get rid of a lot of this basic boilerplate code. 31 00:00:52,800 --> 00:00:54,510 We don't need pretty much any of this. 32 00:00:54,510 --> 00:00:55,343 There we go. 33 00:00:55,343 --> 00:00:56,520 Inside this app here. 34 00:00:56,520 --> 00:00:59,610 Export default function app. 35 00:00:59,610 --> 00:01:02,310 And we're just gonna return h1 that says "Hi." 36 00:01:02,310 --> 00:01:03,930 So now if we actually go to that page, 37 00:01:03,930 --> 00:01:05,640 you can see we now have our h1 with "Hi" 38 00:01:05,640 --> 00:01:06,840 being rendered out. 39 00:01:06,840 --> 00:01:07,673 So now let's go ahead 40 00:01:07,673 --> 00:01:09,420 and actually create a calendar component. 41 00:01:09,420 --> 00:01:11,340 I'm gonna do that inside of a components folder. 42 00:01:11,340 --> 00:01:13,830 I just like to break this out into a different structure 43 00:01:13,830 --> 00:01:16,230 because we have a little bit of more of a complex project, 44 00:01:16,230 --> 00:01:17,730 so it makes sense to break things out 45 00:01:17,730 --> 00:01:19,320 into different folders. 46 00:01:19,320 --> 00:01:21,887 So we're gonna create a calendar.tsx, 47 00:01:21,887 --> 00:01:23,640 'cause this is a TypeScript project. 48 00:01:23,640 --> 00:01:25,030 We're gonna have that component. 49 00:01:25,030 --> 00:01:28,677 It'll say export function calendar, just like that. 50 00:01:28,677 --> 00:01:29,610 And inside here, 51 00:01:29,610 --> 00:01:32,370 I essentially wanna return all the HTML from here. 52 00:01:32,370 --> 00:01:33,930 So I can just take all the code for my calendar. 53 00:01:33,930 --> 00:01:36,120 I'm just gonna copy this entire thing over. 54 00:01:36,120 --> 00:01:37,500 For now, this isn't going to be perfect 55 00:01:37,500 --> 00:01:39,540 'cause it's gonna have a lot of boilerplate information, 56 00:01:39,540 --> 00:01:40,980 but if I give this a quick save 57 00:01:40,980 --> 00:01:42,360 and we look over at our code here, 58 00:01:42,360 --> 00:01:43,650 and I make sure I actually render out 59 00:01:43,650 --> 00:01:45,630 that calendar component, 60 00:01:45,630 --> 00:01:47,340 we should at least see our component 61 00:01:47,340 --> 00:01:48,360 showing up on the screen. 62 00:01:48,360 --> 00:01:49,860 You can see we don't have any of our styles 63 00:01:49,860 --> 00:01:50,700 being rendered out yet. 64 00:01:50,700 --> 00:01:53,160 So let me just make sure I import a style sheet. 65 00:01:53,160 --> 00:01:56,066 We're gonna say "./styles.css". 66 00:01:56,066 --> 00:01:59,340 I'm just gonna copy that file over into our source here. 67 00:01:59,340 --> 00:02:00,570 So now if I give this a refresh, 68 00:02:00,570 --> 00:02:01,719 you can see that this and this, 69 00:02:01,719 --> 00:02:04,020 they both look pretty much identical. 70 00:02:04,020 --> 00:02:05,700 We have a few different changes we need to make, 71 00:02:05,700 --> 00:02:07,800 but overall it looks pretty much exactly the same 72 00:02:07,800 --> 00:02:08,640 between the two of them. 73 00:02:08,640 --> 00:02:10,050 And I'll actually close out of that version, 74 00:02:10,050 --> 00:02:11,790 so we just have the actual running version 75 00:02:11,790 --> 00:02:13,350 working on our screen. 76 00:02:13,350 --> 00:02:15,480 The first thing is all of this code that says "class" 77 00:02:15,480 --> 00:02:16,990 should be replaced with "classNames". 78 00:02:16,990 --> 00:02:19,530 So I'm just gonna really quickly select all of these. 79 00:02:19,530 --> 00:02:20,670 It's gonna take a little bit of a second 80 00:02:20,670 --> 00:02:21,540 to actually select all of them, 81 00:02:21,540 --> 00:02:23,340 probably should have done a find and replace. 82 00:02:23,340 --> 00:02:24,402 There we go. 83 00:02:24,402 --> 00:02:25,402 "ClassName". 84 00:02:26,310 --> 00:02:27,143 There we go. 85 00:02:27,143 --> 00:02:28,050 And that should get rid of all the errors 86 00:02:28,050 --> 00:02:29,820 that we have on this page. 87 00:02:29,820 --> 00:02:30,653 And it looks like it has. 88 00:02:30,653 --> 00:02:31,650 And again, our code over here looks great, 89 00:02:31,650 --> 00:02:33,420 which is exactly what we want. 90 00:02:33,420 --> 00:02:34,260 Now, the next step 91 00:02:34,260 --> 00:02:36,780 is going to be breaking this down into different sections. 92 00:02:36,780 --> 00:02:38,640 So you can see here we have this calendar section 93 00:02:38,640 --> 00:02:39,473 which has a header. 94 00:02:39,473 --> 00:02:40,500 Okay, pretty straightforward. 95 00:02:40,500 --> 00:02:42,150 Then we have our day section. 96 00:02:42,150 --> 00:02:43,650 And this day section really makes sense 97 00:02:43,650 --> 00:02:45,390 to render out into its own component 98 00:02:45,390 --> 00:02:46,950 because each one of these is a day. 99 00:02:46,950 --> 00:02:49,380 As you can see, we have a day inside each one of these. 100 00:02:49,380 --> 00:02:50,370 And all of these days 101 00:02:50,370 --> 00:02:52,020 essentially share the exact same logic. 102 00:02:52,020 --> 00:02:55,140 So these days are kind of like their own little component. 103 00:02:55,140 --> 00:02:58,110 So we can create a brand new component for a calendar day. 104 00:02:58,110 --> 00:02:59,580 And this one, I don't need need to export, 105 00:02:59,580 --> 00:03:01,730 I'm just gonna call a function CalendarDay. 106 00:03:02,910 --> 00:03:03,743 Just like that. 107 00:03:03,743 --> 00:03:05,490 And we can actually use that CalendarDay 108 00:03:05,490 --> 00:03:06,450 inside of our calendar. 109 00:03:06,450 --> 00:03:08,070 And I don't need to create another file for this 110 00:03:08,070 --> 00:03:08,903 or anything. 111 00:03:08,903 --> 00:03:09,736 It doesn't make sense to 112 00:03:09,736 --> 00:03:11,040 because obviously this component 113 00:03:11,040 --> 00:03:12,570 is only ever used in our calendar. 114 00:03:12,570 --> 00:03:15,300 So it just makes sense to put them in the exact same file. 115 00:03:15,300 --> 00:03:17,730 So now every time I have one of these different days 116 00:03:17,730 --> 00:03:20,340 I can replace it with that CalendarDay component 117 00:03:20,340 --> 00:03:21,173 right here, 118 00:03:21,173 --> 00:03:22,006 which is really great. 119 00:03:22,006 --> 00:03:23,580 That already cleans up our code a lot. 120 00:03:23,580 --> 00:03:24,420 So let's actually go ahead 121 00:03:24,420 --> 00:03:26,790 and try to get the days for the current month. 122 00:03:26,790 --> 00:03:27,623 So we can come up here, 123 00:03:27,623 --> 00:03:28,680 we're gonna need a state variable 124 00:03:28,680 --> 00:03:30,060 'cause we're gonna need to be able to modify 125 00:03:30,060 --> 00:03:32,040 what the current month we're rendering is. 126 00:03:32,040 --> 00:03:33,210 So I'm just gonna have a variable 127 00:03:33,210 --> 00:03:36,247 called selectedMonth setSelectedMonth. 128 00:03:37,642 --> 00:03:39,533 We're gonna set that equal to useState. 129 00:03:39,533 --> 00:03:40,366 And by default, 130 00:03:40,366 --> 00:03:42,120 I want that to be whatever the current date is. 131 00:03:42,120 --> 00:03:43,950 So we'll just set that to the current date. 132 00:03:43,950 --> 00:03:45,150 Just like that. 133 00:03:45,150 --> 00:03:46,470 Now we have our selected month. 134 00:03:46,470 --> 00:03:48,720 Now we just need to get the days within that month. 135 00:03:48,720 --> 00:03:50,770 So we can say that our calendar days 136 00:03:52,200 --> 00:03:53,340 are going to be equal to... 137 00:03:53,340 --> 00:03:55,500 And of course, we're gonna be using date-fns for this. 138 00:03:55,500 --> 00:03:56,333 So I'm gonna come in here 139 00:03:56,333 --> 00:03:58,650 and I'm actually gonna install that date-fns library. 140 00:03:58,650 --> 00:04:01,080 So first of all I want a CD into the after folder 141 00:04:01,080 --> 00:04:03,750 and then I can npm i date-fns 142 00:04:03,750 --> 00:04:06,030 to get that date-fns library installed. 143 00:04:06,030 --> 00:04:06,863 Once that finishes, 144 00:04:06,863 --> 00:04:08,520 I'll close out of this terminal 145 00:04:08,520 --> 00:04:09,750 since we no longer will need it. 146 00:04:09,750 --> 00:04:11,340 There we go. 147 00:04:11,340 --> 00:04:13,710 So now I can get everything essentially that I need 148 00:04:13,710 --> 00:04:17,760 from that date-fns library. 149 00:04:17,760 --> 00:04:18,593 For now, 150 00:04:18,593 --> 00:04:19,620 the main things that I'm going to need 151 00:04:19,620 --> 00:04:22,140 are the start of week 152 00:04:22,140 --> 00:04:24,150 and the start of month. 153 00:04:24,150 --> 00:04:25,050 And that'll get me started 154 00:04:25,050 --> 00:04:26,460 with the beginning of my interval. 155 00:04:26,460 --> 00:04:29,641 For example, I want to get the start of the week 156 00:04:29,641 --> 00:04:32,880 and from there I wanna get the start of the current month 157 00:04:32,880 --> 00:04:34,710 and I wanna get that from the selected month. 158 00:04:34,710 --> 00:04:35,700 So what this is going to do 159 00:04:35,700 --> 00:04:37,410 is just give me the start of my current month, 160 00:04:37,410 --> 00:04:38,637 which in my case is June 1st. 161 00:04:38,637 --> 00:04:39,660 And the start of the week 162 00:04:39,660 --> 00:04:40,680 is going to give me the Sunday 163 00:04:40,680 --> 00:04:41,880 at the beginning of that week. 164 00:04:41,880 --> 00:04:45,000 So we go from this Thursday, the first, to May the 28th. 165 00:04:45,000 --> 00:04:46,110 Just like that. 166 00:04:46,110 --> 00:04:47,160 And that, I actually want to set 167 00:04:47,160 --> 00:04:48,420 to a slightly separate variable. 168 00:04:48,420 --> 00:04:49,590 We'll just say const here 169 00:04:49,590 --> 00:04:52,470 is going to be equal to firstWeekStart. 170 00:04:52,470 --> 00:04:53,937 We'll set it equal to that variable. 171 00:04:53,937 --> 00:04:56,190 But now, I'm just gonna set this to null here. 172 00:04:56,190 --> 00:04:59,220 The next thing we wanna do is get the end of the last week. 173 00:04:59,220 --> 00:05:03,738 So we could say lastWeekEnd, just like that. 174 00:05:03,738 --> 00:05:05,580 And we're going to get the end of the week, 175 00:05:05,580 --> 00:05:07,560 so let me make sure I import that. 176 00:05:07,560 --> 00:05:09,720 We're gonna get the end of the month, 177 00:05:09,720 --> 00:05:11,100 so lemme make sure I import that as well. 178 00:05:11,100 --> 00:05:13,590 And we're getting that again from our selected month. 179 00:05:13,590 --> 00:05:14,820 Then what I want to do 180 00:05:14,820 --> 00:05:17,100 is I wanna get each day of the interval 181 00:05:17,100 --> 00:05:19,620 and that's going to be starting at our start date. 182 00:05:19,620 --> 00:05:21,180 So that's our firstWeekStart, 183 00:05:21,180 --> 00:05:22,920 and it's ending at our lastWeekEnd. 184 00:05:22,920 --> 00:05:25,470 And this, we can set to our calendarDays. 185 00:05:25,470 --> 00:05:26,490 So I can just come down here, 186 00:05:26,490 --> 00:05:27,630 place this right there. 187 00:05:27,630 --> 00:05:28,463 And there we go. 188 00:05:28,463 --> 00:05:29,296 We have our calendarDays, 189 00:05:29,296 --> 00:05:30,570 which is just an array of all the days 190 00:05:30,570 --> 00:05:32,880 between our start date and our end date. 191 00:05:32,880 --> 00:05:34,770 Again, this should look very familiar 192 00:05:34,770 --> 00:05:35,970 from the date picker project, 193 00:05:35,970 --> 00:05:38,190 'cause essentially it's the exact same code. 194 00:05:38,190 --> 00:05:40,290 Now, one important thing to note about this though 195 00:05:40,290 --> 00:05:43,410 is that this code is going to run on every single render. 196 00:05:43,410 --> 00:05:44,871 Even if nothing about our calendar changes, 197 00:05:44,871 --> 00:05:47,310 this code is going to run every single time. 198 00:05:47,310 --> 00:05:48,840 It's not a huge performance hit, 199 00:05:48,840 --> 00:05:50,520 but obviously we don't wanna run this code 200 00:05:50,520 --> 00:05:52,770 every single time our component changes. 201 00:05:52,770 --> 00:05:54,270 Instead we only wanna run this 202 00:05:54,270 --> 00:05:56,790 every single time this selected month changes. 203 00:05:56,790 --> 00:05:58,230 So what we can do is we can actually wrap this 204 00:05:58,230 --> 00:05:59,730 inside of a useMemo. 205 00:05:59,730 --> 00:06:01,050 So I'm gonna take this calendarDays, 206 00:06:01,050 --> 00:06:02,340 bring it back up here, 207 00:06:02,340 --> 00:06:05,842 I'm gonna set it equal to the result of running useMemo. 208 00:06:05,842 --> 00:06:07,050 And inside this useMemo, 209 00:06:07,050 --> 00:06:09,390 I just wanna wrap this entire set of code right here 210 00:06:09,390 --> 00:06:11,070 to run it as a function. 211 00:06:11,070 --> 00:06:12,600 And my dependencies for this 212 00:06:12,600 --> 00:06:14,040 is going to be my selectedMonth. 213 00:06:14,040 --> 00:06:17,250 Every time that changes, I want to rerun this useMemo code. 214 00:06:17,250 --> 00:06:19,350 So now it's import useMemo at the top. 215 00:06:19,350 --> 00:06:20,183 And what we can do here 216 00:06:20,183 --> 00:06:22,770 is we can just return this eachDayOfInterval. 217 00:06:22,770 --> 00:06:24,056 If I expand my screen a little bit, 218 00:06:24,056 --> 00:06:25,650 it'll be a little easier to see what's going on. 219 00:06:25,650 --> 00:06:27,330 As you can see, we still have our calendarDays. 220 00:06:27,330 --> 00:06:28,560 We're wrapping all the code for it 221 00:06:28,560 --> 00:06:29,850 and we're making sure we're only doing this 222 00:06:29,850 --> 00:06:31,620 every time our selectedMonth changes 223 00:06:31,620 --> 00:06:33,720 to make it a little bit more performant. 224 00:06:33,720 --> 00:06:34,860 Now, we can actually take this, 225 00:06:34,860 --> 00:06:36,000 and inside of "days" here, 226 00:06:36,000 --> 00:06:37,470 we can actually map through this. 227 00:06:37,470 --> 00:06:40,290 So we can say we wanna map through each day. 228 00:06:40,290 --> 00:06:41,493 And then inside of here, 229 00:06:42,870 --> 00:06:45,540 we essentially want to render out these day components. 230 00:06:45,540 --> 00:06:47,010 So I'm just gonna copy this code, 231 00:06:47,010 --> 00:06:48,270 paste it into here 232 00:06:48,270 --> 00:06:51,000 and we can just make sure we set a key on this, 233 00:06:51,000 --> 00:06:52,590 which is going to be our day. 234 00:06:52,590 --> 00:06:54,360 And since the key can't actually be a date, 235 00:06:54,360 --> 00:06:56,100 we can just call the getTime function 236 00:06:56,100 --> 00:06:57,930 and that'll give us a unique actual indicator 237 00:06:57,930 --> 00:06:59,610 for the specific day. 238 00:06:59,610 --> 00:07:00,443 So now with that done, 239 00:07:00,443 --> 00:07:02,490 we can actually take all of these other days 240 00:07:02,490 --> 00:07:03,810 and we can just remove them from our code. 241 00:07:03,810 --> 00:07:05,448 So I'm just gonna go all the way down 242 00:07:05,448 --> 00:07:06,281 to the bottom of the page 243 00:07:06,281 --> 00:07:08,550 and remove all of these extra days that we don't need. 244 00:07:08,550 --> 00:07:09,383 There we go. 245 00:07:09,383 --> 00:07:10,590 So now we just have this one day 246 00:07:10,590 --> 00:07:11,667 being rendered essentially in a loop. 247 00:07:11,667 --> 00:07:12,840 And if I save, 248 00:07:12,840 --> 00:07:13,830 we should just have the same day 249 00:07:13,830 --> 00:07:15,210 being rendered over and over again, 250 00:07:15,210 --> 00:07:16,170 which is perfectly fine 251 00:07:16,170 --> 00:07:18,000 for the case that we're actually using here. 252 00:07:18,000 --> 00:07:20,070 Obviously, we're gonna fix this and make it render properly, 253 00:07:20,070 --> 00:07:21,930 but for now this is good enough. 254 00:07:21,930 --> 00:07:24,030 Also, I should probably take all of this code 255 00:07:24,030 --> 00:07:24,957 that's rendering out our day 256 00:07:24,957 --> 00:07:27,360 and we should move that into our calendarDay component. 257 00:07:27,360 --> 00:07:30,270 So here I'm just gonna make it return all this information. 258 00:07:30,270 --> 00:07:31,890 My key, I'm obviously going to remove 259 00:07:31,890 --> 00:07:33,090 'cause I need to move that up here. 260 00:07:33,090 --> 00:07:35,904 And we can render out that calendarDay 261 00:07:35,904 --> 00:07:38,820 with a key that is set to our current day. 262 00:07:38,820 --> 00:07:40,080 There we go. 263 00:07:40,080 --> 00:07:41,467 This should say calendarDay, 264 00:07:41,467 --> 00:07:43,290 make sure I spell that properly. 265 00:07:43,290 --> 00:07:44,550 There we go. 266 00:07:44,550 --> 00:07:45,383 Now again, 267 00:07:45,383 --> 00:07:46,920 it should render out just exactly the same day 268 00:07:46,920 --> 00:07:47,753 over and over again, 269 00:07:47,753 --> 00:07:48,900 which is fine for now. 270 00:07:48,900 --> 00:07:50,220 Now, to figure out what information 271 00:07:50,220 --> 00:07:52,200 we actually want to render out for our day, 272 00:07:52,200 --> 00:07:53,340 let's go down to this component 273 00:07:53,340 --> 00:07:55,440 and figure out where all of the unique information 274 00:07:55,440 --> 00:07:56,370 is coming from. 275 00:07:56,370 --> 00:07:58,380 For example, here we need the week-name, 276 00:07:58,380 --> 00:07:59,700 we need the day-number, 277 00:07:59,700 --> 00:08:01,470 and we also need to render out here 278 00:08:01,470 --> 00:08:03,570 any different events that are inside of it. 279 00:08:03,570 --> 00:08:05,760 For now, I'm just gonna kind of ignore this event section 280 00:08:05,760 --> 00:08:08,580 because we're not at that part of the actual to-do list yet. 281 00:08:08,580 --> 00:08:09,510 So I'm just gonna comment that out. 282 00:08:09,510 --> 00:08:11,037 So right now it's just rendering the day, 283 00:08:11,037 --> 00:08:13,440 and we need to parse in all the information we need. 284 00:08:13,440 --> 00:08:15,750 For example, we need to know what the actual day is, 285 00:08:15,750 --> 00:08:17,700 so we're obviously gonna need to parse that in. 286 00:08:17,700 --> 00:08:19,680 And then also if we look at our index.html here, 287 00:08:19,680 --> 00:08:22,290 one thing you'll notice is the actual weekday, 288 00:08:22,290 --> 00:08:23,850 that Friday, Saturday, Sunday and so on, 289 00:08:23,850 --> 00:08:25,950 that is only showing for the first seven days. 290 00:08:25,950 --> 00:08:26,783 After that, you'll notice 291 00:08:26,783 --> 00:08:28,470 this is not being shown anymore at all 292 00:08:28,470 --> 00:08:30,390 because we only wanna show it at the top of our calendar 293 00:08:30,390 --> 00:08:32,280 instead of on every single day. 294 00:08:32,280 --> 00:08:33,630 So again, we need to parse in 295 00:08:33,630 --> 00:08:36,030 if we're going to be showing that weekday or not. 296 00:08:36,030 --> 00:08:38,944 So we're just gonna have here, showWeekName, 297 00:08:38,944 --> 00:08:40,800 that's gonna be parsed in as a Boolean 298 00:08:40,800 --> 00:08:43,470 to determine if this section even renders at all. 299 00:08:43,470 --> 00:08:44,310 Really, besides that, 300 00:08:44,310 --> 00:08:45,780 the only other thing we need to know 301 00:08:45,780 --> 00:08:49,380 is if this is going to be in the current month or not. 302 00:08:49,380 --> 00:08:50,730 So the way we can do that 303 00:08:50,730 --> 00:08:53,850 is by parsing in what the actual selected month is. 304 00:08:53,850 --> 00:08:55,470 So we can say that our selectedMonth 305 00:08:55,470 --> 00:08:56,490 is going to be parsed in 306 00:08:56,490 --> 00:08:58,380 so we can determine if this current day 307 00:08:58,380 --> 00:09:00,780 is within the selectedMonth or not. 308 00:09:00,780 --> 00:09:02,250 So now let's actually type these props 309 00:09:02,250 --> 00:09:03,630 'cause right now they're not typed. 310 00:09:03,630 --> 00:09:06,190 So we'll create a type called calendarDayProps. 311 00:09:07,110 --> 00:09:09,090 Generally, when I create a type for a component, 312 00:09:09,090 --> 00:09:10,650 I just give it the same name as the component 313 00:09:10,650 --> 00:09:12,570 and just add "Props" to the end of it. 314 00:09:12,570 --> 00:09:14,880 I know that this is going to have a day, which is a date. 315 00:09:14,880 --> 00:09:18,240 It's gonna have a showWeekName, which is a Boolean, 316 00:09:18,240 --> 00:09:19,950 'cause that's going to be true or false. 317 00:09:19,950 --> 00:09:21,330 And then we're gonna have a selectedMonth, 318 00:09:21,330 --> 00:09:23,760 which is also just going to be a date as well. 319 00:09:23,760 --> 00:09:25,800 So now I can take these props, 320 00:09:25,800 --> 00:09:26,760 add them right here, 321 00:09:26,760 --> 00:09:28,500 and that's giving me type safety for this. 322 00:09:28,500 --> 00:09:30,150 You'll notice up here I'm immediately getting an error 323 00:09:30,150 --> 00:09:32,370 'cause I'm not parsing any of that information in. 324 00:09:32,370 --> 00:09:33,660 So let's make sure we parse that in. 325 00:09:33,660 --> 00:09:34,493 We'll come in here, 326 00:09:34,493 --> 00:09:37,470 we'll say that our day is equal to our day. 327 00:09:37,470 --> 00:09:39,810 Our showWeekName here, 328 00:09:39,810 --> 00:09:42,300 this is going to be only for the first seven days. 329 00:09:42,300 --> 00:09:44,490 So here I can just get to the index 330 00:09:44,490 --> 00:09:46,320 and if the index is less than seven, 331 00:09:46,320 --> 00:09:48,390 it's going to be one of the first seven days. 332 00:09:48,390 --> 00:09:50,437 So I'll say index less than seven, 333 00:09:50,437 --> 00:09:52,410 that means we show the week name. 334 00:09:52,410 --> 00:09:53,243 And then finally, 335 00:09:53,243 --> 00:09:54,076 the selectedMonth 336 00:09:54,076 --> 00:09:56,310 is just equal to our selectedMonth variable. 337 00:09:56,310 --> 00:09:57,330 Now, if I get that as save, 338 00:09:57,330 --> 00:09:58,920 that got rid of all the errors up there, 339 00:09:58,920 --> 00:10:00,150 and now we just have errors here 340 00:10:00,150 --> 00:10:01,740 because essentially we're not actually using 341 00:10:01,740 --> 00:10:02,850 these different properties 342 00:10:02,850 --> 00:10:04,860 so we need to make sure we use them as well. 343 00:10:04,860 --> 00:10:07,020 So the easiest thing to do is this week-name section. 344 00:10:07,020 --> 00:10:08,040 So I can do here, 345 00:10:08,040 --> 00:10:10,170 is if showWeekName is true, 346 00:10:10,170 --> 00:10:12,597 then we render out the div that has the actual week name. 347 00:10:12,597 --> 00:10:15,030 And we just need to render the week name right here. 348 00:10:15,030 --> 00:10:16,860 There's a lot of different ways we can do this, 349 00:10:16,860 --> 00:10:18,360 but it's actually rather easy to do 350 00:10:18,360 --> 00:10:21,720 with the internationalization helpers built into JavaScript. 351 00:10:21,720 --> 00:10:23,820 And I'm actually going to create a helper function 352 00:10:23,820 --> 00:10:24,690 for us to do that. 353 00:10:24,690 --> 00:10:27,480 I'm gonna create a brand new folder called Utils 354 00:10:27,480 --> 00:10:28,313 and inside of here 355 00:10:28,313 --> 00:10:29,940 is where we're gonna put that helper function 356 00:10:29,940 --> 00:10:34,290 and we'll just call this format date.ts. 357 00:10:34,290 --> 00:10:35,610 Now, inside of this function 358 00:10:35,610 --> 00:10:38,270 we're gonna export the formatDate, 359 00:10:39,540 --> 00:10:40,373 just like that. 360 00:10:40,373 --> 00:10:42,352 And this is going to take in a date obviously, 361 00:10:42,352 --> 00:10:43,287 'cause we want to format the date. 362 00:10:43,287 --> 00:10:45,180 And it's also going to take in some options, 363 00:10:45,180 --> 00:10:47,190 but we're gonna get to that in just a little bit. 364 00:10:47,190 --> 00:10:49,290 Here, what I wanna do is I wanna create a new 365 00:10:49,290 --> 00:10:52,440 internationalization DateTime formatter. 366 00:10:52,440 --> 00:10:55,410 And here, if you parse in undefined as the first property, 367 00:10:55,410 --> 00:10:57,960 it'll default to the user's current locale. 368 00:10:57,960 --> 00:11:00,450 That means if my website is displaying in English 369 00:11:00,450 --> 00:11:01,860 'cause I live in the United States, 370 00:11:01,860 --> 00:11:04,170 it'll render my date in the English format. 371 00:11:04,170 --> 00:11:06,300 While if you live in Spain, maybe, 372 00:11:06,300 --> 00:11:09,030 it'll render out the date in the Spanish format. 373 00:11:09,030 --> 00:11:10,110 So depending on where you live, 374 00:11:10,110 --> 00:11:12,480 it'll use your current locale to render out the date, 375 00:11:12,480 --> 00:11:13,313 which is great 376 00:11:13,313 --> 00:11:15,030 because dates are displayed differently across the world 377 00:11:15,030 --> 00:11:16,950 and this will take care of all of that for you. 378 00:11:16,950 --> 00:11:17,940 It'll also translate. 379 00:11:17,940 --> 00:11:19,920 For example, the actual things like Sunday 380 00:11:19,920 --> 00:11:21,450 will be translated into Spanish 381 00:11:21,450 --> 00:11:23,190 instead of being displayed in English 382 00:11:23,190 --> 00:11:25,110 if your locale is actually Spanish. 383 00:11:25,110 --> 00:11:26,940 For example, if I change the locale manually, 384 00:11:26,940 --> 00:11:28,680 everything will be in Spanish, 385 00:11:28,680 --> 00:11:30,030 but we're just gonna use undefined here 386 00:11:30,030 --> 00:11:32,490 so it'll actually use the default locale. 387 00:11:32,490 --> 00:11:34,170 Then I need to parse in some options. 388 00:11:34,170 --> 00:11:36,000 And these options I'm actually going to take in 389 00:11:36,000 --> 00:11:38,730 as part of this formatDate function. 390 00:11:38,730 --> 00:11:40,650 Finally, I want to call the format function 391 00:11:40,650 --> 00:11:41,790 and parse in the date. 392 00:11:41,790 --> 00:11:42,870 So what this allows us to do 393 00:11:42,870 --> 00:11:44,280 is to create a brand new formatter 394 00:11:44,280 --> 00:11:45,840 that is going to use the current locale 395 00:11:45,840 --> 00:11:47,750 and whatever options we parse in. 396 00:11:47,750 --> 00:11:49,080 In this options property, 397 00:11:49,080 --> 00:11:51,750 we can actually get from the date time formatter. 398 00:11:51,750 --> 00:11:53,430 So if we just really quickly hover over this, 399 00:11:53,430 --> 00:11:55,230 you'll notice it'll show exactly what I'm talking about. 400 00:11:55,230 --> 00:11:56,190 As you can see here, 401 00:11:56,190 --> 00:11:58,020 the first thing it takes in is the locale. 402 00:11:58,020 --> 00:11:59,820 And the second thing it takes in is these options. 403 00:11:59,820 --> 00:12:00,930 And these options have the type 404 00:12:00,930 --> 00:12:02,553 of Intl.DateTimeFormatOptions. 405 00:12:03,570 --> 00:12:05,037 We can just copy that exact type 406 00:12:05,037 --> 00:12:07,380 and we can say we wanna parse in our own options 407 00:12:07,380 --> 00:12:09,350 that are going to take in that exact same type. 408 00:12:09,350 --> 00:12:11,460 So now as you can see that these types match up 409 00:12:11,460 --> 00:12:13,110 so it's going to work just fine. 410 00:12:13,110 --> 00:12:14,100 The only other thing I wanna say 411 00:12:14,100 --> 00:12:15,450 is I want this to be optional 412 00:12:15,450 --> 00:12:17,310 because I don't wanna have to parse in an option 413 00:12:17,310 --> 00:12:18,143 if I don't need to 414 00:12:18,143 --> 00:12:20,460 because sometimes just the default formatter 415 00:12:20,460 --> 00:12:21,750 is going to be enough for our use case. 416 00:12:21,750 --> 00:12:24,060 Now I can actually use this function to format my date, 417 00:12:24,060 --> 00:12:26,790 to gimme the weekday, to gimme the date number and so on. 418 00:12:26,790 --> 00:12:28,860 So here where I have that Sunday being rendered, 419 00:12:28,860 --> 00:12:31,860 I wanna call that formatDate function that we have. 420 00:12:31,860 --> 00:12:34,650 I'm gonna parse in my date, which is just called day. 421 00:12:34,650 --> 00:12:35,543 And then we can pass in any options. 422 00:12:35,543 --> 00:12:37,950 And the nice thing is if I hit Control, Space, 423 00:12:37,950 --> 00:12:40,290 you'll notice I get my actual auto complete right here, 424 00:12:40,290 --> 00:12:41,700 which is exactly what I want. 425 00:12:41,700 --> 00:12:43,830 In our case, I wanna format the actual week. 426 00:12:43,830 --> 00:12:45,360 So I can say I wanna format the weekday 427 00:12:45,360 --> 00:12:47,670 and in our case I wanna use a short weekday. 428 00:12:47,670 --> 00:12:48,503 So now if I just give that a quick save, 429 00:12:48,503 --> 00:12:50,100 you notice at the top of my page 430 00:12:50,100 --> 00:12:51,600 it says Sunday, Monday, Tuesday, Wednesday, 431 00:12:51,600 --> 00:12:52,770 Thursday, Friday, Saturday, 432 00:12:52,770 --> 00:12:54,420 which is exactly what I want. 433 00:12:54,420 --> 00:12:56,460 If I were to do like long instead of short, 434 00:12:56,460 --> 00:12:58,710 you can now see it says the actual full day. 435 00:12:58,710 --> 00:13:01,190 And the really nice thing is if I was in Spain for example, 436 00:13:01,190 --> 00:13:03,780 so this was a Spanish locale, 437 00:13:03,780 --> 00:13:04,613 you can come in here, 438 00:13:04,613 --> 00:13:06,060 you can now see that it's rendering out 439 00:13:06,060 --> 00:13:07,650 all of these different dates in Spanish 440 00:13:07,650 --> 00:13:08,640 as opposed to English, 441 00:13:08,640 --> 00:13:10,020 which is really, really cool. 442 00:13:10,020 --> 00:13:12,180 By default though, we're just gonna leave this undefined. 443 00:13:12,180 --> 00:13:14,580 Now the next thing we can work on is this day-number here. 444 00:13:14,580 --> 00:13:16,107 We can use that exact same format, 445 00:13:16,107 --> 00:13:17,460 the date function that we just created, 446 00:13:17,460 --> 00:13:18,870 parse in our day. 447 00:13:18,870 --> 00:13:20,670 And here I wanna actually get the day 448 00:13:20,670 --> 00:13:21,960 so we can say day here. 449 00:13:21,960 --> 00:13:24,600 And for the day, I want to get it in a numeric form. 450 00:13:24,600 --> 00:13:25,620 I don't want the two digit form, 451 00:13:25,620 --> 00:13:27,000 I just want the one digit form 452 00:13:27,000 --> 00:13:28,430 if it's going to be a short date. 453 00:13:28,430 --> 00:13:29,263 So now if I save, 454 00:13:29,263 --> 00:13:30,480 you can see we get all of our days 455 00:13:30,480 --> 00:13:32,040 showing up exactly as we want. 456 00:13:32,040 --> 00:13:34,290 And again, if I were to do the two digit form 457 00:13:34,290 --> 00:13:36,090 of that instead like this, 458 00:13:36,090 --> 00:13:38,220 you can see it now just puts a zero in front of all the days 459 00:13:38,220 --> 00:13:39,750 that have a one digit form. 460 00:13:39,750 --> 00:13:42,480 But in our case, numeric is going to work just fine. 461 00:13:42,480 --> 00:13:43,410 Now the next thing we need to do 462 00:13:43,410 --> 00:13:45,000 is deal with all of our class names, 463 00:13:45,000 --> 00:13:45,833 'cause right now 464 00:13:45,833 --> 00:13:47,130 we have the actual content rendering out fine, 465 00:13:47,130 --> 00:13:48,810 but it's not rendering out the correct classes 466 00:13:48,810 --> 00:13:50,160 'cause some of these are non-month-days 467 00:13:50,160 --> 00:13:51,930 some of them are old days, some of them aren't, 468 00:13:51,930 --> 00:13:53,340 some of them are today, some of them aren't, 469 00:13:53,340 --> 00:13:55,050 so we need to take care of all of that. 470 00:13:55,050 --> 00:13:57,480 And you've noticed from previous videos in this course 471 00:13:57,480 --> 00:13:59,670 that it's a little bit difficult to do a lot of conditionals 472 00:13:59,670 --> 00:14:01,320 inside of a class string. 473 00:14:01,320 --> 00:14:03,480 So instead, a lot of times you'll either download a library 474 00:14:03,480 --> 00:14:04,980 or create your own helper function 475 00:14:04,980 --> 00:14:06,210 for handling that for you. 476 00:14:06,210 --> 00:14:08,100 I'm actually going to create our own helper function, 477 00:14:08,100 --> 00:14:09,630 I'm just gonna call it CC, 478 00:14:09,630 --> 00:14:11,670 which stands for concatenate classes. 479 00:14:11,670 --> 00:14:13,230 And I like having a short name for this 480 00:14:13,230 --> 00:14:15,210 because you're gonna be using it all over the place 481 00:14:15,210 --> 00:14:16,953 so it doesn't make sense to have a super long name. 482 00:14:16,953 --> 00:14:18,607 This is again going to be a TypeScript function 483 00:14:18,607 --> 00:14:22,440 and let's create that function right now, CC, 484 00:14:22,440 --> 00:14:24,570 and let's make sure that we export this function. 485 00:14:24,570 --> 00:14:26,640 Now, essentially the way that I want this function to work 486 00:14:26,640 --> 00:14:27,570 is I wanted to take in 487 00:14:27,570 --> 00:14:29,310 essentially a bunch of different classes. 488 00:14:29,310 --> 00:14:31,920 So an infinite number of parameters that I can take in. 489 00:14:31,920 --> 00:14:33,810 So we can use the rest parameter here 490 00:14:33,810 --> 00:14:35,670 and say that these are gonna be all of our classes. 491 00:14:35,670 --> 00:14:37,547 I want them to be in essentially an unknown array 492 00:14:37,547 --> 00:14:40,230 'cause I don't know what type any of these different classes 493 00:14:40,230 --> 00:14:41,190 are going to be. 494 00:14:41,190 --> 00:14:42,180 So when I call this function, 495 00:14:42,180 --> 00:14:43,260 I'll call CC, 496 00:14:43,260 --> 00:14:45,120 and I can parse it a function like okay, day. 497 00:14:45,120 --> 00:14:46,680 So I wanna add the class day, 498 00:14:46,680 --> 00:14:48,570 but then I wanna have some conditionals as well. 499 00:14:48,570 --> 00:14:51,030 So for example, if it's the first day 500 00:14:51,030 --> 00:14:52,350 I may want to add a different class. 501 00:14:52,350 --> 00:14:54,090 So I can write some code like this 502 00:14:54,090 --> 00:14:56,070 that's just like "is-first-day", 503 00:14:56,070 --> 00:14:57,090 just like that. 504 00:14:57,090 --> 00:14:58,110 Actually, it'd probably be like this. 505 00:14:58,110 --> 00:14:58,943 There we go. 506 00:14:58,943 --> 00:14:59,776 So I have a class day 507 00:14:59,776 --> 00:15:01,620 that's going to be applied automatically, 508 00:15:01,620 --> 00:15:03,300 and then I have a bunch of conditionals 509 00:15:03,300 --> 00:15:05,152 that are either going to return to me false 510 00:15:05,152 --> 00:15:07,200 if this is not the first day 511 00:15:07,200 --> 00:15:09,060 or it's going to return to me a string, 512 00:15:09,060 --> 00:15:11,580 which is the actual class I want to render out. 513 00:15:11,580 --> 00:15:12,630 So really all I wanna do 514 00:15:12,630 --> 00:15:13,980 is I want to take this array 515 00:15:13,980 --> 00:15:16,560 and I'm gonna remove everything that's not a string, 516 00:15:16,560 --> 00:15:17,910 and that will remove anything 517 00:15:17,910 --> 00:15:19,950 that returns for example, false or undefined 518 00:15:19,950 --> 00:15:20,970 or anything like that. 519 00:15:20,970 --> 00:15:23,130 So I can parse all these different conditionals in there 520 00:15:23,130 --> 00:15:25,860 and if they actually evaluate out to a string, 521 00:15:25,860 --> 00:15:27,510 it'll render that string as a class, 522 00:15:27,510 --> 00:15:29,850 otherwise it'll just completely remove it from the array, 523 00:15:29,850 --> 00:15:31,500 which is exactly what I want. 524 00:15:31,500 --> 00:15:33,243 So here I can just return. 525 00:15:34,320 --> 00:15:35,153 Oops! 526 00:15:35,153 --> 00:15:35,986 Return. 527 00:15:35,986 --> 00:15:37,170 I can take my class's array 528 00:15:37,170 --> 00:15:38,790 and what I wanna do is I wanna filter. 529 00:15:38,790 --> 00:15:41,250 And essentially I wanna take each one of the values 530 00:15:41,250 --> 00:15:42,083 inside the array 531 00:15:42,083 --> 00:15:43,440 and I wanna just check to see 532 00:15:43,440 --> 00:15:47,460 if the type of that variable is equal to a string. 533 00:15:47,460 --> 00:15:48,540 If so, I wanna keep it, 534 00:15:48,540 --> 00:15:50,190 otherwise I want to remove it. 535 00:15:50,190 --> 00:15:53,100 Then finally, I want to join this on an actual space. 536 00:15:53,100 --> 00:15:54,900 So it's taking this array of values 537 00:15:54,900 --> 00:15:56,190 that are some there conditional, 538 00:15:56,190 --> 00:15:58,110 some are actually applied, some aren't applied. 539 00:15:58,110 --> 00:16:00,120 It's removing all the ones that don't make sense 540 00:16:00,120 --> 00:16:03,090 and then it's concatenating these all into a single string. 541 00:16:03,090 --> 00:16:03,923 So in our case, 542 00:16:03,923 --> 00:16:06,300 if we had our code like this and it was the first day, 543 00:16:06,300 --> 00:16:09,000 our return value would just be day and first-day, 544 00:16:09,000 --> 00:16:09,930 just like that. 545 00:16:09,930 --> 00:16:11,070 But if first day was false, 546 00:16:11,070 --> 00:16:12,895 our return value would just look like this, 547 00:16:12,895 --> 00:16:14,460 where it's just the string day. 548 00:16:14,460 --> 00:16:15,870 That's exactly what this function does. 549 00:16:15,870 --> 00:16:16,703 And it's really nice 550 00:16:16,703 --> 00:16:17,536 'cause it makes it a lot easier 551 00:16:17,536 --> 00:16:19,290 to apply different conditional classes, 552 00:16:19,290 --> 00:16:20,550 'cause otherwise to write this 553 00:16:20,550 --> 00:16:22,170 we would have to do something that looks like this. 554 00:16:22,170 --> 00:16:23,340 We would have day 555 00:16:23,340 --> 00:16:26,090 and then we would need to come in here with isFirstDay. 556 00:16:28,020 --> 00:16:32,250 Then we would put in here that we would return first-day, 557 00:16:32,250 --> 00:16:34,290 otherwise we would return out undefined 558 00:16:34,290 --> 00:16:36,210 just to make sure we don't have like null being showing up 559 00:16:36,210 --> 00:16:37,500 or false inside of it. 560 00:16:37,500 --> 00:16:39,150 And we would have to do this all over the place. 561 00:16:39,150 --> 00:16:41,100 It's much longer, much more convoluted, 562 00:16:41,100 --> 00:16:42,360 which is why I like doing this 563 00:16:42,360 --> 00:16:44,070 with this helper function instead. 564 00:16:44,070 --> 00:16:45,150 This is entirely optional 565 00:16:45,150 --> 00:16:46,950 but as you get more complicated code, 566 00:16:46,950 --> 00:16:48,420 it makes sense to create something like this 567 00:16:48,420 --> 00:16:49,800 or use a library for it. 568 00:16:49,800 --> 00:16:51,300 So let's see what this looks like in action. 569 00:16:51,300 --> 00:16:53,520 In this case, we obviously need a custom class name. 570 00:16:53,520 --> 00:16:55,410 It's gonna come from that CC function. 571 00:16:55,410 --> 00:16:57,780 By default, we know that day is always going to be applied 572 00:16:57,780 --> 00:16:59,040 to every single one. 573 00:16:59,040 --> 00:17:00,510 And then we have some conditional classes 574 00:17:00,510 --> 00:17:02,040 we want to apply as well. 575 00:17:02,040 --> 00:17:04,140 So I'm just gonna remove all this here, 576 00:17:04,140 --> 00:17:05,490 get this fixed up. 577 00:17:05,490 --> 00:17:06,323 There we go. 578 00:17:07,170 --> 00:17:08,040 And then what we want to do 579 00:17:08,040 --> 00:17:10,260 is we want to apply those different conditional classes. 580 00:17:10,260 --> 00:17:11,970 Make sure I close off my div as well. 581 00:17:11,970 --> 00:17:14,550 And we also want to import that CC function. 582 00:17:14,550 --> 00:17:15,690 So by default, this is working 583 00:17:15,690 --> 00:17:17,970 in just applying the class data, everything. 584 00:17:17,970 --> 00:17:19,980 But now, what if we want to apply conditionally 585 00:17:19,980 --> 00:17:21,630 that non-month-day class? 586 00:17:21,630 --> 00:17:23,550 So if we're in a month that is not the current month, 587 00:17:23,550 --> 00:17:25,380 I want to apply a specific class. 588 00:17:25,380 --> 00:17:26,213 So what I can do here 589 00:17:26,213 --> 00:17:28,423 is I can use the function isSameMonth. 590 00:17:29,820 --> 00:17:30,653 There we go. 591 00:17:30,653 --> 00:17:33,210 And I can actually check if my day is the same month 592 00:17:33,210 --> 00:17:34,770 as my selected month. 593 00:17:34,770 --> 00:17:35,900 If that is not true, 594 00:17:35,900 --> 00:17:38,850 oh, then I want to apply a specific style. 595 00:17:38,850 --> 00:17:41,340 In our case, it's non-month-day. 596 00:17:41,340 --> 00:17:42,180 Give that a quick save, 597 00:17:42,180 --> 00:17:44,190 and now you can see all these months at the top 598 00:17:44,190 --> 00:17:45,630 and this day at the very bottom, 599 00:17:45,630 --> 00:17:47,100 these are actually given a different style 600 00:17:47,100 --> 00:17:49,230 'cause they're not in the current month. 601 00:17:49,230 --> 00:17:50,400 I can do the exact same thing 602 00:17:50,400 --> 00:17:52,944 by checking to see if it's before the current day. 603 00:17:52,944 --> 00:17:55,170 So I can do that by just coming here, 604 00:17:55,170 --> 00:17:56,187 placing a comma at the end of this. 605 00:17:56,187 --> 00:17:59,503 And I wanna check the isBefore function from date-fns. 606 00:17:59,503 --> 00:18:01,527 I wanna check before the end of day 607 00:18:01,527 --> 00:18:04,230 and I wanna check if the end of today 608 00:18:04,230 --> 00:18:08,130 is before the current day by saying new date, 609 00:18:08,130 --> 00:18:09,900 that's just saying it's a day in the past, 610 00:18:09,900 --> 00:18:12,300 and I wanna render out that old month day. 611 00:18:12,300 --> 00:18:16,170 So I can just say old-month-day. 612 00:18:16,170 --> 00:18:17,003 There we go. 613 00:18:17,003 --> 00:18:18,060 And now you can see all these days 614 00:18:18,060 --> 00:18:19,080 that are before the current day, 615 00:18:19,080 --> 00:18:21,510 which today is the 23rd of June in my case, 616 00:18:21,510 --> 00:18:24,840 are given this great partially opaque color 617 00:18:24,840 --> 00:18:26,700 and all these other days have that fully opaque, 618 00:18:26,700 --> 00:18:28,380 which is exactly what we want. 619 00:18:28,380 --> 00:18:30,690 And the reason I had to get the end of the current day 620 00:18:30,690 --> 00:18:32,280 is because I wanted to make sure 621 00:18:32,280 --> 00:18:36,000 that the current day is always displayed as the darker color 622 00:18:36,000 --> 00:18:37,290 because it's always the current day. 623 00:18:37,290 --> 00:18:39,510 I don't want the current day to ever appear in the past. 624 00:18:39,510 --> 00:18:41,580 And if we didn't do the end of day here, 625 00:18:41,580 --> 00:18:42,413 there is scenarios 626 00:18:42,413 --> 00:18:44,070 where the current day would show up grayed out. 627 00:18:44,070 --> 00:18:46,050 As you can see the 23rd is now grayed out, 628 00:18:46,050 --> 00:18:48,630 while before it had that darker color just like we want. 629 00:18:48,630 --> 00:18:50,070 So just by using this helper function, 630 00:18:50,070 --> 00:18:51,630 you can see that this has cleaned up our code 631 00:18:51,630 --> 00:18:53,910 for our actual string for our classes just a little bit. 632 00:18:53,910 --> 00:18:55,590 It's not like massively cleaner, 633 00:18:55,590 --> 00:18:58,140 but it is definitely cleaner than it was before. 634 00:18:58,140 --> 00:18:58,980 Now, the next thing we need to do 635 00:18:58,980 --> 00:19:00,660 is move down here to the day-number, 636 00:19:00,660 --> 00:19:02,490 to check if it is the current day as well. 637 00:19:02,490 --> 00:19:06,090 I'm gonna do the exact same thing with that CC function. 638 00:19:06,090 --> 00:19:06,923 By default, 639 00:19:06,923 --> 00:19:09,000 we know that we're going to parse in the day-number here. 640 00:19:09,000 --> 00:19:11,220 And then if the current day isToday, 641 00:19:11,220 --> 00:19:13,170 so if our day isToday, 642 00:19:13,170 --> 00:19:15,510 then I wanna render out the today class as well. 643 00:19:15,510 --> 00:19:17,010 So we'll say today, 644 00:19:17,010 --> 00:19:18,330 I just wanna close that off. 645 00:19:18,330 --> 00:19:19,200 Now, if I get that to save, 646 00:19:19,200 --> 00:19:21,180 you can see the 23rd has a blue circle around it 647 00:19:21,180 --> 00:19:22,410 'cause that is the current day, 648 00:19:22,410 --> 00:19:25,440 this evaluates to true and it's applying the today class. 649 00:19:25,440 --> 00:19:26,970 So now if we really quickly look at the README, 650 00:19:26,970 --> 00:19:28,650 we've taken care of most of this top section. 651 00:19:28,650 --> 00:19:29,790 We've created a calendar component 652 00:19:29,790 --> 00:19:31,500 that renderers the current month by default. 653 00:19:31,500 --> 00:19:33,240 That's exactly what we have right here. 654 00:19:33,240 --> 00:19:34,173 Now we need to make it 655 00:19:34,173 --> 00:19:35,640 so that the buttons to move backward and forward 656 00:19:35,640 --> 00:19:37,560 as well as go to the current day actually work, 657 00:19:37,560 --> 00:19:38,820 'cause right now as you can see, 658 00:19:38,820 --> 00:19:39,960 they do nothing at all. 659 00:19:39,960 --> 00:19:40,923 So let's go ahead and do that now. 660 00:19:40,923 --> 00:19:42,917 What we can do is we can just minimize this calendarDay 661 00:19:42,917 --> 00:19:45,147 'cause we don't really need to work on this right now, 662 00:19:45,147 --> 00:19:47,367 and we can move up here to the actual calendar itself 663 00:19:47,367 --> 00:19:48,660 inside of the header. 664 00:19:48,660 --> 00:19:51,210 So let's minimize that and open up the header section. 665 00:19:51,210 --> 00:19:52,043 So as you can see, 666 00:19:52,043 --> 00:19:53,340 we have three different buttons 667 00:19:53,340 --> 00:19:54,803 that we need to be able to make sure 668 00:19:54,803 --> 00:19:55,770 that we add on a click event listeners 669 00:19:55,770 --> 00:19:57,000 to set the selected month. 670 00:19:57,000 --> 00:19:58,470 So we click the today button. 671 00:19:58,470 --> 00:20:00,540 So let's add up an onClick on the side to that. 672 00:20:00,540 --> 00:20:03,870 What we wanna do is we wanna set the selected month. 673 00:20:03,870 --> 00:20:04,703 There we go. 674 00:20:04,703 --> 00:20:05,730 And we wanna set it just to the current date, 675 00:20:05,730 --> 00:20:06,990 so we'll just say new Date. 676 00:20:06,990 --> 00:20:07,823 There we go. 677 00:20:07,823 --> 00:20:08,656 So now if I click today, 678 00:20:08,656 --> 00:20:09,720 it'll bring me back to the current day, 679 00:20:09,720 --> 00:20:10,680 but we can't really test that 680 00:20:10,680 --> 00:20:12,630 until we get some of these other buttons working. 681 00:20:12,630 --> 00:20:14,130 So for the backwards button, 682 00:20:14,130 --> 00:20:16,787 we wanna again set up an onClick event listener for this 683 00:20:16,787 --> 00:20:20,070 and I want to call that setSelectedMonth function. 684 00:20:20,070 --> 00:20:21,540 And here I wanna be able to take in 685 00:20:21,540 --> 00:20:22,377 whatever the current month is 686 00:20:22,377 --> 00:20:24,150 and I wanna subtract one from it. 687 00:20:24,150 --> 00:20:25,590 So I have my currently selected month, 688 00:20:25,590 --> 00:20:26,730 we'll just call it "m" 689 00:20:26,730 --> 00:20:28,260 and i wanna subtract a month from it 690 00:20:28,260 --> 00:20:30,390 so we'll call this subMonths function, 691 00:20:30,390 --> 00:20:32,790 and I wanna subtract one month from this function. 692 00:20:32,790 --> 00:20:35,100 So now if I click save and click this back button, 693 00:20:35,100 --> 00:20:37,320 you'll notice it's moving me backwards in the months. 694 00:20:37,320 --> 00:20:39,510 My day here is not actually changing us, 695 00:20:39,510 --> 00:20:40,410 so we need to make sure we change it. 696 00:20:40,410 --> 00:20:41,837 If I click today, 697 00:20:41,837 --> 00:20:42,960 you'll also see it brings me to the current month. 698 00:20:42,960 --> 00:20:44,820 So here we're rendering out June 23rd, 699 00:20:44,820 --> 00:20:45,720 I need to change this. 700 00:20:45,720 --> 00:20:48,120 So we need to say that we wanna format this date. 701 00:20:48,120 --> 00:20:48,953 And to format this date, 702 00:20:48,953 --> 00:20:50,850 I want to take in my selectedMonth. 703 00:20:50,850 --> 00:20:52,080 And here I wanna render out 704 00:20:52,080 --> 00:20:53,940 the month name as well as the year. 705 00:20:53,940 --> 00:20:55,920 So we can say we wanna render out the month, 706 00:20:55,920 --> 00:20:58,110 and in our case I want the long version of the month. 707 00:20:58,110 --> 00:20:59,467 I want the full word to show up. 708 00:20:59,467 --> 00:21:01,437 And for the year, we can come in here 709 00:21:01,437 --> 00:21:02,910 and I want the numeric version 710 00:21:02,910 --> 00:21:04,920 'cause I want all four numbers inside the month. 711 00:21:04,920 --> 00:21:05,940 So now, if I give that a save, 712 00:21:05,940 --> 00:21:06,773 if I move backwards, 713 00:21:06,773 --> 00:21:08,610 you'll notice my month is actually updating properly 714 00:21:08,610 --> 00:21:09,690 as well as my year. 715 00:21:09,690 --> 00:21:12,090 And today is bringing me back to the current day. 716 00:21:12,090 --> 00:21:13,770 Now, let's just copy this on click function 717 00:21:13,770 --> 00:21:15,450 'cause it's gonna be essentially exactly the same 718 00:21:15,450 --> 00:21:16,530 inside of here. 719 00:21:16,530 --> 00:21:18,510 We're gonna call the addMonths function 720 00:21:18,510 --> 00:21:19,924 instead of the subMonths 721 00:21:19,924 --> 00:21:21,780 'cause we wanna add one month instead of remove one. 722 00:21:21,780 --> 00:21:23,880 So now you can see we can move forward in the months, 723 00:21:23,880 --> 00:21:25,170 we can move backwards in the months, 724 00:21:25,170 --> 00:21:27,300 and we can jump to the current month as well. 725 00:21:27,300 --> 00:21:28,133 So with that done, 726 00:21:28,133 --> 00:21:29,880 that actually takes care of the very first step 727 00:21:29,880 --> 00:21:30,750 inside of our README 728 00:21:30,750 --> 00:21:33,120 to create the actual calendar section. 729 00:21:33,120 --> 00:21:35,040 The next thing we need to work on is the second step, 730 00:21:35,040 --> 00:21:36,840 which allows us to actually add events. 731 00:21:36,840 --> 00:21:37,803 And then in turn, is going to make sure 732 00:21:37,803 --> 00:21:39,570 that we need to render out these events 733 00:21:39,570 --> 00:21:40,890 as well in the proper order, 734 00:21:40,890 --> 00:21:42,570 which is step number three. 735 00:21:42,570 --> 00:21:44,520 This is where all of the more complex code 736 00:21:44,520 --> 00:21:45,920 for this is going to come in. 737 00:21:45,920 --> 00:21:47,070 So the very first thing we need to do 738 00:21:47,070 --> 00:21:48,360 is when we click this add button, 739 00:21:48,360 --> 00:21:49,620 we wanna be able to pop up a modal 740 00:21:49,620 --> 00:21:51,510 that allows us to create a new event. 741 00:21:51,510 --> 00:21:52,890 We also need to build able the store events 742 00:21:52,890 --> 00:21:54,120 and all of that fun. 743 00:21:54,120 --> 00:21:55,230 So the very first thing I wanna do 744 00:21:55,230 --> 00:21:56,970 is actually create a context. 745 00:21:56,970 --> 00:21:58,290 Now, the reason I'm creating a context 746 00:21:58,290 --> 00:22:01,080 is because every single thing inside of our calendar 747 00:22:01,080 --> 00:22:03,390 is going to depend on these events. 748 00:22:03,390 --> 00:22:05,100 So every single thing in our application 749 00:22:05,100 --> 00:22:06,150 depends on these events. 750 00:22:06,150 --> 00:22:07,620 So it makes sense to put this in a context 751 00:22:07,620 --> 00:22:09,780 so we don't have to constantly parse down our events 752 00:22:09,780 --> 00:22:13,170 and all the event update or functions inside of our props. 753 00:22:13,170 --> 00:22:15,630 We can just do that all inside of one context. 754 00:22:15,630 --> 00:22:17,070 I'm gonna create a new folder, 755 00:22:17,070 --> 00:22:20,490 I'm gonna call this "context," just like that. 756 00:22:20,490 --> 00:22:22,890 Inside here, I want to create an events context. 757 00:22:22,890 --> 00:22:24,275 So we're gonna call this events.tsx 758 00:22:24,275 --> 00:22:25,980 and that's 'cause we're gonna put 759 00:22:25,980 --> 00:22:28,590 some jsx code inside of here. 760 00:22:28,590 --> 00:22:31,590 And we want to create our context just like this. 761 00:22:31,590 --> 00:22:32,820 So we'll just say new... 762 00:22:32,820 --> 00:22:33,903 Oh, I'm sorry, 763 00:22:33,903 --> 00:22:35,251 createContext from React. 764 00:22:35,251 --> 00:22:36,570 There we go. 765 00:22:36,570 --> 00:22:39,300 And by default, we need to give this a value of null. 766 00:22:39,300 --> 00:22:40,260 We also need to type 767 00:22:40,260 --> 00:22:42,750 what is going to be inside of this context right here. 768 00:22:42,750 --> 00:22:45,540 So we want this to be our EventsContext type 769 00:22:45,540 --> 00:22:46,920 or we want it to be null. 770 00:22:46,920 --> 00:22:49,080 These are the only two types that this thing can be. 771 00:22:49,080 --> 00:22:51,087 And the reason for that is 'cause our default value is null. 772 00:22:51,087 --> 00:22:52,800 And if you remember, the Typescript video 773 00:22:52,800 --> 00:22:54,150 where I talked about context, 774 00:22:54,150 --> 00:22:56,330 we're using that exact same pattern here. 775 00:22:56,330 --> 00:23:00,150 So now, it's create a type for my events context. 776 00:23:00,150 --> 00:23:00,983 There we go. 777 00:23:00,983 --> 00:23:02,250 So that we get rid of some of those errors. 778 00:23:02,250 --> 00:23:03,240 And now we need to brainstorm 779 00:23:03,240 --> 00:23:04,860 what is going to be inside here. 780 00:23:04,860 --> 00:23:06,600 Well, obviously the very first thing we need 781 00:23:06,600 --> 00:23:08,490 is essentially all of our events. 782 00:23:08,490 --> 00:23:09,600 So we need our events 783 00:23:09,600 --> 00:23:11,460 which are going to be an array of event objects. 784 00:23:11,460 --> 00:23:13,290 And I'm actually gonna create this as a separate type 785 00:23:13,290 --> 00:23:14,370 'cause we're gonna probably use this 786 00:23:14,370 --> 00:23:16,530 in many places in our application. 787 00:23:16,530 --> 00:23:18,990 So we're gonna create an Event type just like this. 788 00:23:18,990 --> 00:23:19,980 And we know that our event 789 00:23:19,980 --> 00:23:21,570 essentially is going to have a name, 790 00:23:21,570 --> 00:23:23,250 it's going to have some other properties inside of it. 791 00:23:23,250 --> 00:23:25,260 If we look at our README here, you can see we have a name, 792 00:23:25,260 --> 00:23:27,900 an allDay, startTime and endTime and a color. 793 00:23:27,900 --> 00:23:29,760 We also need to make sure we have an ID as well 794 00:23:29,760 --> 00:23:32,220 so we know what the unique event is going to be, 795 00:23:32,220 --> 00:23:34,710 just so we can make sure we have a key for React. 796 00:23:34,710 --> 00:23:37,170 So let's create an ID, we'll use a string for that. 797 00:23:37,170 --> 00:23:38,610 Then what we're gonna do is we're gonna have a name, 798 00:23:38,610 --> 00:23:39,443 which is a string. 799 00:23:39,443 --> 00:23:40,950 And again, this is going to be required 800 00:23:40,950 --> 00:23:42,240 'cause it is a required field. 801 00:23:42,240 --> 00:23:43,410 We're gonna have a color, 802 00:23:43,410 --> 00:23:45,480 and you may think we just put this as a string, 803 00:23:45,480 --> 00:23:46,890 but technically our color 804 00:23:46,890 --> 00:23:49,182 actually needs to be either red, green or blue. 805 00:23:49,182 --> 00:23:51,290 Those are our only three color options. 806 00:23:51,290 --> 00:23:53,490 If we look at our README, you'll notice I say it right here, 807 00:23:53,490 --> 00:23:55,620 the color must be red, blue, or green. 808 00:23:55,620 --> 00:23:56,453 So what we could do, 809 00:23:56,453 --> 00:23:57,740 there's a few different ways you could do this, 810 00:23:57,740 --> 00:23:59,790 is you could say we're gonna have red, 811 00:23:59,790 --> 00:24:01,070 we're gonna have green... 812 00:24:02,070 --> 00:24:04,413 Oops, green, and we're gonna have blue. 813 00:24:05,730 --> 00:24:06,990 And now if we hover over this color, 814 00:24:06,990 --> 00:24:09,420 you can see the type is either red, green or blue. 815 00:24:09,420 --> 00:24:11,820 But I also want to use those exact same colors 816 00:24:11,820 --> 00:24:12,905 inside of my code as well 817 00:24:12,905 --> 00:24:14,790 because I wanna be able to loop through them. 818 00:24:14,790 --> 00:24:17,670 So the best thing for us to do is actually create an array. 819 00:24:17,670 --> 00:24:20,133 We're gonna call this EVENT_COLORS. 820 00:24:20,133 --> 00:24:21,180 And we're gonna set this to an array 821 00:24:21,180 --> 00:24:26,180 that has red, green, and blue inside of it. 822 00:24:27,300 --> 00:24:29,910 And then I can actually use the type of that inside of here. 823 00:24:29,910 --> 00:24:30,743 So what I can do 824 00:24:30,743 --> 00:24:33,756 is I can say I wanna get the typeof my EVENT_COLORS. 825 00:24:33,756 --> 00:24:36,707 And I specifically want to get each number property from it, 826 00:24:36,707 --> 00:24:38,730 'cause essentially I have different indexes, 827 00:24:38,730 --> 00:24:40,380 zero, one and two, 828 00:24:40,380 --> 00:24:41,550 that I want to get from it. 829 00:24:41,550 --> 00:24:43,710 Now, this isn't quite enough because if we hover over this, 830 00:24:43,710 --> 00:24:45,690 you can now see the type of color is a string. 831 00:24:45,690 --> 00:24:47,370 And that's because we need to say that this array 832 00:24:47,370 --> 00:24:49,200 is going to be as a constant variable. 833 00:24:49,200 --> 00:24:50,820 By saying as constant, 834 00:24:50,820 --> 00:24:52,020 we're essentially saying that this array 835 00:24:52,020 --> 00:24:54,150 is always just these three values. 836 00:24:54,150 --> 00:24:55,170 And this code right here 837 00:24:55,170 --> 00:24:56,003 is going to allow us 838 00:24:56,003 --> 00:24:57,510 to get each of those values from our array. 839 00:24:57,510 --> 00:24:58,343 And as you can see here, 840 00:24:58,343 --> 00:25:00,540 this is now the value of red, green or blue. 841 00:25:00,540 --> 00:25:01,373 This is great 842 00:25:01,373 --> 00:25:03,240 because we can actually use this array in our JavaScript 843 00:25:03,240 --> 00:25:04,080 to be able to render out 844 00:25:04,080 --> 00:25:05,970 all the different buttons for red, green and blue, 845 00:25:05,970 --> 00:25:06,953 while also using it as a type 846 00:25:06,953 --> 00:25:09,150 instead of Typescript right here. 847 00:25:09,150 --> 00:25:10,860 Now, the last thing each of our events need 848 00:25:10,860 --> 00:25:12,600 is a day that they're associated with. 849 00:25:12,600 --> 00:25:14,040 So we're gonna parse in a date here, 850 00:25:14,040 --> 00:25:15,870 which is a type of date. 851 00:25:15,870 --> 00:25:18,120 Now comes the more confusing part about our event 852 00:25:18,120 --> 00:25:21,240 because our event can either be an all day event 853 00:25:21,240 --> 00:25:24,270 or can it be an event that has a start time and an end time, 854 00:25:24,270 --> 00:25:25,350 but it cannot have both. 855 00:25:25,350 --> 00:25:27,780 It cannot have a start time, end time and all day. 856 00:25:27,780 --> 00:25:29,610 Obviously, that's not possible. 857 00:25:29,610 --> 00:25:32,370 So what we need to do is we know all of our events have this 858 00:25:32,370 --> 00:25:33,390 and then our events 859 00:25:33,390 --> 00:25:35,460 are broken into essentially two different types. 860 00:25:35,460 --> 00:25:37,830 So the best way to actually display this in TypeScript 861 00:25:37,830 --> 00:25:39,180 is if we put an ampersand here 862 00:25:39,180 --> 00:25:40,890 that's saying that we want to concatenate 863 00:25:40,890 --> 00:25:42,450 two different types together. 864 00:25:42,450 --> 00:25:43,740 And here I want to say, 865 00:25:43,740 --> 00:25:45,390 one of two different types 866 00:25:45,390 --> 00:25:46,910 are going to be concatenated to this. 867 00:25:46,910 --> 00:25:47,940 So the very first type 868 00:25:47,940 --> 00:25:50,280 is where our allDay is set to false. 869 00:25:50,280 --> 00:25:52,050 For allDay is set to false, 870 00:25:52,050 --> 00:25:53,880 well, then we're going to have a startTime 871 00:25:53,880 --> 00:25:54,930 which is just a string 872 00:25:54,930 --> 00:25:57,480 because that's the way that the time input works 873 00:25:57,480 --> 00:25:59,010 inside of JavaScript. 874 00:25:59,010 --> 00:26:03,600 And our endTime which is also going to be a string, 875 00:26:03,600 --> 00:26:04,560 just like that. 876 00:26:04,560 --> 00:26:05,850 So if allDay is false, 877 00:26:05,850 --> 00:26:08,040 this is what our actual type looks like. 878 00:26:08,040 --> 00:26:08,873 But what we wanna do 879 00:26:08,873 --> 00:26:10,680 is we wanna wrap this inside of parentheses 880 00:26:10,680 --> 00:26:12,660 'cause we also want another type. 881 00:26:12,660 --> 00:26:14,910 So we can just copy this exact same type 882 00:26:14,910 --> 00:26:16,170 and I'll paste it down inside of here. 883 00:26:16,170 --> 00:26:17,220 Give this a quick save. 884 00:26:17,220 --> 00:26:19,710 So by default, what this is saying is if allDay is false, 885 00:26:19,710 --> 00:26:21,060 our startTime is going to be a string 886 00:26:21,060 --> 00:26:22,950 and our endTime is going to be a string. 887 00:26:22,950 --> 00:26:25,470 If our allDay instead is set to true, 888 00:26:25,470 --> 00:26:28,860 well, then our startTime here needs to be a type of never. 889 00:26:28,860 --> 00:26:30,270 And we also need to put this print 890 00:26:30,270 --> 00:26:31,170 or this question mark here, 891 00:26:31,170 --> 00:26:32,003 essentially saying 892 00:26:32,003 --> 00:26:34,380 that the startTime is never going to be defined at all. 893 00:26:34,380 --> 00:26:35,310 Same thing here, 894 00:26:35,310 --> 00:26:36,780 endTime is optionally defined 895 00:26:36,780 --> 00:26:38,940 and we need to make sure it never has a type at all. 896 00:26:38,940 --> 00:26:39,840 So if allDay is true, 897 00:26:39,840 --> 00:26:42,210 we can never have a startTime or an endTime. 898 00:26:42,210 --> 00:26:43,620 And now if we hover over our event, 899 00:26:43,620 --> 00:26:45,690 you can see it has this rather complicated type. 900 00:26:45,690 --> 00:26:46,770 But really, all it's saying 901 00:26:46,770 --> 00:26:48,750 is that if we define allDay as true, 902 00:26:48,750 --> 00:26:50,850 we cannot define a start date or endTime. 903 00:26:50,850 --> 00:26:52,080 But if we have allDay as false, 904 00:26:52,080 --> 00:26:54,570 we must define a startTime and an endTime. 905 00:26:54,570 --> 00:26:56,100 We can really easily see that. 906 00:26:56,100 --> 00:26:56,940 But if I just come in here 907 00:26:56,940 --> 00:27:00,060 and I just say const e equals an event, 908 00:27:00,060 --> 00:27:01,830 so we just wanna type it as an Event, 909 00:27:01,830 --> 00:27:03,450 we're gonna set that equal to an object. 910 00:27:03,450 --> 00:27:04,830 You can see if I do my auto complete, 911 00:27:04,830 --> 00:27:06,150 I have all these different fields. 912 00:27:06,150 --> 00:27:08,370 If I set allDay to be true, 913 00:27:08,370 --> 00:27:10,440 now, you'll notice that startTime here, 914 00:27:10,440 --> 00:27:12,450 if I try to set this startTime to anything, 915 00:27:12,450 --> 00:27:13,440 I'm going to get an error. 916 00:27:13,440 --> 00:27:14,820 It doesn't actually show up an error here, 917 00:27:14,820 --> 00:27:16,050 but if I hover above my e, 918 00:27:16,050 --> 00:27:17,490 you can see it's saying that this type 919 00:27:17,490 --> 00:27:19,680 is not actually able to be assigned 920 00:27:19,680 --> 00:27:21,870 and that's because it's missing some of the properties. 921 00:27:21,870 --> 00:27:22,703 So if we come in here, 922 00:27:22,703 --> 00:27:23,910 let's just define everything that we need. 923 00:27:23,910 --> 00:27:25,403 We have a name that is going to be a string. 924 00:27:25,403 --> 00:27:28,020 You can see we have an id that's going to be a string. 925 00:27:28,020 --> 00:27:29,880 Our color, we'll just set as red. 926 00:27:29,880 --> 00:27:32,130 So this has all the different properties that we need. 927 00:27:32,130 --> 00:27:34,044 You'll notice again, we're getting this error right here. 928 00:27:34,044 --> 00:27:35,850 Oh, we need to add date. 929 00:27:35,850 --> 00:27:37,806 Sorry, date is new date. 930 00:27:37,806 --> 00:27:38,970 There we go. 931 00:27:38,970 --> 00:27:40,320 So that is all the different properties we need. 932 00:27:40,320 --> 00:27:41,457 But again, we're still getting an error. 933 00:27:41,457 --> 00:27:42,960 And if we scroll down, 934 00:27:42,960 --> 00:27:45,090 property of type startTime is not compatible. 935 00:27:45,090 --> 00:27:46,920 Type string is not assigned to undefined. 936 00:27:46,920 --> 00:27:49,530 And that's 'cause this startTime must be undefined 937 00:27:49,530 --> 00:27:52,200 because our allDay here is set to true. 938 00:27:52,200 --> 00:27:54,963 If allDay was set to false instead, 939 00:27:54,963 --> 00:27:58,230 then what we could do is we could add our endTime on here 940 00:27:58,230 --> 00:27:59,190 and give it as a string. 941 00:27:59,190 --> 00:28:00,870 And now you'll notice that the error has gone away 942 00:28:00,870 --> 00:28:02,940 and it's essentially just saying this is not being defined, 943 00:28:02,940 --> 00:28:05,010 that's why it's giving me a little bit of an underline. 944 00:28:05,010 --> 00:28:06,810 But again, as soon as this changes to true, 945 00:28:06,810 --> 00:28:07,643 I'm getting an error 946 00:28:07,643 --> 00:28:08,970 'cause I have endTime and startTime defined. 947 00:28:08,970 --> 00:28:09,840 If I remove those, 948 00:28:09,840 --> 00:28:10,890 you'll notice the error goes away 949 00:28:10,890 --> 00:28:12,690 because now it doesn't have those. 950 00:28:12,690 --> 00:28:13,650 So this is just making sure, 951 00:28:13,650 --> 00:28:16,410 depending on what my allDay variable is, true or false, 952 00:28:16,410 --> 00:28:19,110 that my startTime is always going to be assigned properly. 953 00:28:19,110 --> 00:28:20,190 It's a little bit confusing 954 00:28:20,190 --> 00:28:22,530 but it's going to make sense as we start to use this code 955 00:28:22,530 --> 00:28:24,740 because it makes it a lot easier for us to use. 956 00:28:24,740 --> 00:28:26,940 So now let's go ahead and actually define the provider 957 00:28:26,940 --> 00:28:28,140 that's going to wrap everything. 958 00:28:28,140 --> 00:28:30,653 So we're gonna create a function EventsProvider. 959 00:28:32,190 --> 00:28:33,023 There we go. 960 00:28:33,023 --> 00:28:34,623 This is gonna take in some children. 961 00:28:36,757 --> 00:28:37,590 And inside of here, 962 00:28:37,590 --> 00:28:40,650 we just want to take our Context.Provider, 963 00:28:40,650 --> 00:28:42,210 and a wrap of those children. 964 00:28:42,210 --> 00:28:43,635 Super straightforward stuff right here. 965 00:28:43,635 --> 00:28:46,023 And let's give this a type EventsProviderProps. 966 00:28:50,040 --> 00:28:52,690 Type for EventsProviderProps 967 00:28:54,120 --> 00:28:55,710 is gonna be a children prop, 968 00:28:55,710 --> 00:28:57,933 which is going to be a React.ReactNode. 969 00:28:59,010 --> 00:28:59,843 There we go. 970 00:28:59,843 --> 00:29:01,470 And if we wanna make this a little bit cleaner, 971 00:29:01,470 --> 00:29:03,327 we can remove the actual import there 972 00:29:03,327 --> 00:29:04,860 and just import this manually 973 00:29:04,860 --> 00:29:07,380 so we have ReactNode being shown up here. 974 00:29:07,380 --> 00:29:09,660 Now, if I make sure I spell provider correctly. 975 00:29:09,660 --> 00:29:10,493 There we go, 976 00:29:10,493 --> 00:29:11,340 that should link everything up. 977 00:29:11,340 --> 00:29:12,630 And as you can see, it's working. 978 00:29:12,630 --> 00:29:14,580 I just need to provide this a value, 979 00:29:14,580 --> 00:29:17,310 which by default we're just gonna set this to null for now, 980 00:29:17,310 --> 00:29:19,350 just so we get rid of all of our different errors. 981 00:29:19,350 --> 00:29:21,390 Now, what I'm gonna do is I'm gonna export this function 982 00:29:21,390 --> 00:29:22,920 'cause we're obviously going to be using this 983 00:29:22,920 --> 00:29:23,850 inside of our code 984 00:29:23,850 --> 00:29:26,733 to wrap everything that's dealing with all of our events. 985 00:29:26,733 --> 00:29:28,910 Now, inside here we need to actually store our events. 986 00:29:28,910 --> 00:29:31,140 So I'm gonna use state to do that by default. 987 00:29:31,140 --> 00:29:33,540 So we have our events and our setEvents. 988 00:29:33,540 --> 00:29:35,643 This is gonna be using local storage, 989 00:29:36,570 --> 00:29:37,650 just like that. 990 00:29:37,650 --> 00:29:39,810 And this is gonna take in an array by default. 991 00:29:39,810 --> 00:29:42,060 And actually, we're just gonna use state, not local storage. 992 00:29:42,060 --> 00:29:44,310 The local storage portion is for the bonus section, 993 00:29:44,310 --> 00:29:45,630 which we'll get to in a little bit. 994 00:29:45,630 --> 00:29:46,463 So we're gonna use state. 995 00:29:46,463 --> 00:29:47,637 By default, it's an array 996 00:29:47,637 --> 00:29:49,980 and we wanna specify this to be an Event array 997 00:29:49,980 --> 00:29:51,630 so that we actually have TypeScript typing 998 00:29:51,630 --> 00:29:52,500 'cause now as you can see here, 999 00:29:52,500 --> 00:29:55,140 we have an Event array instead of a never array. 1000 00:29:55,140 --> 00:29:56,520 So now, inside of our value here, 1001 00:29:56,520 --> 00:29:58,080 we can actually parse down the events. 1002 00:29:58,080 --> 00:29:59,880 So we can take an object that takes in our events, 1003 00:29:59,880 --> 00:30:01,296 just like that. 1004 00:30:01,296 --> 00:30:02,520 And that actually solves all the different bugs we have 1005 00:30:02,520 --> 00:30:04,590 'cause that's the only thing inside of our event context 1006 00:30:04,590 --> 00:30:05,700 that we care about. 1007 00:30:05,700 --> 00:30:08,730 We obviously probably need a way to add an event though too. 1008 00:30:08,730 --> 00:30:10,770 So we're gonna have an addEvent function. 1009 00:30:10,770 --> 00:30:12,450 And this addEvent is going to be a function. 1010 00:30:12,450 --> 00:30:13,890 Right here, it's going to return nothing 1011 00:30:13,890 --> 00:30:15,810 so we'll say it's going to return void, 1012 00:30:15,810 --> 00:30:18,570 but we need to obviously parse some information into here. 1013 00:30:18,570 --> 00:30:20,070 So we need to parse in some kind of event. 1014 00:30:20,070 --> 00:30:21,900 And you may think we just type it as an Event, like this, 1015 00:30:21,900 --> 00:30:23,700 but when we're adding an event, 1016 00:30:23,700 --> 00:30:25,590 we don't have an id to parse along. 1017 00:30:25,590 --> 00:30:29,160 Obviously, we have everything else except for the id. 1018 00:30:29,160 --> 00:30:29,993 Now, luckily, 1019 00:30:29,993 --> 00:30:31,920 TypeScript has a way for us to actually type something 1020 00:30:31,920 --> 00:30:33,847 that includes everything except for certain fields, 1021 00:30:33,847 --> 00:30:36,870 and that's by using the Omit property here. 1022 00:30:36,870 --> 00:30:38,610 So we can use this Omit type 1023 00:30:38,610 --> 00:30:39,960 and we can parse in an Event, 1024 00:30:39,960 --> 00:30:41,250 as well as the thing we want to omit, 1025 00:30:41,250 --> 00:30:42,570 which in our case is id. 1026 00:30:42,570 --> 00:30:44,400 And now, this event is going to be everything 1027 00:30:44,400 --> 00:30:45,575 except for our id. 1028 00:30:45,575 --> 00:30:49,470 So it's gonna require all these properties except for an id. 1029 00:30:49,470 --> 00:30:51,180 There's one minor problem, 1030 00:30:51,180 --> 00:30:54,480 unfortunately, the omit type inside a TypeScript 1031 00:30:54,480 --> 00:30:56,910 as well as many of the other types like pick for example, 1032 00:30:56,910 --> 00:30:59,910 do not work well if you have these union types like this. 1033 00:30:59,910 --> 00:31:01,740 So instead, we need to create our own Omit 1034 00:31:01,740 --> 00:31:03,420 that is going to work for unions. 1035 00:31:03,420 --> 00:31:05,880 And we're just gonna call this a UnionOmit. 1036 00:31:05,880 --> 00:31:07,470 I'm just gonna create a brand new file 1037 00:31:07,470 --> 00:31:09,540 that is going to be for that specific type. 1038 00:31:09,540 --> 00:31:10,710 So instead of our utils here, 1039 00:31:10,710 --> 00:31:13,020 I'm gonna create a types.ts file, 1040 00:31:13,020 --> 00:31:14,660 and it's going to define that union type. 1041 00:31:14,660 --> 00:31:19,257 So we're gonna export a type for UnionOmit. 1042 00:31:20,550 --> 00:31:21,600 And essentially, we're just gonna create 1043 00:31:21,600 --> 00:31:23,100 our own brand new omit 1044 00:31:23,100 --> 00:31:25,200 that is going to work for a union type. 1045 00:31:25,200 --> 00:31:26,033 So to do this, 1046 00:31:26,033 --> 00:31:28,710 our union type here is going to take in some properties, 1047 00:31:28,710 --> 00:31:29,543 some generics. 1048 00:31:29,543 --> 00:31:30,660 We're going to have a generic T, 1049 00:31:30,660 --> 00:31:32,250 which is going to be the thing we want to get rid of. 1050 00:31:32,250 --> 00:31:34,080 So this is our event in our case. 1051 00:31:34,080 --> 00:31:38,160 And then K here is just going to be either a string, 1052 00:31:38,160 --> 00:31:39,990 a number or a symbol. 1053 00:31:39,990 --> 00:31:40,920 And essentially, it's just saying 1054 00:31:40,920 --> 00:31:42,827 it's anything that's inside of this T property here 1055 00:31:42,827 --> 00:31:45,030 that we want to be able to omit. 1056 00:31:45,030 --> 00:31:45,867 Then we just come in here, 1057 00:31:45,867 --> 00:31:49,200 and we can say that T extends unknown, 1058 00:31:49,200 --> 00:31:50,157 just like that. 1059 00:31:50,157 --> 00:31:52,680 And we're actually gonna use this as a conditional. 1060 00:31:52,680 --> 00:31:55,350 So when T is unknown, it's going to do one thing 1061 00:31:55,350 --> 00:31:57,840 and when it's not unknown, it's going to do something else. 1062 00:31:57,840 --> 00:32:00,180 This may seem like it does essentially nothing 1063 00:32:00,180 --> 00:32:01,890 but what happens when you write out code 1064 00:32:01,890 --> 00:32:03,300 that says T extends unknown 1065 00:32:03,300 --> 00:32:06,150 or you just have some type of generic extends unknown? 1066 00:32:06,150 --> 00:32:07,980 What you're saying is if you have a union, 1067 00:32:07,980 --> 00:32:09,510 which is exactly what we have here, 1068 00:32:09,510 --> 00:32:10,343 we have a union 1069 00:32:10,343 --> 00:32:13,320 where we have this type unioned with these two types here. 1070 00:32:13,320 --> 00:32:15,653 It's going to distribute this across all the unions. 1071 00:32:15,653 --> 00:32:17,670 So when we say T extends unknown, 1072 00:32:17,670 --> 00:32:19,320 it's essentially going to take our union, 1073 00:32:19,320 --> 00:32:20,967 split it into all of its different parts 1074 00:32:20,967 --> 00:32:22,440 and it's gonna run whatever code 1075 00:32:22,440 --> 00:32:23,760 we put after this question mark here 1076 00:32:23,760 --> 00:32:25,440 for each part of our union. 1077 00:32:25,440 --> 00:32:27,753 So in our case, we want to Omit T. 1078 00:32:27,753 --> 00:32:28,680 Oh, I'm sorry. 1079 00:32:28,680 --> 00:32:30,456 Yeah, we want to Omit T here with K. 1080 00:32:30,456 --> 00:32:33,000 So we're just calling the omit function just like normal 1081 00:32:33,000 --> 00:32:34,140 with our T and K, 1082 00:32:34,140 --> 00:32:35,880 and we're just spitting out right here, 1083 00:32:35,880 --> 00:32:37,530 otherwise we're doing nothing at all. 1084 00:32:37,530 --> 00:32:38,880 So we're just taking our union 1085 00:32:38,880 --> 00:32:40,350 and we're essentially calling omit 1086 00:32:40,350 --> 00:32:41,880 on each portion of our union. 1087 00:32:41,880 --> 00:32:42,990 That's all that this code does. 1088 00:32:42,990 --> 00:32:44,550 It looks really complicated 1089 00:32:44,550 --> 00:32:46,380 but that's exactly what's happening. 1090 00:32:46,380 --> 00:32:47,820 So now if we just take this, 1091 00:32:47,820 --> 00:32:49,140 close out of this and we come over here 1092 00:32:49,140 --> 00:32:51,150 and we import that UnionOmit, 1093 00:32:51,150 --> 00:32:53,404 now we essentially are properly doing an omit on our union. 1094 00:32:53,404 --> 00:32:55,740 So it's gonna make sure to remove the id 1095 00:32:55,740 --> 00:32:57,690 from all the different parts of our union, 1096 00:32:57,690 --> 00:32:59,250 and everything's gonna work nicely. 1097 00:32:59,250 --> 00:33:01,170 It's annoying that TypeScript doesn't do this by default, 1098 00:33:01,170 --> 00:33:03,510 which is why we have to create our own type for it. 1099 00:33:03,510 --> 00:33:05,400 So now let's create that add event function. 1100 00:33:05,400 --> 00:33:06,233 We can come down here, 1101 00:33:06,233 --> 00:33:08,381 we can say function addEvent. 1102 00:33:08,381 --> 00:33:09,563 This is gonna take in an event. 1103 00:33:09,563 --> 00:33:11,730 And we know that this is going to be a UnionOmit 1104 00:33:11,730 --> 00:33:15,030 where we omit the id from our event object, 1105 00:33:15,030 --> 00:33:15,863 just like that. 1106 00:33:15,863 --> 00:33:19,080 And then inside of here, we want to set our events. 1107 00:33:19,080 --> 00:33:20,130 We're gonna set our events 1108 00:33:20,130 --> 00:33:21,540 based on the events we're getting in. 1109 00:33:21,540 --> 00:33:23,461 We'll just call this event. 1110 00:33:23,461 --> 00:33:24,810 Ah, we'll just call it e actually, 1111 00:33:24,810 --> 00:33:25,710 make it a little bit shorter. 1112 00:33:25,710 --> 00:33:26,543 There we go. 1113 00:33:26,543 --> 00:33:28,500 What I wanna do is I wanna take all of my current events, 1114 00:33:28,500 --> 00:33:29,932 spread them out so we have them all. 1115 00:33:29,932 --> 00:33:31,530 And I'm gonna create a brand new event 1116 00:33:31,530 --> 00:33:33,360 that takes in this new event 1117 00:33:33,360 --> 00:33:34,560 and I'm gonna add an id to the end of it. 1118 00:33:34,560 --> 00:33:39,047 And this id is just gonna come from crypto.randomUUID. 1119 00:33:39,047 --> 00:33:39,880 There we go. 1120 00:33:39,880 --> 00:33:41,266 So it's going to create a brand new event, 1121 00:33:41,266 --> 00:33:42,270 and we can parse that in here 1122 00:33:42,270 --> 00:33:44,400 as one of the other properties being parsed in. 1123 00:33:44,400 --> 00:33:46,140 So now we have no more errors inside of here, 1124 00:33:46,140 --> 00:33:46,973 which is great. 1125 00:33:46,973 --> 00:33:50,100 And we have the ability to add a brand new event. 1126 00:33:50,100 --> 00:33:51,780 Now, all we need to do is to create a hook 1127 00:33:51,780 --> 00:33:54,960 that allows us to actually consume this event provider. 1128 00:33:54,960 --> 00:33:56,758 So I'm gonna create a function called useEvents, 1129 00:33:56,758 --> 00:33:57,810 just like this. 1130 00:33:57,810 --> 00:33:58,993 This is a custom hook. 1131 00:33:58,993 --> 00:34:00,690 And what I wanna do inside of here 1132 00:34:00,690 --> 00:34:02,850 is I wanna get the value from my context. 1133 00:34:02,850 --> 00:34:04,427 So we're gonna say useContext, 1134 00:34:04,427 --> 00:34:07,370 that's gonna take in my context variable. 1135 00:34:07,370 --> 00:34:10,271 Let me make sure I spell useContext correctly, 1136 00:34:10,271 --> 00:34:12,090 and actually get that imported. 1137 00:34:12,090 --> 00:34:13,080 There we go. 1138 00:34:13,080 --> 00:34:15,120 Then if our value equals null, 1139 00:34:15,120 --> 00:34:18,060 that means for some reason we didn't use our hook here 1140 00:34:18,060 --> 00:34:20,435 inside of our actual provider, 1141 00:34:20,435 --> 00:34:21,268 which is obviously not ideal. 1142 00:34:21,268 --> 00:34:22,230 So we want to throw an error. 1143 00:34:22,230 --> 00:34:24,360 So we're gonna throw a new Error 1144 00:34:24,360 --> 00:34:26,670 that essentially says useEvents 1145 00:34:26,670 --> 00:34:31,670 must be used within an EventsProvider. 1146 00:34:34,465 --> 00:34:35,298 There we go. 1147 00:34:35,298 --> 00:34:37,080 We'll call this an EventsProvider. 1148 00:34:37,080 --> 00:34:37,913 There we go. 1149 00:34:37,913 --> 00:34:38,746 And if we don't have an error, 1150 00:34:38,746 --> 00:34:39,720 we can just return our value. 1151 00:34:39,720 --> 00:34:41,700 So now this function is always going to return to us 1152 00:34:41,700 --> 00:34:42,533 an EventsContext 1153 00:34:42,533 --> 00:34:44,550 'cause it takes care of that null version right here. 1154 00:34:44,550 --> 00:34:46,980 Now, we just wanna make sure that we export this, 1155 00:34:46,980 --> 00:34:48,870 but you're gonna notice we get an interesting warning 1156 00:34:48,870 --> 00:34:49,703 if we do that. 1157 00:34:49,703 --> 00:34:52,140 Essentially, it's saying that we can't do a fast refresh 1158 00:34:52,140 --> 00:34:54,150 if we export a non component 1159 00:34:54,150 --> 00:34:56,280 from a file that exports a component. 1160 00:34:56,280 --> 00:34:58,500 So the best way to get around it is just remove this hook, 1161 00:34:58,500 --> 00:34:59,670 put it in its own file, 1162 00:34:59,670 --> 00:35:01,933 we'll call it useEvent.ts, 1163 00:35:01,933 --> 00:35:04,420 and we can just make sure we export that here. 1164 00:35:04,420 --> 00:35:05,460 Let's come in here 1165 00:35:05,460 --> 00:35:07,470 and actually import our stuff that we need, 1166 00:35:07,470 --> 00:35:09,030 so we can import useContext. 1167 00:35:09,030 --> 00:35:10,770 And we want to import this context as well, 1168 00:35:10,770 --> 00:35:12,900 which means we need to export it up here. 1169 00:35:12,900 --> 00:35:14,940 So we can say we're gonna export our context, 1170 00:35:14,940 --> 00:35:16,020 just like that. 1171 00:35:16,020 --> 00:35:17,410 And this is still allowing us to export this properly 1172 00:35:17,410 --> 00:35:20,490 'cause this is essentially a React component. 1173 00:35:20,490 --> 00:35:22,920 Now, here we can import that context just like that. 1174 00:35:22,920 --> 00:35:24,330 There we go. 1175 00:35:24,330 --> 00:35:25,863 And that does everything that we need it to. 1176 00:35:25,863 --> 00:35:27,090 Now, the other annoying thing 1177 00:35:27,090 --> 00:35:29,340 is we won't be able to export this variable right here 1178 00:35:29,340 --> 00:35:30,540 for the exact same reason. 1179 00:35:30,540 --> 00:35:31,380 So instead, what I wanna do 1180 00:35:31,380 --> 00:35:32,790 is I wanna take this variable 1181 00:35:32,790 --> 00:35:34,290 and we'll just move it into here for now. 1182 00:35:34,290 --> 00:35:35,490 It's not like super ideal, 1183 00:35:35,490 --> 00:35:37,860 but it's going to be fine for our use cases. 1184 00:35:37,860 --> 00:35:39,630 And then here where we're using our event colors, 1185 00:35:39,630 --> 00:35:41,340 we can make sure we import that. 1186 00:35:41,340 --> 00:35:42,547 Get rid of all the exports we don't need, 1187 00:35:42,547 --> 00:35:43,980 just like that. 1188 00:35:43,980 --> 00:35:45,120 Everything is still working fine 1189 00:35:45,120 --> 00:35:47,160 and this useEvent hook is working fine. 1190 00:35:47,160 --> 00:35:48,397 The reason I exported this and moved it in here 1191 00:35:48,397 --> 00:35:50,610 is 'cause we're gonna need to use these colors 1192 00:35:50,610 --> 00:35:51,443 in other places. 1193 00:35:51,443 --> 00:35:53,940 For example, when we create our form for adding a new event, 1194 00:35:53,940 --> 00:35:55,890 we need to know what all the color options are. 1195 00:35:55,890 --> 00:35:57,480 So I'll just preemptively move this into here 1196 00:35:57,480 --> 00:35:58,313 so we can use it. 1197 00:35:58,313 --> 00:36:00,120 And again, the reason it can't be in this file 1198 00:36:00,120 --> 00:36:02,730 is 'cause we cannot export something that's not a component 1199 00:36:02,730 --> 00:36:05,460 if we want to have that fast refreshing in development. 1200 00:36:05,460 --> 00:36:06,450 It's only for development, 1201 00:36:06,450 --> 00:36:08,340 so it doesn't matter if you have it in there for production, 1202 00:36:08,340 --> 00:36:09,720 but it's going to make your development environment 1203 00:36:09,720 --> 00:36:11,430 a little bit quicker and easier to work with. 1204 00:36:11,430 --> 00:36:12,263 So now from here, 1205 00:36:12,263 --> 00:36:14,070 we can actually wrap our entire application 1206 00:36:14,070 --> 00:36:15,102 in this EventsProvider. 1207 00:36:15,102 --> 00:36:17,825 So I'm just gonna wrap my calendar in that EventsProvider. 1208 00:36:17,825 --> 00:36:21,210 So we can say we have our EventsProvider, 1209 00:36:21,210 --> 00:36:22,043 just like that. 1210 00:36:22,043 --> 00:36:24,090 We're gonna wrap our entire calendar inside of that, 1211 00:36:24,090 --> 00:36:25,500 and that way our entire calendar 1212 00:36:25,500 --> 00:36:27,578 has access to all of our different event information. 1213 00:36:27,578 --> 00:36:29,070 There we go. 1214 00:36:29,070 --> 00:36:30,900 Then what we can do is inside of our calendar, 1215 00:36:30,900 --> 00:36:33,960 anywhere we want to use this event information, we can. 1216 00:36:33,960 --> 00:36:36,120 So the very first place that I can think we want to use this 1217 00:36:36,120 --> 00:36:37,080 is inside of here 1218 00:36:37,080 --> 00:36:38,550 because we wanna make this plus button 1219 00:36:38,550 --> 00:36:39,630 actually create a modal 1220 00:36:39,630 --> 00:36:41,910 that allows us to add a brand new event. 1221 00:36:41,910 --> 00:36:43,827 So let's import that useEvents, 1222 00:36:44,730 --> 00:36:46,435 just like that. 1223 00:36:46,435 --> 00:36:49,155 And we wanna get the addEvent function from that. 1224 00:36:49,155 --> 00:36:50,965 So we have access to that add event function. 1225 00:36:50,965 --> 00:36:52,170 And we click on this plus button. 1226 00:36:52,170 --> 00:36:53,610 What I wanna do is I wanna open a modal 1227 00:36:53,610 --> 00:36:55,200 that'll use that addEvent function. 1228 00:36:55,200 --> 00:36:56,760 So we obviously need to create a modal 1229 00:36:56,760 --> 00:36:57,593 that's going to do this. 1230 00:36:57,593 --> 00:36:59,640 And again, I'm just gonna do this in the exact same file. 1231 00:36:59,640 --> 00:37:01,380 You could break this into different files if you want, 1232 00:37:01,380 --> 00:37:02,213 but in our case, 1233 00:37:02,213 --> 00:37:05,040 I'm just gonna create the event modal inside of this file. 1234 00:37:05,040 --> 00:37:06,480 So we're gonna come in here, 1235 00:37:06,480 --> 00:37:07,770 I'm gonna create a brand new component. 1236 00:37:07,770 --> 00:37:09,620 We're gonna call this EventFormModal, 1237 00:37:10,470 --> 00:37:12,090 just like that. 1238 00:37:12,090 --> 00:37:13,410 And inside of this EventFormModal, 1239 00:37:13,410 --> 00:37:15,150 we need a few separate things. 1240 00:37:15,150 --> 00:37:16,140 The first thing that we're gonna need 1241 00:37:16,140 --> 00:37:17,340 is an OnSubmit function. 1242 00:37:17,340 --> 00:37:18,390 So when we submit our form, 1243 00:37:18,390 --> 00:37:20,627 we can either create an event or update an event. 1244 00:37:20,627 --> 00:37:23,100 We also need to have a delete function as well 1245 00:37:23,100 --> 00:37:25,617 because we can delete events from inside of our modal. 1246 00:37:25,617 --> 00:37:27,690 And we also need to have the event itself. 1247 00:37:27,690 --> 00:37:28,680 If we're doing an update, 1248 00:37:28,680 --> 00:37:30,867 we obviously need to be able to update a specific event. 1249 00:37:30,867 --> 00:37:32,040 And then we need the date 1250 00:37:32,040 --> 00:37:34,500 that this event is going to be happening on. 1251 00:37:34,500 --> 00:37:35,333 On top of that, 1252 00:37:35,333 --> 00:37:36,780 we're also gonna need all of the information 1253 00:37:36,780 --> 00:37:37,860 related to our modal. 1254 00:37:37,860 --> 00:37:40,020 But since we have multiple modals in our application, 1255 00:37:40,020 --> 00:37:42,030 I actually wanna create a brand new component 1256 00:37:42,030 --> 00:37:43,497 called modal.tsx. 1257 00:37:43,497 --> 00:37:45,780 And this is where all of our modal related code 1258 00:37:45,780 --> 00:37:46,710 is going to go. 1259 00:37:46,710 --> 00:37:48,480 And inside of this EventFormModal, 1260 00:37:48,480 --> 00:37:50,520 I just wanna return a new one of those modals 1261 00:37:50,520 --> 00:37:53,130 and I wanna parse in all of our modal related code. 1262 00:37:53,130 --> 00:37:54,990 So I'm actually gonna take all the rest of the props 1263 00:37:54,990 --> 00:37:56,160 and they're gonna be my modal props. 1264 00:37:56,160 --> 00:37:58,833 I'm just gonna parse those directly into my modal, 1265 00:37:59,850 --> 00:38:01,080 just like this. 1266 00:38:01,080 --> 00:38:01,913 There we go. 1267 00:38:01,913 --> 00:38:03,720 So now, let's go ahead and actually create this modal. 1268 00:38:03,720 --> 00:38:07,020 So we can say export function Modal. 1269 00:38:07,020 --> 00:38:07,860 Inside of our modal, 1270 00:38:07,860 --> 00:38:09,480 we wanna return a div, 1271 00:38:09,480 --> 00:38:13,080 which is gonna have a class name here of modal. 1272 00:38:13,080 --> 00:38:14,880 There we go, we can close that off. 1273 00:38:14,880 --> 00:38:16,050 And inside of our modal, 1274 00:38:16,050 --> 00:38:17,910 if we look at our actual starting HTML, 1275 00:38:17,910 --> 00:38:19,680 we scroll down to the modal section, 1276 00:38:19,680 --> 00:38:20,520 we can see exactly 1277 00:38:20,520 --> 00:38:22,230 what each of our modals is going to look like. 1278 00:38:22,230 --> 00:38:23,430 You can see we have a modal, 1279 00:38:23,430 --> 00:38:24,660 inside of that we have an overlay, 1280 00:38:24,660 --> 00:38:25,920 and inside of that we have our body, 1281 00:38:25,920 --> 00:38:27,690 which contains all of our content. 1282 00:38:27,690 --> 00:38:32,690 So we need to create a div with the className of overlay. 1283 00:38:34,680 --> 00:38:36,150 Close that off. 1284 00:38:36,150 --> 00:38:38,700 We need to do the exact same thing, 1285 00:38:38,700 --> 00:38:41,130 but this div instead is going to be our body. 1286 00:38:41,130 --> 00:38:43,140 And this is actually where all of our children 1287 00:38:43,140 --> 00:38:44,137 for our entire modal are gonna go, 1288 00:38:44,137 --> 00:38:46,503 which are gonna get parsed in up here. 1289 00:38:48,390 --> 00:38:49,590 There we go. 1290 00:38:49,590 --> 00:38:52,190 Let's make sure we create a type ModalProps. 1291 00:38:53,856 --> 00:38:57,060 And we can make sure that children is a ReactNode, 1292 00:38:57,060 --> 00:38:58,626 just like that. 1293 00:38:58,626 --> 00:38:59,459 And we'll import that. 1294 00:38:59,459 --> 00:39:00,750 We also wanna be able to open and close this modal. 1295 00:39:00,750 --> 00:39:03,000 So we should probably take in an isOpen prop, 1296 00:39:03,000 --> 00:39:04,346 and an onClose prop as well. 1297 00:39:04,346 --> 00:39:07,950 So we can say isOpen is a Boolean, 1298 00:39:07,950 --> 00:39:08,783 and onClose here, 1299 00:39:08,783 --> 00:39:12,510 that is going to be a function that just returns void. 1300 00:39:12,510 --> 00:39:13,343 There we go. 1301 00:39:13,343 --> 00:39:14,300 So then what we can do 1302 00:39:15,244 --> 00:39:17,010 is we can make sure if isOpen is not true, 1303 00:39:17,010 --> 00:39:17,946 so if it's not open, 1304 00:39:17,946 --> 00:39:19,410 we can return null 1305 00:39:19,410 --> 00:39:21,930 so we don't render out our modal at all. 1306 00:39:21,930 --> 00:39:24,090 Then we can specify our ModalProps here, 1307 00:39:24,090 --> 00:39:24,923 just like that. 1308 00:39:24,923 --> 00:39:25,756 There we go. 1309 00:39:25,756 --> 00:39:26,589 And our overlay, 1310 00:39:26,589 --> 00:39:27,880 we wanna be able to close our modal when we click on it. 1311 00:39:27,880 --> 00:39:30,510 So we can just say that onClick, 1312 00:39:30,510 --> 00:39:32,460 we wanna call the onClose function, 1313 00:39:32,460 --> 00:39:33,300 just like that. 1314 00:39:33,300 --> 00:39:34,260 There we go. 1315 00:39:34,260 --> 00:39:37,297 And finally, we want to render this as an actual portal 1316 00:39:37,297 --> 00:39:39,030 because obviously we don't want our modal 1317 00:39:39,030 --> 00:39:40,537 to show up directly where it is, 1318 00:39:40,537 --> 00:39:41,880 we want it to show up in a portal. 1319 00:39:41,880 --> 00:39:44,160 So we're gonna call, createPortal, 1320 00:39:44,160 --> 00:39:44,993 just like that. 1321 00:39:44,993 --> 00:39:46,377 Parse in our component. 1322 00:39:46,377 --> 00:39:49,290 And we also want to parse in an area to put it in. 1323 00:39:49,290 --> 00:39:50,940 So I'm gonna do a querySelector 1324 00:39:50,940 --> 00:39:53,700 and I'm going to get here a modal-container, 1325 00:39:53,700 --> 00:39:54,533 just like that. 1326 00:39:54,533 --> 00:39:55,560 And this createPortal function, 1327 00:39:55,560 --> 00:39:58,080 we wanna make sure that we import this. 1328 00:39:58,080 --> 00:39:59,160 So we'll just come up here, 1329 00:39:59,160 --> 00:40:04,160 we'll say import createPortal from react-dom. 1330 00:40:04,260 --> 00:40:05,190 There we go. 1331 00:40:05,190 --> 00:40:06,270 And here we're getting an error. 1332 00:40:06,270 --> 00:40:08,250 Essentially, the type null is not assignable to element 1333 00:40:08,250 --> 00:40:10,410 and that's because this could be null, 1334 00:40:10,410 --> 00:40:11,657 but we know for a fact it's not going to be 1335 00:40:11,657 --> 00:40:13,680 'cause we're gonna add our own element. 1336 00:40:13,680 --> 00:40:14,513 So we're gonna say 1337 00:40:14,513 --> 00:40:17,070 that this is specifically going to be an HTMLElement. 1338 00:40:17,070 --> 00:40:18,750 And that's because in our index.html here, 1339 00:40:18,750 --> 00:40:20,400 we're just gonna add our own element here, 1340 00:40:20,400 --> 00:40:23,180 which is our modal-container. 1341 00:40:23,180 --> 00:40:24,060 There we go. 1342 00:40:24,060 --> 00:40:25,740 It's a div with that specific id. 1343 00:40:25,740 --> 00:40:26,670 And that way, inside of here, 1344 00:40:26,670 --> 00:40:28,590 we're always gonna make sure this exists. 1345 00:40:28,590 --> 00:40:29,460 Now, the final thing I wanna do 1346 00:40:29,460 --> 00:40:31,140 is I wanna hook up an event listener. 1347 00:40:31,140 --> 00:40:32,913 So we can say useEffect here. 1348 00:40:33,960 --> 00:40:35,550 Oops, make sure I import that from React. 1349 00:40:35,550 --> 00:40:37,650 And this is gonna hook up an event listener 1350 00:40:37,650 --> 00:40:39,150 just so when we click the escape key, 1351 00:40:39,150 --> 00:40:40,860 it also closes our modal. 1352 00:40:40,860 --> 00:40:42,210 So we're gonna come in here, 1353 00:40:42,210 --> 00:40:43,440 put in our onClose function 1354 00:40:43,440 --> 00:40:46,200 'cause we want this to rerun every time that changes. 1355 00:40:46,200 --> 00:40:47,340 We're gonna create our handler, 1356 00:40:47,340 --> 00:40:49,710 which is going to take in a keyboard event. 1357 00:40:49,710 --> 00:40:51,533 So we're gonna have a keyboard event. 1358 00:40:52,740 --> 00:40:56,160 And if e.key is equal to escape, 1359 00:40:56,160 --> 00:40:57,720 that means we click the escape key, 1360 00:40:57,720 --> 00:40:59,370 so we want to close this just like that 1361 00:40:59,370 --> 00:41:00,320 by calling onClose. 1362 00:41:01,380 --> 00:41:03,270 Then we obviously need to hook up this event listener. 1363 00:41:03,270 --> 00:41:05,490 So we'll say document.addEventListener. 1364 00:41:05,490 --> 00:41:07,470 We're gonna do this on key down. 1365 00:41:07,470 --> 00:41:09,000 We're gonna call this handler, 1366 00:41:09,000 --> 00:41:10,950 and then when we wanna do the exact same thing here. 1367 00:41:10,950 --> 00:41:13,590 We want to return and we want to remove that event listener. 1368 00:41:13,590 --> 00:41:16,560 So we're gonna removeEventListener. 1369 00:41:16,560 --> 00:41:18,027 This is going to be for key down 1370 00:41:18,027 --> 00:41:22,170 and we wanna remove the handle click or the handler, sorry, 1371 00:41:22,170 --> 00:41:23,090 just like that. 1372 00:41:23,090 --> 00:41:24,840 So now we have our base modal done. 1373 00:41:24,840 --> 00:41:26,520 That's essentially just wrapping everything 1374 00:41:26,520 --> 00:41:28,141 that's going to be inside the modal. 1375 00:41:28,141 --> 00:41:29,220 So if we're looking at that index.html, 1376 00:41:29,220 --> 00:41:30,540 that's just this content right here. 1377 00:41:30,540 --> 00:41:31,680 We obviously need to create this stuff 1378 00:41:31,680 --> 00:41:33,330 inside of our modal next. 1379 00:41:33,330 --> 00:41:34,920 So we come into our calendar here, 1380 00:41:34,920 --> 00:41:36,150 let's import this modal, 1381 00:41:36,150 --> 00:41:36,990 just like that. 1382 00:41:36,990 --> 00:41:39,680 And let's set up the type for our EventFormModal as well. 1383 00:41:39,680 --> 00:41:42,733 So we can have a type here, EventFormModalProps. 1384 00:41:45,509 --> 00:41:46,770 And we know that we have a few different things 1385 00:41:46,770 --> 00:41:47,603 we're gonna need. 1386 00:41:47,603 --> 00:41:49,170 First of all, we're gonna need our onSubmit, 1387 00:41:49,170 --> 00:41:50,003 just like that. 1388 00:41:50,003 --> 00:41:51,309 We need our onDelete. 1389 00:41:51,309 --> 00:41:54,000 And our onSubmit here is just a function 1390 00:41:54,000 --> 00:41:54,960 that's going to return void. 1391 00:41:54,960 --> 00:41:57,720 We'll figure out the actual properties for it in a second. 1392 00:41:57,720 --> 00:41:58,590 We're gonna have onDelete. 1393 00:41:58,590 --> 00:42:01,860 Again, that's going to be a function which is void here. 1394 00:42:01,860 --> 00:42:04,500 We also have an event that we're going to be taking in 1395 00:42:04,500 --> 00:42:06,600 and this is going to be an event object. 1396 00:42:06,600 --> 00:42:07,950 And then finally, we're gonna have a date, 1397 00:42:07,950 --> 00:42:09,480 which is a date object. 1398 00:42:09,480 --> 00:42:10,680 Now, for our submit function, 1399 00:42:10,680 --> 00:42:12,180 we're essentially going to parse in an event. 1400 00:42:12,180 --> 00:42:14,520 And that event is everything that our event takes in, 1401 00:42:14,520 --> 00:42:16,830 except for it's not going to have an id. 1402 00:42:16,830 --> 00:42:18,720 So it's going to be that same UnionOmit 1403 00:42:18,720 --> 00:42:20,040 that we've messed with before. 1404 00:42:20,040 --> 00:42:22,590 We have an event that doesn't have an id on it. 1405 00:42:22,590 --> 00:42:23,820 That's pretty straightforward. 1406 00:42:23,820 --> 00:42:24,653 For onDelete, 1407 00:42:24,653 --> 00:42:26,970 we actually don't need any properties all being parsed in 1408 00:42:26,970 --> 00:42:28,170 because we can get the id 1409 00:42:28,170 --> 00:42:30,330 from wherever we place this EventFormModal. 1410 00:42:30,330 --> 00:42:33,060 For example, inside here where we have our addEvent, 1411 00:42:33,060 --> 00:42:34,800 when we click on this add button, for example, 1412 00:42:34,800 --> 00:42:36,060 or when we click on an edit button, 1413 00:42:36,060 --> 00:42:38,280 we're gonna have the id of the actual thing we can delete. 1414 00:42:38,280 --> 00:42:39,690 So we don't need to worry about the id at all 1415 00:42:39,690 --> 00:42:40,590 inside of here. 1416 00:42:40,590 --> 00:42:42,150 Now, one important thing to note though 1417 00:42:42,150 --> 00:42:44,040 is that if we parse in an event, 1418 00:42:44,040 --> 00:42:45,600 that means we're editing our event 1419 00:42:45,600 --> 00:42:47,607 so we need to also parse in an onDelete. 1420 00:42:47,607 --> 00:42:48,587 But we don't need to pass in a date 1421 00:42:48,587 --> 00:42:50,820 'cause we can get the date from our event. 1422 00:42:50,820 --> 00:42:52,740 But if we want to add a new event, 1423 00:42:52,740 --> 00:42:54,270 we don't have any event to parse in, 1424 00:42:54,270 --> 00:42:55,500 we don't have a delete to parse in, 1425 00:42:55,500 --> 00:42:56,400 but we do need to tell it 1426 00:42:56,400 --> 00:42:58,680 what date we want to add this new event to. 1427 00:42:58,680 --> 00:42:59,790 So we kind of have a situation 1428 00:42:59,790 --> 00:43:01,410 where we have essentially different unions 1429 00:43:01,410 --> 00:43:02,250 we want to create. 1430 00:43:02,250 --> 00:43:03,120 We have two different types 1431 00:43:03,120 --> 00:43:04,800 based on if we want to actually have an event 1432 00:43:04,800 --> 00:43:06,150 or not have an event. 1433 00:43:06,150 --> 00:43:07,860 So this I actually want to remove, 1434 00:43:07,860 --> 00:43:10,050 and instead I want to do the exact same union trick 1435 00:43:10,050 --> 00:43:11,100 that we did before, 1436 00:43:11,100 --> 00:43:12,420 'cause all of my types are gonna have an onSubmit. 1437 00:43:12,420 --> 00:43:14,220 And then inside of here, 1438 00:43:14,220 --> 00:43:15,870 I want to have different types as well. 1439 00:43:15,870 --> 00:43:18,660 So what we can do is we can say in one particular scenario, 1440 00:43:18,660 --> 00:43:20,370 I want to have the types of onDelete, 1441 00:43:20,370 --> 00:43:22,260 and I want to have the type of an event. 1442 00:43:22,260 --> 00:43:24,480 And our date here is never going to exist 1443 00:43:24,480 --> 00:43:27,660 'cause we can always get that from our event itself. 1444 00:43:27,660 --> 00:43:29,340 Otherwise, I want to do the exact same thing, 1445 00:43:29,340 --> 00:43:30,960 I'm just gonna copy this code down. 1446 00:43:30,960 --> 00:43:33,630 But in our case here, onDelete is never going to exist 1447 00:43:33,630 --> 00:43:35,940 'cause this is going to be for a new event, 1448 00:43:35,940 --> 00:43:38,730 which means our event is never going to exist 1449 00:43:38,730 --> 00:43:40,779 but our date is going to exist 1450 00:43:40,779 --> 00:43:43,470 and it's going to be of the type date, 1451 00:43:43,470 --> 00:43:44,303 just like that. 1452 00:43:44,303 --> 00:43:45,136 So if I give this a quick save, 1453 00:43:45,136 --> 00:43:46,290 it should format for us. 1454 00:43:46,290 --> 00:43:48,720 And as you can see, we essentially have two different types. 1455 00:43:48,720 --> 00:43:50,160 One that takes in just a date 1456 00:43:50,160 --> 00:43:52,170 and one that takes in an onDelete and an event. 1457 00:43:52,170 --> 00:43:53,747 And that's going to depend on if we have an add event 1458 00:43:53,747 --> 00:43:55,827 or if we have an edit event. 1459 00:43:55,827 --> 00:43:57,674 And if we add those actual types here, 1460 00:43:57,674 --> 00:44:01,176 so we'll say EventFormModalProps, 1461 00:44:01,176 --> 00:44:02,520 you'll notice it looks like, for the most part, 1462 00:44:02,520 --> 00:44:03,353 everything's working 1463 00:44:03,353 --> 00:44:04,980 but we have our modal props which are not correct 1464 00:44:04,980 --> 00:44:05,957 that's why we're getting an error here 1465 00:44:05,957 --> 00:44:08,010 'cause we need to have essentially the correct props 1466 00:44:08,010 --> 00:44:10,080 of children isOpen and so on. 1467 00:44:10,080 --> 00:44:11,100 So to do that, 1468 00:44:11,100 --> 00:44:12,480 the final thing that we need to do 1469 00:44:12,480 --> 00:44:14,940 is to actually take in another add-on here. 1470 00:44:14,940 --> 00:44:16,980 So we can say we want to add on another type 1471 00:44:16,980 --> 00:44:19,320 and that type is going to be our ModalProps, 1472 00:44:19,320 --> 00:44:22,320 which we can just like export here from our modal. 1473 00:44:22,320 --> 00:44:24,195 So we're gonna say we're gonna export those modal types, 1474 00:44:24,195 --> 00:44:25,470 we're gonna import those, 1475 00:44:25,470 --> 00:44:26,550 just like this. 1476 00:44:26,550 --> 00:44:27,383 That'll work fine, 1477 00:44:27,383 --> 00:44:30,540 but we don't want this ModalProps to contain our children. 1478 00:44:30,540 --> 00:44:31,920 Instead, we want to omit that. 1479 00:44:31,920 --> 00:44:35,370 So we're gonna just Omit the children property from here, 1480 00:44:35,370 --> 00:44:37,050 that way it doesn't actually take in our children. 1481 00:44:37,050 --> 00:44:39,450 We need to manually parse in our children into our modal, 1482 00:44:39,450 --> 00:44:41,250 otherwise we're going to get an error. 1483 00:44:41,250 --> 00:44:43,530 Now, you'll notice I didn't have to do the UnionOmit here 1484 00:44:43,530 --> 00:44:45,540 and that's because this ModalProps is not a union, 1485 00:44:45,540 --> 00:44:46,780 it's just a normal actual type 1486 00:44:46,780 --> 00:44:49,070 so we can just do a normal omit on that. 1487 00:44:49,070 --> 00:44:50,790 So now, let's go ahead and get the actual stuff 1488 00:44:50,790 --> 00:44:52,050 we're gonna put inside of our modal. 1489 00:44:52,050 --> 00:44:54,240 I'm just going to open up that index.html again. 1490 00:44:54,240 --> 00:44:55,073 And essentially, 1491 00:44:55,073 --> 00:44:56,670 I wanna copy everything inside the modal body. 1492 00:44:56,670 --> 00:44:58,350 So I'm gonna start with the title here, 1493 00:44:58,350 --> 00:44:59,183 and we're gonna move down. 1494 00:44:59,183 --> 00:45:00,060 And this is actually the wrong modal 1495 00:45:00,060 --> 00:45:01,710 'cause this is the one showing all the different events. 1496 00:45:01,710 --> 00:45:02,730 I want the form modal, 1497 00:45:02,730 --> 00:45:04,290 which is this one down here. 1498 00:45:04,290 --> 00:45:05,970 So we're gonna start with this title, 1499 00:45:05,970 --> 00:45:07,290 go all the way to the bottom 1500 00:45:07,290 --> 00:45:08,790 where we have all the content we need, 1501 00:45:08,790 --> 00:45:10,740 which is I believe just this content right here. 1502 00:45:10,740 --> 00:45:11,573 Yep. 1503 00:45:11,573 --> 00:45:14,100 So I'm gonna copy this content, I'm gonna move it over here. 1504 00:45:14,100 --> 00:45:15,740 I'm gonna paste it directly into our modal, 1505 00:45:15,740 --> 00:45:17,460 so that at least we'll render out our modal. 1506 00:45:17,460 --> 00:45:18,293 We have a few errors 1507 00:45:18,293 --> 00:45:20,520 because we need to change like class name and stuff around. 1508 00:45:20,520 --> 00:45:22,080 But for now, we can actually see if this works 1509 00:45:22,080 --> 00:45:24,660 by trying to render out this EventFormModal. 1510 00:45:24,660 --> 00:45:26,935 So it's come all the way up here into our CalendarDay. 1511 00:45:26,935 --> 00:45:27,768 What we wanna do 1512 00:45:27,768 --> 00:45:29,820 is whenever we click on this button right here, 1513 00:45:29,820 --> 00:45:31,590 we essentially want to open that modal. 1514 00:45:31,590 --> 00:45:33,300 So let's create a state variable to deal with that. 1515 00:45:33,300 --> 00:45:35,833 We can say, isNewEventModalOpen, 1516 00:45:38,592 --> 00:45:40,509 setIsNewEventModalOpen. 1517 00:45:42,750 --> 00:45:44,430 And we can set that to a useState variable 1518 00:45:44,430 --> 00:45:45,630 that defaults to false 1519 00:45:45,630 --> 00:45:47,730 'cause we obviously don't want it to be open right away. 1520 00:45:47,730 --> 00:45:49,596 And then down here we can actually render out what that is. 1521 00:45:49,596 --> 00:45:51,390 So here when we click our plus button, 1522 00:45:51,390 --> 00:45:56,390 onClick, we want to set our isNewEventModalOpen to true. 1523 00:45:58,200 --> 00:45:59,033 There we go. 1524 00:45:59,033 --> 00:45:59,866 So we're actually opening up the modal 1525 00:45:59,866 --> 00:46:00,990 when we click on the plus button. 1526 00:46:00,990 --> 00:46:03,030 And then we need to render out the modal as well. 1527 00:46:03,030 --> 00:46:05,460 And we can just do that somewhere inside of this component. 1528 00:46:05,460 --> 00:46:07,200 So let's just go down to the very bottom of our component. 1529 00:46:07,200 --> 00:46:08,820 We'll just do it right here, for example. 1530 00:46:08,820 --> 00:46:11,033 We're gonna have our EventFormModal. 1531 00:46:12,480 --> 00:46:13,470 There we go. 1532 00:46:13,470 --> 00:46:14,303 Close that off 1533 00:46:14,303 --> 00:46:15,597 'cause we don't need any children inside of it. 1534 00:46:15,597 --> 00:46:17,520 And we need to parse in the information we need. 1535 00:46:17,520 --> 00:46:19,590 So for example, we need to parse in what the day is. 1536 00:46:19,590 --> 00:46:21,570 We have that day variable for that. 1537 00:46:21,570 --> 00:46:23,338 We also need to parse in if this is open or not. 1538 00:46:23,338 --> 00:46:26,850 That's just gonna be equal to that isNewEventModalOpen. 1539 00:46:26,850 --> 00:46:28,560 We need to parse in onClose, 1540 00:46:28,560 --> 00:46:30,175 and that's just going to be here, 1541 00:46:30,175 --> 00:46:32,778 setIsNewEventModalOpen to false 1542 00:46:32,778 --> 00:46:34,920 'cause we no longer want it to be open. 1543 00:46:34,920 --> 00:46:37,200 And then finally, we need to parse in onSubmit. 1544 00:46:37,200 --> 00:46:38,160 So we can say onSubmit... 1545 00:46:38,160 --> 00:46:39,630 And that's going to be some type of function 1546 00:46:39,630 --> 00:46:40,710 that we're going to deal with. 1547 00:46:40,710 --> 00:46:42,930 For now, I'm just going to have it do nothing at all 1548 00:46:42,930 --> 00:46:44,760 so we'll just say it'll return null by default. 1549 00:46:44,760 --> 00:46:46,363 There we go. 1550 00:46:46,363 --> 00:46:47,196 And now we got rid of all of our errors. 1551 00:46:47,196 --> 00:46:49,350 And if I try to add like an onDelete onto here 1552 00:46:49,350 --> 00:46:50,280 that does something, 1553 00:46:50,280 --> 00:46:51,510 let's just say it does like this, 1554 00:46:51,510 --> 00:46:52,470 you're gonna notice we get an error 1555 00:46:52,470 --> 00:46:54,510 because we can't have this onDelete property 1556 00:46:54,510 --> 00:46:57,120 since we did specify an actual date here, 1557 00:46:57,120 --> 00:46:59,130 that means that we can't have this onDelete. 1558 00:46:59,130 --> 00:47:00,660 And that's exactly what we want. 1559 00:47:00,660 --> 00:47:01,493 Now in our case, 1560 00:47:01,493 --> 00:47:03,510 instead of parsing in this default value here for onSubmit, 1561 00:47:03,510 --> 00:47:06,000 we actually would want to call the addEvent function. 1562 00:47:06,000 --> 00:47:06,833 What that's going to do 1563 00:47:06,833 --> 00:47:08,010 is it's going to add a brand new event for us. 1564 00:47:08,010 --> 00:47:09,393 But it looks like we have an error here. 1565 00:47:09,393 --> 00:47:11,160 It's essentially saying that the types here 1566 00:47:11,160 --> 00:47:12,330 are not quite correct. 1567 00:47:12,330 --> 00:47:13,440 So it looks like our onSubmit 1568 00:47:13,440 --> 00:47:15,210 maybe has the wrong type being applied to it. 1569 00:47:15,210 --> 00:47:16,170 If we look at our onSubmit, 1570 00:47:16,170 --> 00:47:17,820 this is the correct UnionOmit, 1571 00:47:17,820 --> 00:47:19,110 that's perfectly fine. 1572 00:47:19,110 --> 00:47:21,150 So let's go over to our event actual thing here. 1573 00:47:21,150 --> 00:47:23,224 So you can see addEvent is a UnionOmit, which is fine. 1574 00:47:23,224 --> 00:47:25,620 That's a UnionOmit here, which is perfectly fine. 1575 00:47:25,620 --> 00:47:26,790 That should be working. 1576 00:47:26,790 --> 00:47:28,680 I believe I actually know the reason for this, 1577 00:47:28,680 --> 00:47:31,350 it's because we're using the wrong event in here. 1578 00:47:31,350 --> 00:47:33,750 We actually want to import our event. 1579 00:47:33,750 --> 00:47:36,780 So instead of using the event that's built into TypeScript, 1580 00:47:36,780 --> 00:47:37,613 if we look up here, 1581 00:47:37,613 --> 00:47:39,090 it's most likely importing something 1582 00:47:39,090 --> 00:47:40,620 or it's just using the built-in type, 1583 00:47:40,620 --> 00:47:42,030 we actually want to use the event type 1584 00:47:42,030 --> 00:47:43,380 that we're defining here. 1585 00:47:43,380 --> 00:47:45,330 So I want to export this event type, 1586 00:47:45,330 --> 00:47:46,230 just like this. 1587 00:47:46,230 --> 00:47:47,127 And we can come back here 1588 00:47:47,127 --> 00:47:49,500 and we can actually import that event type as well. 1589 00:47:49,500 --> 00:47:50,730 So here we have an event. 1590 00:47:50,730 --> 00:47:52,740 I want to import my own event type, 1591 00:47:52,740 --> 00:47:54,240 that should hopefully clean up some of these problems. 1592 00:47:54,240 --> 00:47:56,400 And there we go, it did fix those problems. 1593 00:47:56,400 --> 00:47:58,050 So now let's go ahead and clean up our form. 1594 00:47:58,050 --> 00:47:59,580 But before we do it, let's just see if it opens up. 1595 00:47:59,580 --> 00:48:01,410 If we click the plus button, does it open a form? 1596 00:48:01,410 --> 00:48:03,540 You'll notice it does open the form, which is great. 1597 00:48:03,540 --> 00:48:04,650 Obviously, none of the other stuff 1598 00:48:04,650 --> 00:48:05,640 like this close button work. 1599 00:48:05,640 --> 00:48:06,840 But if we click outside of here, 1600 00:48:06,840 --> 00:48:08,550 you'll notice it closes, which is exactly what we want. 1601 00:48:08,550 --> 00:48:10,110 And if we click escape, it closes. 1602 00:48:10,110 --> 00:48:11,790 So at least that is working. 1603 00:48:11,790 --> 00:48:13,441 The next thing to work on 1604 00:48:13,441 --> 00:48:14,310 is all of this code inside of here. 1605 00:48:14,310 --> 00:48:15,143 So here we have class, 1606 00:48:15,143 --> 00:48:16,760 we want to replace this with className. 1607 00:48:16,760 --> 00:48:19,680 So I'm just gonna select everything that says just class, 1608 00:48:19,680 --> 00:48:21,630 replace that with className. 1609 00:48:21,630 --> 00:48:22,463 There we go. 1610 00:48:22,463 --> 00:48:23,490 That fixed that problem. 1611 00:48:23,490 --> 00:48:24,780 Same thing here where we have for. 1612 00:48:24,780 --> 00:48:27,450 I want to replace that with htmlFor. 1613 00:48:27,450 --> 00:48:29,010 There we go, that fixed those problems 1614 00:48:29,010 --> 00:48:29,843 and that cleaned up 1615 00:48:29,843 --> 00:48:32,520 just our generic React to HTML conversion, 1616 00:48:32,520 --> 00:48:33,900 which is perfectly fine. 1617 00:48:33,900 --> 00:48:34,733 Now, what I wanna do 1618 00:48:34,733 --> 00:48:36,510 is I wanna fix up some of the code inside of here. 1619 00:48:36,510 --> 00:48:38,490 For example, this should say add event 1620 00:48:38,490 --> 00:48:39,510 when I create a new event, 1621 00:48:39,510 --> 00:48:41,670 and it should say edit when I'm doing an edit. 1622 00:48:41,670 --> 00:48:42,772 So just create a simple variable. 1623 00:48:42,772 --> 00:48:44,683 We'll say const isNew, 1624 00:48:45,690 --> 00:48:47,807 and that's equal to if our event is equal to null, 1625 00:48:47,807 --> 00:48:49,170 'cause if we don't have an event 1626 00:48:49,170 --> 00:48:50,580 we're creating a new event. 1627 00:48:50,580 --> 00:48:52,020 Then I can use that inside of here. 1628 00:48:52,020 --> 00:48:54,510 If it is new, this should say add event, 1629 00:48:54,510 --> 00:48:56,970 otherwise it should say edit event, 1630 00:48:56,970 --> 00:48:58,010 just like that. 1631 00:48:58,010 --> 00:48:59,850 So now if we give this a save, open this up, 1632 00:48:59,850 --> 00:49:00,750 you can say it says add, 1633 00:49:00,750 --> 00:49:02,130 which is exactly what we want 1634 00:49:02,130 --> 00:49:04,530 because we're currently creating a new event. 1635 00:49:04,530 --> 00:49:06,870 I also want to display the date here properly. 1636 00:49:06,870 --> 00:49:09,060 So I can come in here and I can format this date. 1637 00:49:09,060 --> 00:49:10,920 So I can say I want to format our date. 1638 00:49:10,920 --> 00:49:12,240 In our case I wanna get our date, 1639 00:49:12,240 --> 00:49:13,830 but our date could be null. 1640 00:49:13,830 --> 00:49:17,340 So if it's null, I want to use our event.date 1641 00:49:17,340 --> 00:49:18,173 because in our case, 1642 00:49:18,173 --> 00:49:21,120 the event would actually be not null if our date is null. 1643 00:49:21,120 --> 00:49:23,640 So that's how we can get the actual proper date. 1644 00:49:23,640 --> 00:49:24,630 And then I can parse in 1645 00:49:24,630 --> 00:49:26,430 what I want the actual date style to be. 1646 00:49:26,430 --> 00:49:28,050 So I can say that our dateStyle 1647 00:49:28,050 --> 00:49:29,850 is going to be the short date style 1648 00:49:29,850 --> 00:49:31,580 'cause that's kind of what we want this to look like. 1649 00:49:31,580 --> 00:49:33,240 So now, if I click this on the 6th of June, 1650 00:49:33,240 --> 00:49:35,190 you can see it says 6/6/23. 1651 00:49:35,190 --> 00:49:36,690 If I try to open up 30th June, 1652 00:49:36,690 --> 00:49:38,700 you can see it says the 30th of June. 1653 00:49:38,700 --> 00:49:39,960 Now, here for our close button, 1654 00:49:39,960 --> 00:49:41,040 we just wanna close our modal. 1655 00:49:41,040 --> 00:49:42,450 So we can say when we click on this, 1656 00:49:42,450 --> 00:49:45,057 we want to call the modalProps.onClose. 1657 00:49:47,100 --> 00:49:47,933 There we go. 1658 00:49:47,933 --> 00:49:48,780 To close out of that. 1659 00:49:48,780 --> 00:49:50,400 So now, if I click that close button, 1660 00:49:50,400 --> 00:49:52,170 you can see it closes my modal. 1661 00:49:52,170 --> 00:49:54,390 Next up we have all of our form inputs. 1662 00:49:54,390 --> 00:49:56,250 Now, since it is technically possible 1663 00:49:56,250 --> 00:49:58,230 that we could render out this modal multiple times, 1664 00:49:58,230 --> 00:50:00,277 it's not good to have our htmlFor and our ids 1665 00:50:00,277 --> 00:50:01,710 hardcoded like this. 1666 00:50:01,710 --> 00:50:04,020 So instead, I'm gonna use that use id hook. 1667 00:50:04,020 --> 00:50:07,000 So I can just say const formId equals useId. 1668 00:50:08,750 --> 00:50:09,751 There we go. 1669 00:50:09,751 --> 00:50:11,236 And now I can use that form id here. 1670 00:50:11,236 --> 00:50:12,980 So instead of having a hardcoded name, 1671 00:50:12,980 --> 00:50:15,060 I could say that we want to use that form id 1672 00:50:15,060 --> 00:50:16,920 and then just add the name to the end of it, 1673 00:50:16,920 --> 00:50:17,753 just like that. 1674 00:50:17,753 --> 00:50:20,260 And I can copy this and paste that down as my id as well 1675 00:50:20,260 --> 00:50:23,040 so they both properly hook up just fine. 1676 00:50:23,040 --> 00:50:25,290 I can do the same exact thing here for all day. 1677 00:50:25,290 --> 00:50:26,610 So I wanna get both of those 1678 00:50:26,610 --> 00:50:28,950 and I wanna change this to say all-day. 1679 00:50:28,950 --> 00:50:30,090 There we go. 1680 00:50:30,090 --> 00:50:31,710 Now, let's bring that down another time. 1681 00:50:31,710 --> 00:50:34,200 So we'll come down here where we have our start time. 1682 00:50:34,200 --> 00:50:35,160 So we're gonna say our start time 1683 00:50:35,160 --> 00:50:37,560 is going to be that in both cases. 1684 00:50:37,560 --> 00:50:40,320 We're just gonna replace this with start-time. 1685 00:50:40,320 --> 00:50:41,370 And this is just to make sure 1686 00:50:41,370 --> 00:50:42,810 everything is hooked up properly. 1687 00:50:42,810 --> 00:50:44,580 So same thing here for end-time, 1688 00:50:44,580 --> 00:50:46,113 let's do the exact same thing. 1689 00:50:47,610 --> 00:50:50,793 And this will say end-time. 1690 00:50:51,630 --> 00:50:52,860 And again, we just need to do it 1691 00:50:52,860 --> 00:50:54,657 for all the rest of the components that we have. 1692 00:50:54,657 --> 00:50:55,920 For our input down here, 1693 00:50:55,920 --> 00:50:57,630 we have our label right here 1694 00:50:57,630 --> 00:50:59,460 and we have the actual id up here. 1695 00:50:59,460 --> 00:51:00,900 So let's make sure we do that. 1696 00:51:00,900 --> 00:51:02,130 And this will just be a color. 1697 00:51:02,130 --> 00:51:04,290 So in our case, we have like blue as our first color, 1698 00:51:04,290 --> 00:51:06,210 but we're gonna make sure that we do this inside of an array 1699 00:51:06,210 --> 00:51:07,800 so we don't need to hard code all of this. 1700 00:51:07,800 --> 00:51:09,960 So these other inputs, we actually don't need. 1701 00:51:09,960 --> 00:51:12,210 So I'm just gonna remove these other inputs 1702 00:51:12,210 --> 00:51:13,260 and we're gonna remove the label 1703 00:51:13,260 --> 00:51:14,850 'cause we're just gonna put this inside of a loop. 1704 00:51:14,850 --> 00:51:16,770 So right now, it should just show blue. 1705 00:51:16,770 --> 00:51:18,930 And as you can see, it did just show blue. 1706 00:51:18,930 --> 00:51:20,730 Also it looks like I have this data attribute on here 1707 00:51:20,730 --> 00:51:21,563 from the HTML. 1708 00:51:21,563 --> 00:51:22,500 We don't actually need that. 1709 00:51:22,500 --> 00:51:24,240 I'll remove that from your starting HTML 1710 00:51:24,240 --> 00:51:25,073 so you don't have it, 1711 00:51:25,073 --> 00:51:26,790 but I'm just gonna remove that 'cause we don't need it. 1712 00:51:26,790 --> 00:51:29,070 Finally, we have our add and delete button down here. 1713 00:51:29,070 --> 00:51:29,903 So what I wanna do 1714 00:51:29,903 --> 00:51:31,740 is I wanna make sure our delete button only renders 1715 00:51:31,740 --> 00:51:33,090 if we have an actual delete. 1716 00:51:33,090 --> 00:51:35,647 So if onDelete is not equal to null, 1717 00:51:35,647 --> 00:51:38,520 then I wanna render out this button for delete, 1718 00:51:38,520 --> 00:51:41,643 and we can just set up an onClick that calls onDelete. 1719 00:51:43,200 --> 00:51:44,033 There we go. 1720 00:51:44,033 --> 00:51:44,866 Just like that. 1721 00:51:44,866 --> 00:51:45,930 And then for our add button here, 1722 00:51:45,930 --> 00:51:47,790 I just wanna change the text inside of it. 1723 00:51:47,790 --> 00:51:50,820 So if it isNew, then I want it to say add, 1724 00:51:50,820 --> 00:51:53,070 otherwise I want it to say edit. 1725 00:51:53,070 --> 00:51:54,120 For our input down here, 1726 00:51:54,120 --> 00:51:56,130 we're gonna make sure that we do this inside of an array. 1727 00:51:56,130 --> 00:51:57,930 So inside here, what's come in, 1728 00:51:57,930 --> 00:51:59,430 we're gonna take our event colors, 1729 00:51:59,430 --> 00:52:00,570 I wanna loop through each one of them 1730 00:52:00,570 --> 00:52:01,470 by mapping through them. 1731 00:52:01,470 --> 00:52:03,510 So we're gonna get a particular color, 1732 00:52:03,510 --> 00:52:04,909 and I essentially want to render out this code right here 1733 00:52:04,909 --> 00:52:06,001 but for the specific color. 1734 00:52:06,001 --> 00:52:09,630 And this is going to need to be in a fragment 1735 00:52:09,630 --> 00:52:11,940 and we're gonna use the full fragment keyword here 1736 00:52:11,940 --> 00:52:13,470 because we need to specify a key on this, 1737 00:52:13,470 --> 00:52:15,690 which is just going to be our color. 1738 00:52:15,690 --> 00:52:16,800 So we're gonna put this in a fragment 1739 00:52:16,800 --> 00:52:18,663 so we can make sure we can render multiple things. 1740 00:52:18,663 --> 00:52:20,003 Then inside of here for the value, 1741 00:52:20,003 --> 00:52:22,230 I want this to be our color as well. 1742 00:52:22,230 --> 00:52:23,700 And here, where we have the color blue, 1743 00:52:23,700 --> 00:52:25,350 I want this to be our color. 1744 00:52:25,350 --> 00:52:27,000 And finally here, where this says blue, 1745 00:52:27,000 --> 00:52:29,220 I want this to also be our color. 1746 00:52:29,220 --> 00:52:30,600 So now if we get this quick save, 1747 00:52:30,600 --> 00:52:31,433 click plus, 1748 00:52:31,433 --> 00:52:32,940 we should hopefully have all three of our colors showing up. 1749 00:52:32,940 --> 00:52:34,200 And as you can see, we do. 1750 00:52:34,200 --> 00:52:35,640 And we can click on them, just like that, 1751 00:52:35,640 --> 00:52:36,543 which is great. 1752 00:52:36,543 --> 00:52:38,250 Now, to determine which button 1753 00:52:38,250 --> 00:52:40,290 is actually selected as the correct color, 1754 00:52:40,290 --> 00:52:41,460 we actually need to use state 1755 00:52:41,460 --> 00:52:43,620 to handle this the easiest way possible. 1756 00:52:43,620 --> 00:52:46,565 So we're gonna create a state variable called selectedColor. 1757 00:52:46,565 --> 00:52:49,080 And if our selected color is equal to our current color, 1758 00:52:49,080 --> 00:52:51,000 we're gonna set this as checked. 1759 00:52:51,000 --> 00:52:52,770 Then whenever we change this... 1760 00:52:52,770 --> 00:52:53,700 What that is essentially saying 1761 00:52:53,700 --> 00:52:55,590 is that we are currently selecting this color, 1762 00:52:55,590 --> 00:52:57,270 that's what onChange is doing for us. 1763 00:52:57,270 --> 00:52:58,920 So I want to essentially call the function 1764 00:52:58,920 --> 00:53:01,377 that is going to select that current color. 1765 00:53:01,377 --> 00:53:04,500 So I'm gonna set the selected color to the current color 1766 00:53:04,500 --> 00:53:06,142 and then we can create that state variable up here. 1767 00:53:06,142 --> 00:53:08,380 So we can say selectedColor 1768 00:53:10,380 --> 00:53:14,283 and setSelectedColor is equally useState. 1769 00:53:14,283 --> 00:53:17,082 Now, by default, I want that to be our event.color, 1770 00:53:17,082 --> 00:53:18,900 but if our event doesn't exist, 1771 00:53:18,900 --> 00:53:21,060 I want this to fall back to the very first color 1772 00:53:21,060 --> 00:53:22,173 inside of our array, 1773 00:53:23,037 --> 00:53:24,071 just like that. 1774 00:53:24,071 --> 00:53:24,904 So now, if I give that a quick save, 1775 00:53:24,904 --> 00:53:25,740 and I click on this plus, 1776 00:53:25,740 --> 00:53:26,820 you can see it's selecting red, 1777 00:53:26,820 --> 00:53:29,280 which is the very first color in our array by default. 1778 00:53:29,280 --> 00:53:30,330 And as I change these colors, 1779 00:53:30,330 --> 00:53:32,887 you can see it's still properly changing them, 1780 00:53:32,887 --> 00:53:33,876 which is perfect. 1781 00:53:33,876 --> 00:53:34,890 That's exactly what I want. 1782 00:53:34,890 --> 00:53:35,723 And I close and reopen it. 1783 00:53:35,723 --> 00:53:37,590 You can see that's still keeping all that information. 1784 00:53:37,590 --> 00:53:38,550 Then the next thing to work on 1785 00:53:38,550 --> 00:53:40,020 is going to be this all day button 1786 00:53:40,020 --> 00:53:40,853 'cause this was checked, 1787 00:53:40,853 --> 00:53:42,810 I want these two to be disabled inputs. 1788 00:53:42,810 --> 00:53:44,910 And when it's unchecked, I want them to be enabled. 1789 00:53:44,910 --> 00:53:47,037 So we need to be able to check what this value is. 1790 00:53:47,037 --> 00:53:49,170 And again, we need state for that. 1791 00:53:49,170 --> 00:53:51,183 So we can say isAllDayChecked, 1792 00:53:52,320 --> 00:53:54,237 and setIsAllDayChecked. 1793 00:53:56,183 --> 00:53:58,440 Set that equal to a useState variable. 1794 00:53:58,440 --> 00:54:00,350 And again, we want to get that from our event. 1795 00:54:00,350 --> 00:54:01,937 So we'll say event allDay, 1796 00:54:02,876 --> 00:54:05,052 or we're gonna set it to false as the default value 1797 00:54:05,052 --> 00:54:05,885 if this does not exist. 1798 00:54:05,885 --> 00:54:07,590 Then what we can do is we can come down here 1799 00:54:07,590 --> 00:54:09,900 where we actually have our end time and our start time. 1800 00:54:09,900 --> 00:54:11,160 And on our input here, 1801 00:54:11,160 --> 00:54:13,800 what I wanna do is I wanna make sure that this is required 1802 00:54:13,800 --> 00:54:16,170 only if our all day is not checked. 1803 00:54:16,170 --> 00:54:17,957 So if all day is not checked, it should be required. 1804 00:54:17,957 --> 00:54:21,930 And we wanna disable this if isAllDay is checked. 1805 00:54:21,930 --> 00:54:22,763 There we go. 1806 00:54:22,763 --> 00:54:24,870 I wanna do the exact same thing on this input. 1807 00:54:24,870 --> 00:54:26,370 So let's just paste that down in there, 1808 00:54:26,370 --> 00:54:27,570 give that a quick save. 1809 00:54:27,570 --> 00:54:28,950 So now if I check isAllDay, 1810 00:54:28,950 --> 00:54:30,690 it should disable both of these inputs, 1811 00:54:30,690 --> 00:54:32,100 but it doesn't look like it's quite working. 1812 00:54:32,100 --> 00:54:34,470 That's 'cause I haven't hooked up isAllDay yet 1813 00:54:34,470 --> 00:54:35,850 to actually that state variable. 1814 00:54:35,850 --> 00:54:37,470 So here for our input, 1815 00:54:37,470 --> 00:54:40,410 what I wanna do is I want to have a checked property 1816 00:54:40,410 --> 00:54:44,460 which is equal to our isAllDayChecked. 1817 00:54:44,460 --> 00:54:47,880 And onChange here, I wanna set that to a function 1818 00:54:47,880 --> 00:54:49,230 which just sets the correct value. 1819 00:54:49,230 --> 00:54:50,700 So we can get that from our e here 1820 00:54:50,700 --> 00:54:53,340 and we can just say isAllDayChecked? 1821 00:54:53,340 --> 00:54:54,810 We wanna set that. 1822 00:54:54,810 --> 00:54:57,150 So setIsAllDayChecked. 1823 00:54:57,150 --> 00:54:58,170 There we go. 1824 00:54:58,170 --> 00:55:02,010 And we just wanna do the e.target.value. 1825 00:55:02,010 --> 00:55:05,070 And actually this should say checked not value. 1826 00:55:05,070 --> 00:55:05,903 There we go. 1827 00:55:05,903 --> 00:55:06,960 Give that a quick save. 1828 00:55:06,960 --> 00:55:07,860 And now if I toggle this, 1829 00:55:07,860 --> 00:55:10,260 you can see that these go from actual valid inputs 1830 00:55:10,260 --> 00:55:12,390 to disabled inputs, which is great. 1831 00:55:12,390 --> 00:55:13,470 Also our name field here, 1832 00:55:13,470 --> 00:55:14,910 we can make sure that this is required. 1833 00:55:14,910 --> 00:55:17,130 So we're just gonna put the required check on that as well. 1834 00:55:17,130 --> 00:55:17,963 Another thing that we can do 1835 00:55:17,963 --> 00:55:19,160 is we don't need these name properties 1836 00:55:19,160 --> 00:55:20,970 so we can just remove these name properties. 1837 00:55:20,970 --> 00:55:21,803 We don't need them 1838 00:55:21,803 --> 00:55:23,370 because of how we're going to be handling all of our stuff. 1839 00:55:23,370 --> 00:55:25,440 So let's remove this name property here, 1840 00:55:25,440 --> 00:55:27,120 this name property here. 1841 00:55:27,120 --> 00:55:29,110 But for our actual radio inputs, we need the name 1842 00:55:29,110 --> 00:55:31,830 so it is able to link up all of our radio inputs together. 1843 00:55:31,830 --> 00:55:33,870 So we're just gonna keep that as is for now. 1844 00:55:33,870 --> 00:55:34,830 So now scrolling back up, 1845 00:55:34,830 --> 00:55:37,170 the last kind of validation check we need to do 1846 00:55:37,170 --> 00:55:38,122 inside of our HTML 1847 00:55:38,122 --> 00:55:39,660 is to make sure that our start time 1848 00:55:39,660 --> 00:55:41,400 is always before our end time. 1849 00:55:41,400 --> 00:55:43,290 So we need to give this a minimum value 1850 00:55:43,290 --> 00:55:45,570 which is just equal to whatever our start time is. 1851 00:55:45,570 --> 00:55:47,370 So we need to obviously turn our start time 1852 00:55:47,370 --> 00:55:48,678 into a state variable. 1853 00:55:48,678 --> 00:55:50,070 So same thing we've done here. 1854 00:55:50,070 --> 00:55:51,510 I'm just gonna copy this down. 1855 00:55:51,510 --> 00:55:53,277 This is going to say startTime. 1856 00:55:54,630 --> 00:55:56,180 This is gonna say setStartTime, 1857 00:55:58,380 --> 00:55:59,340 just like that. 1858 00:55:59,340 --> 00:56:01,440 By default, it's our event startTime, 1859 00:56:01,440 --> 00:56:03,930 otherwise we're just gonna default it to an empty string. 1860 00:56:03,930 --> 00:56:05,700 So now, if we give that a save real quick, 1861 00:56:05,700 --> 00:56:08,400 and let's say we set our set time to 2:37 PM 1862 00:56:08,400 --> 00:56:11,730 and our end time we try to set to 4:00 AM, 1863 00:56:11,730 --> 00:56:13,380 if I click add, you're gonna notice 1864 00:56:13,380 --> 00:56:14,940 if I actually give this a name, 1865 00:56:14,940 --> 00:56:15,773 it looks like it's working. 1866 00:56:15,773 --> 00:56:17,940 So clearly it's not quite working like we want it to, 1867 00:56:17,940 --> 00:56:18,773 obviously. 1868 00:56:18,773 --> 00:56:20,700 And that's 'cause we're not setting our start time properly. 1869 00:56:20,700 --> 00:56:21,533 So let's scroll down here 1870 00:56:21,533 --> 00:56:23,580 to where we have our start time and our end time. 1871 00:56:23,580 --> 00:56:24,413 And what I wanna do 1872 00:56:24,413 --> 00:56:27,660 is I want my value to be equal to my startTime, 1873 00:56:27,660 --> 00:56:30,272 and onChange here we want to set that start time. 1874 00:56:30,272 --> 00:56:34,640 So we can say we're going to set our start time 1875 00:56:34,640 --> 00:56:37,980 equal to e.target.value. 1876 00:56:37,980 --> 00:56:39,300 So that should hopefully fix that problem. 1877 00:56:39,300 --> 00:56:42,177 So now if I try to set my start time to 2:37, 1878 00:56:42,177 --> 00:56:44,580 and I set my end time here, we'll say 1:37, 1879 00:56:44,580 --> 00:56:45,930 so it's before it, 1880 00:56:45,930 --> 00:56:46,763 and we click add, 1881 00:56:46,763 --> 00:56:49,050 you're gonna notice it says it must be after 2:37. 1882 00:56:49,050 --> 00:56:50,940 If I change my start time to, for example, 1883 00:56:50,940 --> 00:56:52,860 be like 8:00 AM or 7:00 AM, 1884 00:56:52,860 --> 00:56:54,480 that's obviously before 1:30. 1885 00:56:54,480 --> 00:56:55,313 Click add, 1886 00:56:55,313 --> 00:56:56,430 and now it's working properly. 1887 00:56:56,430 --> 00:56:57,263 So now the next thing to do 1888 00:56:57,263 --> 00:56:58,980 is just to finish up the other inputs that we have. 1889 00:56:58,980 --> 00:57:00,270 So we have our start time being tracked, 1890 00:57:00,270 --> 00:57:01,920 we have our all day being tracked, 1891 00:57:01,920 --> 00:57:03,510 and we have our color being tracked. 1892 00:57:03,510 --> 00:57:05,970 We just need to track our end time and our name. 1893 00:57:05,970 --> 00:57:06,803 And to track those, 1894 00:57:06,803 --> 00:57:07,890 I'm just gonna be using refs 1895 00:57:07,890 --> 00:57:09,510 'cause that's about the easiest way to do this. 1896 00:57:09,510 --> 00:57:10,470 So in our end time here, 1897 00:57:10,470 --> 00:57:11,610 I can just say that we have a ref 1898 00:57:11,610 --> 00:57:14,147 and that's just equal to endTimeRef. 1899 00:57:14,147 --> 00:57:15,930 We can do the exact same thing for our name. 1900 00:57:15,930 --> 00:57:18,030 So we'll come up to where we have our name, 1901 00:57:18,030 --> 00:57:19,488 we're gonna set a ref to our nameRef. 1902 00:57:19,488 --> 00:57:21,600 And let's just create those variables here 1903 00:57:21,600 --> 00:57:24,120 so we can scroll back up to where we were 1904 00:57:24,120 --> 00:57:27,570 and we can say we have our const endTimeRef, 1905 00:57:27,570 --> 00:57:29,147 which is equal to useRef, 1906 00:57:30,330 --> 00:57:31,560 just like that. 1907 00:57:31,560 --> 00:57:32,610 We want this to be null 1908 00:57:32,610 --> 00:57:34,980 because we know that we're going to be using an HTML element 1909 00:57:34,980 --> 00:57:37,497 and in our case this is an HTML input element. 1910 00:57:37,497 --> 00:57:38,790 Now I can copy this down, 1911 00:57:38,790 --> 00:57:41,850 I'm gonna do the exact same thing for our nameRef. 1912 00:57:41,850 --> 00:57:42,683 There we go. 1913 00:57:42,683 --> 00:57:43,950 So now we have all of our different properties 1914 00:57:43,950 --> 00:57:44,850 being hooked up. 1915 00:57:44,850 --> 00:57:45,780 And now we can just make it 1916 00:57:45,780 --> 00:57:47,760 so that our form has an onSubmit. 1917 00:57:47,760 --> 00:57:49,260 So we're gonna say onSubmit, 1918 00:57:49,260 --> 00:57:51,690 is gonna call a handleSubmit function, 1919 00:57:51,690 --> 00:57:53,290 which we'll just create up here. 1920 00:57:55,044 --> 00:57:56,127 HandleSubmit, 1921 00:57:58,230 --> 00:57:59,163 just like that. 1922 00:58:00,270 --> 00:58:02,160 This is gonna take in an event property 1923 00:58:02,160 --> 00:58:04,260 which is a FormEvent. 1924 00:58:04,260 --> 00:58:07,170 We wanna make sure that we prevent the default of this. 1925 00:58:07,170 --> 00:58:09,155 Then what we wanna do is we want to get our name, 1926 00:58:09,155 --> 00:58:12,275 which is coming from our nameRef.current. 1927 00:58:12,275 --> 00:58:13,740 And we wanna get the value from that. 1928 00:58:13,740 --> 00:58:16,080 I wanna do the exact same thing with our endTime. 1929 00:58:16,080 --> 00:58:18,450 So we just have all of the variables to work with. 1930 00:58:18,450 --> 00:58:20,370 This is our endTimeRef. 1931 00:58:20,370 --> 00:58:23,193 So now, if for some reason our name equals null, 1932 00:58:25,530 --> 00:58:29,400 or our name equals an empty string, 1933 00:58:29,400 --> 00:58:31,830 we could do the exact same thing for all of other props. 1934 00:58:31,830 --> 00:58:35,190 Or if our startTime is equal to null, 1935 00:58:35,190 --> 00:58:39,090 or our startTime equals an empty string 1936 00:58:39,090 --> 00:58:41,940 or the same thing for our endTime if it's equal to null, 1937 00:58:41,940 --> 00:58:45,090 or if our endTime is equal to an empty string, 1938 00:58:45,090 --> 00:58:46,320 well, we just want to stop, 1939 00:58:46,320 --> 00:58:48,090 so we're gonna call return here. 1940 00:58:48,090 --> 00:58:49,170 So if in some reason 1941 00:58:49,170 --> 00:58:51,270 all of our variables here that are required 1942 00:58:51,270 --> 00:58:52,440 are not specified, 1943 00:58:52,440 --> 00:58:54,210 we want to do a quick return. 1944 00:58:54,210 --> 00:58:55,560 And actually we really shouldn't check 1945 00:58:55,560 --> 00:58:57,390 for our start or end time quite yet 1946 00:58:57,390 --> 00:58:59,100 because those can be null 1947 00:58:59,100 --> 00:59:02,670 as long as our all day is actually set to true, 1948 00:59:02,670 --> 00:59:03,570 because then obviously, 1949 00:59:03,570 --> 00:59:05,120 we don't wanna start time or an end time. 1950 00:59:05,120 --> 00:59:07,770 So let's just do our name check, very first thing, 1951 00:59:07,770 --> 00:59:08,640 then what we can do 1952 00:59:08,640 --> 00:59:09,840 is we can actually check to see 1953 00:59:09,840 --> 00:59:11,640 if we need to do that additional check. 1954 00:59:11,640 --> 00:59:14,388 So first, let's create something called commonProps. 1955 00:59:14,388 --> 00:59:15,270 And this is just gonna be an object 1956 00:59:15,270 --> 00:59:16,410 that contains all the properties 1957 00:59:16,410 --> 00:59:18,480 that are shared between the all day scenario 1958 00:59:18,480 --> 00:59:20,250 and the non all day scenario. 1959 00:59:20,250 --> 00:59:22,200 So our name is the same for all of them. 1960 00:59:22,200 --> 00:59:24,330 Our date here is just going to be our date 1961 00:59:24,330 --> 00:59:26,970 or it's going to be the actual date of our event. 1962 00:59:26,970 --> 00:59:27,810 So either one of these, 1963 00:59:27,810 --> 00:59:28,920 whichever one we parse in 1964 00:59:28,920 --> 00:59:30,480 is going to be what we pass to our date. 1965 00:59:30,480 --> 00:59:31,890 That's perfectly fine. 1966 00:59:31,890 --> 00:59:33,000 And then finally, our color 1967 00:59:33,000 --> 00:59:34,650 is going to be our selected color. 1968 00:59:34,650 --> 00:59:37,620 Every single event has these props, no matter what. 1969 00:59:37,620 --> 00:59:40,080 Then if our all day is checked, 1970 00:59:40,080 --> 00:59:42,270 what we need to do is we need to check to see 1971 00:59:42,270 --> 00:59:43,467 that we don't have a start date 1972 00:59:43,467 --> 00:59:45,120 and we don't have an end date. 1973 00:59:45,120 --> 00:59:47,387 So here, we can make sure that our new event, 1974 00:59:47,387 --> 00:59:49,260 which we're just gonna create as a variable, 1975 00:59:49,260 --> 00:59:53,820 say newEvent is equal to... 1976 00:59:53,820 --> 00:59:57,183 And we'll make this a UnionOmit of our event. 1977 00:59:58,110 --> 00:59:59,520 And sorry, that shouldn't be an equal there, 1978 00:59:59,520 --> 01:00:00,540 that should be our type right there. 1979 01:00:00,540 --> 01:00:02,757 So we have a UnionOmit between our event 1980 01:00:02,757 --> 01:00:04,380 and we're gonna get rid of that id. 1981 01:00:04,380 --> 01:00:06,090 So essentially, this is just what we're trying to create 1982 01:00:06,090 --> 01:00:06,990 as a brand new event. 1983 01:00:06,990 --> 01:00:08,520 Let's make this a let variable, 1984 01:00:08,520 --> 01:00:09,540 just like that. 1985 01:00:09,540 --> 01:00:11,078 Then what we can do 1986 01:00:11,078 --> 01:00:12,256 is we can say our newEvent 1987 01:00:12,256 --> 01:00:15,390 is equal to all of our commonProps combined together, 1988 01:00:15,390 --> 01:00:18,030 plus we wanna say that our allDay is true, 1989 01:00:18,030 --> 01:00:18,930 just like that. 1990 01:00:18,930 --> 01:00:19,950 So now we have a new event 1991 01:00:19,950 --> 01:00:21,360 that is essentially this exact type, 1992 01:00:21,360 --> 01:00:22,860 which is just exactly what we want. 1993 01:00:22,860 --> 01:00:24,750 If we didn't have this all day being specified, 1994 01:00:24,750 --> 01:00:25,583 we're gonna get an error 1995 01:00:25,583 --> 01:00:28,020 because obviously it's saying it must be specified. 1996 01:00:28,020 --> 01:00:30,600 We can do the exact same thing in the other scenario. 1997 01:00:30,600 --> 01:00:33,076 So in this scenario, we just want to specify 1998 01:00:33,076 --> 01:00:34,676 that our newEvent 1999 01:00:34,676 --> 01:00:36,794 is going to be equal to all of our commonProps, 2000 01:00:36,794 --> 01:00:38,220 just like before. 2001 01:00:38,220 --> 01:00:41,176 But here, our allDay is set to false 2002 01:00:41,176 --> 01:00:43,140 and we also wanna specify 2003 01:00:43,140 --> 01:00:44,670 that our startTime is equal to our start time 2004 01:00:46,620 --> 01:00:49,650 and our endTime is equal to our end time. 2005 01:00:49,650 --> 01:00:51,930 Also, before we do this is where we should check to see 2006 01:00:51,930 --> 01:00:53,760 if our startTime equals null 2007 01:00:53,760 --> 01:00:57,420 or if our startTime is equal to an empty string. 2008 01:00:57,420 --> 01:00:59,026 So we'll say startTime here, 2009 01:00:59,026 --> 01:01:01,560 and I wanna do the exact same thing with our endTime, 2010 01:01:01,560 --> 01:01:05,490 so it is equal to null or an empty string. 2011 01:01:05,490 --> 01:01:07,535 Then we should do a return here as well. 2012 01:01:07,535 --> 01:01:08,823 There we go. 2013 01:01:09,762 --> 01:01:10,680 So now with this code, 2014 01:01:10,680 --> 01:01:11,850 what we've essentially done is we said, 2015 01:01:11,850 --> 01:01:13,350 hey, make sure our name is defined. 2016 01:01:13,350 --> 01:01:14,183 If it's defined, 2017 01:01:14,183 --> 01:01:16,110 go ahead and define all of the common properties 2018 01:01:16,110 --> 01:01:17,670 we use for all of our events, 2019 01:01:17,670 --> 01:01:18,690 and then create a new event 2020 01:01:18,690 --> 01:01:20,130 that's either an all day event, 2021 01:01:20,130 --> 01:01:21,600 or if it's not an all day event, 2022 01:01:21,600 --> 01:01:23,370 check to make sure our start and end time are defined. 2023 01:01:23,370 --> 01:01:24,630 And if so, create a new event 2024 01:01:24,630 --> 01:01:26,970 that is an all day event or not an all day event. 2025 01:01:26,970 --> 01:01:29,430 Sorry, all day is set to false here. 2026 01:01:29,430 --> 01:01:30,330 Then what we can do 2027 01:01:30,330 --> 01:01:32,460 is we can actually call the onSubmit function 2028 01:01:32,460 --> 01:01:33,330 that's being parsed in. 2029 01:01:33,330 --> 01:01:35,031 We have this onSubmit, 2030 01:01:35,031 --> 01:01:36,360 let's use that onSubmit. 2031 01:01:36,360 --> 01:01:38,910 So we can come down here below all of these if statements, 2032 01:01:38,910 --> 01:01:42,180 we can call onSubmit and parse it in our newEvent. 2033 01:01:42,180 --> 01:01:43,470 Also we can close our modal. 2034 01:01:43,470 --> 01:01:47,880 So we can say modalProps.onClose to close out of our modal. 2035 01:01:47,880 --> 01:01:49,140 Now, if we give that a save, 2036 01:01:49,140 --> 01:01:49,973 click this plus button, 2037 01:01:49,973 --> 01:01:52,110 this should hopefully create a brand new event for us. 2038 01:01:52,110 --> 01:01:53,400 So we just type in something here, 2039 01:01:53,400 --> 01:01:54,233 we'll make it an all day, 2040 01:01:54,233 --> 01:01:55,896 we'll make it green, 2041 01:01:55,896 --> 01:01:56,729 we'll click add, 2042 01:01:56,729 --> 01:01:57,871 and it closed out of our modal. 2043 01:01:57,871 --> 01:01:59,160 So that means that everything should have worked, 2044 01:01:59,160 --> 01:02:00,240 which is great. 2045 01:02:00,240 --> 01:02:01,073 Now, we don't see our event 2046 01:02:01,073 --> 01:02:02,520 'cause we're not rendering them out, 2047 01:02:02,520 --> 01:02:04,350 but that's the next thing we can work on. 2048 01:02:04,350 --> 01:02:05,310 So let's scroll up your ways 2049 01:02:05,310 --> 01:02:06,497 and we'll just kind of minimize this stuff down 2050 01:02:06,497 --> 01:02:08,220 'cause we're mostly done 2051 01:02:08,220 --> 01:02:09,750 with the working of this kind of stuff. 2052 01:02:09,750 --> 01:02:11,610 So we'll minimize this entire function 2053 01:02:11,610 --> 01:02:13,320 and we'll just minimize down this type real quick 2054 01:02:13,320 --> 01:02:15,180 so we don't have all that code in our faces. 2055 01:02:15,180 --> 01:02:17,060 And the next thing I wanna do is render out our events 2056 01:02:17,060 --> 01:02:19,290 so I'm gonna obviously uncomment this. 2057 01:02:19,290 --> 01:02:20,940 And what I wanna do is if we have some events, 2058 01:02:20,940 --> 01:02:22,530 I want to actually render them out. 2059 01:02:22,530 --> 01:02:23,363 So to get to our events, 2060 01:02:23,363 --> 01:02:25,127 we're actually gonna pass them into our CalendarDay here 2061 01:02:25,127 --> 01:02:27,557 'cause we wanna get just the events for the particular day. 2062 01:02:27,557 --> 01:02:29,070 And we want them to be sorted 2063 01:02:29,070 --> 01:02:31,470 so we're gonna pass in something called sortedEvents. 2064 01:02:31,470 --> 01:02:33,180 And let's actually create a type for that. 2065 01:02:33,180 --> 01:02:34,820 So we're gonna say our sortedEvents 2066 01:02:34,820 --> 01:02:37,140 is just an array of event objects, 2067 01:02:37,140 --> 01:02:38,250 rather straightforward. 2068 01:02:38,250 --> 01:02:40,800 So now we can actually use that sortedEvents down here. 2069 01:02:40,800 --> 01:02:45,800 So we can say if sortedEvents.length is greater than zero, 2070 01:02:46,470 --> 01:02:47,310 well, then what I wanna do 2071 01:02:47,310 --> 01:02:50,040 is I wanna render out all of this code inside of here. 2072 01:02:50,040 --> 01:02:51,120 I'm gonna copy this, 2073 01:02:51,120 --> 01:02:51,953 paste this into there, 2074 01:02:51,953 --> 01:02:53,176 just like that. 2075 01:02:53,176 --> 01:02:54,120 So we have all of our different events rendering out. 2076 01:02:54,120 --> 01:02:55,530 Obviously, we're not looping through them right now, 2077 01:02:55,530 --> 01:02:56,580 but that's perfectly okay, 2078 01:02:56,580 --> 01:02:57,690 that's going to work. 2079 01:02:57,690 --> 01:02:59,250 Now, we can actually make sure we parse in 2080 01:02:59,250 --> 01:03:00,210 our sorted events. 2081 01:03:00,210 --> 01:03:02,340 So up here where we have our days 2082 01:03:02,340 --> 01:03:03,720 and we're rendering around each calendar day, 2083 01:03:03,720 --> 01:03:06,420 we need to have our sorted events. 2084 01:03:06,420 --> 01:03:07,290 Now, our sorted events 2085 01:03:07,290 --> 01:03:08,790 are going to come from all of our events. 2086 01:03:08,790 --> 01:03:11,010 So we can use our nice hook that we've already created 2087 01:03:11,010 --> 01:03:12,810 called the useEvents. 2088 01:03:12,810 --> 01:03:15,123 We can get our events from that, 2089 01:03:16,380 --> 01:03:17,626 just like this. 2090 01:03:17,626 --> 01:03:19,320 And then what we can do is inside of here, 2091 01:03:19,320 --> 01:03:20,490 we can just run a simple function 2092 01:03:20,490 --> 01:03:22,110 that's going to get the correct events for us. 2093 01:03:22,110 --> 01:03:23,400 So we can say events, 2094 01:03:23,400 --> 01:03:25,830 we wanna filter our different events 2095 01:03:25,830 --> 01:03:28,380 for each event where it is the same day... 2096 01:03:28,380 --> 01:03:31,920 Oops, same day as the day that we're looping through. 2097 01:03:31,920 --> 01:03:33,780 Let me make sure that we import that properly, 2098 01:03:33,780 --> 01:03:35,400 it looks like we are. 2099 01:03:35,400 --> 01:03:37,590 And we wanna make sure it's the same day as our day 2100 01:03:37,590 --> 01:03:39,180 and our events day. 2101 01:03:39,180 --> 01:03:40,013 So our event date 2102 01:03:40,013 --> 01:03:42,090 is exactly the same as the current day that we're on, 2103 01:03:42,090 --> 01:03:44,130 and that's going to give us an array of sorted events. 2104 01:03:44,130 --> 01:03:46,920 So now we have our array of sorted events down here. 2105 01:03:46,920 --> 01:03:49,050 We're looping or checking to see if we have sorted events 2106 01:03:49,050 --> 01:03:50,910 and if we do, we're trying to render them out. 2107 01:03:50,910 --> 01:03:53,190 So right now, it won't render the correct event 2108 01:03:53,190 --> 01:03:54,060 but if we have an event, 2109 01:03:54,060 --> 01:03:55,770 it should render this placeholder data. 2110 01:03:55,770 --> 01:03:58,320 So if I create an event here, for example, 2111 01:03:58,320 --> 01:03:59,367 let's just make it an all day green event. 2112 01:03:59,367 --> 01:04:02,160 And I add, you can see it's showing that placeholder data 2113 01:04:02,160 --> 01:04:03,690 because it says that there is an event 2114 01:04:03,690 --> 01:04:06,180 so it's obviously going to show us the event. 2115 01:04:06,180 --> 01:04:07,710 Now, one thing we do need to change real quick 2116 01:04:07,710 --> 01:04:10,050 is the events we're parsing in here are actually not sorted. 2117 01:04:10,050 --> 01:04:11,550 So we're just gonna call this events instead 2118 01:04:11,550 --> 01:04:13,050 'cause they're not technically sorted events, 2119 01:04:13,050 --> 01:04:13,950 they're just normal events, 2120 01:04:13,950 --> 01:04:15,330 we haven't sorted them yet. 2121 01:04:15,330 --> 01:04:17,100 We're gonna sort them inside of here. 2122 01:04:17,100 --> 01:04:18,990 So this again changes to events. 2123 01:04:18,990 --> 01:04:22,437 And instead we're gonna get our sortedEvents like this. 2124 01:04:22,437 --> 01:04:24,120 And we're gonna use memo for this, again, 2125 01:04:24,120 --> 01:04:26,070 'cause this is something that could be time consuming, 2126 01:04:26,070 --> 01:04:27,770 we don't wanna waste a bunch of time on this function, 2127 01:04:27,770 --> 01:04:31,050 we only wanna run it when our events change. 2128 01:04:31,050 --> 01:04:33,900 So if our events change, then we can recall this function. 2129 01:04:33,900 --> 01:04:35,010 So this sortedEvents function 2130 01:04:35,010 --> 01:04:36,270 is gonna be a little bit complicated. 2131 01:04:36,270 --> 01:04:37,103 The first thing I wanna do 2132 01:04:37,103 --> 01:04:38,520 is I wanna create a really simple function 2133 01:04:38,520 --> 01:04:39,390 that's going to convert 2134 01:04:39,390 --> 01:04:41,250 the actual time of the event to a number, 2135 01:04:41,250 --> 01:04:43,260 so we can do a comparison between them. 2136 01:04:43,260 --> 01:04:45,274 So I'm gonna say timeToNumber, 2137 01:04:45,274 --> 01:04:46,710 is going to be a function we create, 2138 01:04:46,710 --> 01:04:48,120 which is gonna take in a time string 2139 01:04:48,120 --> 01:04:50,190 which comes from our actual time, 2140 01:04:50,190 --> 01:04:52,050 and it's just going to be numbers that look like this. 2141 01:04:52,050 --> 01:04:54,630 For example, it's gonna be like 12:43, 2142 01:04:54,630 --> 01:04:58,170 or it's going to be something like 20:42. 2143 01:04:58,170 --> 01:04:59,190 That's what it's going to look like. 2144 01:04:59,190 --> 01:05:00,870 I'm essentially just going to replace this colon 2145 01:05:00,870 --> 01:05:01,703 with a period, 2146 01:05:01,703 --> 01:05:03,030 and that'll give us an actual number 2147 01:05:03,030 --> 01:05:04,290 as opposed to a string. 2148 01:05:04,290 --> 01:05:06,000 So we're taking in this string, 2149 01:05:06,000 --> 01:05:08,340 what I wanna do is I wanna split it. 2150 01:05:08,340 --> 01:05:10,140 So time.replace. 2151 01:05:10,140 --> 01:05:12,900 I wanna replace it by replacing the colon here 2152 01:05:12,900 --> 01:05:13,770 with a period. 2153 01:05:13,770 --> 01:05:15,180 And then I just wanna turn that into a number 2154 01:05:15,180 --> 01:05:16,730 by calling parseFloat. 2155 01:05:17,640 --> 01:05:18,473 There we go. 2156 01:05:19,684 --> 01:05:22,430 So this is going to give us a number from the actual time 2157 01:05:22,430 --> 01:05:24,240 so we can use that in our comparisons. 2158 01:05:24,240 --> 01:05:26,880 And then what I wanna do is I wanna just sort my events. 2159 01:05:26,880 --> 01:05:29,730 So first of all, I'm gonna say events.sort, 2160 01:05:29,730 --> 01:05:31,890 and the reason I'm converting this into a brand new array 2161 01:05:31,890 --> 01:05:33,780 is 'cause sort sorts in place, 2162 01:05:33,780 --> 01:05:35,790 and we actually want to sort the new array, 2163 01:05:35,790 --> 01:05:37,260 we wanna create a copy to sort, 2164 01:05:37,260 --> 01:05:38,280 so this creates a copy 2165 01:05:38,280 --> 01:05:39,900 and then we're going to sort it. 2166 01:05:39,900 --> 01:05:42,807 So we can sort through A and B. 2167 01:05:42,807 --> 01:05:45,450 And what we wanna do is here, first of all, 2168 01:05:45,450 --> 01:05:50,450 if A is an all day event and B is an all day event, 2169 01:05:52,590 --> 01:05:54,480 then what we wanna do is we return zero 2170 01:05:54,480 --> 01:05:56,670 because we're saying that they're both exactly the same, 2171 01:05:56,670 --> 01:05:58,650 it doesn't matter what the order is. 2172 01:05:58,650 --> 01:06:00,780 Else if, A is an all day event, 2173 01:06:00,780 --> 01:06:02,340 and that means B is not all day, 2174 01:06:02,340 --> 01:06:03,750 then we're gonna return negative one 2175 01:06:03,750 --> 01:06:06,120 'cause A should be before the B. 2176 01:06:06,120 --> 01:06:06,953 Same thing here. 2177 01:06:06,953 --> 01:06:09,360 If B is all day, we're gonna return one 2178 01:06:09,360 --> 01:06:11,820 'cause we want B to show up after A. 2179 01:06:11,820 --> 01:06:14,700 And then finally, if both of them are not all day events, 2180 01:06:14,700 --> 01:06:17,100 we wanna just convert the time to number 2181 01:06:17,100 --> 01:06:18,927 for our startTime of both of them, 2182 01:06:18,927 --> 01:06:20,310 and we wanna subtract them. 2183 01:06:20,310 --> 01:06:23,310 And that way, if our startTime for the first one is sooner, 2184 01:06:23,310 --> 01:06:24,813 it's going to show up first. 2185 01:06:24,813 --> 01:06:25,680 Same thing here, 2186 01:06:25,680 --> 01:06:28,620 timeToNumber, b.startTime. 2187 01:06:28,620 --> 01:06:29,490 There we go. 2188 01:06:29,490 --> 01:06:31,490 And let's make sure that we return that. 2189 01:06:32,356 --> 01:06:33,777 That should fix all the different errors that we have. 2190 01:06:33,777 --> 01:06:35,850 And this will actually give us our sortedEvents now, 2191 01:06:35,850 --> 01:06:37,980 which is exactly what we want to use down here. 2192 01:06:37,980 --> 01:06:39,360 And now we can actually render those events 2193 01:06:39,360 --> 01:06:41,460 instead of just this placeholder data. 2194 01:06:41,460 --> 01:06:43,080 So let's create a new component to do that. 2195 01:06:43,080 --> 01:06:44,190 It's going to essentially emulate 2196 01:06:44,190 --> 01:06:45,540 what these buttons look like. 2197 01:06:45,540 --> 01:06:48,673 I'm gonna create a function called CalendarEvent, 2198 01:06:50,010 --> 01:06:51,000 just like that. 2199 01:06:51,000 --> 01:06:53,730 For now, I'm just gonna return to div that says "hi." 2200 01:06:53,730 --> 01:06:54,600 There we go. 2201 01:06:54,600 --> 01:06:55,433 And inside of here, 2202 01:06:55,433 --> 01:06:57,368 we just wanna parse in whatever our event is. 2203 01:06:57,368 --> 01:06:58,950 So we can say that the type of this 2204 01:06:58,950 --> 01:07:00,930 is just going to be an event of the type event. 2205 01:07:00,930 --> 01:07:02,400 We can just type this in place 2206 01:07:02,400 --> 01:07:03,233 'cause it's so simple 2207 01:07:03,233 --> 01:07:05,430 we don't need to create another prop type for it. 2208 01:07:05,430 --> 01:07:06,523 Now, inside this CalendarEvent, 2209 01:07:06,523 --> 01:07:08,100 I essentially want to get the code up here. 2210 01:07:08,100 --> 01:07:09,450 And we have a few different types of events. 2211 01:07:09,450 --> 01:07:11,850 We have an all-day event and we have a non all-day event. 2212 01:07:11,850 --> 01:07:13,770 So we have two different things we need to return. 2213 01:07:13,770 --> 01:07:15,450 So I'm just gonna copy this code down 2214 01:07:15,450 --> 01:07:17,100 inside of my return here. 2215 01:07:17,100 --> 01:07:18,900 What I wanna do is I wanna render this out. 2216 01:07:18,900 --> 01:07:20,340 So in our case, we have a button 2217 01:07:20,340 --> 01:07:21,390 and this is an all day event 2218 01:07:21,390 --> 01:07:23,520 so it's gonna render out something specific. 2219 01:07:23,520 --> 01:07:26,759 So I can say our event.isAllDay, 2220 01:07:26,759 --> 01:07:28,260 I think I just called it allDay. 2221 01:07:28,260 --> 01:07:29,220 There we go. 2222 01:07:29,220 --> 01:07:30,053 If it's all day, 2223 01:07:30,053 --> 01:07:32,700 I want to render out this particular code. 2224 01:07:32,700 --> 01:07:34,140 And if it's not all day, 2225 01:07:34,140 --> 01:07:36,534 I want to render out the code that's inside of this button. 2226 01:07:36,534 --> 01:07:39,810 So I'm trying to copy this, I'm gonna paste that in here, 2227 01:07:39,810 --> 01:07:41,070 I'm gonna make sure I use fragments 2228 01:07:41,070 --> 01:07:42,600 so it can actually render out properly. 2229 01:07:42,600 --> 01:07:43,590 There we go. 2230 01:07:43,590 --> 01:07:45,270 So depending on if it's an all day event or not, 2231 01:07:45,270 --> 01:07:46,560 it's gonna render out different code. 2232 01:07:46,560 --> 01:07:48,360 And up here, we want to have different classes 2233 01:07:48,360 --> 01:07:50,220 based on if it's all day or not. 2234 01:07:50,220 --> 01:07:53,100 So here, let's just use that fancy CC function 2235 01:07:53,100 --> 01:07:54,300 we've created before. 2236 01:07:54,300 --> 01:07:56,040 So we know for a fact 2237 01:07:56,040 --> 01:07:58,650 we want to have the event class being applied, 2238 01:07:58,650 --> 01:08:01,440 then we want to have our event.color class being applied, 2239 01:08:01,440 --> 01:08:03,090 and finally, if it's an all day event 2240 01:08:03,090 --> 01:08:06,090 then we want to have this all-day-event class being applied. 2241 01:08:06,090 --> 01:08:07,960 So let's just get that in a string. 2242 01:08:07,960 --> 01:08:09,000 There we go. 2243 01:08:09,000 --> 01:08:10,143 Close that off. 2244 01:08:10,980 --> 01:08:13,650 We can say if our event.allDay, 2245 01:08:13,650 --> 01:08:16,310 then we want to render out that all day event as well. 2246 01:08:16,310 --> 01:08:17,143 So now let's go ahead 2247 01:08:17,143 --> 01:08:18,810 and actually show the correct information. 2248 01:08:18,810 --> 01:08:21,480 So here, this should say event.name, 2249 01:08:21,480 --> 01:08:22,633 just like that. 2250 01:08:22,633 --> 01:08:23,466 This is the name of our event. 2251 01:08:23,466 --> 01:08:27,120 Same thing here, this should be event.name. 2252 01:08:27,120 --> 01:08:29,400 Then we want to have the actual time being rendered out here 2253 01:08:29,400 --> 01:08:32,460 so we have that fancy formatDate function for a reason, 2254 01:08:32,460 --> 01:08:34,500 event.start time. 2255 01:08:34,500 --> 01:08:36,540 Now, unfortunately the start time is just a string 2256 01:08:36,540 --> 01:08:38,010 so we need to convert it to a date. 2257 01:08:38,010 --> 01:08:40,560 To do that, we can use the built-in parse function 2258 01:08:40,560 --> 01:08:43,770 which comes inside here of date-fns. 2259 01:08:43,770 --> 01:08:45,780 So we can get that import parse, 2260 01:08:45,780 --> 01:08:47,100 we can pass it in the startTime 2261 01:08:47,100 --> 01:08:48,690 as well as the format that this is in. 2262 01:08:48,690 --> 01:08:52,380 And we know this is in the format hours followed by minutes. 2263 01:08:52,380 --> 01:08:54,630 And we just need to tell it what day this event is for. 2264 01:08:54,630 --> 01:08:56,580 So we can say event.date. 2265 01:08:56,580 --> 01:08:57,413 So what this is going to do 2266 01:08:57,413 --> 01:08:59,390 is it's going to parse us out a brand new date. 2267 01:08:59,390 --> 01:09:01,170 If I just close that off real quick, 2268 01:09:01,170 --> 01:09:02,760 that's going to format us that date. 2269 01:09:02,760 --> 01:09:04,110 But the format is going to be incorrect, 2270 01:09:04,110 --> 01:09:06,750 we need to specify the format we want it to be in. 2271 01:09:06,750 --> 01:09:09,480 And the format we want it to be in is a timeStyle 2272 01:09:09,480 --> 01:09:12,270 and we want it to be in the shortest time style possible. 2273 01:09:12,270 --> 01:09:14,340 So all we've done here is we've taken our time, 2274 01:09:14,340 --> 01:09:15,300 which is a string, 2275 01:09:15,300 --> 01:09:18,000 we've parsed it into a date using this format, 2276 01:09:18,000 --> 01:09:19,770 and we've set it on this specific date 2277 01:09:19,770 --> 01:09:21,870 because our time doesn't have date information 2278 01:09:21,870 --> 01:09:23,520 so we need to tell it the date as well. 2279 01:09:23,520 --> 01:09:24,990 Even though we're not rendering that information, 2280 01:09:24,990 --> 01:09:27,510 we just need that to create a JavaScript date. 2281 01:09:27,510 --> 01:09:29,850 Lastly, do we need to get our class name up here correct. 2282 01:09:29,850 --> 01:09:33,190 So what we can do is we can say we have our color dot 2283 01:09:34,230 --> 01:09:37,500 and we're going to have our event.color, 2284 01:09:37,500 --> 01:09:38,333 just like that. 2285 01:09:38,333 --> 01:09:40,380 And again, we could've used the CC class or function 2286 01:09:40,380 --> 01:09:41,213 if we wanted. 2287 01:09:41,213 --> 01:09:42,660 This works just fine as well. 2288 01:09:42,660 --> 01:09:43,697 It should be pretty much everything we need 2289 01:09:43,697 --> 01:09:45,210 to get our actual event done. 2290 01:09:45,210 --> 01:09:46,440 It doesn't have any event listeners or anything, 2291 01:09:46,440 --> 01:09:47,670 it's just a static event 2292 01:09:47,670 --> 01:09:49,380 but that should work just fine. 2293 01:09:49,380 --> 01:09:50,940 So now here inside of this loop, 2294 01:09:50,940 --> 01:09:53,160 we can actually render out these calendar events. 2295 01:09:53,160 --> 01:09:53,993 So for our sortedEvents, 2296 01:09:53,993 --> 01:09:55,720 we can map through each event 2297 01:09:57,030 --> 01:09:59,970 and we can render out the CalendarEvent. 2298 01:10:01,129 --> 01:10:03,549 I can parse in the event 2299 01:10:03,549 --> 01:10:05,430 and I can make sure that I have a key 2300 01:10:05,430 --> 01:10:06,810 which is our event.id, 2301 01:10:06,810 --> 01:10:07,890 just like that. 2302 01:10:07,890 --> 01:10:08,723 Now if I save, 2303 01:10:08,723 --> 01:10:10,800 you can see our event is rendering just like it should. 2304 01:10:10,800 --> 01:10:12,090 And if we create an event 2305 01:10:12,090 --> 01:10:14,610 that has a start time and an end time, 2306 01:10:14,610 --> 01:10:16,710 and we give it a date of timed, 2307 01:10:16,710 --> 01:10:17,543 and I click add, 2308 01:10:17,543 --> 01:10:18,376 let's make it red, 2309 01:10:18,376 --> 01:10:19,767 you can now see we have that showing up right here. 2310 01:10:19,767 --> 01:10:21,480 And if I make it a little bit wider, 2311 01:10:21,480 --> 01:10:22,950 we can actually see the title. 2312 01:10:22,950 --> 01:10:24,750 You can see it says timed, it's got the red dot. 2313 01:10:24,750 --> 01:10:26,880 It's looking exactly like we want it to. 2314 01:10:26,880 --> 01:10:29,572 So now let's look at our README and see what we have left, 2315 01:10:29,572 --> 01:10:30,780 because we've actually, I think completed everything 2316 01:10:30,780 --> 01:10:32,040 in these next two steps. 2317 01:10:32,040 --> 01:10:34,560 So step two here, we've created the new event modal 2318 01:10:34,560 --> 01:10:36,630 and it follows all of these different steps. 2319 01:10:36,630 --> 01:10:39,060 We've also rendered our events and they are stored properly. 2320 01:10:39,060 --> 01:10:40,740 For example, if I create a new event, 2321 01:10:40,740 --> 01:10:43,770 and let's say that this one actually starts at 11:00 AM 2322 01:10:43,770 --> 01:10:44,610 and it ends whenever, 2323 01:10:44,610 --> 01:10:46,290 it doesn't really matter when it ends, 2324 01:10:46,290 --> 01:10:47,123 let's make it green, 2325 01:10:47,123 --> 01:10:48,660 and we should say we'll call this one later 2326 01:10:48,660 --> 01:10:49,770 'cause it should show up later. 2327 01:10:49,770 --> 01:10:50,670 When I click add, 2328 01:10:50,670 --> 01:10:52,830 you can see well, actually it's 11:55 AM, 2329 01:10:52,830 --> 01:10:53,820 so it's rendering before. 2330 01:10:53,820 --> 01:10:55,157 So we do know our sorting's working properly 2331 01:10:55,157 --> 01:10:56,730 'cause it's going all day events 2332 01:10:56,730 --> 01:10:58,290 followed by the ones that start earlier 2333 01:10:58,290 --> 01:11:00,120 and then the ones that start later. 2334 01:11:00,120 --> 01:11:01,650 Now, the next thing we need to do is step four, 2335 01:11:01,650 --> 01:11:03,570 which is essentially when we click on one of these events, 2336 01:11:03,570 --> 01:11:05,850 I want it to open up a modal so we can edit it. 2337 01:11:05,850 --> 01:11:07,890 And this is actually going to be rather simple 2338 01:11:07,890 --> 01:11:10,470 because we already have our event form modal done, 2339 01:11:10,470 --> 01:11:12,630 we just need to parse in the right props to it. 2340 01:11:12,630 --> 01:11:13,620 So instead of our calendar here, 2341 01:11:13,620 --> 01:11:14,700 we have this EventFormModal. 2342 01:11:14,700 --> 01:11:16,260 This is for creating a new event. 2343 01:11:16,260 --> 01:11:17,093 Let's copy that down 2344 01:11:17,093 --> 01:11:18,540 because for each one of our events 2345 01:11:18,540 --> 01:11:20,190 we want to also have a modal here. 2346 01:11:20,190 --> 01:11:21,774 So I'm just gonna place down this modal, 2347 01:11:21,774 --> 01:11:23,460 make sure everything is inside of fragments 2348 01:11:23,460 --> 01:11:26,250 so that React will let this actually render out properly. 2349 01:11:26,250 --> 01:11:28,170 So now we have a modal for each one of our events 2350 01:11:28,170 --> 01:11:30,060 and we just need to parse in the correct information. 2351 01:11:30,060 --> 01:11:32,160 In our case, we want to parse in the event, 2352 01:11:32,160 --> 01:11:33,960 which we have right here as our event. 2353 01:11:33,960 --> 01:11:35,460 We also want to pass in our onSubmit, 2354 01:11:35,460 --> 01:11:38,280 which is going to be for updating our event. 2355 01:11:38,280 --> 01:11:40,260 Our onClose is going to close this modal. 2356 01:11:40,260 --> 01:11:42,330 So let's create a simple state variable 2357 01:11:42,330 --> 01:11:45,344 where we can just say is editModalOpen, 2358 01:11:45,344 --> 01:11:46,353 setIsEditModalOpen, 2359 01:11:49,350 --> 01:11:52,090 useState by default, that's going to be false. 2360 01:11:52,090 --> 01:11:53,010 There we go. 2361 01:11:53,010 --> 01:11:55,587 So here we can say is open is equal to that 2362 01:11:55,587 --> 01:11:57,720 and we can close it by setting that. 2363 01:11:57,720 --> 01:11:59,760 Our onSubmit is going to take in our updateEvent, 2364 01:11:59,760 --> 01:12:02,660 which is going to be coming from that context. 2365 01:12:02,660 --> 01:12:05,886 So we can say update event equals useEvents, 2366 01:12:05,886 --> 01:12:07,290 just like that. 2367 01:12:07,290 --> 01:12:08,550 We don't have this function yet 2368 01:12:08,550 --> 01:12:10,260 but we will create it in just a second. 2369 01:12:10,260 --> 01:12:11,910 And then the final thing we need to pass in here 2370 01:12:11,910 --> 01:12:14,700 is our onDelete since we're doing an edit instead of an add. 2371 01:12:14,700 --> 01:12:17,490 And this will just take in our delete event function, 2372 01:12:17,490 --> 01:12:20,640 which again we're going to parse in up here 2373 01:12:20,640 --> 01:12:22,650 from our used events. 2374 01:12:22,650 --> 01:12:24,450 So let's go ahead and actually set that up. 2375 01:12:24,450 --> 01:12:26,580 So in events here, for our context, 2376 01:12:26,580 --> 01:12:29,697 we need to create a new context for editEvent. 2377 01:12:31,530 --> 01:12:33,990 And this is going to take in an id, which is a string. 2378 01:12:33,990 --> 01:12:35,430 For the event, we wanna edit 2379 01:12:35,430 --> 01:12:37,860 as well as essentially all of our new event properties. 2380 01:12:37,860 --> 01:12:40,470 So that's gonna be exactly the same as our add 2381 01:12:40,470 --> 01:12:42,070 and that's going to return void. 2382 01:12:43,410 --> 01:12:45,133 And then for our deleteEvent, 2383 01:12:48,168 --> 01:12:49,001 there we go. 2384 01:12:49,001 --> 01:12:51,840 This is just going to take an id, which is a string, 2385 01:12:51,840 --> 01:12:53,490 and it's going to return to us void 2386 01:12:53,490 --> 01:12:55,560 and that's going to remove an event for us. 2387 01:12:55,560 --> 01:12:57,330 So I'll just copy this add event, 2388 01:12:57,330 --> 01:12:58,338 paste it down 2389 01:12:58,338 --> 01:13:00,000 'cause our update is gonna be somewhat similar. 2390 01:13:00,000 --> 01:13:02,610 The one difference is here we're gonna have an id, 2391 01:13:02,610 --> 01:13:03,600 which is a string. 2392 01:13:03,600 --> 01:13:04,980 We'll call this our event details, 2393 01:13:04,980 --> 01:13:06,630 so we actually didn't have a better name for it. 2394 01:13:06,630 --> 01:13:07,463 Same thing here. 2395 01:13:07,463 --> 01:13:08,460 I'm gonna call this event details 2396 01:13:08,460 --> 01:13:10,440 just so it's a little bit more clear what's going on. 2397 01:13:10,440 --> 01:13:12,450 And in here I want to take in each one of the events, 2398 01:13:12,450 --> 01:13:13,560 that I'm going to be setting. 2399 01:13:13,560 --> 01:13:14,850 So for my set events, 2400 01:13:14,850 --> 01:13:15,867 what I wanna do is I wanna take my events, 2401 01:13:15,867 --> 01:13:17,477 and instead of adding a new one here, 2402 01:13:17,477 --> 01:13:19,677 what I wanna do is I wanna map through them. 2403 01:13:20,730 --> 01:13:24,240 So we'll say e.map each one of my events. 2404 01:13:24,240 --> 01:13:27,060 And inside of here I wanna take my event id, 2405 01:13:27,060 --> 01:13:29,220 check to see if it's equal to the current id. 2406 01:13:29,220 --> 01:13:30,240 If it is, 2407 01:13:30,240 --> 01:13:32,220 I wanna return essentially an updated version 2408 01:13:32,220 --> 01:13:34,110 that keeps the same id 2409 01:13:34,110 --> 01:13:36,840 and then takes all my event details and maps it over, 2410 01:13:36,840 --> 01:13:39,540 otherwise I wanna return the current event. 2411 01:13:39,540 --> 01:13:41,790 So what this does is it says, is this a current event? 2412 01:13:41,790 --> 01:13:43,080 If it is the current event, 2413 01:13:43,080 --> 01:13:44,610 essentially take all my event details 2414 01:13:44,610 --> 01:13:46,560 and replace them with this new event details, 2415 01:13:46,560 --> 01:13:49,500 otherwise just keep the event exactly as it was before. 2416 01:13:49,500 --> 01:13:50,333 Then I can just make sure 2417 01:13:50,333 --> 01:13:51,990 that this is all being returned properly, 2418 01:13:51,990 --> 01:13:52,887 which it looks like it is. 2419 01:13:52,887 --> 01:13:56,190 And I can pass down my update event here. 2420 01:13:56,190 --> 01:13:58,140 Now, our function for deleting an event, 2421 01:13:58,140 --> 01:13:59,730 it's going to be rather straightforward. 2422 01:13:59,730 --> 01:14:01,780 We can take in our id, which is a string. 2423 01:14:04,620 --> 01:14:07,140 And then what I can do is I can set my events, 2424 01:14:07,140 --> 01:14:09,390 gonna loop through those events. 2425 01:14:09,390 --> 01:14:12,327 So e.filter each event 2426 01:14:12,327 --> 01:14:13,203 and I wanna check with you 2427 01:14:13,203 --> 01:14:16,530 that id is not equal to the id I parse in. 2428 01:14:16,530 --> 01:14:19,620 Then we can parse in our delete event as well. 2429 01:14:19,620 --> 01:14:20,460 There we go. 2430 01:14:20,460 --> 01:14:22,050 Looks like we have an error with our update event. 2431 01:14:22,050 --> 01:14:23,100 It looks like some of our types 2432 01:14:23,100 --> 01:14:25,410 are maybe not quite a hundred percent matching up. 2433 01:14:25,410 --> 01:14:27,090 That's just because I called this event details 2434 01:14:27,090 --> 01:14:27,923 instead of event. 2435 01:14:27,923 --> 01:14:29,440 Let's change that there. 2436 01:14:29,440 --> 01:14:31,170 That actually didn't actually fix it. 2437 01:14:31,170 --> 01:14:32,640 If we scroll up a little bit more, 2438 01:14:32,640 --> 01:14:34,320 it looks like I called this editEvent. 2439 01:14:34,320 --> 01:14:35,153 That's the problem. 2440 01:14:35,153 --> 01:14:36,270 There we go, let's call that update event, 2441 01:14:36,270 --> 01:14:38,540 and that cleaned everything up so it's perfectly fine. 2442 01:14:38,540 --> 01:14:40,140 So now, let's go back into our calendar 2443 01:14:40,140 --> 01:14:41,940 and you can see that these functions are actually there, 2444 01:14:41,940 --> 01:14:44,130 now we just need to make sure we properly handle them. 2445 01:14:44,130 --> 01:14:47,190 So this onSubmint returns to us the event details. 2446 01:14:47,190 --> 01:14:49,533 So we need to pass along the event.id, 2447 01:14:50,460 --> 01:14:52,320 as well as those event details, 2448 01:14:52,320 --> 01:14:54,390 just like that, to get this to work. 2449 01:14:54,390 --> 01:14:56,460 And it looks like our id property is not being defined 2450 01:14:56,460 --> 01:14:58,590 and that's because our calendar event here, 2451 01:14:58,590 --> 01:15:00,540 it should be an event which should have an id 2452 01:15:00,540 --> 01:15:02,040 so that should be working for us. 2453 01:15:02,040 --> 01:15:03,660 And the reason is I called this event here, 2454 01:15:03,660 --> 01:15:04,950 so it's just overriding our name. 2455 01:15:04,950 --> 01:15:05,783 There we go. 2456 01:15:05,783 --> 01:15:06,990 So it should say e right there. 2457 01:15:06,990 --> 01:15:08,520 So this is our new event details 2458 01:15:08,520 --> 01:15:10,860 that we're parsing in along with our event id. 2459 01:15:10,860 --> 01:15:13,500 And this delete here doesn't take in any properties 2460 01:15:13,500 --> 01:15:16,290 but we need to make sure we parse in our event.id 2461 01:15:16,290 --> 01:15:18,240 so we make sure we delete the correct one. 2462 01:15:18,240 --> 01:15:19,380 So now if I give this quick save 2463 01:15:19,380 --> 01:15:21,600 and I add an event listener on my button 2464 01:15:21,600 --> 01:15:23,030 to make it so that it actually opens this mod, 2465 01:15:23,030 --> 01:15:24,766 or when we click, 2466 01:15:24,766 --> 01:15:27,912 we can say that we wanna set the isEditModalOpen to true 2467 01:15:27,912 --> 01:15:29,790 when we click on this button. 2468 01:15:29,790 --> 01:15:30,840 Now, if I click on this, 2469 01:15:30,840 --> 01:15:32,520 you can see that opened up the edit modal, 2470 01:15:32,520 --> 01:15:34,410 but it's not quite getting all the properties in 2471 01:15:34,410 --> 01:15:35,243 like we want it to. 2472 01:15:35,243 --> 01:15:37,020 So it looks like there's still a little bit of a problem, 2473 01:15:37,020 --> 01:15:39,150 but it is properly opening up this for editing, 2474 01:15:39,150 --> 01:15:39,983 which is great. 2475 01:15:39,983 --> 01:15:41,850 And some of our default values are being propagated 2476 01:15:41,850 --> 01:15:42,810 but not all of them. 2477 01:15:42,810 --> 01:15:45,450 For example, our name and our end time are not being set, 2478 01:15:45,450 --> 01:15:47,700 but our all day and our start time and our color 2479 01:15:47,700 --> 01:15:49,350 are properly being set. 2480 01:15:49,350 --> 01:15:51,900 The reason for that, if we scroll down here to our modal, 2481 01:15:51,900 --> 01:15:54,750 is that our name, wherever we have that, here we go, 2482 01:15:54,750 --> 01:15:55,830 and our end time 2483 01:15:55,830 --> 01:15:56,760 are both using refs. 2484 01:15:56,760 --> 01:15:58,440 So we need to set a default value. 2485 01:15:58,440 --> 01:16:00,450 So we're gonna say our default value here 2486 01:16:00,450 --> 01:16:02,160 is just event dot. 2487 01:16:02,160 --> 01:16:03,747 And we're gonna set that to our name. 2488 01:16:03,747 --> 01:16:06,810 And then down here, where we have our end time, 2489 01:16:06,810 --> 01:16:10,840 default value is going to be event.endTime. 2490 01:16:12,420 --> 01:16:13,644 That should fix those problems. 2491 01:16:13,644 --> 01:16:14,477 So now when I click on this, 2492 01:16:14,477 --> 01:16:16,470 you can see all that information is being populated. 2493 01:16:16,470 --> 01:16:18,630 Click here, all the information's being populated. 2494 01:16:18,630 --> 01:16:19,590 And same thing here. 2495 01:16:19,590 --> 01:16:20,853 When I click here, it's all being populated. 2496 01:16:20,853 --> 01:16:22,620 If I click delete, it's removing it, 2497 01:16:22,620 --> 01:16:23,453 which is great. 2498 01:16:23,453 --> 01:16:26,310 And if I update this to, for example, be an all day event 2499 01:16:26,310 --> 01:16:27,930 and we're gonna make it blue, 2500 01:16:27,930 --> 01:16:29,190 we should see that when I click edit, 2501 01:16:29,190 --> 01:16:31,590 you can see now an all day blue event. 2502 01:16:31,590 --> 01:16:33,660 Now with that done, if we open back up our README, 2503 01:16:33,660 --> 01:16:35,970 you'll notice we've completed every single thing 2504 01:16:35,970 --> 01:16:37,920 inside of the normal instructions, 2505 01:16:37,920 --> 01:16:40,230 and all we have left are the bonus instructions, 2506 01:16:40,230 --> 01:16:42,900 which are admittedly quite complicated. 2507 01:16:42,900 --> 01:16:44,490 Luckily, this first one is very easy. 2508 01:16:44,490 --> 01:16:46,200 We just wanna store our events in local storage 2509 01:16:46,200 --> 01:16:48,480 'cause if I refresh my page, everything is gone. 2510 01:16:48,480 --> 01:16:49,890 Not super ideal. 2511 01:16:49,890 --> 01:16:52,020 So inside our events context here, 2512 01:16:52,020 --> 01:16:54,180 we're gonna create this with a local state. 2513 01:16:54,180 --> 01:16:56,190 So we can say useLocalStorage, 2514 01:16:56,190 --> 01:16:57,210 just like that. 2515 01:16:57,210 --> 01:16:59,340 That's just gonna be a custom hook that we create. 2516 01:16:59,340 --> 01:17:02,792 So we can create a function useLocalStorage. 2517 01:17:02,792 --> 01:17:03,720 And the nice thing about this, 2518 01:17:03,720 --> 01:17:05,490 since we're only using this hook in one place, 2519 01:17:05,490 --> 01:17:07,470 we know that we're storing an event array inside of it, 2520 01:17:07,470 --> 01:17:10,200 we can be very specific with the actual information 2521 01:17:10,200 --> 01:17:12,180 inside of this useLocalStorage hook. 2522 01:17:12,180 --> 01:17:15,240 For example, I know that the initial value here 2523 01:17:15,240 --> 01:17:17,190 is just going to be an event array. 2524 01:17:17,190 --> 01:17:19,530 I don't have to worry about it being any other type. 2525 01:17:19,530 --> 01:17:20,610 Also the key here, 2526 01:17:20,610 --> 01:17:22,680 I know that that's going to be a string. 2527 01:17:22,680 --> 01:17:24,090 And normally if you wanted to create this hook 2528 01:17:24,090 --> 01:17:25,050 you would make it more generic, 2529 01:17:25,050 --> 01:17:26,974 but in our case we don't have to worry about that 2530 01:17:26,974 --> 01:17:28,080 'cause we only use it in one place. 2531 01:17:28,080 --> 01:17:30,720 So here I don't need to task in this generic at all 2532 01:17:30,720 --> 01:17:32,880 because I know that this is going to be that specific type. 2533 01:17:32,880 --> 01:17:34,560 And I can say that my key here 2534 01:17:34,560 --> 01:17:36,420 is just gonna say like events or something. 2535 01:17:36,420 --> 01:17:37,320 It doesn't matter what it is, 2536 01:17:37,320 --> 01:17:39,270 as long as it's something that we can use. 2537 01:17:39,270 --> 01:17:40,560 Now, if I give that a quick save, 2538 01:17:40,560 --> 01:17:41,417 we obviously have quite a few errors 2539 01:17:41,417 --> 01:17:44,130 'cause this is currently returning a type of any. 2540 01:17:44,130 --> 01:17:45,870 We need to make it so it actually returns something 2541 01:17:45,870 --> 01:17:47,160 and we know what that is. 2542 01:17:47,160 --> 01:17:48,870 So let's create a state variable. 2543 01:17:48,870 --> 01:17:51,690 We can say that we wanna have our value and our setValue, 2544 01:17:51,690 --> 01:17:53,307 and that is gonna be equally useState, 2545 01:17:53,307 --> 01:17:55,470 and that's going to be an event array 2546 01:17:55,470 --> 01:17:57,327 'cause we know we can hard code this. 2547 01:17:57,327 --> 01:17:59,430 And then we're gonna parse it a function 2548 01:17:59,430 --> 01:18:00,330 as the default value 2549 01:18:00,330 --> 01:18:02,550 'cause we want to get our information from state. 2550 01:18:02,550 --> 01:18:04,740 So we can say here that our value, 2551 01:18:04,740 --> 01:18:06,030 which is just gonna be our JSON, 2552 01:18:06,030 --> 01:18:10,170 it's gonna be coming from localStorage.getItem from our key. 2553 01:18:10,170 --> 01:18:12,033 So we're just gonna say jsonValue. 2554 01:18:13,081 --> 01:18:14,400 There we go. 2555 01:18:14,400 --> 01:18:18,480 Then if our jsonValue is equal to null, 2556 01:18:18,480 --> 01:18:20,940 we just wanna return our initialValue. 2557 01:18:20,940 --> 01:18:22,170 So we're gonna get our initialValue 2558 01:18:22,170 --> 01:18:23,460 and return it like that, 2559 01:18:23,460 --> 01:18:26,340 otherwise we're going to try to parse this as JSON. 2560 01:18:26,340 --> 01:18:28,047 So we're gonna say JSON.parse, 2561 01:18:28,047 --> 01:18:30,930 and we wanna parse our JSON value 2562 01:18:30,930 --> 01:18:33,810 and we wanna parse this as an event array, 2563 01:18:33,810 --> 01:18:34,890 just like this. 2564 01:18:34,890 --> 01:18:36,030 There we go. 2565 01:18:36,030 --> 01:18:36,863 The important thing 2566 01:18:36,863 --> 01:18:39,240 is once we actually convert this to an event array, 2567 01:18:39,240 --> 01:18:40,950 one thing that's interesting about our date 2568 01:18:40,950 --> 01:18:42,780 is our date is actually going to be a string 2569 01:18:42,780 --> 01:18:44,220 because when you convert it to JSON 2570 01:18:44,220 --> 01:18:45,540 and then try to convert it back, 2571 01:18:45,540 --> 01:18:46,650 it's going to be a string. 2572 01:18:46,650 --> 01:18:49,200 So we need to convert it to an actual date object. 2573 01:18:49,200 --> 01:18:51,297 So I wanna map through each one of these events, 2574 01:18:51,297 --> 01:18:52,530 and what I wanna do 2575 01:18:52,530 --> 01:18:56,700 is I just wanna check that if my event.date 2576 01:18:56,700 --> 01:18:58,710 is an instance of the date object. 2577 01:18:58,710 --> 01:19:00,840 So instanceof Date, that's perfectly fine. 2578 01:19:00,840 --> 01:19:02,670 I'm just gonna return the event as is. 2579 01:19:02,670 --> 01:19:04,470 This may happen, but most likely it won't 2580 01:19:04,470 --> 01:19:06,510 because it'll be converted to a string. 2581 01:19:06,510 --> 01:19:08,847 So in those cases, I wanna take my current event 2582 01:19:08,847 --> 01:19:10,500 and I just wanna replace the date 2583 01:19:10,500 --> 01:19:14,280 by calling new date with my date that is being parsed in, 2584 01:19:14,280 --> 01:19:15,960 and that should work just fine 2585 01:19:15,960 --> 01:19:18,780 and we can just return this information like that. 2586 01:19:18,780 --> 01:19:20,190 So now essentially what I've done 2587 01:19:20,190 --> 01:19:21,750 is if we don't have anything on the local storage, 2588 01:19:21,750 --> 01:19:23,220 return to me my default value. 2589 01:19:23,220 --> 01:19:24,600 Otherwise, what I want you to do 2590 01:19:24,600 --> 01:19:25,980 is I want you to parse our JSON, 2591 01:19:25,980 --> 01:19:27,570 make sure everything converts properly, 2592 01:19:27,570 --> 01:19:29,550 put all of our dates back into date format, 2593 01:19:29,550 --> 01:19:31,590 and that's all we need to do there. 2594 01:19:31,590 --> 01:19:32,423 Down at the bottom, 2595 01:19:32,423 --> 01:19:35,550 I'm gonna make sure I return my value and my setValue. 2596 01:19:35,550 --> 01:19:37,410 And to make sure that it's actually going to be an array 2597 01:19:37,410 --> 01:19:38,591 of those specific values, 2598 01:19:38,591 --> 01:19:39,424 I can use as const 2599 01:19:39,424 --> 01:19:42,240 and that'll fix all those type errors up there. 2600 01:19:42,240 --> 01:19:44,490 Then finally, we can set up a useEffect 2601 01:19:44,490 --> 01:19:45,990 and that useEffect is going to run 2602 01:19:45,990 --> 01:19:48,957 any single time that my value or my key changes 2603 01:19:48,957 --> 01:19:51,189 and I just wanna set my localStorage. 2604 01:19:51,189 --> 01:19:53,670 So I'll set an item at that key, 2605 01:19:53,670 --> 01:19:55,950 and I wanna JSON stringify our value, 2606 01:19:55,950 --> 01:19:56,790 just like that. 2607 01:19:56,790 --> 01:19:58,410 So now you can see everything is there. 2608 01:19:58,410 --> 01:20:00,717 Let's add a new event, doesn't matter what it is. 2609 01:20:00,717 --> 01:20:01,980 And now if I refresh, 2610 01:20:01,980 --> 01:20:04,020 that event stays there just like I expect 2611 01:20:04,020 --> 01:20:05,940 and the date is properly being formatted. 2612 01:20:05,940 --> 01:20:07,980 If I removed all that date formatting code, 2613 01:20:07,980 --> 01:20:08,940 you can see it disappears 2614 01:20:08,940 --> 01:20:10,110 because it doesn't actually have a date, 2615 01:20:10,110 --> 01:20:11,580 it just has a string. 2616 01:20:11,580 --> 01:20:12,480 So that's everything 2617 01:20:12,480 --> 01:20:13,950 for that first step in the README. 2618 01:20:13,950 --> 01:20:15,780 Now let's go ahead and we can move on to the second step. 2619 01:20:15,780 --> 01:20:17,040 But I'm actually gonna skip this one 2620 01:20:17,040 --> 01:20:18,360 and move to the third step first 2621 01:20:18,360 --> 01:20:19,950 'cause the third step's quite a bit easier 2622 01:20:19,950 --> 01:20:21,510 and then we'll come back to the second step 2623 01:20:21,510 --> 01:20:22,950 'cause it's quite a bit more involved. 2624 01:20:22,950 --> 01:20:25,380 So this is just saying add a close animation to our modals. 2625 01:20:25,380 --> 01:20:26,330 You notice when I click to open it, 2626 01:20:26,330 --> 01:20:27,553 it has a nice smooth animation in. 2627 01:20:27,553 --> 01:20:28,710 And when I close it, 2628 01:20:28,710 --> 01:20:30,030 it just disappears completely. 2629 01:20:30,030 --> 01:20:31,320 Not super nice. 2630 01:20:31,320 --> 01:20:32,640 So to create a closing animation, 2631 01:20:32,640 --> 01:20:34,350 I can add a closing class to the modal 2632 01:20:34,350 --> 01:20:36,720 and that'll actually give it a closing animation. 2633 01:20:36,720 --> 01:20:38,580 So let's go ahead and actually try to implement that. 2634 01:20:38,580 --> 01:20:40,590 We're gonna need to do that inside of our modal here. 2635 01:20:40,590 --> 01:20:42,180 And whenever we call this onClose, 2636 01:20:42,180 --> 01:20:44,310 we don't actually want to close our modal, 2637 01:20:44,310 --> 01:20:46,099 we want to set it up to start closing 2638 01:20:46,099 --> 01:20:48,780 and then wait for the animation to finish. 2639 01:20:48,780 --> 01:20:49,613 So what we need to do 2640 01:20:49,613 --> 01:20:50,970 is we need to have some type of state variable 2641 01:20:50,970 --> 01:20:53,310 to determine if we are currently closing. 2642 01:20:53,310 --> 01:20:56,407 So we're gonna set an isClosing variable and setIsClosing. 2643 01:20:57,297 --> 01:20:59,580 And we're gonna set that state by default to false 2644 01:20:59,580 --> 01:21:02,580 'cause obviously by default we are not at all closing. 2645 01:21:02,580 --> 01:21:04,650 Then what I wanna do is I want to come down here 2646 01:21:04,650 --> 01:21:05,730 and if we're closing, 2647 01:21:05,730 --> 01:21:08,610 then I want to add that isClosing class. 2648 01:21:08,610 --> 01:21:10,770 So what we can do is inside of our modal, 2649 01:21:10,770 --> 01:21:12,540 this is where we wanna add our class. 2650 01:21:12,540 --> 01:21:15,330 We can come in here, I'll use that CC function, 2651 01:21:15,330 --> 01:21:16,890 make sure that I import that. 2652 01:21:16,890 --> 01:21:19,410 We know by default we have a modal class 2653 01:21:19,410 --> 01:21:21,450 and then we're also going to deal with that isClosing. 2654 01:21:21,450 --> 01:21:22,680 So for our closing 2655 01:21:22,680 --> 01:21:24,930 we're gonna add in the class of closing as well. 2656 01:21:24,930 --> 01:21:26,190 So if isClosing is true, 2657 01:21:26,190 --> 01:21:28,044 it'll add that closing class for us. 2658 01:21:28,044 --> 01:21:30,420 So that we need to make sure we change 2659 01:21:30,420 --> 01:21:32,444 anytime we change our isOpen. 2660 01:21:32,444 --> 01:21:35,550 So anytime our isOpen goes from true to false, 2661 01:21:35,550 --> 01:21:36,960 we wanna set this to true, 2662 01:21:36,960 --> 01:21:38,280 wait for it to finish closing 2663 01:21:38,280 --> 01:21:40,410 and then we can actually remove our modal. 2664 01:21:40,410 --> 01:21:41,340 So I need to be able to track 2665 01:21:41,340 --> 01:21:43,080 what the previous value of isOpen is 2666 01:21:43,080 --> 01:21:45,510 to determine if we went from open to closed. 2667 01:21:45,510 --> 01:21:49,127 So I can say const previous is open, 2668 01:21:49,127 --> 01:21:51,000 I want that to be a ref, 2669 01:21:51,000 --> 01:21:52,710 and this is going to be a Boolean. 2670 01:21:52,710 --> 01:21:54,570 And by default, I'm just not gonna give it any value, 2671 01:21:54,570 --> 01:21:55,500 it doesn't really matter 2672 01:21:55,500 --> 01:21:56,850 because we don't have a previous value, 2673 01:21:56,850 --> 01:21:59,520 it was never open or closed at any point. 2674 01:21:59,520 --> 01:22:01,110 Then we can use an effect. 2675 01:22:01,110 --> 01:22:03,450 And in our case, we're actually gonna use a layout effect 2676 01:22:03,450 --> 01:22:05,070 'cause this is actually going to change 2677 01:22:05,070 --> 01:22:06,770 based on our actual layout of things. 2678 01:22:06,770 --> 01:22:08,760 So we're gonna be using a used layout hook 2679 01:22:08,760 --> 01:22:10,770 to make sure that this actually works properly 2680 01:22:10,770 --> 01:22:13,320 because if we actually change our isOpen 2681 01:22:13,320 --> 01:22:14,640 and our previous is open, 2682 01:22:14,640 --> 01:22:16,650 we wanna make sure that this actually goes into effect 2683 01:22:16,650 --> 01:22:18,210 before our component re-renders 2684 01:22:18,210 --> 01:22:20,280 'cause it would obviously hide our component. 2685 01:22:20,280 --> 01:22:22,860 So our used layout effect is going to come into play. 2686 01:22:22,860 --> 01:22:24,237 Inside of here, we're gonna call a function 2687 01:22:24,237 --> 01:22:27,447 and we're gonna call this every time isOpen changes. 2688 01:22:27,447 --> 01:22:29,200 Now what I wanna do here 2689 01:22:29,200 --> 01:22:33,030 is I want to just set our previous is open.current 2690 01:22:33,030 --> 01:22:34,350 to our isOpen. 2691 01:22:34,350 --> 01:22:36,120 So it's just going to get me the previous value 2692 01:22:36,120 --> 01:22:38,095 of whatever my isOpen is. 2693 01:22:38,095 --> 01:22:38,928 And I wanna do that 2694 01:22:38,928 --> 01:22:42,420 after I check what my current value for previous isOpen is. 2695 01:22:42,420 --> 01:22:45,330 So here, if we are not open, 2696 01:22:45,330 --> 01:22:47,340 so if isOpen is set to false, 2697 01:22:47,340 --> 01:22:51,330 and my previous isOpen.current is set to true, 2698 01:22:51,330 --> 01:22:54,090 well, that means we went from open to closed. 2699 01:22:54,090 --> 01:22:59,090 And in that case I wanna set my isClosing here to true, 2700 01:22:59,160 --> 01:23:01,620 and then we can just make sure we set the value down here. 2701 01:23:01,620 --> 01:23:04,710 So this means that only when we go from open to closed 2702 01:23:04,710 --> 01:23:07,110 are we going to set isClosing to true. 2703 01:23:07,110 --> 01:23:09,210 And again, the reason I'm doing this inside a layout effect 2704 01:23:09,210 --> 01:23:10,530 instead of a normal effect 2705 01:23:10,530 --> 01:23:12,120 is because if we didn't, 2706 01:23:12,120 --> 01:23:14,790 what would happen is my isOpen would be set to false, 2707 01:23:14,790 --> 01:23:16,140 which means we would render null, 2708 01:23:16,140 --> 01:23:18,240 which means we would render nothing at all. 2709 01:23:18,240 --> 01:23:19,890 Then my useEffect would run. 2710 01:23:19,890 --> 01:23:21,090 My useEffect would come in here 2711 01:23:21,090 --> 01:23:23,667 and say okay, now set my isClosing to true 2712 01:23:23,667 --> 01:23:25,380 and then it would try to do the isClosing. 2713 01:23:25,380 --> 01:23:27,001 So if I put this in the layout effect, 2714 01:23:27,001 --> 01:23:28,500 let's just make sure it's checking this first 2715 01:23:28,500 --> 01:23:31,230 and setting my isClosing to the proper value. 2716 01:23:31,230 --> 01:23:33,030 Here what we wanna do is we wanna add another check 2717 01:23:33,030 --> 01:23:36,000 that essentially says if we are not open 2718 01:23:36,000 --> 01:23:38,730 and we are not in the process of closing, 2719 01:23:38,730 --> 01:23:39,563 then we return null 2720 01:23:39,563 --> 01:23:41,490 'cause if we're currently closing the modal 2721 01:23:41,490 --> 01:23:42,870 and playing the animation, 2722 01:23:42,870 --> 01:23:46,530 we don't want to actually remove it from our actual dom. 2723 01:23:46,530 --> 01:23:47,363 So just by doing this, 2724 01:23:47,363 --> 01:23:49,434 we should have the close animation show up. 2725 01:23:49,434 --> 01:23:50,400 So we have the open animation, 2726 01:23:50,400 --> 01:23:51,990 and you can see we have the close animation. 2727 01:23:51,990 --> 01:23:53,220 But there's a problem still, 2728 01:23:53,220 --> 01:23:55,980 if we look at our elements inside of our modal container, 2729 01:23:55,980 --> 01:23:59,130 you notice we still have our modal with that closing class. 2730 01:23:59,130 --> 01:24:00,240 That's obviously not ideal. 2731 01:24:00,240 --> 01:24:01,640 We need to remove that modal 2732 01:24:02,503 --> 01:24:03,660 from our actual modal container. 2733 01:24:03,660 --> 01:24:06,120 So to do that, we have an animation on this. 2734 01:24:06,120 --> 01:24:08,153 So we can just say onAnimationEnd, 2735 01:24:09,120 --> 01:24:12,696 what I wanna do is I wanna set isClosing to false 2736 01:24:12,696 --> 01:24:16,083 'cause my animation is ended and we are no longer closing. 2737 01:24:17,257 --> 01:24:18,288 So now click on this, 2738 01:24:18,288 --> 01:24:19,121 make sure I refresh, 2739 01:24:19,121 --> 01:24:19,954 click on it, 2740 01:24:19,954 --> 01:24:20,787 you can see it works fine. 2741 01:24:20,787 --> 01:24:21,620 We got the closing animation. 2742 01:24:21,620 --> 01:24:22,453 And best of all, 2743 01:24:22,453 --> 01:24:24,060 if I inspect my page and I go all the way down, 2744 01:24:24,060 --> 01:24:25,740 our modal container is completely empty 2745 01:24:25,740 --> 01:24:27,900 and everything will work just fine. 2746 01:24:27,900 --> 01:24:29,010 So that's everything we need to do 2747 01:24:29,010 --> 01:24:30,900 for this isClosing effect. 2748 01:24:30,900 --> 01:24:32,250 Now, if we go back to our README, 2749 01:24:32,250 --> 01:24:35,310 we have the most difficult part by far this entire project, 2750 01:24:35,310 --> 01:24:36,143 which is the ability 2751 01:24:36,143 --> 01:24:38,520 to have an essentially, view more button 2752 01:24:38,520 --> 01:24:40,020 'cause if we add a bunch of different events, 2753 01:24:40,020 --> 01:24:42,570 I'm just gonna spam a bunch of events into here. 2754 01:24:42,570 --> 01:24:44,793 Add another one, give it a generic name, 2755 01:24:45,930 --> 01:24:47,280 and another one, 2756 01:24:47,280 --> 01:24:49,890 just so we can see what happens when we have some overflow. 2757 01:24:49,890 --> 01:24:51,412 Add another one. 2758 01:24:51,412 --> 01:24:52,245 There we go. 2759 01:24:52,245 --> 01:24:53,693 So now you can see 2760 01:24:53,693 --> 01:24:55,422 we are currently overflowing the container. 2761 01:24:55,422 --> 01:24:56,280 And what this essentially wants us to do 2762 01:24:56,280 --> 01:24:58,230 is determine when we're overflowing, 2763 01:24:58,230 --> 01:24:59,820 hide the overflowing elements 2764 01:24:59,820 --> 01:25:01,200 and display essentially a button 2765 01:25:01,200 --> 01:25:02,970 that says view the more elements. 2766 01:25:02,970 --> 01:25:05,670 And it'll allow you to open up a modal to view everything. 2767 01:25:05,670 --> 01:25:06,780 This is quite difficult 2768 01:25:06,780 --> 01:25:08,010 because this is going to require 2769 01:25:08,010 --> 01:25:09,762 a lot of more imperative style code, 2770 01:25:09,762 --> 01:25:11,850 which is more difficult to do in React 2771 01:25:11,850 --> 01:25:14,490 'cause React is really based around that declarative model. 2772 01:25:14,490 --> 01:25:15,420 There's a lot of different ways 2773 01:25:15,420 --> 01:25:16,410 you could go around doing it. 2774 01:25:16,410 --> 01:25:18,270 I'm just gonna show you one way of doing this. 2775 01:25:18,270 --> 01:25:19,980 I spent quite a bit of time brainstorming on this 2776 01:25:19,980 --> 01:25:21,900 and I found this to be probably one of the better ways 2777 01:25:21,900 --> 01:25:23,220 of handling this. 2778 01:25:23,220 --> 01:25:24,420 So the very first thing I like to do 2779 01:25:24,420 --> 01:25:25,253 with this type of scenario 2780 01:25:25,253 --> 01:25:26,730 is create a custom component for it 2781 01:25:26,730 --> 01:25:29,340 because this is gonna be some rather complex logic. 2782 01:25:29,340 --> 01:25:33,000 So I'm gonna call this an OverflowContainer.tsx, 2783 01:25:33,000 --> 01:25:34,110 just like that. 2784 01:25:34,110 --> 01:25:37,350 Export function OverflowContainer. 2785 01:25:37,350 --> 01:25:38,640 There we go. 2786 01:25:38,640 --> 01:25:40,110 And inside of this overflow container, 2787 01:25:40,110 --> 01:25:41,760 essentially I just want to return something 2788 01:25:41,760 --> 01:25:44,220 that's going to wrap our normal event section. 2789 01:25:44,220 --> 01:25:45,090 And it's going to determine 2790 01:25:45,090 --> 01:25:46,590 what the size of that container is, 2791 01:25:46,590 --> 01:25:48,750 and if the elements inside of it are overflowing it. 2792 01:25:48,750 --> 01:25:50,340 And it's going to allow you to do different things 2793 01:25:50,340 --> 01:25:51,510 based on that. 2794 01:25:51,510 --> 01:25:53,190 So by default, this overflow container 2795 01:25:53,190 --> 01:25:54,570 needs to take in a list of items 2796 01:25:54,570 --> 01:25:57,150 that we want to actually render out to the screen. 2797 01:25:57,150 --> 01:25:59,760 It also needs to take in what happens if we have overflow 2798 01:25:59,760 --> 01:26:01,710 and how to actually render each of those items 2799 01:26:01,710 --> 01:26:02,543 'cause these items 2800 01:26:02,543 --> 01:26:04,680 are just going to be each of our events, essentially. 2801 01:26:04,680 --> 01:26:06,840 So it's gonna give us a bunch of different events 2802 01:26:06,840 --> 01:26:08,880 that we want to render out to the screen. 2803 01:26:08,880 --> 01:26:09,900 We need to have a function 2804 01:26:09,900 --> 01:26:11,370 that allows us to turn that event 2805 01:26:11,370 --> 01:26:12,990 into an actual thing to render. 2806 01:26:12,990 --> 01:26:14,730 So we're gonna create a function or a property 2807 01:26:14,730 --> 01:26:15,840 called renderItem. 2808 01:26:15,840 --> 01:26:17,880 This is just going to be a function that takes in an item 2809 01:26:17,880 --> 01:26:21,300 and returns to us a new actual dom we can render out. 2810 01:26:21,300 --> 01:26:22,133 Same thing here. 2811 01:26:22,133 --> 01:26:23,940 If we have overflow, I'm gonna have a function 2812 01:26:23,940 --> 01:26:24,773 that's going to get us 2813 01:26:24,773 --> 01:26:26,460 what that overflow content will look like. 2814 01:26:26,460 --> 01:26:28,410 This will be the button that says like plus two more 2815 01:26:28,410 --> 01:26:30,030 or something like that. 2816 01:26:30,030 --> 01:26:32,910 Finally, I'm gonna add a simple class for className. 2817 01:26:32,910 --> 01:26:33,743 And that's just because 2818 01:26:33,743 --> 01:26:35,280 I may want to add some custom class names 2819 01:26:35,280 --> 01:26:36,600 to the div that wraps everything. 2820 01:26:36,600 --> 01:26:38,310 In our case, if we look over here, 2821 01:26:38,310 --> 01:26:39,360 and we actually go 2822 01:26:39,360 --> 01:26:41,070 to where we have everything being rendered, 2823 01:26:41,070 --> 01:26:42,600 so we just scroll up little ways. 2824 01:26:42,600 --> 01:26:45,000 You can see here that we're wrapping everything in a div 2825 01:26:45,000 --> 01:26:46,350 that has a class name of events. 2826 01:26:46,350 --> 01:26:48,990 So I just need to make sure I propagate that through. 2827 01:26:48,990 --> 01:26:51,690 Now, inside of here is where I'm gonna return all of my dom. 2828 01:26:51,690 --> 01:26:53,610 So first, I'm gonna have a div, 2829 01:26:53,610 --> 01:26:55,140 which I'm gonna give a className. 2830 01:26:55,140 --> 01:26:55,973 And that className 2831 01:26:55,973 --> 01:26:57,930 is just going to be whatever class name we parse into here. 2832 01:26:57,930 --> 01:26:59,580 Pretty straightforward stuff. 2833 01:26:59,580 --> 01:27:02,610 Inside of this div, I want to loop through all my items. 2834 01:27:02,610 --> 01:27:04,860 So I'm gonna loop through each one of my items. 2835 01:27:04,860 --> 01:27:05,693 And inside of here, 2836 01:27:05,693 --> 01:27:07,710 what I wanna do is I wanna render out a div. 2837 01:27:07,710 --> 01:27:11,130 And the key for this is just going to be the index. 2838 01:27:11,130 --> 01:27:12,570 So we can set this to our index. 2839 01:27:12,570 --> 01:27:16,200 And up here we can say index as well. 2840 01:27:16,200 --> 01:27:17,400 If we really wanted to, 2841 01:27:17,400 --> 01:27:20,160 we could just parse in a function that's like getKey. 2842 01:27:20,160 --> 01:27:20,993 There we go. 2843 01:27:20,993 --> 01:27:21,826 We'll do that instead. 2844 01:27:21,826 --> 01:27:23,220 So now this can be getKey. 2845 01:27:23,220 --> 01:27:24,180 We parse it an item 2846 01:27:24,180 --> 01:27:26,250 and it's going to return to us a unique key, 2847 01:27:26,250 --> 01:27:27,690 just like that. 2848 01:27:27,690 --> 01:27:28,523 There we go. 2849 01:27:28,523 --> 01:27:30,360 And we could even make it so that getKey is optional 2850 01:27:30,360 --> 01:27:32,490 and we would default it to the index 2851 01:27:32,490 --> 01:27:34,290 if we didn't have some way to get a unique key. 2852 01:27:34,290 --> 01:27:35,970 But for now, we'll just do this. 2853 01:27:35,970 --> 01:27:39,090 Then inside of here, we'll close off this div. 2854 01:27:39,090 --> 01:27:41,190 What I wanna do is I actually want to render out our item. 2855 01:27:41,190 --> 01:27:42,613 So we'll say render item, 2856 01:27:42,613 --> 01:27:45,450 we'll parse it in our item just like that. 2857 01:27:45,450 --> 01:27:46,283 Now, I'm gonna make sure 2858 01:27:46,283 --> 01:27:48,390 we actually return this as a value here. 2859 01:27:48,390 --> 01:27:49,800 So I'm gonna just come in here, 2860 01:27:49,800 --> 01:27:50,700 a little bit of extra code 2861 01:27:50,700 --> 01:27:53,490 so it'll return that instance of information. 2862 01:27:53,490 --> 01:27:54,630 Then I'm gonna have another div 2863 01:27:54,630 --> 01:27:56,100 that we're going to have inside of here, 2864 01:27:56,100 --> 01:27:57,774 and that div is going to be for handling overflow. 2865 01:27:57,774 --> 01:28:00,420 So at the very bottom here I'm gonna have a div 2866 01:28:00,420 --> 01:28:02,400 and we're just gonna make this be our overflow. 2867 01:28:02,400 --> 01:28:04,560 So we're gonna say renderOverflow, 2868 01:28:04,560 --> 01:28:07,500 and this is gonna take in our overflow amount. 2869 01:28:07,500 --> 01:28:08,610 So if we are overflowing, 2870 01:28:08,610 --> 01:28:11,640 then I want to render this overflow section as well. 2871 01:28:11,640 --> 01:28:12,960 Now finally, to make this work, 2872 01:28:12,960 --> 01:28:15,900 we obviously need to put this inside of some fragments. 2873 01:28:15,900 --> 01:28:16,733 There we go. 2874 01:28:16,733 --> 01:28:17,700 So now this will render out our code 2875 01:28:17,700 --> 01:28:20,430 but obviously we have a lot of type related errors. 2876 01:28:20,430 --> 01:28:22,770 So in our case, let's come up here and type this out. 2877 01:28:22,770 --> 01:28:25,687 We're gonna say type OverflowContainerProps 2878 01:28:27,300 --> 01:28:28,560 is equal to a specific type. 2879 01:28:28,560 --> 01:28:29,490 We have our items, 2880 01:28:29,490 --> 01:28:30,323 and we know that our items 2881 01:28:30,323 --> 01:28:31,830 is going to be some type of array. 2882 01:28:31,830 --> 01:28:33,210 We don't know what type it's going to be. 2883 01:28:33,210 --> 01:28:35,670 It could be an event array, it could be a day array, 2884 01:28:35,670 --> 01:28:37,800 it could be a completely different type of array. 2885 01:28:37,800 --> 01:28:39,600 That's a perfect use case for generics. 2886 01:28:39,600 --> 01:28:41,433 So we're gonna make this a generic type of T, 2887 01:28:41,433 --> 01:28:43,710 and this is going to take in a generic type of T. 2888 01:28:43,710 --> 01:28:45,240 So we have essentially just a bunch of items 2889 01:28:45,240 --> 01:28:46,410 that's an array. 2890 01:28:46,410 --> 01:28:48,270 Then we have renderItem function. 2891 01:28:48,270 --> 01:28:50,160 And we know this takes in one of our items 2892 01:28:50,160 --> 01:28:51,990 and we know that the items are of type of T, 2893 01:28:51,990 --> 01:28:52,823 and we know it returns 2894 01:28:52,823 --> 01:28:54,690 to some type of React we can render. 2895 01:28:54,690 --> 01:28:55,920 So we can use ReactNode 2896 01:28:55,920 --> 01:28:58,111 to say that we want to render out some type of React, 2897 01:28:58,111 --> 01:29:01,515 and I'll make sure that I import this ReactNode. 2898 01:29:01,515 --> 01:29:03,284 We'll just come up here, 2899 01:29:03,284 --> 01:29:08,284 import type ReactNode from React. 2900 01:29:08,285 --> 01:29:09,253 There we go. 2901 01:29:10,560 --> 01:29:12,360 And the reason that wasn't working is I spelled React wrong. 2902 01:29:12,360 --> 01:29:13,650 There we go. 2903 01:29:13,650 --> 01:29:15,423 Then we have our render overflow. 2904 01:29:16,590 --> 01:29:18,480 Oops, overflow. 2905 01:29:18,480 --> 01:29:21,360 This is going to take in the overflow amount, 2906 01:29:21,360 --> 01:29:22,230 which is just a number, 2907 01:29:22,230 --> 01:29:24,450 that's how many things are overflowing us. 2908 01:29:24,450 --> 01:29:26,520 And it's gonna give us a ReactNode. 2909 01:29:26,520 --> 01:29:29,067 And then finally, we have an optional className, 2910 01:29:30,120 --> 01:29:31,890 and that's going to be a string. 2911 01:29:31,890 --> 01:29:33,309 And then we also have our getKey. 2912 01:29:33,309 --> 01:29:35,373 So getKey is again a function. 2913 01:29:35,373 --> 01:29:37,320 It's gonna take in an item 2914 01:29:37,320 --> 01:29:39,900 and it's going to return to me a React.Key. 2915 01:29:39,900 --> 01:29:41,130 There we go. 2916 01:29:41,130 --> 01:29:43,770 We can just change that up here to key. 2917 01:29:43,770 --> 01:29:45,540 So we have that being imported. 2918 01:29:45,540 --> 01:29:46,373 Now what I can do 2919 01:29:46,373 --> 01:29:48,810 is I can make sure I type this to this specific prop here. 2920 01:29:48,810 --> 01:29:51,150 So we can say we want this to be typed here. 2921 01:29:51,150 --> 01:29:52,890 We know that this takes in a generic T, 2922 01:29:52,890 --> 01:29:54,330 which means that the overflow container 2923 01:29:54,330 --> 01:29:56,730 also takes in that generic as well. 2924 01:29:56,730 --> 01:29:58,470 So now really the only thing we have left to do 2925 01:29:58,470 --> 01:30:00,030 is the incredibly difficult part 2926 01:30:00,030 --> 01:30:02,190 of determining if our container is overflowing or not 2927 01:30:02,190 --> 01:30:04,050 and setting this overflow amount. 2928 01:30:04,050 --> 01:30:05,010 So let's create some state 2929 01:30:05,010 --> 01:30:09,393 for our overflowAmount and setOverflowAmount. 2930 01:30:12,436 --> 01:30:14,436 I'll say it's equal to useState of zero. 2931 01:30:17,010 --> 01:30:17,850 Let's do an import. 2932 01:30:17,850 --> 01:30:18,683 There we go. 2933 01:30:18,683 --> 01:30:20,340 So that's being imported properly. 2934 01:30:20,340 --> 01:30:21,180 The next thing we need to do 2935 01:30:21,180 --> 01:30:22,740 is get a reference to our container 2936 01:30:22,740 --> 01:30:23,573 'cause we need to determine 2937 01:30:23,573 --> 01:30:25,740 if this is large enough or too large. 2938 01:30:25,740 --> 01:30:27,690 So we'll say containerRef. 2939 01:30:27,690 --> 01:30:28,523 And then here, 2940 01:30:30,184 --> 01:30:34,023 containerRef equals useRef, 2941 01:30:36,060 --> 01:30:37,960 has a null as our default value 2942 01:30:38,820 --> 01:30:40,020 and we'll get that from React. 2943 01:30:40,020 --> 01:30:42,930 And this is an HTMLDivElement. 2944 01:30:42,930 --> 01:30:44,910 There we go. 2945 01:30:44,910 --> 01:30:47,790 So now comes the really, really complicated part. 2946 01:30:47,790 --> 01:30:48,750 Essentially, what I wanna do 2947 01:30:48,750 --> 01:30:50,250 is I wanna loop through all the children 2948 01:30:50,250 --> 01:30:52,350 to determine what child is the first one to cross the plane, 2949 01:30:52,350 --> 01:30:56,520 to cross the barrier of where my container ends. 2950 01:30:56,520 --> 01:30:58,358 So in our case here, we have this being rendered out fine, 2951 01:30:58,358 --> 01:30:59,910 this one's rendered out fine, 2952 01:30:59,910 --> 01:31:00,743 this one's rendered out fine, 2953 01:31:00,743 --> 01:31:01,576 this one's rendered out fine, 2954 01:31:01,576 --> 01:31:02,640 this one's rendered out fine. 2955 01:31:02,640 --> 01:31:04,470 And boom, as soon as we get to this bottom one here, 2956 01:31:04,470 --> 01:31:05,730 it no longer fits. 2957 01:31:05,730 --> 01:31:07,770 So we obviously have an issue. 2958 01:31:07,770 --> 01:31:08,790 So to be able to check for that, 2959 01:31:08,790 --> 01:31:12,420 what we need to do is we need to set up a useLayoutEffect. 2960 01:31:12,420 --> 01:31:15,090 And again, the reason we're using a layout effect here 2961 01:31:15,090 --> 01:31:16,440 instead of a normal effect 2962 01:31:16,440 --> 01:31:17,670 is I want this effect to run 2963 01:31:17,670 --> 01:31:20,250 before my actual dom gets painted to the screen 2964 01:31:20,250 --> 01:31:21,930 because if we have an overflow, 2965 01:31:21,930 --> 01:31:22,980 I want to show the button 2966 01:31:22,980 --> 01:31:25,830 instead of having it flash incorrectly with the overflow. 2967 01:31:25,830 --> 01:31:27,360 And this here, we want to re-render 2968 01:31:27,360 --> 01:31:29,370 every time our items changes. 2969 01:31:29,370 --> 01:31:31,920 So first, let's import this useLayoutEffect. 2970 01:31:31,920 --> 01:31:34,410 And inside here, I wanna set up a resize observer. 2971 01:31:34,410 --> 01:31:35,310 But before I do that 2972 01:31:35,310 --> 01:31:37,140 I wanna make sure our container even exists 2973 01:31:37,140 --> 01:31:38,880 'cause if our container is equal to null, 2974 01:31:38,880 --> 01:31:40,456 obviously we can't do anything 2975 01:31:40,456 --> 01:31:41,310 'cause we don't have a container 2976 01:31:41,310 --> 01:31:43,200 so let's just return right away. 2977 01:31:43,200 --> 01:31:45,540 Then what I can do is I can set up an observer. 2978 01:31:45,540 --> 01:31:48,390 So we'll just say observer equals new ResizeObserver. 2979 01:31:48,390 --> 01:31:50,987 And this will allow us to check whenever something changes 2980 01:31:50,987 --> 01:31:51,990 and then we need to pass it a function 2981 01:31:51,990 --> 01:31:53,460 that takes in some entries. 2982 01:31:53,460 --> 01:31:54,300 And this is all the stuff 2983 01:31:54,300 --> 01:31:56,040 that we want to worry about observing. 2984 01:31:56,040 --> 01:31:58,500 So for now, I'm not gonna do anything with that function. 2985 01:31:58,500 --> 01:31:59,550 Now we can go below that 2986 01:31:59,550 --> 01:32:01,200 and we can say that we want to observe something 2987 01:32:01,200 --> 01:32:02,033 with our observer. 2988 01:32:02,033 --> 01:32:04,960 So we're going to observe our containerRef.current 2989 01:32:05,880 --> 01:32:07,500 'cause that's the element we want to preserve... 2990 01:32:07,500 --> 01:32:08,760 Observe, sorry. 2991 01:32:08,760 --> 01:32:10,680 And then anytime that this changes, 2992 01:32:10,680 --> 01:32:12,600 we just want to disconnect our entire observers. 2993 01:32:12,600 --> 01:32:14,370 We're gonna say that we're gonna disconnect our observer 2994 01:32:14,370 --> 01:32:16,410 any single time that our items changes. 2995 01:32:16,410 --> 01:32:17,390 There we go. 2996 01:32:17,390 --> 01:32:18,960 So now inside here we can determine 2997 01:32:18,960 --> 01:32:21,254 what is the thing that's changing. 2998 01:32:21,254 --> 01:32:23,730 In our case, that's just going to be our containerElement, 2999 01:32:23,730 --> 01:32:24,990 which comes from our entries. 3000 01:32:24,990 --> 01:32:26,820 We wanna get the very first entry from here 3001 01:32:26,820 --> 01:32:28,560 that's going to give us our containerElement. 3002 01:32:28,560 --> 01:32:31,620 And I want to get specifically the target of that, 3003 01:32:31,620 --> 01:32:33,540 the thing that is being resized. 3004 01:32:33,540 --> 01:32:35,520 Then we can check to see if this actually exists. 3005 01:32:35,520 --> 01:32:37,620 So if it's equal to null, we can return. 3006 01:32:37,620 --> 01:32:38,490 This shouldn't be true, 3007 01:32:38,490 --> 01:32:40,410 but if for some reason it doesn't have a target, 3008 01:32:40,410 --> 01:32:42,210 then we're just going to return. 3009 01:32:42,210 --> 01:32:43,043 Now, the next thing I wanna do 3010 01:32:43,043 --> 01:32:44,820 is I wanna get all of the different items 3011 01:32:44,820 --> 01:32:46,650 as well as this overflow section 3012 01:32:46,650 --> 01:32:49,620 to make sure that I render these out properly as well. 3013 01:32:49,620 --> 01:32:51,117 So what I can do is I can come in here 3014 01:32:51,117 --> 01:32:52,920 and I can add them just some data attributes 3015 01:32:52,920 --> 01:32:53,753 so we can select them. 3016 01:32:53,753 --> 01:32:55,470 So I'm gonna give this a data item. 3017 01:32:55,470 --> 01:32:57,840 I'm gonna give this a data-overflow. 3018 01:32:57,840 --> 01:32:59,485 So now I can actually select those up here 3019 01:32:59,485 --> 01:33:01,440 inside of this resize observer. 3020 01:33:01,440 --> 01:33:03,720 This is where it really becomes less React-like 3021 01:33:03,720 --> 01:33:05,700 and more imperative JavaScript-like. 3022 01:33:05,700 --> 01:33:07,530 And it's really difficult to do this in a React way 3023 01:33:07,530 --> 01:33:10,260 because if I was trying to do a bunch of re-renders, 3024 01:33:10,260 --> 01:33:11,400 it would be less performant 3025 01:33:11,400 --> 01:33:14,264 and it could cause like infinite loops, for example, 3026 01:33:14,264 --> 01:33:15,994 which are definitely not ideal. 3027 01:33:15,994 --> 01:33:17,567 So here I can get my items. 3028 01:33:17,567 --> 01:33:21,480 So I'm gonna say that my children is equal to, 3029 01:33:21,480 --> 01:33:23,543 I wanna get my containerElement.querySelectorAll. 3030 01:33:25,020 --> 01:33:27,364 I wanna get all of these which are HTML elements. 3031 01:33:27,364 --> 01:33:29,550 I don't really care that they're divs or anything, 3032 01:33:29,550 --> 01:33:30,930 I just know that they're HTML elements, 3033 01:33:30,930 --> 01:33:32,460 that's all I care about. 3034 01:33:32,460 --> 01:33:33,793 And they have the data attribute of data item. 3035 01:33:33,793 --> 01:33:35,400 So I wanna get all the elements 3036 01:33:35,400 --> 01:33:37,290 with that specific attribute. 3037 01:33:37,290 --> 01:33:40,380 I wanna do the exact same thing with my overflowElement. 3038 01:33:40,380 --> 01:33:41,880 So this is my overflowElement, 3039 01:33:42,735 --> 01:33:45,300 and this is going to be a single query selector, 3040 01:33:45,300 --> 01:33:46,740 and this is data overflow. 3041 01:33:46,740 --> 01:33:47,730 There we go. 3042 01:33:47,730 --> 01:33:48,630 Now, the next thing I wanna do 3043 01:33:48,630 --> 01:33:50,490 is I essentially want to create a loop. 3044 01:33:50,490 --> 01:33:51,323 So we can just say 3045 01:33:51,323 --> 01:33:55,107 for let I equal children.length minus one. 3046 01:33:55,107 --> 01:33:59,070 And when I is greater than or equal to zero, 3047 01:33:59,070 --> 01:34:01,830 we're gonna subtract one on each iteration 3048 01:34:01,830 --> 01:34:02,850 and then we have a loop. 3049 01:34:02,850 --> 01:34:04,260 Essentially, I'm looping through my children 3050 01:34:04,260 --> 01:34:05,130 in reverse order. 3051 01:34:05,130 --> 01:34:06,720 So I'm starting at the very bottom one 3052 01:34:06,720 --> 01:34:08,910 and moving my way up the list. 3053 01:34:08,910 --> 01:34:09,840 So the first thing I wanna do 3054 01:34:09,840 --> 01:34:11,190 is I wanna get the child, 3055 01:34:11,190 --> 01:34:12,480 which is just going to be the children 3056 01:34:12,480 --> 01:34:14,010 at that specific index. 3057 01:34:14,010 --> 01:34:15,090 And then I wanna determine, 3058 01:34:15,090 --> 01:34:17,310 is this overflowing my container? 3059 01:34:17,310 --> 01:34:21,600 So if my containerElement.scrollHeight, 3060 01:34:21,600 --> 01:34:22,740 this is essentially going to give me 3061 01:34:22,740 --> 01:34:24,090 the height of the container 3062 01:34:25,203 --> 01:34:27,110 as if it could scroll to be the full height. 3063 01:34:27,110 --> 01:34:27,943 So if I have like 10 elements 3064 01:34:27,943 --> 01:34:30,120 and it overflows my list by 50 pixels 3065 01:34:30,120 --> 01:34:32,070 and my list is normally a hundred pixels tall, 3066 01:34:32,070 --> 01:34:34,200 my scroll height would be 150 pixels 3067 01:34:34,200 --> 01:34:36,840 while the client height would be 100 pixels. 3068 01:34:36,840 --> 01:34:39,270 So for some reason, our scroll height here 3069 01:34:39,270 --> 01:34:44,270 is less than or equal to my containerElement.clientHeight. 3070 01:34:44,370 --> 01:34:45,203 Well, that means that 3071 01:34:45,203 --> 01:34:47,130 we don't have to worry about any overflow 3072 01:34:47,130 --> 01:34:48,670 because my scrolling section 3073 01:34:49,889 --> 01:34:52,110 is smaller or equal to the actual size of my container. 3074 01:34:52,110 --> 01:34:54,690 So we know that it is not overflowing at all. 3075 01:34:54,690 --> 01:34:55,790 So if that's the case, 3076 01:34:56,765 --> 01:34:58,470 I just wanna break outta my loop and not do anything else. 3077 01:34:58,470 --> 01:35:00,076 Otherwise, what I wanna do is I want to hide this child 3078 01:35:00,076 --> 01:35:01,051 'cause it's overflowing. 3079 01:35:01,051 --> 01:35:04,080 So what I can do is I can hide this child 3080 01:35:04,080 --> 01:35:05,663 by saying child.style.display, 3081 01:35:05,663 --> 01:35:08,550 and I wanna set it equal to none. 3082 01:35:08,550 --> 01:35:10,560 So it's going to be hiding that element. 3083 01:35:10,560 --> 01:35:13,200 Also, I wanna make sure my overflowElement is showing up. 3084 01:35:13,200 --> 01:35:14,570 So I can say my overflowElement, 3085 01:35:14,570 --> 01:35:17,066 I want to make sure that this has a style 3086 01:35:17,066 --> 01:35:19,912 and I want to remove the display property. 3087 01:35:19,912 --> 01:35:22,890 So here I'm gonna remove the display property from it 3088 01:35:22,890 --> 01:35:24,810 because by default it's going to be hidden. 3089 01:35:24,810 --> 01:35:27,480 And if I remove the property, that'll make it showing. 3090 01:35:27,480 --> 01:35:29,910 So up here, before I actually do my loop, 3091 01:35:29,910 --> 01:35:32,610 I wanna make sure I default to hiding my overflow. 3092 01:35:32,610 --> 01:35:34,890 So overflowElement, 3093 01:35:34,890 --> 01:35:38,170 what I wanna do is I want to get the style for this 3094 01:35:39,120 --> 01:35:42,450 and I want to get the display property specifically 3095 01:35:42,450 --> 01:35:44,220 and I set that equal to none. 3096 01:35:44,220 --> 01:35:45,163 And to do that properly, 3097 01:35:45,163 --> 01:35:46,680 I just need to do a simple if check. 3098 01:35:46,680 --> 01:35:50,920 So if my overflowElement is not equal to null 3099 01:35:52,560 --> 01:35:54,600 and then I can run that code. 3100 01:35:54,600 --> 01:35:55,433 There we go. 3101 01:35:56,310 --> 01:35:57,143 Perfectly done. 3102 01:35:57,143 --> 01:35:58,770 So if my overflowElement is not equal to null, 3103 01:35:58,770 --> 01:36:00,300 I'm going to hide it by default. 3104 01:36:00,300 --> 01:36:02,880 And also I wanna take each of my children, 3105 01:36:02,880 --> 01:36:04,710 I wanna loop through each one of them 3106 01:36:04,710 --> 01:36:05,760 and I wanna just make sure 3107 01:36:05,760 --> 01:36:07,320 that they're all visible by default. 3108 01:36:07,320 --> 01:36:10,560 So my style.removeProperty of display. 3109 01:36:10,560 --> 01:36:11,393 So what this does 3110 01:36:11,393 --> 01:36:13,470 is it's making sure my overflow section is hidden 3111 01:36:13,470 --> 01:36:15,780 and all of my children are visible. 3112 01:36:15,780 --> 01:36:18,660 Then I'm going to check, are any of my children overflowing? 3113 01:36:18,660 --> 01:36:20,118 If this is not true, 3114 01:36:20,118 --> 01:36:22,290 then that means my child is overflowing. 3115 01:36:22,290 --> 01:36:23,610 So I'm going to hide the child. 3116 01:36:23,610 --> 01:36:25,230 And then again, check, are we overflowing? 3117 01:36:25,230 --> 01:36:26,063 If we're not, 3118 01:36:26,063 --> 01:36:26,940 I'm gonna hide the child again 3119 01:36:26,940 --> 01:36:28,860 and check to make sure we're not overflowing. 3120 01:36:28,860 --> 01:36:29,693 And the reason here 3121 01:36:29,693 --> 01:36:32,310 I'm making sure my overflow section shows up 3122 01:36:32,310 --> 01:36:33,840 is 'cause if we're overflowing, 3123 01:36:33,840 --> 01:36:36,812 I now need to show my child my overflowElement, 3124 01:36:36,812 --> 01:36:38,460 which is going to shrink the amount of space 3125 01:36:38,460 --> 01:36:40,200 that we have inside this container. 3126 01:36:40,200 --> 01:36:41,250 So it just takes into account 3127 01:36:41,250 --> 01:36:43,470 the amount of space that this button will take up. 3128 01:36:43,470 --> 01:36:44,303 Also what I wanna do 3129 01:36:44,303 --> 01:36:46,800 is I wanna track the amount of things that are overflowing. 3130 01:36:46,800 --> 01:36:48,803 So I can say amount here... 3131 01:36:48,803 --> 01:36:50,850 We will just set it to zero, it doesn't really matter. 3132 01:36:50,850 --> 01:36:52,650 So by default, we have no overflow. 3133 01:36:52,650 --> 01:36:53,520 And then what I can do 3134 01:36:53,520 --> 01:36:56,040 is I can change my overflow down here. 3135 01:36:56,040 --> 01:36:56,873 So I can say 3136 01:36:56,873 --> 01:37:01,520 my amount is equal to my children.length minus I. 3137 01:37:04,230 --> 01:37:05,063 There we go. 3138 01:37:05,063 --> 01:37:07,290 So that's the actual amount of things that are overflowing. 3139 01:37:07,290 --> 01:37:09,990 And then finally, I can set my overflow amount 3140 01:37:09,990 --> 01:37:10,890 equal to that amount, 3141 01:37:10,890 --> 01:37:11,940 just like this. 3142 01:37:11,940 --> 01:37:13,260 So after I'm done with my loop, 3143 01:37:13,260 --> 01:37:14,610 based on whatever amount I have, 3144 01:37:14,610 --> 01:37:16,860 I'll set that as my overflow amount. 3145 01:37:16,860 --> 01:37:18,840 And that actually should be all that we need to do 3146 01:37:18,840 --> 01:37:20,190 to make all of this work. 3147 01:37:20,190 --> 01:37:22,050 Let's just make sure we have everything set up properly. 3148 01:37:22,050 --> 01:37:23,220 We'll do a quick refresh, 3149 01:37:23,220 --> 01:37:25,170 and it looks like obviously it's not quite working 3150 01:37:25,170 --> 01:37:26,310 but I don't think we're using 3151 01:37:26,310 --> 01:37:27,690 this overflow container anywhere 3152 01:37:27,690 --> 01:37:29,550 so let's actually use that in our code. 3153 01:37:29,550 --> 01:37:31,500 So if we have our events that we're rendering out here, 3154 01:37:31,500 --> 01:37:33,120 instead of a calendar event being rendered, 3155 01:37:33,120 --> 01:37:35,460 I want to render out an overflow container. 3156 01:37:35,460 --> 01:37:36,990 So here I have an OverflowContainer, 3157 01:37:36,990 --> 01:37:38,100 just like that. 3158 01:37:38,100 --> 01:37:39,570 And inside this OverflowContainer 3159 01:37:39,570 --> 01:37:42,870 I wanna make sure my className is events 3160 01:37:42,870 --> 01:37:45,330 and let's make sure we import this container. 3161 01:37:45,330 --> 01:37:46,920 So now we can see all the different props that we have. 3162 01:37:46,920 --> 01:37:48,780 For example, here we go, our items, 3163 01:37:48,780 --> 01:37:50,460 that's just gonna be our sortedEvents. 3164 01:37:50,460 --> 01:37:51,840 There we go. 3165 01:37:51,840 --> 01:37:53,010 We have our getKey, 3166 01:37:53,010 --> 01:37:54,480 which is gonna take an event 3167 01:37:54,480 --> 01:37:56,790 and we're just gonna return the event.id. 3168 01:37:56,790 --> 01:37:58,380 Next thing is our renderItem, 3169 01:37:58,380 --> 01:37:59,850 that's just gonna render out one of these. 3170 01:37:59,850 --> 01:38:01,680 So we're gonna take in an event 3171 01:38:01,680 --> 01:38:03,360 and we're gonna render out our CalendarEvent, 3172 01:38:03,360 --> 01:38:04,193 just like this. 3173 01:38:04,193 --> 01:38:06,720 We don't even need the key on here anymore. 3174 01:38:06,720 --> 01:38:08,970 And then let's clear out some of this stuff. 3175 01:38:08,970 --> 01:38:10,230 Let's see what we all have left to do. 3176 01:38:10,230 --> 01:38:12,600 We have to render our overflow as well. 3177 01:38:12,600 --> 01:38:15,780 So our overflow is essentially just going to be a button. 3178 01:38:15,780 --> 01:38:17,097 So we're gonna have a button, just like this. 3179 01:38:17,097 --> 01:38:19,230 And if we look over here at our index.html, 3180 01:38:19,230 --> 01:38:23,130 we can actually find what that overflow section looks like. 3181 01:38:23,130 --> 01:38:25,262 I believe it's called the view-more button. 3182 01:38:25,262 --> 01:38:26,095 There we go. 3183 01:38:26,095 --> 01:38:26,928 So this is what the button looks like. 3184 01:38:26,928 --> 01:38:27,930 I'm just gonna copy this over 3185 01:38:27,930 --> 01:38:30,090 so we have exactly the same button. 3186 01:38:30,090 --> 01:38:32,370 I will paste this inside of here, 3187 01:38:32,370 --> 01:38:34,260 make sure this says className. 3188 01:38:34,260 --> 01:38:35,093 There we go. 3189 01:38:35,093 --> 01:38:37,260 And this is going to take in an amount 3190 01:38:37,260 --> 01:38:40,410 and here I'm going to make sure I use that amount. 3191 01:38:40,410 --> 01:38:41,243 There we go. 3192 01:38:41,243 --> 01:38:42,360 Now, if we give that a save, 3193 01:38:42,360 --> 01:38:43,410 you'll notice we have some errors. 3194 01:38:43,410 --> 01:38:45,300 That's 'cause this should say events instead of event, 3195 01:38:45,300 --> 01:38:46,650 that should hopefully fix all my styling. 3196 01:38:46,650 --> 01:38:47,483 And now as you can see, 3197 01:38:47,483 --> 01:38:49,590 it says that we have two more events that are hidden. 3198 01:38:49,590 --> 01:38:51,030 If we delete one of these events, 3199 01:38:51,030 --> 01:38:51,863 you'll now see, 3200 01:38:51,863 --> 01:38:53,460 it says that we have one more event that's hidden. 3201 01:38:53,460 --> 01:38:54,570 And if we shrink and grow this, 3202 01:38:54,570 --> 01:38:56,610 you can see that different events are being shown up. 3203 01:38:56,610 --> 01:38:58,200 If we now delete this again, 3204 01:38:58,200 --> 01:38:59,033 you can see, 3205 01:38:59,033 --> 01:39:00,810 it's now saying we have zero more events showing up. 3206 01:39:00,810 --> 01:39:02,310 So we have a little bit of a bug going on 3207 01:39:02,310 --> 01:39:03,660 with this actual section. 3208 01:39:03,660 --> 01:39:04,740 So let's make sure we fix that. 3209 01:39:04,740 --> 01:39:06,390 It looks like in our OverflowContainer, 3210 01:39:06,390 --> 01:39:09,000 we're not properly hiding our overflowElement. 3211 01:39:09,000 --> 01:39:10,710 So if we just scroll down a little ways here, 3212 01:39:10,710 --> 01:39:13,560 you can see that this is set to data overflow. 3213 01:39:13,560 --> 01:39:15,270 This is using data overflow here. 3214 01:39:15,270 --> 01:39:17,790 So this overflowElement should exist, which is good. 3215 01:39:17,790 --> 01:39:18,960 It should mean not null here, 3216 01:39:18,960 --> 01:39:21,570 which means our style should set it to display of none. 3217 01:39:21,570 --> 01:39:23,070 But it looks like that's not quite working 3218 01:39:23,070 --> 01:39:24,330 like we expect it to. 3219 01:39:24,330 --> 01:39:25,800 I believe the reason for this 3220 01:39:25,800 --> 01:39:27,240 is 'cause as you can see here, 3221 01:39:27,240 --> 01:39:30,270 our containerRef doesn't actually wrap our data overflow. 3222 01:39:30,270 --> 01:39:32,310 So we're checking inside of here for the data overflow 3223 01:39:32,310 --> 01:39:34,290 while we need to check inside of its parent 3224 01:39:34,290 --> 01:39:35,730 for the actual overflow. 3225 01:39:35,730 --> 01:39:38,130 So here what I wanna do, my container element, 3226 01:39:38,130 --> 01:39:40,590 I wanna get the parentElement of that, 3227 01:39:40,590 --> 01:39:41,423 that could be null, 3228 01:39:41,423 --> 01:39:43,380 and then I wanna do a querySelector from that. 3229 01:39:43,380 --> 01:39:44,213 There we go. 3230 01:39:44,213 --> 01:39:45,780 You can see that it's fix the problem with that overflow. 3231 01:39:45,780 --> 01:39:47,580 If I add a new all day event, 3232 01:39:47,580 --> 01:39:48,413 you can see that works fine. 3233 01:39:48,413 --> 01:39:50,220 And as soon as we add another event, 3234 01:39:50,220 --> 01:39:51,180 we're now gonna get something 3235 01:39:51,180 --> 01:39:52,860 that says that there's two more being hidden 3236 01:39:52,860 --> 01:39:54,300 'cause they don't have enough space. 3237 01:39:54,300 --> 01:39:56,550 If I delete an event, you can now see they all show up. 3238 01:39:56,550 --> 01:39:58,170 But if I shrink down my screen size, 3239 01:39:58,170 --> 01:39:59,003 you can now see 3240 01:39:59,003 --> 01:40:01,590 that this resizing is working exactly as we expect. 3241 01:40:01,590 --> 01:40:03,780 Really, the only thing left to do to make this actually work 3242 01:40:03,780 --> 01:40:05,820 is to make it so when we have too many events, 3243 01:40:05,820 --> 01:40:07,590 we'll just call this one overflow. 3244 01:40:07,590 --> 01:40:08,460 And we know if we give this 3245 01:40:08,460 --> 01:40:11,520 an actual start time and an end time, 3246 01:40:11,520 --> 01:40:13,380 it'll actually show up below the screen. 3247 01:40:13,380 --> 01:40:14,850 I wanna make it so when I click this button 3248 01:40:14,850 --> 01:40:17,790 I can see a modal that shows me all the different events. 3249 01:40:17,790 --> 01:40:19,530 So our overflow container is essentially done, 3250 01:40:19,530 --> 01:40:20,910 we don't need to worry about that. 3251 01:40:20,910 --> 01:40:21,990 This is all working fine, 3252 01:40:21,990 --> 01:40:22,823 we just need to make it 3253 01:40:22,823 --> 01:40:24,630 so this button actually opens up a modal. 3254 01:40:24,630 --> 01:40:27,390 So we wanted to render out a modal inside of here. 3255 01:40:27,390 --> 01:40:30,277 So I'm gonna render out a ViewMoreCalendarModal, 3256 01:40:31,805 --> 01:40:34,210 we'll say CalendarEventsModal. 3257 01:40:34,210 --> 01:40:36,090 Close that off just like that. 3258 01:40:36,090 --> 01:40:39,270 Wrap this inside of a fragment so it actually works. 3259 01:40:39,270 --> 01:40:41,673 And then we just need to create this function. 3260 01:40:44,351 --> 01:40:45,376 There we go. 3261 01:40:45,376 --> 01:40:46,926 Let's just return "hi" for now. 3262 01:40:48,355 --> 01:40:49,590 There we go. 3263 01:40:49,590 --> 01:40:51,330 That way it just doesn't have any errors. 3264 01:40:51,330 --> 01:40:53,190 This ViewMoreCalendarEventsModal, 3265 01:40:53,190 --> 01:40:54,030 it should take in 3266 01:40:54,030 --> 01:40:55,740 all the different events that we want to render, 3267 01:40:55,740 --> 01:40:57,167 which is our sortedEvents. 3268 01:40:57,167 --> 01:40:59,310 It should take in an isOpen prop 3269 01:40:59,310 --> 01:41:02,850 and it should take in a onClose prop, 3270 01:41:02,850 --> 01:41:03,720 just like that. 3271 01:41:03,720 --> 01:41:04,590 There we go. 3272 01:41:04,590 --> 01:41:06,600 So we have all three of those things we need to parse in. 3273 01:41:06,600 --> 01:41:11,070 So here we have our events, isOpen, onClose, 3274 01:41:11,070 --> 01:41:11,903 just like that. 3275 01:41:11,903 --> 01:41:16,103 And I want this to be our ViewMoreCalendarEventsModalProps. 3276 01:41:17,940 --> 01:41:21,870 So I want to take in some events which is an event array 3277 01:41:21,870 --> 01:41:23,610 and I also just wanna combine this with my ModalProps. 3278 01:41:23,610 --> 01:41:26,160 So we can just say our ModalProps. 3279 01:41:26,160 --> 01:41:30,633 And we want to Omit the children property from it. 3280 01:41:32,070 --> 01:41:32,903 There we go. 3281 01:41:32,903 --> 01:41:33,930 That way it just always has the same props 3282 01:41:33,930 --> 01:41:35,190 as we're getting from here. 3283 01:41:35,190 --> 01:41:37,340 And here I can just say modalProps. 3284 01:41:38,760 --> 01:41:39,593 There we go. 3285 01:41:40,489 --> 01:41:42,750 So this can render out a modal instead 3286 01:41:42,750 --> 01:41:44,447 and I can parse it in all the modalProps we need, 3287 01:41:44,447 --> 01:41:46,500 as long as we parse it some children 3288 01:41:46,500 --> 01:41:48,330 it's going to work just fine. 3289 01:41:48,330 --> 01:41:50,730 We just need to make sure we give this the correct type. 3290 01:41:50,730 --> 01:41:51,690 There we go. 3291 01:41:51,690 --> 01:41:53,820 Now, here we're just gonna gonna do a very similar thing 3292 01:41:53,820 --> 01:41:55,200 to what we did with our other modal. 3293 01:41:55,200 --> 01:41:56,850 So I'm gonna go out to our other modal 3294 01:41:56,850 --> 01:41:58,290 and we essentially wanna copy out 3295 01:41:58,290 --> 01:41:59,123 what this header looks like 3296 01:41:59,123 --> 01:42:01,170 so it's gonna be rather similar. 3297 01:42:01,170 --> 01:42:02,460 I'm gonna copy this up. 3298 01:42:02,460 --> 01:42:04,050 I'm gonna paste this inside of here. 3299 01:42:04,050 --> 01:42:04,883 There we go. 3300 01:42:04,883 --> 01:42:05,910 So we're gonna have our modal title. 3301 01:42:05,910 --> 01:42:07,170 The actual title of this 3302 01:42:07,170 --> 01:42:09,060 is just going to be essentially our date. 3303 01:42:09,060 --> 01:42:10,920 So what we're gonna do is get our date 3304 01:42:10,920 --> 01:42:13,410 and our date here is coming from our event. 3305 01:42:13,410 --> 01:42:15,819 And what I wanna do is I just wanna get the very first one 3306 01:42:15,819 --> 01:42:17,700 and I want to get the date from that. 3307 01:42:17,700 --> 01:42:18,902 Now, to make it so 3308 01:42:18,902 --> 01:42:20,400 I don't need to put this question mark syntax onto here, 3309 01:42:20,400 --> 01:42:21,658 I'm just gonna come up here 3310 01:42:21,658 --> 01:42:25,530 and do a quick events.length equals zero, return null. 3311 01:42:25,530 --> 01:42:27,180 Just so we know that if we have no events, 3312 01:42:27,180 --> 01:42:28,560 don't actually render out this modal, 3313 01:42:28,560 --> 01:42:29,820 it doesn't make any sense. 3314 01:42:29,820 --> 01:42:31,200 So this is gonna render out our date. 3315 01:42:31,200 --> 01:42:33,240 Here's our close button that's working just fine. 3316 01:42:33,240 --> 01:42:34,470 And then we just wanna render out 3317 01:42:34,470 --> 01:42:35,730 all of our different events. 3318 01:42:35,730 --> 01:42:37,110 So we can do that. 3319 01:42:37,110 --> 01:42:38,160 Give that a quick save. 3320 01:42:38,160 --> 01:42:42,180 Below that we can create a div className is events. 3321 01:42:42,180 --> 01:42:43,140 And for each one of our events 3322 01:42:43,140 --> 01:42:44,370 we just wanna loop through it. 3323 01:42:44,370 --> 01:42:46,740 So we're gonna map through each one of our events 3324 01:42:47,820 --> 01:42:50,820 and we wanna render out a CalendarEvent. 3325 01:42:52,088 --> 01:42:53,548 There we go. 3326 01:42:53,548 --> 01:42:55,864 Our CalendarEvent just takes in our event 3327 01:42:55,864 --> 01:42:57,864 and a key which our event id. 3328 01:42:57,864 --> 01:42:59,340 There we go. 3329 01:42:59,340 --> 01:43:01,260 And if I make sure I close this off properly, 3330 01:43:01,260 --> 01:43:02,610 give that a quick save. 3331 01:43:02,610 --> 01:43:03,870 We have one error showing up, 3332 01:43:03,870 --> 01:43:05,370 and we just scroll up to see what it is. 3333 01:43:05,370 --> 01:43:07,740 We need to set our isOpen and our onClose. 3334 01:43:07,740 --> 01:43:10,260 So up here, let's create a state variable for that. 3335 01:43:10,260 --> 01:43:15,260 So we can have isViewMoreEventModalOpen, 3336 01:43:15,790 --> 01:43:17,123 setIsViewMore... 3337 01:43:19,660 --> 01:43:21,240 There we go. 3338 01:43:21,240 --> 01:43:23,853 So we can just copy this down as open as that. 3339 01:43:25,050 --> 01:43:29,550 And this will be set isViewMoreModalOpen to false. 3340 01:43:29,550 --> 01:43:30,383 Now give that a save. 3341 01:43:30,383 --> 01:43:31,698 That should work. 3342 01:43:31,698 --> 01:43:33,450 And when I click on this, it's not opening up the modal, 3343 01:43:33,450 --> 01:43:35,310 that's because we need to hook up our button here. 3344 01:43:35,310 --> 01:43:40,310 So button onClick, set isViewMoreModalOpen to true. 3345 01:43:43,050 --> 01:43:44,189 There we go. 3346 01:43:44,189 --> 01:43:45,022 And there you go. 3347 01:43:45,022 --> 01:43:45,855 You can see that it's opened up that modal. 3348 01:43:45,855 --> 01:43:47,810 I need to make sure this parses in a function. 3349 01:43:47,810 --> 01:43:49,320 So now let's close outta that. 3350 01:43:49,320 --> 01:43:50,940 And if we open an event, that works fine. 3351 01:43:50,940 --> 01:43:52,740 We open our modal, you can see it shows everything. 3352 01:43:52,740 --> 01:43:54,570 We click on one of these, it allows us to edit it. 3353 01:43:54,570 --> 01:43:56,010 If we delete it for some reason, 3354 01:43:56,010 --> 01:43:58,380 you can see now we no longer have that view more button, 3355 01:43:58,380 --> 01:43:59,880 which is exactly what we want. 3356 01:43:59,880 --> 01:44:01,335 But if we added something else in here, 3357 01:44:01,335 --> 01:44:03,120 you now see our view more button is there 3358 01:44:03,120 --> 01:44:05,400 and it's working just like we expect it to. 3359 01:44:05,400 --> 01:44:06,780 And if we go ahead and look at our README, 3360 01:44:06,780 --> 01:44:09,120 you can see that should take care of absolutely everything 3361 01:44:09,120 --> 01:44:10,290 inside of this section. 3362 01:44:10,290 --> 01:44:12,030 Again, don't feel bad if you couldn't get this. 3363 01:44:12,030 --> 01:44:13,980 It took me a really long time to figure this out in React 3364 01:44:13,980 --> 01:44:15,870 and to get it in a way that was somewhat clean, 3365 01:44:15,870 --> 01:44:16,770 it's really difficult 3366 01:44:16,770 --> 01:44:17,640 and just definitely something 3367 01:44:17,640 --> 01:44:19,500 that doesn't work super well in React. 3368 01:44:19,500 --> 01:44:21,570 But hopefully, you were able to follow along with this. 3369 01:44:21,570 --> 01:44:22,980 And the really nice thing about this project 3370 01:44:22,980 --> 01:44:24,480 is it showed you a lot of different things 3371 01:44:24,480 --> 01:44:26,040 such as how to do generic components. 3372 01:44:26,040 --> 01:44:28,410 We talked about how to do context with different things 3373 01:44:28,410 --> 01:44:29,970 and there's a lot of different things with TypeScript 3374 01:44:29,970 --> 01:44:32,010 that we talked about in this project that I really like. 3375 01:44:32,010 --> 01:44:33,330 So if there's anything you got stuck on, 3376 01:44:33,330 --> 01:44:34,470 I highly recommend going back 3377 01:44:34,470 --> 01:44:36,150 and just watching through that section again 3378 01:44:36,150 --> 01:44:37,260 and really trying to understand 3379 01:44:37,260 --> 01:44:38,855 exactly how I used TypeScript in that section 3380 01:44:38,855 --> 01:44:40,231 to really elevate my programming 3381 01:44:40,231 --> 01:44:42,993 and make my code even easier to work with.