Google Calendar Clone with React - React Hooks ,React Context and Tailwind

so let me quickly show you what we got as you can see we have an interface that looks a lot like the google calendar it's a fully interactive application so you could expect that we can just move between months and those months will get updated with the correct dates we can go to the today quickly here so it will reset the calendar you can also see that we have an indicator that tells which day is today and in google calendar if you move this one it will get out of sync with this one so that also like this and if we click here the amount will change to that month so but also if we click right here those calendars would get again in sync and also with the today's button you can create events so it a model will pop up so you can give it a name and the event will be selected in the day that we clicked before so if we click for example if we create that it will have that in the date so and we can also create new new events just by clicking in the squares and here we have an endless verse number 20 and we can give it a name and a description the description is optional and we can change the label and you can see that now we have a check box that we can use to select or or hide events i'm going to create a new one and another one with a different color this one is purple and the description is optional and you can see that now we also have that label if we click here you can see that we can hide those events we can of course update the events by clicking on them and we can also delete the events like this and lastly if we refresh the page everything will remain because we are using the local storage so as you can see it's really interactive application and i would say for following the tutorial you will need to know at least not react is like an intermediate tutorial we'll be learning how to you know use react hooks we'll look at those some folks that you might not have used before like use memo or use reducer we're also going to be using react context to communicate between components and in general you will learn how to make you know like a really interactive application how to structure that application and i really hope that that's helpful for you and well as you can see this is a really long tutorial it took a lot of time to make so i would really appreciate if you can like the video and subscribe to the channel because that will help me a lot to keep doing this kind of videos so without further ado let's start coding the app okay so let me just quickly show you what i have in my vs code extension so you can if you want you can also have follow the the things that i have is this called react snippets so this will help me to quickly generate boilerplate for me in some places you can also install that if you want i also have prettier which is just a code for matter to i will be using that to format format the react code i also have this extension called bracket pairing so i can see visually what are the brackets that i'm that much for emit i have this for javascript react you can add it in your configuration so the item is javascript and the value is javascript react so you can use ameth inside your jsx which i i will also be using so now in in the terminal in whatever path that you are or you are going to start this project let's use the cli to create a new react app it will be something like npms create react app and i'm going to give it the name of google calendar react like this it will take a bit so i will go back in a minute okay so now we need to sit into that project city google calendar react and here we are going to install the dependencies that we need because i have yarn i am using jar add here but for you it would be npm if you are using npn will be npm installed and these are the dependencies that we need for now so i will have some installation notes in the description or you can copy this from the tailwind documentation and let's wait to this to be installed after that we're going to install the direct dependencies that we are going to need for this and this is going to be graco so this is just a tool to unlock that allows us to override the create react configuration that we need for both the post css and also the ajs that's a tool to manipulate time one last thing that i want to add a distilling css plugin for forms and it's really nice for having some default format in the or forms that we're going to use so that would be the last dependency that we need after that please open this folder in vs code you can do it like this or directly into the explorer so now we will have something like this and here in the root of the file i'm going to create a new file called graycode.config.js like this and this will be to have the configuration for the create react app override it will be something like this so just pause the video and copy this configuration we're using the dependencies that we installed for this and now back to package.json we need to change these scripts it's not going to be react scripts anymore it's going to be great call like this create react app configuration override it's going to be for build and for test once we're done with that we can now generate a new tailwind css config file like this and px that we see a light layers in it and this will generate a new file for us and now we should have something like this in here and here we are going to add this purge configuration and this will be to remove unused css in this kind of files and here in plugins we are going to use the plugin that we installed that's called tailwind css forms and now we can we are going to use that plugin finally the last thing that we need is to change in the source folder we have an index.css file we can just remove this and we are going to paste the tailwind utilities like this and now we should be good to go so make sure that in the index.css file we have that included and we can just turn start and for you if you're using npm it will be npm run start so that should open a new developer server development server and here you can see that everything has been set up all right so let's start coding the app let's just remove this as we are not going to use this information then what i'm going to do is in the source folder i'm going to create a new file called youtube.js in this file i will have some shared functions that i want to use across certain components and the first function that i want to have is a function that would give me an array that contains an day for each day of the calendar it's like a two-dimensional array so what i'm going to do is i'm just going to import the library day that we installed and this library is just a utility library that you we can use to easily manipulate time in our code then i'm going to export the function that i want and it's going to be called get month and this function will receive as a parameter uh month and this is going to be a number between 0 and 11 so the amount is going to be represent you know starting from zero and here i'm just going to have a default value and this is going to be datejs djs like this will be an instance of this an object that has a bunch of information and we if we don't pass anything here it will be the present moment just like the date object it will be the present moment and here we have a function that will give us the month between 0 and 0 and 11 so that's the default value in case we don't pass anything next i'm going to graph the year so the year is just going to be the same the js that year and this will give us again a number that represents the current year and now i want to know the first date of the month and i want to know if it's you know monday tuesday wednesday so i wanted to know that because i want to place that inner two-dimensional array i want to know if is for example if the first day of the month is friday so we will have at the beginning of the array we will have the previous days of of the of the previous month so that's what i want to know that so i will just say first day of month equals the years and for this one i'm just and here we can pass a different values to create a new date so in this case it's going to be a date object that's also possible to pass that here so we're going to pass that and here that the object also has some constructor properties and this could be the year the month and and the day so the year is going to be the current year right the month is going to be the month that we have as a parameter and the day is going to be the first one so this is going to create a new ajs object that represents the first day of the month and here we can from the day js library we can just invoke the date they function and this will give us an index represent that represents 0 to 6 and and the series is going to start on sunday and 6 is going to be on saturday so it will tell us in which day of the of the week it is the first day of the month next i'm going to declare this variable code called days matrix and this is going to be the first uh the first part of our two-dimensional array so we're going to declare a new array and remember that we have in in the google calendar we can see that we have three f five rows right five rows for each month that's a constant and we have seven columns that represents every day of of the week so so first we're going to start with the rows we're going to generate the rows so we have five rows and this array we're going to use the fill method to fill every row and every row is going to be filled with an with an empty array right and this is the array that's going to have every day of the week next we're going to map that array right to to populate the rate so here i'm just going to declare this like this so for each item each array we're going to return another array so that's why this array has two dimensions so this new array it's going to have us the length of this array is going to be the number of of columns that we have so in this case is going to be 7 because we have 7 columns for each day of the month for each day of the week and then we are going to fill that with for now we are just going to say null then we are going to map through that array and here is where we are going to have every individual every individual day of of that array so don't forget here to return this array from this map function and here i'm going to keep a counter so i'm going to say current month count equals zero so we start first from zero but actually we're going to use negative numbers because there's there's a really nice thing that for example if we pass to the day object date the date is going to be 2021 right the month is going to be what let's say is september so it's going to be 8. and if we pass a negative number for example minus one so you would think that that will throw an error because there's no negative minus one minus one in this in a date but it would actually happen is that it will return a object that represents the mod before in the last day so that's really handy for what we are going to do the same from the opposite let's say we have at a for i don't know 44 so it's going to go through the end of this month and then it's going to take in consideration the next month and it will return a correct a valid date so that's what we are going to do and that's why we're going to subtract the first day of the month so the initial value let's say we are in the first day of the month is wednesday so it's going to be -3 and for what we are going to do here where first in this array because we are looping in the second array we are going to first increase that current amount count by one so every time we we fill a new value we are going to increase and then we are going to return a new day js object that has a new date as uh as a as a parameter and here again we take the year we take the month and here we're going to use this counter so if we think about this the first day let's say the the first item in or in her array is going to be because the month starts starts in on wednesday so the first day is going to be uh i don't know let's say i was 28 and even though we are passing the month as september because we're providing a negative value here it would compare to a valid taste so that's that's really nice for what we are trying to achieve so here i can just return this this matrix matrix that we have all right don't forget to start the development development server with turn start and right now we can we don't have anything but let's just console that log the function that we just created to see what the function returns so if we go to here we can first import that function from from utils util so here we have get month right so i will remove this one and here i can say console so i want to see this as a table so i can say console.table and here i want to get this and i cannot i can pass anything so it will it should give me the current bond so if i save and here i opened this right here let me see and yeah we have our or our months so we can see that we have like a calendar and here we can see all the values so for example we have september 7th is going to be in the second row so in the first row we have 31 of 31 of august which is correct here we have september 1 of 2021 was which is also correct so so as you can see we have a representation of all of the all of the dates of the month so this is what we are going to take and with this information we are going to render the calendar and we also for example can change here the number right so for example this will be april so the values should be different it should should be it should be different so here uh you can see that with the first item into is is march very so which is is also correct for this case all right so the next thing is going to be i'm going to give some structure to this application you know we're going to divide this in individual components so now for now i'm going to add this react fragment as a parent to all of the childs and well if you don't know react fragment is just a way to provide an invisible parent that's not going to be represented as the note in the in the web page and it's really useful when we don't want to display like invisible themes to graph everything uh the next thing is going to have i'm going to have a class at active that's going to have the class of and this is going to we're going to use the tailwind classes so this is going to have a height of screen so this is going to cover is going to fill all of the screen as a minimum height and here we are going to have uh we're going to displace as flex and this is going to be in columns yeah so it's not going to be like one to another but like in involves so this is how it works in flex you have to give it this to have the flex one between another here we're going to have a component that does not exist yet jet that's going to be the calendar calling your header and this is just going to be like this is not going to have a closing task and after that we are going to have another flex component that is going to have flex of one so it's going to cover all of the rest of the space and this is because this is like a co uh we have two rows right so this is just going to cover everything here we're going to have a sidebar that we don't have yet side bar and below that we are going to have like a month component so now let's just create those components i'm going to use a new folder and create a new folder with the name of components and here i can start i i'm going to start with a calendar header dot js and here i'm going just to use the snippets that i that i have so react functional component and this will populate component for me then i'm going to have the other component called sidebar dot js and again i'm i'm going to use the snippet then i'm going to finally i'm going to have the mount dot js and again i can use this snippet right here so now that we have those components this time that we import those import calendar header we're also going to import that sidebar and finally we are going to import the month component from components slash month so we have all of our our components so let's start first with the month so because we now have the month right here the we can provide the amount information so what i'm going to have is i'm going to have i'm going to use the state use state and this is going to be local state it's not going to be global state for now and i'm going to have two variables to the first one is going to be current month and set current month right like this and here i'm going to use the state and the initial value is going to be organ month month function then i'm going to have an index that's going to change the month and we're not going to using we just did that in this yet but well this well you we're just for now we're just going to have the current month right and here i can pass as a parameter i can pass that like this month equals it's going to be the current month so now that we are passing that we're going we need to read that from the props like this month and here work we are going to do is we are going to first declare some classes that we are going to have here so the first one is going to be flex one so because this the parent is a flex component the children is going to have this so it's going to expand then we are going to have a grid right so we're going to use also use grid for this and with tailwind is really simple to declare like grids we first need to give the grid a class and then we need to define the columns so remember that we have how many columns we have three columns so with this we will have three seven seven columns sorry and then we need to define the rows so we are going to have five rows so it's just that simple and with that we have a grid the grid that we need and here we are going to remember that this is a map an array so we are going to map through that month and for each item of this of the first dimension of the array we have a row that represents the week and here we are we're going to read the row and also the index of that row here again we're also going to return uh react that fragment because we don't want a real we don't want a real dumb element we want a fake one to so we can use or we can use or or grief components so we need root root elements for further uh there is a syntax error here let me fix it so we have this i need another uh ready like that so that that's correct syntax and this has all of the map elements of the map function is a key the key is going to be just the index and for each one of these elements we're going to also loop through that row because that row is also an array that has every day of the week and here i can map again and i'm going to have a day and i'm going to have another index i'm going to give it this name and here i'm going to return a component that is not present yet but we are going to create it soon and here is this is going to have the day as a parameter and again it's going to have the key and it's going to be this one so we have this but now let's just create that day component and this is going to represent every individual item in or grid so again let's use the snippets and here i can read that today and for now i can just say they that format because this is an instance of the js we have this method called format and this will just display the format of that of that of that date so now if we save if we if we go here we see that we have an error because we haven't declared the component yet imported the component yet so let's do that so we just need to import day friend day if we say you can see that we have agreed with every individual day of the week and because the sidebar is is just an empty div right now our component just fills everything we we're going to fix that but for now let's go back to the day component and here we can add some x styles so we're going to have a class name of border so we're going to have some nice border for each cell in the grid then we're going to have that border with a color gray of 200 and then we are also going to have a flex and a flex call and right here we are going to have this not like this but in a bit dark and this is going to have the glass of text small with a painting of one and i'm my merging in the y-axis of one and with text at the center like this and here the value is just going to be the a that we have before but now it's just going to have a format like this so this is going to just display two numbers instead of the whole date that we have before and all of this is going to be inside of header component right so we have the header and this is going to have also these classes so this is going to have a class of flex of then a flex call and items center so everything is centered on the y-axis on the on the x-axis so we have that because we have we need two elements here and the other elements is going to have a class name of text small and i'm merging top of of one and this is going to be just the day but represented in another way like this the format the format is going to be like this and this is going to return the day the day but in just two letters and here i'm going to uppercase this with this method to over case so now if i save i should have something like this that's what i wanted so we have in the first part we have the they like this in three letters and below we have just the number all right so now we have a well it's not a problem but in the google calendar it's not like we're repeating this everywhere you know the these headers is just is just just needs to be present in the first row so for that i'm just going to go back to the month that just and here i can say something like row index equals and it's going to be the index that we have here is going to represent that index the and we i can say i can read from from the props like this row index and what i can do here is i can just check if this row index equals zero which is going to be the first row if that's true only on that case we are going to display this so now if i go back here we can see that we never have that so row index and here we are pass i didn't save this so that's why it didn't show up so now it will only be present in the first row which is what what we wanted before keep going i almost forgot that we need some extra configuration in the index.html file it's just some fonts that we i want to use for the app and also some icons so the links are going to be in the source code but if you also want you can pause the video and copy the links so these are the links it's just a reference to the material icons that we are going to use for the app and also another for the open sense font that we are going to use besides that i also want to change the tabling configuration to use the new font so for that we can just go to this the file and here we need to extend the theme and here i can use the font family utility that we have and i'm going to replace the sans property with open sounds that's the fonts that i just added and also i while we are here that sets this new variation of great template columns and this is going to be for something that we are going to soon use is going to be the a one feet variation and is going to be one fraction and then five is just going to be a utility that we are going to need in the future so you might need to refresh this to pick up the new fonts or maybe stuff the developer server but uh well we should be good to go now and now let's continue so while we are here one other thing that we need is that we want to display an indicator that we know that this is the current day so instead of having curly braces uh just a string here i'm going to have a template string and here i'm going to have a function that's going to be get current a class and this function is just going to let's declare it now the function is just going to return a string so we are going to compare we're going to compare the day that we have we're going to format that because it's easier to compare strings and here we can give it this format day month year so if this is equals the current day right they that format so if we don't pass anything here it's just going oh well we need day yes day j yes right we need to import the htgs and if we don't pass anything here it's just going to default to the current day then we can just format that and we are going to use the same format with this we know if this this day is the current day and if this is true so if this is true we are going to return a background of blue 600 with the text white and we are going to round this rounded full with these classes and a width of seven and if this is not true we are just going to return nothing an empty array so if we say we should be able to see something like this because today is monday 13 and well the day i'm filming this is monday 13 of of september so that's why it is like this so now let's continue with the header we have the header right here so for this we are going to have uh well we're going to use the header class it's better to use something like this then i can give it a class name and this is going to be of of padding 4 in the xy axis and by pairing 2 on the y-axis then this is also going to be of flex and we are going to center everything vertically with items center then i'm going to have an image so this is going to be the logo and here i'm going to create a new folder called assets like this and again i this assets are going to be present in the github repository these assets is just like the calendar logo and well this is an svg that we're going to use later and here i can just import that logo like this from from assets like this and here we have logo.png and their source is going to be that logo right then i can just give this an out of i don't know calendar and a class name and this class is going to have a margin right of 2 and a width of 12 and a height of 12. if we say we should be able to see that like this so this is not correct it should be up uh let's let's see what this is not working so if we go to the app.js file uh i think this is run flicks calls let me double check yeah it's flex call like this not columns yeah so now is where it should be another thing that's not showing is the borders so the borders should be should be displaying so let's see what's what's up with that so we have a border so the reason why it's not showing is because it's not bother is border so that should yeah that should fix that and we can see that we have our header where we should have it let's continue with the header so we also need uh where's the header so below the image we need an h1 and this h1 is going to say just like this calendar and it's going to have some class name of margin right of 10 and text excel text gray of 500 and a font ball of old font all right so we have the calendar now we need some bottoms that to navigate between between the calendars so this is going to be a bottom i will use emmett for this it's going to have a border it's also going to be rounded and with a paving in the y-axis of two and i'm paying on the x-axis of four and a margin right of five and for this button well this is just going to say today so this will navigate for for the current day and then we are going to have another boot on and this is going to be for navigating between months and this is just going to have the spam and here as content we can just say chair room underscore left and and this because we are using material icons this will replace will be replaced with a real icon and we also and we also need to give it a class of material icons and what this one is outlined also cursor pointer because we want to have it like a button and we also want it to have big gray and with that accent of 600 and i'm margin on the x axis of two so i will just copy this and i will have it again but this time is not going to be left is going to be right so if we save that we should have something like this and with this we should be able to navigate between between different months okay now it's a good time to integrate the react context so we can communicate between this and this one so the moment we click here we are going to change a global index that represents the current month and that's going to change the amount right it's the same for for this thing so let's just do that and well we're going to create a new folder in the source source directory called context and here we're going to have two files we're first going to have a global context so this is going to be the context for the whole application usually you want to divide the contents between different trees of of parts of your app but because this is a simple app we're just going to have like a global context that's going to be for everything and here we are going to have a context group wrapper context wrapper ljs and this one is going to be a react component so we're going to just provide this component as a wrapper of all of our application and then we can provide the context to that wrapper so all of the children can access the context so let's start with the context itself so this is just going to we're going to import react from react and here we can say something like cons global context like this equals react dot create context and right here we are going to have a set context we are going to have a whole object where we are going to keep all of the state for this app well you can also declare individual parts of of context but this is just simpler to do it like this for this and here we are going to have something like this that's going to be the amount index index like this and well i can just give it a random value this is just going to be well well not not a random value it's going to be useful for having like intellisense between the ps code it doesn't need to be the real value because the real initial value because later we're going to have that in the wrapper so for now it just can be zero and here we're going to have a function that's going to change this value so set month index and here i can just give it this value to have intellisense so and we can say index so we have declared the context now just export let's export that context like this and now let's move with the contest dropper so here where this is going to be where we are going to use the provider function for the context so we need first to import that global context from the same directory and in the jx x we can provide that to the component like this global context that provider and here we need to and what's going to be here is just going to be our whole application so we can access that with the props right here and here we can just pass that those props that children like this and this is going to be our whole application and this is a really handy way of providing contacts and we i wanted to do it like this because because this is a react component we can use state and we are just going to duplicate the keys that we have before as a state right here and i can import use state and i can say and i will just copy so i and i will recommend you to do the same so you don't have any mistakes when declaring this so it's going to be the month index and this is from our previous file the context file so and here we have set month index like this and i can here just use the state and here i'm i'm i'm going to use a real default value i'm going to import from the js and here we are just going to have a new instance of datejs and it's going to be the current month right if we don't pass anything here it's just the current date so we have that and now our context provider needs a value and here we can just pass this as an object and we have the month index and then we have the set month index okay okay so we have a global place where we're keeping track of the index of the index so now what i'm going to do is here in the month component what i'm going to do is here in the app component i'm going to listen to that index right so first we're going to use a hook for accents in that context we can use the use context hook and we also need to import the global context right from context.globalcontext and now i can declare that like this i i will do construct because it's an object i can deconstruct that and i can say use context i need to pass the context object that's right here and here i can just use the variable that we need that's month index right so this is the current month index and what i'm going to do is i'm just going to use another hook from react that's called use use effect and this use effect comes really handy in this situation because we can just pass a react dependency list and this is going to be the state that we want to react to it's just going to be the month index and right here i can just say set current month and the current month is just going to be the month index that we have so we are reading from the from the context but now we need to write to the context and we are going to write to the context in the in the header i'm going to do the same here i can do it like this with vs code i can just say const equals use context you could auto import that and i can just declare like that and will auto import the global context and here i can i first need to read red from the month index and i also need to set the month index all right so when is going to change the index of the month is just going to be when we click into the those buttons buttons right uh let's add this in the button component right here so if we click in the chevron left i'm going to have a function that's called handle breath mount and here i'm going to clear that handle breath month and what this is going to do is just going to change this the month index and it's just going to be the current month index minus one and i'm also going to have another one handle next month and this one is just going to be set month index and we are just going to add one add one to that current value and here is where we need to use that so i can access the on click and i can use this right here so now uh it's not working and my month that map is not an option so what's happening is that we broke something here when we set the current month so let's just see what's that what's that current month month console.log month index oh i think i i know what's happening here so we are just setting the current month with a number but it's not like this we need to use or get month function and then we need to pass that number that index so now it should work yeah so we have right now we have we have september and if i click here nothing happens let's see if we have any error um so we are having the function so this one shouldn't be like this it just needs to be like that let's see if that fixes the problem still nothing on click so the main issue right here is that we declare declared our context wrapper but we are not using it anywhere we need to use the context wrapper so i'm going to use this index.js file and here i'm going to import that context wrapper from right here and i just need to have as a child the whole application right here so this is going to grab everything and now it should work famous last words and you can see that we can switch between months uh so now that we have the month i i can display if the month right here just like we have in google calendar and let's just let's just do that so if we have to go to the header right here we are going to have after all of this we're going to have an edge to tag and this is going to be use again day js uh let's make sure to import datejs and here we can just have a new date that's going to have the day js that year as the first value the second argument is going to be just the month index and we can give leave it like that we we can actually create a date without have all of the parameters here then i can just format that date and the format that i want is going to have a month like this it's going to give me the full month in letters and like this is going to give me all of the the year the full year we have that path we also are missing some styles so here i can give it this style of margin left then a text with extra large and then a text gray with 500 of accent and a font bold if we go back we should be able to have something like this that represents the month that's currently being displayed so if we change that and one cool thing is what will happen if we go to december should we do we need to change the year actually not because of that date trick if we have like 2021 month 13 it will just display the correct the correct gear so that's this just working so the last thing of the header is this today bhutan that we have where is that so this needs to reset the calendar to the present month and that's going to be quite simple uh we are going to attach an event and we can say handle reset reset this is going to be this function function handle reset and guess what's going to do this function it's just going to set the amount index to the current month like this right month let's see if that works so if we are in a pearl if we click today it will just reset that also if we go to the past we can see that we are backed into september now let's continue with the sidebar let's go to the component we don't have anything yet but we're going to start so first we're going to have the button that we can create a new event so it's going to be called create event button it doesn't exist yet but let's just declare the component for now and it's going to be in the same folder and here well first this is going to use a aside aside tag it's going to have a class name of border so we have some border there and i paid in of 5 and a weight a fixed width of 64. then we are going to have that button right here and i'm going to save it's going it's probably going to throw an error because we don't have the the file just so let's create the file create event button.js and here again we are going to use a functional component with the help of the snippets when and here and this button is just going to be a button like this and it's going to have a class name of border we're going to have a painting on the y-axis of two operating on the x-axis of of two uh well just a painting of two then we're going to have it rounded full like this there it's going to be a flex also with the items at the center then we are going to have a shadow so this is how we declare shadows in in with tailwind and it's going to help with the size of medium and a hover state in the covered state is going to be the shadow is going to be bigger going to have a shadow of 2 xl and here i can then have an image image and this is going to have this plus icon that we have in the assets folder this plus so i can say plus well it's actually as an svg but we can access that like this and splash that spg so that's going to be the source of image like this and an al we can say something like create event and the class name is going to have a fixed width of 7 and a height of 7 of seven like this we have that but and now we just need another element that's going to say create and this is going to have a class name of paid in life of three and paying right of of seven so that should display something like this yep that's exactly what we wanted and at the moment it doesn't do anything but we're going to come back to this later and we have the create button we're also going to have another that's going to say small calendar so this is the small calendar that we have in the left and we can declare it like this small calendar with this snippet and let's add it right away here we can import small the small calendar and we can just declare the calendar here so this calendar is going to have a different state for the month and for the for the current month and for the index is going to have a local state because when you move through the calendar it actually it is not in sync with the big calendar that's how it works in the google calendar so we're going to replicate that here so it's going to have like a like a local state for for the index of the month set current current month index we're going to use the state from react don't forget to import that and here we also need to import the ais and again it's going to be the month the current month then we need to have something like current month so it's like a local state for this set current month and the initial value is going to be the get month function don't forget to import that and here we are also going to have and use state use effect hook don't forget to import that from react and as we have in the other component every time the month so this is the local current month index changes we are going to set the current month with the get mod function that receives a parameter of the current month index so this is a local local state that we have here so now we have that and what we are going to have here is just going to be the html for for that calendar first we're going to have i have some some kind of header that's going to control the calendar but let's start with the wrapper of everything so this is going to have a margin of nine it's just a wrapper and then we are going to have another div that this is going to be for the header of the well we can give the name of heller is going to be the head of that mini calendar so it's going to have a class name of flex and we're going to host if justify who's defy hostify between the content yeah so it's in both sides of the container and here we're going to have with a class name of text gray it's going to be some text that's going to display the current month in the font font of poll and here we are going to have we are going to have a new date from that we can create with the ajs and here we are just again have the year as a first parameter and the second parameter is going to be the current month index and this comes from the from the local state and here we are going to have this format in similar way as we have at the top it's going to have the month like this and the year like this so if i save that we should have now a string that represents the current month so this is what we wanted is similar to this one uh we we could probably have this in a in a separate and a component so so we know don't repeat that but it's okay for now and next to that we're going to have these bottoms this similar to the ones that we have at the top and here we have something like last name of material icons outline it out line it then we have a cursor of pointer and text gray with 600 of accent and i'm marching in the x axis of two here uh we just have the chevron left and i'm going to copy this again and have it like this but for chevron [Music] right and we should have two icons like this so this is what we wanted and now we can attach an event here in every bottom and it's going to be kind of similar of what we have in the header component so it's going to be function handle breath mount and what this is going to do is set but this is the local the local state that we have here the current month index is going to be the current month index minus 1 the same for the future handle next uh function handle next month and this is going to have a current month index plus one so now we need to just attach those to these buttons on click and here we have handle breath month and for this one we have on click handle next month so so so you can see that we can go through every month and it's different from this one but there's one also another thing is in google that if you change this one of or if you click this one this calendar also needs to go back to the initial to the to keep in sync so this can move independently but when you click here this will keep will be in sync so we can do that but just using the context that we have so i can import from i can i can declare the context here like this const equals use context uh it will means first to import that from react and then we can use our global context and we need to import that and here we can read the month index this is the global month index and we can use another use effect hook and make sure to import that from react and as a dependency we need the month index so every time the month in the exchanges the global one we are going to set the current month the current month this one set current month index index like this this one to this value that comes from the global the global object the global context so now if we go back here and we navigate but for example we click today uh it didn't work so let me see that again so if i click today so it works for these cases but since that it doesn't work the first time the today button all right so the reason why it's not working when we click and it's not resetting the month is because use effect use um has an optimization that it will not be render triggered if the previous value equals the same value and that's exactly what's happening so what what we can do is just check if the month index equals the current month is if that's true we're going to take the month index and we are going to add the current we're just going to add a random value and this will give us an m number between 0 and 1 but actually this will not reach to 1 so that's what we need it will just be between zero and i don't know that's 999 and if only if this is true and if this is not true we're just going to return the current point right and well i it looks a little bit ugly what we are doing but it will do the trick for us for now and because we have an we now have a decimal well we can go into the youtube.js file and here we are going to replace that decimal with an integer and i'm just going to replace the month with taking the math function that floor so this will not round it will just give me the integer and i can just use the month so now we're going to display the calendar and we are just going to use a div for the container of that and it's going to have a glass of grid we are also going to use a grid for this we are going to have again seven columns and for this we are going to have six rows and that's because we are also going to display the number the names of the days so that's why we have six rows so let's start with that we're going to loop into the first row of the month just to graph the initials of the days so i'm going to map that and this is going to be have a day for each item we're going to have a day and an index and here we can return a span element that's the content is going to be that date in the format of like this of tt and here we can just use this chart at method from the array to just graph the initial so just we just have the first character character there and now i also i will also want to add a key for this that's going to be the index and we need a class name that's going to be of text small and up painting in the y axis of one and text center so let's see how that looks so yeah it's just going to be the initials for that for that uh i think it's something is wrong with the initials also here so it should start with sunday uh let's see what's going on there so the issue is right here inside the utils file and here we have our get month function in the users file and because i was explaining that we can have negative numbers i forgot to remove the negative number here so this should not be negative it should just be one and now we should yeah we now we have it as sunday as it should be so the the week starts at sunday and we have the current the correct values there so let's return to the small calendar component and below the headers we are going to loop into the current month and here we're just going to graph the whole month we're not going to grab the first value and we have a row and an index again here and we can return some jsx and this is going to be react dot fragment again it's going to be just a fragment not a real dom element the key is going to be this one that we have here and here we just going to loop again into every row so we have the row that's a week and here we can map through that day for every every day and we also have another index right here and for each day we are going to return a button it's going to have a spam value here and this is just going to be again it's just going to be today that format that and with the format of t so it's just going to be one digit of the number of the day and here we can give it a key the key is going to be the second index and the class name [Music] it's going to be of here we is also going to be dynamic because we want to have like a specific class for the current day so first start with things that are not dynamic there's going to be a painting of the y-axis of one and a weight of full so the the button fills all of the container and here we are going to have another class name and it's just going to be of text small like this so let me save and see how it's looking and it's looking good so we can go through different months and and what we need now is we just need to highlight the current day like we did before and i'm going to have a function that's going to say okay get the class and this is going to receive as an argument it's going to receive the day and here we can say something like like this we can say something like where we can just define the format here and we have day and we also have the month and we also have the year we can say something like now day equals day they hotel that js so remember to import ajs and we can give the format that we have here and the current day it's going to be the day that we have a super asset parameter here and this is also going to have the format that we have right here so now we can just use an effects statement so if now day equals the current day if that's the case we're just going to return uh pg below 500 it's going to have a background of blue it's going to be rounded full so it's a circle and it's going to have the text white else so if that's not the case we're just going to return an empty array an empty string so now that should and we need to use this method so we can use that in here when we have this dynamic we can add that like this and we can just pass the day that we have here so now it should display something like this for the current date so that's what we want okay so one thing that we need to correct here is that if we click you can see that these these arrows just go over all over the place they're not like static and i i for that we just need to take these borons and just have it have them in an individual element in a parent element like this so if we have them like that now it should just stick in one place so it doesn't move all over the place uh one feature that google calendar has is that if you click one number for example you click that and it will have a different background and for example if you're in october or november and you click that thing that number it will change this this other calendar so let's implement that and again we are going to use the context for that so let's just go to the context to the global context and here we are going to have other other values here so we can say uh something like um small calendar month and the first value is going to be no well this is just for intelligence uh well it can be a number and here we are going to have a set a setter for that so said small calendar month and this is going to be a number a function we can declare the function like this and we need to use this into the context wrapper so i will duplicate this and i will just copy and paste this to make sure it has the same names and the initial value is going to be an old value for this it's going to be null and here i can just pass those properties as state so we can use them in our in our in our tree so smooth calendar like this and here we are going to use the use effect hook make sure that you import that from react use effect and here we're going to have as a dependency it's going to be that that small calendar month and because the initial value is no we don't want to run this the first time so only if this is different than null so we can say something like like this if small calendar is different than no only in that case we are going to change the month index to that mini small calendar month so we are going to change that so the whole calendar of dates with that so now what we need to do is just go to the small calendar component and in this button so in this button we're going to have an on click event and what's going to happen here is that we are just going to set that calendar amount and we need to use the context for that so we need to read from the contest to set small calendar month and that's going to be just the current month index that we have here the month index that we have in this state so if we save that so now it should if we click for example in december this should should change uh the last thing that we need to do is we need to change the we need to change the when we click into the number we need to change the class so for that we are going to have something like like this in the global context we're going to have a selected day as they selected like this and the initial value is going to be null and below that we can have the set they selected and this is going to be uh also a function so we can declare that just to have intellisense there and if we go to the wrapper we can declare those values here i will just copy that again to make sure i don't make a mistake so i can use that the first value is going to be null and then i can use that here so as they selected and set they selected so now i can go back to the small calendar and here besides having that i can also say say and we need to we need to use the context so let's go back to the context and here we can set they selected and also let's read from the day selected property here so now if i click in the bottom of the day i can say say says says they selected it's just going to be the current date that we have access here and now here in the day class i'm going to read that selected date said and i can have something like this selected day it's going to be equal to the selected so we're first going to make sure that the date selected is different from node with this boolean condition and if if if if that's the case we can just graph that i selected and use the format that we have here so we can compare that the format now we need to use that so i'm going to ask another i'll add another else if here so and we just copy that right here and here i can return a different stream for that case and here we need the condition and the condition is going to be if the current current day the day that comes from the template equals the selected day selected day if that's the case we're going to have a background of flu with an ascent of 100 is going also to be rounded full but the text is going to be blue 600 and we're going to have a font that's bold so let me go back quickly here so if we click you can see that the selected date gets highlighted with these different colors so we have the display part i think almost finished but now what we need to do is we need to be able to create new events so that's just going to be a model and let's just create that model it's just going to well another folder but a new file that has the name of of event model dot js let's use the snippet to have a functional component here and let's start with the model so we are going to have a thief that's going to grab everything and it's going to have the class name of the height of the screen the height of the screen it's also have the width of full so it has everything going to be fixed so it's placed it's placed in front of everything it's going to have a left of zero and a top of zero it's just going is it's just going to be flex it's just it's going to be justified at the center so all the items are at the same sentence center and also items center it's this is just the overlay right it's not the model now we are going to have the model so is i'm going to use the form tag for that we're not going to have an action and the class name is is going to be of background white it's going to be rounded lg is not going to be full round just a little bit and it's going to have a shadow of two times excel with a width of one one one slash four so it's just is the width of the of the model and now let's start with a header the header is going to have a class a class of background gray 100 it's going to have a betting of 4 in the x y in the x axis and a pattern of 2 and the y axis is also going to be flex with the it with the content in between so it's in every corner and the items are in the center so this is going to be the header of the model where we are going to have the x button to close the model so let me just add now and we are going to have an icon and this is an icon that has the material icons class icons outline and so this is outlining material yep it's going to and it's going to be have a text of gray with an ascent of her 400. now let's have the name of the icon that's drath handle dry hand handle and below that we're going to have a button that has another icon and this is going to be the icon for closing the model so we can the name of the icon is just close so we have the basic structure of the model and a way to close it so we are going to add this model as a component into the roots of our app and here i'm going to import that event model and i'm going to add that model right here like that event model let's save it and see how it looks so we can see that we have the model but it's always been shown and and that's happening because we need to control that with the state so if we go back to the global context we are going to have some state here to show the model and it's just going to be show event model it's going to be the fall it's going to be false and here we're going to have a set show event model and this is going to be a function now let's go back to the wrapper to the wrapper and here i will just i will first duplicate this and i will copy and paste this right here and the initial value is false and now we can have this as values so show event model and set show event model so we can use them in our application and here we are going to read that from the context show event model so because this is a boolean we can use conditionals to say only if the show event model is true only in that case we're going to display this component and where we are going to set that to true is in the button that we have here that is create event button and here we need to use the context let's use that context use context import that from react and also import or context and here we can use the set show event model and this is going to be true once we click into that button so once we click into that button we can set show event model to true and when it's gone it's going to be false if we go back to the to the event model so if we click here on click it's going to to do just that so import let's also consume the context here remember to import use context and also import our global context and now we can set show event model and we can set that in once we click into the close button so we're going to have the callback that calls that and and this is going to be false because we're closing that model so now if we click we can see that we can show or hide the model so let's add content to that model okay so below the model we're going to have another div that's going to have by pairing of three and this is going to be the body of the model and inside here we're going to have a agreed element and this is going to have the special property that we created this calls one fifth so this this is going to be the columns and we don't need to specify the the rows here and we are going to have the items aligned to the end and a gap between the columns in the y-axis of seven so we have some spacing here i'm going to have an empty div so that's okay we're going to have an empty div here and here we're going to have an input so let me just save it to see how it's looking and you can see that we have an empty column here and we have an input here and let's continue with the input so the input is going to have a name of title and it's going to have a place holder of title so this is going to be the where the place where we give a title to them to the event the value is going to be a title variable that we don't have yet so let's declare that and this is just a state so it's going to be use state remember to import that and the initial value is going to be an empty array and this is going to have a state and title and set title so we have the we are reading the value but we also need to update the value and we can do that in the unchanged event right here we have a callback with the event and we can set the title with the event that target that value so this is the value of the input we are reading from the from the state and we are so updating the state this is also going to be required so it's going to be required and now we need to give some styles so the styles is just going to be a painting top of 3 with a border of 0 because we don't we want to reset that form and this will also some styles also come from the plugin that we have in the tailwind config this plugin so it's not the same if you have this plugin will be different but yeah just to call out that and here we have border of zero text of 600 so we have the text the text is going to be extra large the font is going to be semi volt we're going to have a parent in the bottom of two a weight of a full so it takes all of the all of the container border bottom of two once we have and now let's also add some color to the border so the border is just going to be border gray of 200 now we are going to have some styles when we focus into the input and this is going to be just focus oh so when we focus the outline we have an own outline by default in all of the inputs so that we're going to remove that outline we're also going to remove the ring so this is another property that we have and by default it's going to be zero and once we focus the border is going to be blue 500. so those were a lot of classes if we save title is not the finest so i made a typo here is like this so we have that and we have this nice effect when we focus into the input it turns into blue with this only css so now we're going to have another icon so i'm going to copy that and paste that below the input the class is going to be the same but the name is going to be schedule that's the name of the icon it's just this one and this in here we are just going to display in a p tag we are going to display the current day so i forgot to mention so once we click how we can create a new is but but having this uh selected so the moment we click create is going to select either the current day or the day that we have selected right here so we already have that we already have that state but we just need to consume that state so it's called se they selected and we can display that in here they selected that format right so the format is the it's going to be the following we're going to have the full day like this then a comma and the full month like this and the date like this so if we go back here we have the current so so we have an error here because the initial value is known for the selected day but this is not good it shouldn't be like that we can just change the initial value it's not not to be known but just an instance of the js so in that case if we refresh it the default value is going to be the current day but if you we select a different value for example 24 it should also be 24. we should also be able to create an event when we click here in in in a place like like here so let's do that let's move to the day to the day component that's the place where we have every day row and and below the header we're going to have a div and this div is going to have a class name of flex one so it goes all the way down and it's going to have a a cursor pointer class so it looks like a button and here well it doesn't have anything yet there i will just put that in there as a placeholder but it has an on click event and what's going to happen when we click in the in here is we are going to we need to use the context so we don't have the context here yet so i will use that context with a hook use context and here i can pass the global context remember to import those and i can say set select set they selected we're going to select the day and set show event model so we can display the model and that's what we are going to do so we are going to say set select set day selected it's going to be the the day that we have as a property here this day and below that we can say show the model so we need to pass this as true and now if we click in any of these places you can see that it's going to create a new event for that day 24 24 and also from here so let's go back to the model so below below the the current date you're going to have another icon so let's copy that icon and this icon is going to be called segment like this it has the same classes and this one is just this icon to add a description so for the description i'm just going to copy and paste the same input but we are going to have another state for that so it's going to just be this description and set description and the description is going to be an empty array at the beginning here we are going to read from the description and here we are going to set the description and the name is not title is description and the placeholder is as a description one other minor change is that the text is not going to be xl for this so we can just remove that and default the font is not going to be semi-volt so we can reset that and here we have the description so now we are going to have below that we are going to have another icon i'm just going to copy this but the icon name is going to be this one bookmark border and this is going to be for the tags so at the top of this file i'm going to declare a new variable that's going to have all of the different types of colors for labels that we can have it's going to be indigo gray green blue red or purple and we can look through that through that array to display different of labels options for for that so let's start with the container for that this is going to have the class of flex and it's going to have a gap in the x-axis of two this is the container and now we can loop on on those labels with map as before here we can just say something like label class like this and what we also can read the index to use as a key and for the asx here we are going to return and we are going to return and span and span object and this is going to have the key as the key is going to be the index that we have then we are going to give it a class and this is going to be the dynamic so we need to add those back tails it's going to have a background and here the background is going to be from this from this class that we have here label class with an ascent of 500 then we need to define a width that's going to be six a height of six it's going to be rounded at the full it's going to be flex with with the items at the center and also justify send center and finally it's going to have the class of cursor and pointer so that's going to be the class name for this and now we're just going to have an icon so let me copy again this but the text is going to be white and the text is going to be small this is just going to be a tick so we can have something and that's the the name of the icon check and that's that this is what we have so right now everything is selected as you can see so let's fix that and we are again we are going to use the context for this uh well not not the context we don't need that context we can keep this in the in here locally so i'm going to duplicate this state and we can say selected label and set selected label so now let's just give that like here once we click on that container we are going to set set selected label and it's going to be the label class that we have here uh here the initial value is going to be the first one of the array so we can have it like this and now once we click that we are going to change the selected label and we are only going to split display the check one once that label is selected so we can use a conditional that says if the selected label equals the label class that we have here only if that's true we are going to display this jsx that's the icon so now you can see that we can have some selection here every time we click so most of the form is done the only thing that is missing is the folder of that form so we can go below this is stiff i think let me see we have a lot of thieves yeah we'll just before the for the closing tag of the form i'm going to have a footer so i can have a footer like this for attack and this is going to have the last name of flex we are going to justify justify the items at the end we are going to have a width of 100 and a border of at the top that's going also some painting and i'm marching at the top and here we are just going to have a button that's going to be the type of sumit to submit that this and it's going to have a class of background blue at 500 and once we hover it's going to change that to background blue 600 appearing in the x y axis of 6 appearing on the y axis of two it's going to be rounded and it's going to have the text white and here it's just going to say save like like that and this is the result now let's i think we don't need this width of 100 i don't think we need this so let's see yeah we don't need that and now let's make it work all right so for this for saving the events we're going to get a little bit fancy we're going to use a used reducer hook and that's going to come in handy because we have to save different kinds of events you know like deleting or updating an event so let's go to the first go to the global context and we're going to have well not here let's go to the context wrapper wrapper and here we are going to have a an hook that's going to be they use reducer hook so we are going to import that from here and we first need the state so this is just going to be like before the where we first declared the state is going to be saved events that's the state and here we're going to have a function that's going to dispatch different types of events for for the estate to change it's going to be called dispatch called event so we have that now and this use reducer takes three parameters mainly the first parameter is going to be the reducer so the reducer is just a function and let's declare that function so let's call it saved events reducer it's just going to be a function that has first if it has the state and then it has the different the events that we push to the reducer and this is going to be an object that's going to have a type and also it's going to have a payload and this is what we are going to pass every time we dispatch a new event and this reducer is just a different way of declaring the status nothing from from nothing weird we just are going to have a switch statement we are going to switch between different types of of events for these so we need to have this here this switch type and here we have different case that are going to be the type of of this patch that we have so we can have for example a type of push and this one is going to be when we create a new event it's just going to push to the current state so we can just re and we need to return and state for this right so we're going to return the current state and the current state is going to be an array and we are spreading that array so it concatenates with with the payload and the payload is going to be the new event so that's the case when we are going to push the default we are going to throw a new a new error because that's not the type that we allow for this reducer so that's the case when we push and let's declare the other cases so we are also going to have a case where we update a current event and for that we are going to return we are going to take the state and the state remember that the state is going to be an array and that is going to have an event for each element of that array we can run this callback and here we are going to take that event and we are going to compare that with the payload every event is going to have an id and we are going to compare that one when with the id that's been passed so if the if the current event that we have for every item the id equals the same of the payload if that's true so in that case we're going to return the payload and the payload is going to be the other event that's going to be updated and if that's not the case we're going to return that event that same event so this is just a way to to updating that event inside that array because we have a lot of items in that array we're just mapping through that array finding the event and replacing that with a new state and the final case is going to be delete and for this we are going to do something really kind of similar so i'm going to copy this but the difference is difference is that in here we are going to filter right we're going to filter the event when this is different and we don't need this so we are going to return a new array that has all the events that are different from the one that we provide into the payload payload so we have our reducer now we need to pass that reducer as a first argument then the second value is going to be the initial value and the third one is an initializer that's that can be an array uh sorry and a function so we're going to use that function and we're going to declare that that's going to say init events and we are doing this because we are going to save these events into the storage so we want to grab that from the storage the not is not always going to be an empty array so that's why it's really nice that we can use this function we're going to say storage events equals and here we can use the local storage object and the gate item method and the key is going to be called saved events and now we can say something like parsed events and this is just going to be this if the if this is if this is not on the finance because this can be undefined for example the first time so it does that is the case we're going to because this is a string we need to parse that string so i can say json that parse and we can use this this right here and if this if the storage events is not present we can just return an empty array so now let's just return that so this is going to be the initial value and we can represent that in a function and now i can just pass that that function here so we have that and the last thing that i want to do in here is that i want to use an effect so every time this save it events change so every time this change with the reducer what i'm going to do is just i'm going to save that into the local storage with set item and here i'm going to save use that save events key that we have before and i can json that string if stringify the saved events so in that way every time this changes we are just saving that directly into the storage so we have everything set up but now we need to dispatch those those actions so i can here i can just send this to the value of the context and this is what also is going to be used in the global context and this is just a function right so it needs to be in both places with the same name remember that and yeah now well i can say that this is an object that has the type and has a payload now if we go to the event model we can have a button we have a button and this button is just going to be handle surfmit so we have the handle submit and if now we can use the dispatcher that we have so is what was the name this dispatch called event and we are reading that from the context so now we can declare a function that's going to be handle summit and here we are going to first declare what's what's in that how how is that event so i can say well first we need to read the event the dom event and we are going to prevent the default the default is that the page is going to reload so we don't want that then i'm going to declare a new variable called calendar calling that event and this is just going to be an object and it's going to have the title the title from here it's also going to have the description like this it's also going to have a label that's and that's one is the selected label it's going to have a day and the day is going to be that they selected that value so i i store this like this uh this value of value of is going to have like a number like it's just going to be a number a timestamp and i store that like this because if we just store the selected value it's going to be the whole day js instance so we can't stringify that it's not possible but we can stringify a number so that's why i store that like this and the id is just going to be the current timestamp so just to have an unique value is going to be all the time is going to be different so that's going to be the id now that we have the event we need to dispatch that and we already know how to do that so we just dispatched the cal event like this and here we need to pass an object right so we need to give it a type and the type needs to be in this case is going to be push because we are pushing a new event and the payload remember the payload is just going to be this object so we are updating that and now we can save shows event model so we are going to close the model like this so this should work so let's test it so if i create a new event so new event we can have a description hi and save it if we look into the storage here in go back go to the local storage we can see that here we have we have our events so it's working because we have that into the console and here we have the label and everything so we can test and try to save another one with this friday and let's give it this and now we have two values into a storage so we have the values but we need to display display those into every every day right so we need to display those events into every grid so for that we are just going to open the day.js component and here we are going to read from the save it save it from the saved events but we haven't exported that yet so let's let's do it now so we're going to have a save at events here and don't forget to add a comma here it's going to be an array and in our context wrapper we already have that right is here so we just need to pass it that into the value now we that we can read those saved events we are going to we are going to use some state here so let me move this below and the state is going to be the events set day events and this is going to we need to use the user state the initial value is going to be an empty array so we are going to use another use effect hook here and this what this is going to do this is going to take us a dependency the save it events let me move this at the top it's going to take this as a dependency the save with events and every time the saved events gets updated we are going to find the events of the day so we can say something like events equals and here we can just grab those those saved events and i can filter so i'm going to filter in battery and here i have an event and i'm going to use the eas for this i'm going to pass the event event that they so as a constructor we can pass this this timestamp and it's going to create a new a new a new djs object for us and then i can format that so i'm going to compare to two strings i can format that like this so i can compare that to the day that we have in the as a prop and here i can format that with the same format to compare it so this is going to give me all of the events that correspond to this day because we are filtering that out from all the events we are just filtering the ones that belong to this current day then once we have that we can set the set what's the name say today events and the value is going to be these events right here and one other thing is that we need to add this day as a dependency because this day right here because we are also depending on that to update this value so that's going to set the events that belongs to this state and now we need to display that and let's do it so we are going to in this div that we have this like the body we are going to have a day events day events and this is the array that we have at the top we are going to map through that array so we're going to have an event and an index and right here we're going to return another div the content is going to be the event that's title and this is the the title of every event is going to be the content and here we are going to have a class the class is going to be dynamic so we need to use curly blaxes and then play the strings and it's because we're going to have a background that's going to have it's going to have the event that label is that's the color of the label it's just going to be with an accent of 200 and below that we are going to have a padding painting of one and margin right of three the text is going to be gray 600 is going to be small it's going to be rounded also we're going to have a merging bottom bottom of one and we're going through we're going to truncate the text and this is because we want if the if the title is too long we just want to display like dots and i think that's everything that we need here so let's see if that's working of course we need to use the key for every map item we need to use the key and yeah it's working as it should so we can see that we have different colors for every for every event and it's been displayed in the correct in the correct place so now what we need to do is once we click here it should show this event right is it's not working like that now is it's not showing the title and and again we're going to use context for that so let's go to the context wrapper wrapper context wrapper and here we are going to have another state and this is going to be called let me just duplicate this one it's going to be called select selected event right and the value is going to be set selected event the initial value is going to be null so at the beginning nothing is being selected and don't forget to pass this here and here set selected event to the value and we also need it in the global context like this and and this one like this as a function and the global in the global context so now let's go back to the date and once we click into that event into that tag into that we are going we first need to consume the the context so we have set selected event and that's going to be what we are going to do here so once we click we are going to set the select event to the current event that we have in here so now that we are setting that we need to read that into the model and again i can do it right here so select that event and what's going to happen is we're going to reference that select event and we can say in the user state for example the title uh let me graph this right here at the top of the so for the for the title for example we can say selected event and if this is this is different than the null so we can check that like this if we do have a select event so we are just going to have the selected event that title if that's not true we are going to have an empty array so that's how it's going to be pre-populated the same for the description but this one is for description and for the label it's going to be a bit different and that's because that's an array but that's not an issue so if we have a select event if this is true we're going to grab the label classes classes and we're going to find the one that's equal to the labels it needs to be equal to the selected event that label and if that's not true we are going to if this is true we find that in true or labeled classes and otherwise we just pick the first element so that's with the state but we also need to so if we have a selected event so in that case we're going to this patch an event but this event is going to be different so i'm going to add an else here so else clause is going to remain the same but the when we have an element selected the type is not going to be pushed it's just going to be update right and this remains the same so that should take care of update and the event and now we should also display display in a header we should also display a trash icon so i'm going to wrap this into a div element i'm going to move that in that close button inside here and here i can say something like if we have to select it if we have a selected event so in that case we are going to have a button that's similar to this one has the material icons outlined in the text grade but also has a cursor verb of pointer the name is delete and also this one also has an on click event right so the on click event is going what's going to do is going to dispatch a call 11 event and this is going to be of the type the late that's the type that we need for this and this and the payload is going to be what's going to be the payload it's just going to be the selected element selected event all right so we need i'm going to have this between curly braces because after this i'm going to set show element to false i'm going to close the model one thing here to keep in mind is that here the id we when if we have a selected event if this is true we are just going to graph the current id like this we are not override that so only once new that's when we are going to invoke this function so that's that's it so let's test and see if this is working so if we click here we can see that yeah it's working we have the the correct title the correct description if i update this it didn't work so let's see so let me clean this so you can see that actually it updated into the local storage but it's not being updated here and i think i know why i think saveth events so this should be called every time the save with events change let's see if that's happening so if it oh i know what's why it's not changing it's just because i'm not changing the tight the description if i need i want it to change yeah that will work so let me just remove this console now seems that i also have a console log in here agree never never mind and if i change the tag yeah it changes the color and if i click here it should go away which is great so we're really close the last thing that we need to do is we need to be able to filter by tax and for that let's start with the ui if we go to the sidebar we're going to have we're going to have a component called labels let me create that component labels.js react functional component let's go back here import labels so we have the component now let's build the component we need two all right so we need we need to have some state for those labels so let's go to the context wrapper and here we're going to have here we're going to have an state again called labels set select set labels so this one are going to be this labels are as they're available and we are going to use some state and the initial value is going to be an empty array so we don't have slave labels at the beginning but now [Music] we are going to have a use effect that listens to the saved events but this one is going to be a little bit different so we're going to set the labels based on saved events we're going to extract from the events we're going to extract the labels and we need to in this case we're going to read from the previous labels like this so if we use set state like this it we also we as a callback we have access to the brief labels and inside here we're going to return a new array right so this array is going to be a new set and what's a set i said it's just a data structure that has is like a list but only has unique values because if we take in consideration all of the events some labels are going to be repeated so we have a unique set of values that's what we use new set and we spread that to convert that into an array so this can take as a constructor an array so that array is going to take the save it events and we can map into those events we're going to have an event for each item and what we're going to take here is we're going to take the event that label so we have a new we have the set that has unique labels with it now that we have that we're going to map into that array that has unique labels for example it will only have one instant instance of red of indigo of blue and we're going to take that label and we are going to return an object so this is going to have an object that's first going to have the label and then it's going to have a checked value that's going to be a boolean and for that boolean we can say it current label so we're going to take the previous labels that we have here and we are going to see if that label exceeds exceeds axis already so we can take that label and we can compare that label that label because this is an object we are going to access the label object and we are com are going to come back compare that with the current label that we have in the loop so this is going to return the label or if it doesn't find the label is going to return undefined so if we do have a current label if this is true we are going to just take that label and return the current value of that checked property so we are not going to overwrite that but if that's not the case and is adding a new label we're just going to return true so we we have kind of confusing but we just are building an array of objects with labels they have proper they has the property of of the label and a checked value and we're doing that because this is going to be a check box we so we just want to keep track of the state of that checkbox and if the label already exists we're going to just use that already exists checked value from the saved events otherwise we're just going to check automatically the new label so every time we create a new event it can potentially create a new label for us to filter so we have the the labels so now let's also export that export does those two things so we have set labels and we also need the labels itself set labels and labels and now if we go to the global context we also need to have this right here so let me just copy this so i may make a mistake and i can have it like this and the labels like an empty array now we have that into the context so we can now read that in here we can just use the context like this use context remember to import that and here we can pass the global context that we also need to import and here we can just grab the labels so if we go back to the to the labels component we can say something like label label is just going to this is just our all right so let's first here we need to first have like we're going to have a react fragment again react.fragment and inside here we are going to have a b tag that's going to have the class name of text gray 500 and a font bold and a margin of of 10 and inside here it's just going to label like this and below this we're going to math map through the labels from them from the context so we can map into that label we're going to have a label property inside here that i'm going to rename to renamed like this and below that we're going to have a checked property i'm just deconstructing that from the parameters from the object and i also will have an index index like this and here i can return my jsx so i can have it like this label the key is going to be the index that we have there and the class name is going to be of items center margin top of three and it's going to be displayed as block inside here we're going to have an input and this input is a type of checkbox checked is going to be equal to the current value of checked that comes from a label object and class name is going to be is also going to be dynamic with backticks it's going to be a form check box and this comes from the from the plugin that we added this is not a native class from tailwing this is from the plugin h05 a width of 5 and the text is going to take that label color that we have 500 400 is going to be rounded it's going to have when once we focus it's going to have a ring of 0 cursor of pointer and below that we're going to have an span tag and this is just going to be the label name the color we can give it a class name of margin left of 2 text gray of of 700 and we're going to capitalize that so let's go back here and yeah we have the label and if we add a new one let's say this screen and we save we have it right here now we can't change the state so let's do that now how we change the state is we need the own change event listener and here we are going to have an update label this is going to be an object this doesn't exist yet we're going to add that to the cons the context but let me just have it like this and then i will add that so it's going to have a label and that's going to be this label from here and the checked value is going to be the opposite of what we currently have right so it's if if it was true once we click it's going to be false if that makes sense so it's just going to invert that because this these are booleans we can use have something like that here in the context wrapper we are going to have a function that's going to say update label is the function that we haven't yet so if i go here this function it's going to take is the label as a parameter and this is the object that we declare and here i'm going to set those labels so i'm just going to grab the current labels i'm going to map through that i'm going to have a label right here i'm going to compare that label that label so that's the color with the label that we have from the parameter so like this and if this is and if this is equals we're going to just replace that label right with the updated value it's the same thing that we did here we're doing that but now for labels for the labels and if that's not the case we're just going to return the original label we have that now let's pass that here update label and do it let's do that also here and this is just a function so now let's see if that works so we can change the state of the checkbox but nothing is happening here and we we need to filter that so we are going to do that also in the context wrapper wrapper and we are going to use another hook for this one that's called use memo and we're using use memo because this is going to be like a little bit expensive operation so we want to do it in an efficient well way so we are going to declare a new like state that's going to be called filtered events filtered events this is going we're going to use this use memo hook remember to import that from react and this use memo is it is just going to have like computed values so it also takes um dependency lists so what's going to be the dependency list is going to be the saved events and the labels because this is filter events depends on on those things so it's just like a computed value computed computed property so we need to return something what we are going to return is and this is like a callback that we need to have we are just going to return save with events we're going to filter on into those events we have an individual event here we're going to take the labels the labels from here and what we're going to do with those labels we're also going to filter because this is an object we have a label right here and what we are going to filter in here is just the labels that are checked we we can do it like like this because we can do it like this because this is a boolean so only when this is true we are going to have only the labels that are checked and once we have that we are going to map those labels so we only have the strings the labels that label this is just only the string and we are going to check if this array includes what includes the event the from the saved events the event that label a little bit confusing again but we're just like filtering in we have all of the events right we're filtering in those events one by one and we're checking we're filtering in the labels that are checked we're mapping that through strings and we're using the includes method that will check if this string that has only labels that are checked includes the label of the event if this is true then we are going to display that event so and we are using memo because we want to memorize these values we don't want to render this every time we render anything here so that's why we're using that now we can just pass this right here inside here and also into the global context it needs to it's it's going to be an array and inside the day js file we're not going to read from the saved events we i'm going to replace that with the filtered events right so i'm just replacing that in the places that i was using saved events but now the source of true it's going to be the array that's that's filter in between all of all of the events so if we go back and you can see that now we can hide or show different things depending on on the things that we have so and if we add a new color is it preserves the previous state so yeah that's let's try it like this in another month and if we remove that it doesn't show in any place so there's one more thing that we need to fix is if you can see i selected this but if i create and try to create a new event it remains of the previous selected events so for that we can just go to the wrapper to the context wrapper and here i can have another effect so this is going to be every time we close the model and how we know when we close the model well we first need to listen to that by passing the dependency so set show event model and every time this is false so every time this is false so we can check it like this every time this is false we are going to set the selected events to null in that way we are creating cleaning every time we close that model we are going to clean that so if we go back and we click here and now if i click here it clicks it clears out so only when i click into the model we have we have that but we can now click below that and it will clean also if i click here you can see that we have the logic that we have before and and yeah that's that's i think the last fix that we need so thanks again for following the tutorial i hope you find it useful and again if you like it please subscribe to the channel and i will see you in the next video bye

Channel: Esteban Codes

Views: 115,942

Keywords: react js, react js tutorial

Id: KUKyTRYGrnU

Length: 178min 36sec (10716 seconds)

Published: Fri Sep 17 2021