YouTube Transcript:
Google Calendar Clone with React - React Hooks ,React Context and Tailwind

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

AutoDub

Understand YouTube Foreign Videos

Immersive YouTube Voice Translation

Break language barriers, embrace global quality content

Solve Foreign Video Barriers Instantly

Video Transcript

Video Summary

Summary

Core Theme

This content is a comprehensive tutorial demonstrating how to build an interactive Google Calendar clone using React, focusing on modern React features like hooks, context API, and state management. It covers the entire development process from project setup and component creation to implementing advanced functionalities like event creation, editing, deletion, and filtering.

Mind Map

Click to expand

Click to explore the full interactive mind map • Zoom, pan, and navigate

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

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

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

the

react code i also have this extension called

called bracket

bracket

pairing so i can see visually what are the

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

inside your

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

npms create

create

react app and i'm going to give it the

name of google

google calendar

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

city google

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

installed

and these are the dependencies that we need

need

for now so

i will have some installation notes in

the description or you can copy this

from the tailwind documentation and

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

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

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

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

and

here we are going to add this purge

configuration and this will be to

remove unused css in this kind of files and

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

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

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

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

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

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

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

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 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

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

and remember

that we have in in the google calendar

we can see that we have three

three f

f five

five rows

rows right

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

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

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

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

current month

count equals

equals zero

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

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

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

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

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

that function

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

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

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

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

minimum height

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

header

and this is just going to be like this

is not going to have a closing task and

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

side bar

bar

and below that we are going to have like

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

header

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

those

import calendar header

we're also going to import

that sidebar

and finally we are going to import the

the

month component from

components slash month so we have all of our

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

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

and

we're not going to using we just did

that in this yet but

well you we're just for now we're just

going to have the current month right

right

and here i can pass as a parameter i can

pass that

like this month equals

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

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

react

that fragment because we don't want a real

real

we don't want a real dumb element we

want a fake one to

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

another

uh ready like that so that that's

correct syntax and

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

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

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

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

so let's do that so we just need to import

import day

day friend

friend day

day

if we say you can see that we have

agreed with every individual

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

border

so we're going to have some nice border

for each

cell in the grid then we're going to have

have

that border with a color gray of 200

and then we are also going to have a

and right here

we are going to have this not like this but

but

in a bit dark

and this is going to have the glass of

of text

text small

small

with a

painting of one and i'm my merging in the

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

and all of this is going to be inside of

header component right

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

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

text small

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

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

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

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

represent

that index the

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

so row

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

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

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

and

this is going to be for something that

we are going to

soon use is going to be the a one feet variation

variation

and is going to be one fraction

and then five

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

but uh

well we should be good to go now

while we are here one other thing that

we need is that we want to display an indicator

indicator

that we know that this is the current day

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

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

day month

month year

year

so if this is

is equals

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

return

a background of blue 600

600

with the text white

white and

and

we are going to round this rounded

rounded

full with these classes

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

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

and

here i'm going to create a new folder called

called assets

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

logo

like this from

from assets like this and here we have logo.png

logo.png

and their source is going to be that logo

logo right

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

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

this

is not working so

if we go to the app.js file

uh i think this is run flicks calls

calls

let me

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

is border

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

excel text

text gray

of 500

and a 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

and

with a paving in the y-axis of two

paying

on the x-axis of four and

a margin

right of five

and for this button

button

well this is just going to say today so

this will navigate for for the current day

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

chair room

room

underscore left

and and this because we are using

material icons this will replace will be

and we also need to give it

a class of material

icons and what this one is outlined

also cursor pointer

pointer

because we want to

have it like a button and we also want

it to have big gray and

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

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

context

and here we're going to have two files

we're first going to have a global context

context

so this is going to be the context for

the whole application usually you want

to divide the contents between different

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

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

cons global

global

context like this equals

equals react

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

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

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

month index

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

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

so we need first to import that global

context from the same directory and

and

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

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

the

context file so and here we have set

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

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

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

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

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

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

just

declare like that and will auto

import the global context and here i can

i first need to read red

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

click into the those buttons buttons right

right

uh let's add this in the button

component right here so if we click in the

the

chevron left

i'm going to have a function that's

called handle breath

breath mount

and here i'm going to clear that handle

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

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

value

and here

is where we need to use that so i can

access the on click and i can use this

right here

and my month that map is not an option

so what's happening

is that

we broke something here

so let's just see what's that

what's that current month month

month console.log

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

number

but it's not like this we need to use

or get month function and then we need

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

on click

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

context wrapper

wrapper from

right here

have as a child the whole application

right here

so this is going to

grab everything and now

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

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

parameters

here then i can just format that date

and the format that i want is going to have

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

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

something like this that represents the month that's currently

month that's currently being displayed so if we change

being displayed so if we change that

that and one cool thing is what will happen

and one cool thing is what will happen if we go to december

if we go to december should we do we need to change the year

should we do we need to change the year actually not because of that date trick

actually not because of that date trick if we have like

if we have like 2021 month

2021 month 13 it will just display the correct the

13 it will just display the correct the correct

correct gear so that's this

gear so that's this just working

just working so the last thing of the header is this

so the last thing of the header is this today bhutan that we have where is that

today bhutan that we have where is that so this needs to reset the calendar to

so this needs to reset the calendar to the present month

the present month and that's going to be quite simple

and that's going to be quite simple uh

uh we are going to

we are going to attach an event

attach an event and we can say

and we can say handle reset

handle reset reset

reset this is going to be this function

this is going to be this function function handle reset

function handle reset and

and guess what's going to do this function

guess what's going to do this function it's just going to set the amount index

it's just going to set the amount index to the current month like this

to the current month like this right

right month

let's see if that works so if we are in a pearl if we click today it will just

a pearl if we click today it will just reset

reset that

that also if we go to the past we can see

also if we go to the past we can see that we are

that we are backed into september

backed into september now let's continue with the sidebar

now let's continue with the sidebar let's go to the component we don't have

let's go to the component we don't have anything yet but

anything yet but we're going to start

we're going to start so

so first we're going to have the button

first we're going to have the button that we can create a new event

that we can create a new event so it's going to be called create event

so it's going to be called create event button

button it doesn't exist yet but

it doesn't exist yet but let's just declare the component for now

let's just declare the component for now and it's going to be in the same folder

and it's going to be in the same folder and here

and here well first this is going to use a aside

well first this is going to use a aside aside tag it's going to have a class

aside tag it's going to have a class name

name of

of border

border so we have some border there

so we have some border there and i paid in of 5

and i paid in of 5 and

and a weight a fixed width of 64.

a weight a fixed width of 64. then we are going to have that button

then we are going to have that button right here

right here and

and i'm going to save it's going it's

i'm going to save it's going it's probably going to

probably going to throw an error because we don't have the

throw an error because we don't have the the file just so let's create the file

the file just so let's create the file create event

create event button.js

button.js and here again

and here again we are going to use a functional

we are going to use a functional component

component with the help of the snippets

with the help of the snippets when

when and here and this button is just going

and here and this button is just going to be

to be a button

a button like this

like this and it's going to have a class name

and it's going to have a class name of border

of border we're going to have a painting

we're going to have a painting on the y-axis of two operating

on the y-axis of two operating on the x-axis of

on the x-axis of of two uh well just a painting of two

of two uh well just a painting of two then we're going to have it rounded

then we're going to have it rounded full

full like this

like this there

there it's going to be a flex also with the

it's going to be a flex also with the items at the center

items at the center then we are going to have a shadow

then we are going to have a shadow so this is how we declare shadows in

so this is how we declare shadows in in

in with

with tailwind and it's going to help with the

tailwind and it's going to help with the size of medium and a hover state in the

size of medium and a hover state in the covered state is going to be the shadow

covered state is going to be the shadow is going to be bigger

is going to be bigger going to have a shadow

going to have a shadow of

of 2

2 xl and here i can

xl and here i can then have an image

then have an image image

image and this is going to have this plus icon

and this is going to have this plus icon that we have in the assets folder this

that we have in the assets folder this plus

plus so i can say plus

so i can say plus well it's actually as an svg but

we can access that like this and splash

and splash that spg

that spg so that's going to be the source of

so that's going to be the source of image

like this and an al we can say something like

and an al we can say something like create event

create event and the class

and the class name

name is going to have a

is going to have a fixed width of

fixed width of 7 and a height of 7

7 and a height of 7 of seven like this

of seven like this we have that but and now we just need

we have that but and now we just need another element that's going to say

another element that's going to say create

create and this is going to have a class name

and this is going to have a class name of

of paid in life of three and paying right

paid in life of three and paying right of

of of seven

of seven so that should display something like

so that should display something like this yep that's exactly what we wanted

this yep that's exactly what we wanted and at the moment it doesn't do anything

and at the moment it doesn't do anything but

but we're going to come back to this later

we're going to come back to this later and we have the

and we have the create button

create button we're also going to have another that's

we're also going to have another that's going to say

going to say small calendar so this is the small

small calendar so this is the small calendar that we have in the left

calendar that we have in the left and

and we can declare it like this small

we can declare it like this small calendar with this snippet and

calendar with this snippet and let's add it right away here

let's add it right away here we can import

we can import small the small calendar and we can just

small the small calendar and we can just declare the calendar here

declare the calendar here so this calendar is going to have a

so this calendar is going to have a different state for the month and for

different state for the month and for the for the current month

the for the current month and for the index is going to have a

and for the index is going to have a local state because

local state because when you move through the calendar it

when you move through the calendar it actually it is not in sync

actually it is not in sync with the big calendar that's how it

with the big calendar that's how it works in the google calendar so we're

works in the google calendar so we're going to replicate that here so it's

going to replicate that here so it's going to have like a

going to have like a like a local state

like a local state for for the index of the month

set current

current current

current month

month index

index we're going to use the state

we're going to use the state from react don't forget to import that

from react don't forget to import that and here

and here we also need to import the ais and again

we also need to import the ais and again it's going to be

it's going to be the

the month

month the

the current month then we need to have

current month then we need to have something like current

something like current month so it's like a local state for

month so it's like a local state for this

this set current month

set current month and the initial value is going to be

and the initial value is going to be the get month function don't forget to

the get month function don't forget to import that

import that and here we are also going to have

and here we are also going to have and

and use

use state

state use effect hook

don't forget to import that from react and

and as we have in the other

as we have in the other component

component every time the

every time the month so this is the local current month

month so this is the local current month index changes

index changes we are going to

we are going to set the current month

set the current month with the get mod

with the get mod function

function that receives a parameter of the current

that receives a parameter of the current month index so this is a local

month index so this is a local local state that we have here so now we

local state that we have here so now we have that

have that and what we are going to have here is

and what we are going to have here is just

just going to be the html for

going to be the html for for that calendar

for that calendar first we're going to have

first we're going to have i have some some kind of header that's

i have some some kind of header that's going to control the calendar but let's

going to control the calendar but let's start with the wrapper of everything

start with the wrapper of everything so this is going to

so this is going to have a margin of nine

have a margin of nine it's just a wrapper and then we are

it's just a wrapper and then we are going to have

going to have another div that

another div that this is going to be for the header

this is going to be for the header of the well we can give the name of

of the well we can give the name of heller is going to be the head of that

heller is going to be the head of that mini calendar

mini calendar so

so it's going to have a class name of flex

it's going to have a class name of flex and we're going to host if justify

and we're going to host if justify who's defy

who's defy hostify between

hostify between the content

yeah so it's in both sides of the

of the container and

container and here

here we're going to have

with a class name of text

of text gray

gray it's going to be some text that's going

it's going to be some text that's going to display

to display the current month in the font

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

that we can create with the ajs

the ajs and here we are just again have

and here we are just again have the year

the year as a first parameter

as a first parameter and the second parameter is going to be

and the second parameter is going to be the current month index and this comes

the current month index and this comes from the from the local state

from the from the local state and here we are going to have this

and here we are going to have this format

format in

in similar way as we have at the top it's

similar way as we have at the top it's going to have the

going to have the month like this and the year like this

month like this and the year like this so if i save that

so if i save that we should have now

we should have now a string that represents the current

a string that represents the current month so this is what we wanted

month so this is what we wanted is similar to this one

is similar to this one uh we we could probably have this in a

uh we we could probably have this in a in a

in a separate and a component so so we know

separate and a component so so we know don't repeat that but it's okay for now

don't repeat that but it's okay for now and

and next to that we're going to have

next to that we're going to have these

these bottoms this similar to the ones that we

bottoms this similar to the ones that we have at the top

have at the top and here we have something like

and here we have something like last name of material

last name of material icons

icons outline it

outline it out

out line it

then we have a cursor of pointer

of pointer and text

gray with 600 of accent and i'm

600 of accent and i'm marching

marching in the

in the x axis of two

x axis of two here uh we just have the

here uh we just have the chevron left

chevron left and i'm going to copy this again and

and i'm going to copy this again and have it

have it like this but for chevron

like this but for chevron [Music]

[Music] right

and we should have two icons like this

icons like this so this is what we wanted

and now we can attach an event

we can attach an event here

here in every bottom and it's going to be

in every bottom and it's going to be kind of similar of what we have

kind of similar of what we have in the header component so it's going to

in the header component so it's going to be

be function handle

function handle breath mount

breath mount and what this is going to do is set but

and what this is going to do is set but this is the local

this is the local the local

the local state that we have here the current

state that we have here the current month index is going to be the current

month index is going to be the current month

month index

index minus 1

minus 1 the same for the future handle

the same for the future handle next

next uh function

uh function handle next month

handle next month and this is going to have a current

and this is going to have a current month index plus one so now we need to

month index plus one so now we need to just attach those to these buttons

just attach those to these buttons on click

and here we have handle breath month and for this one we have on click

and for this one we have on click handle

handle next month

so so

so so you can see that we can go through

so you can see that we can go through every month and it's different from this

every month and it's different from this one

one but there's one also another thing

but there's one also another thing is in google that if you change this one

is in google that if you change this one of or if you click this one this

of or if you click this one this calendar also needs to go back to the

calendar also needs to go back to the initial

initial to the

to the to keep in sync so this can move

to keep in sync so this can move independently

independently but when you click here

but when you click here this will keep

this will keep will be in sync

will be in sync so we can

so we can do that but

do that but just using the context that we have

just using the context that we have so

so i can import

i can import from

from i can

i can declare the context here like this const

equals use context uh

uh it will means first to import that from

it will means first to import that from react

react and then we can use our global context

and then we can use our global context and we need to import that

and we need to import that and here we can

and here we can read the month index this is the global

read the month index this is the global month index

month index and we can use another use effect

and we can use another use effect hook

hook and make sure to import that from react

and make sure to import that from react and as a dependency we need the

and as a dependency we need the month index so every time the month in

month index so every time the month in the exchanges the global one

the exchanges the global one we are going to set the current month

we are going to set the current month the current month this one

the current month this one set

set current

current month index

month index index

index like this

this one to this value that comes from the global

this value that comes from the global the global object

the global object the global context so now if we

the global context so now if we go back here and we navigate but for

go back here and we navigate but for example we click today

so let me

let me see that again so if i click today

see that again so if i click today so it works for

so it works for these cases but since that

these cases but since that it doesn't work the first time

it doesn't work the first time the today button

the today button all right so the reason why it's not

all right so the reason why it's not working when we click and it's not

working when we click and it's not resetting the month is because use

resetting the month is because use effect use um

effect use um has an optimization that it will not be

has an optimization that it will not be render triggered if the previous value

render triggered if the previous value equals the same value and that's exactly

equals the same value and that's exactly what's happening so what what we can do

what's happening so what what we can do is just check if the month

is just check if the month index equals the current month is if

index equals the current month is if that's true we're going to take

that's true we're going to take the month index and we are going to add

the month index and we are going to add the

the current we're just going to

current we're just going to add a random value and this will give us

add a random value and this will give us an m number between 0 and 1 but actually

an m number between 0 and 1 but actually this will not reach to 1 so that's what

this will not reach to 1 so that's what we need it will just be between zero and

we need it will just be between zero and i don't know

i don't know that's 999

that's 999 and if

and if only if this is true and if this is not

only if this is true and if this is not true we're just going to return

true we're just going to return the current point right

the current point right and well i it looks a little bit ugly

and well i it looks a little bit ugly what we are doing but it will do the

what we are doing but it will do the trick for us for now

trick for us for now and because we have an

and because we have an we now have a decimal well we can

we now have a decimal well we can go into the youtube.js file

go into the youtube.js file and here we are going to

and here we are going to replace that decimal with an

replace that decimal with an integer and i'm just going to replace

integer and i'm just going to replace the month with taking the math

the month with taking the math function that floor so this will not

function that floor so this will not round it will just give me the integer

round it will just give me the integer and i can just use the month so now

and i can just use the month so now we're going to display the calendar

we're going to display the calendar and we are just going to use a div for

and we are just going to use a div for the

the container of that

container of that and it's going to have a glass

and it's going to have a glass of grid we are also going to use a grid

of grid we are also going to use a grid for this we are going to have again

for this we are going to have again seven columns

seven columns and for this we are going to have

and for this we are going to have six rows and

six rows and that's because we are also going to

that's because we are also going to display the

display the number the names of the days so that's

number the names of the days so that's why we have six rows

why we have six rows so let's start with that

so let's start with that we're going to loop into the

we're going to loop into the first row of the month just to graph the

first row of the month just to graph the initials of the days so i'm going to map

initials of the days so i'm going to map that

that and this is going to be

and this is going to be have a day

have a day for each item

for each item we're going to have a day

we're going to have a day and an

and an index and here we can return

index and here we can return a span element that's

a span element that's the content is going to be

the content is going to be that date in the format

that date in the format of

of like this

like this of tt

of tt and here we can just

and here we can just use this chart at method from the array

use this chart at method from the array to just graph the initial so just we

to just graph the initial so just we just have

just have the first character character there

the first character character there and now

and now i also i will also want to

i also i will also want to add a key

add a key for this that's going to be the index

for this that's going to be the index and we need a class name that's going to

and we need a class name that's going to be of

be of text small and

text small and up

up painting in the y axis of one and text

painting in the y axis of one and text center

so let's see how that looks so yeah it's just

just going to be the initials for that

going to be the initials for that for that

for that uh i think it's

something is wrong with the initials also here so

also here so it should start

it should start with

with sunday

sunday uh let's see what's going on there

uh let's see what's going on there so the issue is right here inside the

so the issue is right here inside the utils

utils file

file and here we have our get month function

and here we have our get month function in the users file

in the users file and because i was explaining that we can

and because i was explaining that we can have

have negative

negative numbers i forgot to remove the negative

numbers i forgot to remove the negative number here

number here so

so this should not be negative it should

this should not be negative it should just be

just be one and now we should yeah

one and now we should yeah we now we have it as sunday as it should

we now we have it as sunday as it should be

be so the the week starts at sunday and we

so the the week starts at sunday and we have the current the correct values

have the current the correct values there

there so let's return to the

so let's return to the small calendar component

small calendar component and below the headers we are going to

and below the headers we are going to loop into the current month and here

loop into the current month and here we're just going to graph the whole

we're just going to graph the whole month we're not going to grab the first

month we're not going to grab the first value and

value and we have a row

we have a row and an index

and an index again

again here and

here and we can return

we can return some jsx and this is going to be

some jsx and this is going to be react

react dot

dot fragment again it's going to be just a

fragment again it's going to be just a fragment not a real dom element the key

fragment not a real dom element the key is going to be

is going to be this one

this one that we have here

that we have here and

and here we just going to loop again into

here we just going to loop again into every row

every row so we have the row that's a week and

so we have the row that's a week and here we can map

here we can map through that

through that day

every day and we also have another index right

and we also have another index right here

here and for each day we

and for each day we are going to return

are going to return a button

a button it's going to have a spam value here and

it's going to have a spam value here and this is just going to be

this is just going to be again it's just going to be today that

again it's just going to be today that format

format that

that and with the format of t so it's just

and with the format of t so it's just going to be one digit of the number of

going to be one digit of the number of the day

the day and here we can

and here we can give it a key

give it a key the key is going to be the second index

the key is going to be the second index and the class name

and the class name [Music]

[Music] it's going to be of

here we is also going to be dynamic because we want to have like a

because we want to have like a specific class for the current day so

specific class for the current day so first start with things that are not

first start with things that are not dynamic

dynamic there's going to be a painting of the

there's going to be a painting of the y-axis of one

y-axis of one and a weight of full so

and a weight of full so the

the the button fills all of the container

the button fills all of the container and here we are going to have

and here we are going to have another class name and it's just going

another class name and it's just going to be of

to be of text

text small like this

small like this so let me save and see

so let me save and see how it's looking

how it's looking and it's looking good so we can go

and it's looking good so we can go through different months

through different months and

and and what

and what we need now is we just need to

we need now is we just need to highlight the current day

highlight the current day like we did before

like we did before and i'm going to have

and i'm going to have a

a function

function that's going to say okay

that's going to say okay get the

get the class

and this is going to receive as an argument it's going to

receive as an argument it's going to receive

receive the day

the day and here we can say something like

like this we can say something like where we can

we can say something like where we can just

just define the format

define the format here and

here and we have day and we also have

the month and we also have the year we can say something like now day

we can say something like now day equals

equals day

day they hotel

they hotel that js so remember to import ajs

that js so remember to import ajs and we can give the format that we have

and we can give the format that we have here and the current day

here and the current day it's going to be

it's going to be the day that we have a super asset

the day that we have a super asset parameter here

this is also going to have the format that we have right here

that we have right here so now we can just use an effects

so now we can just use an effects statement so if now day

statement so if now day equals

equals the current day

if that's the case we're just going to return

return uh

uh pg

pg below 500

below 500 it's going to have a background of blue

it's going to have a background of blue it's going to be rounded full so it's a

it's going to be rounded full so it's a circle and

circle and it's going to have the text

it's going to have the text white

white else so if that's not the case we're

else so if that's not the case we're just going to return

an empty array an empty string

an empty string so now that should

so now that should and we need to use this method

and we need to use this method so we can use that

so we can use that in here

in here when we have this dynamic

when we have this dynamic we can

we can add that like this

add that like this and we can just pass the day that we

and we can just pass the day that we have here

have here so now it should display something like

so now it should display something like this for the current date so that's what

this for the current date so that's what we want okay so one thing

we want okay so one thing that we need to correct here

that we need to correct here is that if we click

is that if we click you can see that these these arrows just

you can see that these these arrows just go over all over the place

go over all over the place they're not like

they're not like static

static and

and i i for that we just need to

i i for that we just need to take these borons and just have it have

take these borons and just have it have them in an individual element

them in an individual element in a parent element like this

in a parent element like this so if we have them like that

so if we have them like that now it should just stick in one place so

now it should just stick in one place so it doesn't move all over the place

it doesn't move all over the place uh one feature that google calendar has

uh one feature that google calendar has is that if you click one number for

is that if you click one number for example

example you click that

you click that and it will

and it will have a different background and for

have a different background and for example if you're in october

example if you're in october or november and you click that thing

or november and you click that thing that number it will change this

that number it will change this this other calendar so let's implement

this other calendar so let's implement that

that and

and again we are going to use the context

again we are going to use the context for that

for that so let's just go to the context to the

so let's just go to the context to the global context and here we are going to

global context and here we are going to have

have other

other other values here so we can say

other values here so we can say uh something like um

uh something like um small

small calendar

calendar month

month and the first value is going to be no

and the first value is going to be no well

well this is just for intelligence

this is just for intelligence uh well it can be a number

uh well it can be a number and here we are going to have a set

and here we are going to have a set a setter for that so said

a setter for that so said small calendar

small calendar month

month and this is going to be a number a

and this is going to be a number a function

function we can declare the function like this

we can declare the function like this and we need to use this into the context

and we need to use this into the context wrapper so i will duplicate this and

wrapper so i will duplicate this and i will just copy and paste this to make

i will just copy and paste this to make sure it has the same names

sure it has the same names and the initial value is going to be an

and the initial value is going to be an old value for this

old value for this it's going to be null

it's going to be null and here i can just pass those

and here i can just pass those properties

properties as state

as state so we can use them in our

so we can use them in our in our

in our in our tree

in our tree so

so smooth

smooth calendar

calendar like this

and here we are going to use the use effect hook

effect hook make sure that you import that from

make sure that you import that from react

react use effect

use effect and

and here we're going to

here we're going to have as a dependency it's going to be

have as a dependency it's going to be that

that small calendar month and because the initial value is no we

and because the initial value is no we don't want to run this

don't want to run this the first time so only if this

the first time so only if this is different than null

like this if small calendar is different than no

small calendar is different than no only in that case we are going to change

only in that case we are going to change the month index

the month index to that mini small calendar month

to that mini small calendar month so we are going to change that so the

so we are going to change that so the whole calendar of dates with that

whole calendar of dates with that so now what we need to do is just go to

so now what we need to do is just go to the small calendar

the small calendar component and in this

component and in this button

so in this button we're going to have an on click event

on click event and what's going to happen

and what's going to happen here is that we

here is that we are just going to set

are just going to set that

that calendar amount

calendar amount and we need to

and we need to use the context for that so we need to

use the context for that so we need to read from the contest to set small

read from the contest to set small calendar month

and that's going to be just the current

just the current month index that we have

month index that we have here

here the month index that we have in this

the month index that we have in this state

state so if we save that

so if we save that so now it should

so now it should if we click for example in december

if we click for example in december this should should change uh the last

this should should change uh the last thing that we need to do

thing that we need to do is

is we need to

we need to change

change the

the we need to change the

we need to change the when we click into the number we need to

when we click into the number we need to change the class so

change the class so for that we are going to

for that we are going to have something like

have something like like this in the global context we're

like this in the global context we're going to have

going to have a selected day

as they selected like this and the initial value is going to be

and the initial value is going to be null

and below that we can have the set

below that we can have the set they selected

they selected and this is going to be uh also a

and this is going to be uh also a function

function so we can declare that

so we can declare that just to have

just to have intellisense there

intellisense there and if we go to the wrapper we can

and if we go to the wrapper we can declare those values here

declare those values here i will just copy that again to make sure

i will just copy that again to make sure i

i don't make a mistake

don't make a mistake so i can

so i can use that the first value is going to be

use that the first value is going to be null and then i can

null and then i can use that here so as they selected and

use that here so as they selected and set they selected

set they selected so now i can go back to the small

so now i can go back to the small calendar

calendar and here besides having that i can also

and here besides having that i can also say

say say

say and we need to

and we need to we need to

we need to use the context so let's go back to the

use the context so let's go back to the context and here we can

context and here we can set they selected and also let's read

set they selected and also let's read from the day selected

from the day selected property here

property here so now if i

so now if i click

click in the bottom of the day i can say say

in the bottom of the day i can say say says

says says they selected it's just going to be

says they selected it's just going to be the current date that we have access

the current date that we have access here

here and now

and now here in the day class i'm going to

here in the day class i'm going to read that selected date

read that selected date said and i can

said and i can have something like this selected day

have something like this selected day it's going to be equal to the selected

it's going to be equal to the selected so we're first going to make sure that

so we're first going to make sure that the date selected is different from node

the date selected is different from node with this

with this boolean condition and if

boolean condition and if if

if if

if if that's the case we can just graph

if that's the case we can just graph that i selected and use the format that

that i selected and use the format that we have here so we can compare that

we have here so we can compare that the format

the format now we need to use that so i'm going to

now we need to use that so i'm going to ask another

ask another i'll add another else if

i'll add another else if here so

here so and

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 here we need the condition and the condition is going to be

and the condition is going to be if the current

current day the day that comes from the template

the day that comes from the template equals the selected day

equals the selected day selected day if that's the case we're

selected day if that's the case we're going to have a background

going to have a background of flu

of flu with an ascent of 100

with an ascent of 100 is going also to be rounded

is going also to be rounded full

full but the text is going to be

but the text is going to be blue 600 and we're going to have a font

so let me go back quickly here so if we click

click you can see that the selected date gets

you can see that the selected date gets highlighted with these different colors

so we have the display part

we have the display part i think almost finished but now what we

i think almost finished but now what we need to do is we need to be able to

need to do is we need to be able to create new events

create new events so that's just going to be a model and

so that's just going to be a model and let's just

let's just create that model it's just going to

create that model it's just going to well another folder but a new file that

well another folder but a new file that has the name of

of event

event model

model dot js

dot js let's use the snippet to have a

let's use the snippet to have a functional component

functional component here

here and let's start with the model so

and let's start with the model so we are going to have a thief that's

we are going to have a thief that's going to grab everything and it's going

going to grab everything and it's going to have the class name

to have the class name of

of the height of the screen the height of

the height of the screen the height of the screen it's also have the width of

the screen it's also have the width of full so it has everything going to be

full so it has everything going to be fixed so it's placed it's placed

fixed so it's placed it's placed in front of everything it's going to

in front of everything it's going to have a left of zero

have a left of zero and a top

and a top of zero

of zero it's just going is it's just going to be

it's just going is it's just going to be flex

flex it's just it's going to be justified at

it's just it's going to be justified at the center so

the center so all the items are at the same sentence

all the items are at the same sentence center and also items center

center and also items center it's this is just the overlay

it's this is just the overlay right it's not the model

right it's not the model now we are going to have the model so

now we are going to have the model so is i'm going to use the form

is i'm going to use the form tag for that

tag for that we're not going to have an action

we're not going to have an action and the class name is

and the class name is is going to be of background white

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

little bit and it's going to have a shadow

and it's going to have a shadow of two times

of two times excel

excel with a width of

with a width of one

one one

one one slash four so it's just

one slash four so it's just is the width of the of the model

is the width of the of the model and now let's start with

and now let's start with a header

a header the header is going to have

the header is going to have a class a class of

100 it's going to have a betting of 4 in the x y

betting of 4 in the x y in the x axis and a pattern

in the x axis and a pattern of 2 and the y axis is also going to be

of 2 and the y axis is also going to be flex with the it

flex with the it with the

with the content in between so it's in every

content in between so it's in every corner and the items are in the center

corner and the items are in the center so this is going to be the header of the

so this is going to be the header of the model where we are going to have

model where we are going to have the x button to close the model so

the x button to close the model so let me just

let me just add now and we are going to have an icon

add now and we are going to have an icon and this is an icon

and this is an icon that

that has the material

icons class icons

icons outline and so this is

outline and so this is outlining

outlining material yep

material yep it's going to and it's going to be have

it's going to and it's going to be have a text of gray

a text of gray with an ascent of her 400.

with an ascent of her 400. now let's

now let's have the name of the

have the name of the icon that's drath handle

icon that's drath handle dry hand handle

and below that we're going to have a button that has

button that has another icon and this is going to be the

another icon and this is going to be the icon for closing the model so

icon for closing the model so we can the name of the icon is just

we can the name of the icon is just close

close so we have the basic structure of the

so we have the basic structure of the model and a way to close it so

model and a way to close it so we are going to add this model as a

we are going to add this model as a component into the roots

component into the roots of our app

of our app and

and here i'm going to import that

here i'm going to import that event model and i'm going to add that

event model and i'm going to add that model right here

like that event model

event model let's save it and see how it looks so we

let's save it and see how it looks so we can see that we have the model but it's

can see that we have the model but it's always been shown

always been shown and

and that's happening because we need to control that with the state

control that with the state so if we go back to the global context

so if we go back to the global context we are going to have some state here

we are going to have some state here to

to show the model and it's just going to be

show the model and it's just going to be show event model

show event model it's going to be the fall it's going to

it's going to be the fall it's going to be false

be false and here we're going to have a set show

and here we're going to have a set show event

event model

model and this is going to be a function

now let's go back to the wrapper to the wrapper

wrapper and

and here i will just

here i will just i will first

i will first duplicate this and i will copy and paste

duplicate this and i will copy and paste this

this right here and the initial value is

right here and the initial value is false

false and now we can

and now we can have this as values so show event model

have this as values so show event model and set show

and set show event model so we can use them in our

event model so we can use them in our application

application and here

and here we are going to read that from the

we are going to read that from the context

context show event model so because this is a

show event model so because this is a boolean we can use conditionals to say

boolean we can use conditionals to say only if the show event model is true

only if the show event model is true only in that case we're going to display

only in that case we're going to display this component

this component and where we are going to

and where we are going to set that to true

set that to true is in the button that we have here

is in the button that we have here that

that is create event button

is create event button and

and here we need to use the context

here we need to use the context let's

let's use that context

use that context use context import that from react

use context import that from react and also import or context

and also import or context and here we can use the set show event

and here we can use the set show event model

model and this is going to be true once we

and this is going to be true once we click into that button so

click into that button so once we click into that button

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

false if we go back to the

if we go back to the to the event model so if we click here

to the event model so if we click here on click

it's going to to do just that so

to do just that so import

import let's also consume the context here

remember to import use context and also import our global context and now we can

import our global context and now we can set show event model and we can set that

set show event model and we can set that in once we click

in once we click into the close button so

into the close button so we're going to have the callback

we're going to have the callback that calls that

that calls that and and this is going to be false

and and this is going to be false because we're

because we're closing that model

closing that model so now if we click we can see that

so now if we click we can see that we can show or hide the model

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

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

model and inside here we're going to have a agreed element

have a agreed element and this is going to have

and this is going to have the

the special property that we created this

special property that we created this calls one fifth

calls one fifth so this this is going to be the

so this this is going to be the columns

columns and we don't need to specify the the

and we don't need to specify the the rows here

rows here and we are going to have the items

and we are going to have the items aligned to the end

aligned to the end and

and a gap between the columns in the y-axis

a gap between the columns in the y-axis of seven

of seven so we have some spacing

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

empty div here and here we're going to have

and here we're going to have an input so let me just save it to see

an input so let me just save it to see how it's looking

how it's looking and you can see that we have an empty

and you can see that we have an empty column here and we have an input

column here and we have an input here

here and let's continue with the input so the

and let's continue with the input so the input is going to have a name

input is going to have a name of title and it's going to have a place

of title and it's going to have a place holder of

holder of title so this is going to be the

title so this is going to be the where the place where we

where the place where we give a title to them

give a title to them to the

to the event the value is going to be

event the value is going to be a title variable that we don't have yet

a title variable that we don't have yet so

so let's declare that and this is just a

let's declare that and this is just a state so it's going to be

state so it's going to be use state

use state remember to import that

remember to import that and the initial value is going to be an

and the initial value is going to be an empty array

empty array and this is going to have a

and this is going to have a state and

state and title and set title so we have the we

title and set title so we have the we are reading the value

are reading the value but we also need to update the value and

but we also need to update the value and we can do that in the unchanged event

we can do that in the unchanged event right here we have a callback

right here we have a callback with the event

with the event and

and we can set

we can set the title

the title with the event that target

with the event that target that value so this is the value of the

that value so this is the value of the input

input we are reading from the

we are reading from the from the state and we are so updating

from the state and we are so updating the state

this is also going to be required so it's going to be required

so it's going to be required and

and now we need to give some styles so the

now we need to give some styles so the styles is just going to be a painting

styles is just going to be a painting top of 3 with a border of 0 because we

top of 3 with a border of 0 because we don't we want to reset that form

don't we want to reset that form and this will also

and this will also some styles also come from the plugin

some styles also come from the plugin that we have

that we have in the tailwind

in the tailwind config this plugin so it's not the same

config this plugin so it's not the same if you have this plugin will be

if you have this plugin will be different but

different but yeah just to call out that

yeah just to call out that and here

and here we have

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 extra large the font is going to be semi

going to be semi volt

volt we're going to have a

we're going to have a parent in the bottom of two

parent in the bottom of two a weight of

a weight of a full so it takes all of the all of the

a full so it takes all of the all of the container

container border

border bottom of two

once we have and now let's also add some

also add some color to the border so the border is

color to the border so the border is just going to be border

just going to be border gray of 200

gray of 200 now we are going to have some styles

now we are going to have some styles when we focus into the

when we focus into the input

input and

and this is going to be just

this is going to be just focus

focus oh

oh so when we focus the outline

so when we focus the outline we have an own outline by default in all

we have an own outline by default in all of the inputs so that

of the inputs so that we're going to remove that outline

we're going to remove that outline we're also going to remove the ring

we're also going to remove the ring so this is another property that we have

so this is another property that we have and by default it's going to be zero and

and by default it's going to be zero and once we focus

once we focus the border is going to be blue

the border is going to be blue 500.

500. so those were a lot of classes

so those were a lot of classes if we save

if we save title is not the finest so

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

effect when we focus into the input it turns into blue

focus into the input it turns into blue with this only css

so now we're going to have another icon so i'm

we're going to have another icon so i'm going to copy that

going to copy that and paste that below the input

and paste that below the input the

the class is going to be the same but the

class is going to be the same but the name is going to be

name is going to be schedule that's the name of the icon

schedule that's the name of the icon it's just this one

it's just this one and this in here we are just going to

and this in here we are just going to display in a p

display in a p tag we are going to display the current

tag we are going to display the current day

day so

how we can create a new

is but but having this

having this uh selected so the moment we click

uh selected so the moment we click create

create is going to select either the current

is going to select either the current day or the day that we have selected

day or the day that we have selected right here

right here so we already have that

we already have that state but we just need to consume that state

need to consume that state so it's called

so it's called se they selected

se they selected and we can display that

and we can display that in here

in here they selected

they selected that format

that format right

right so the format is the

so the format is the it's going to be the following

it's going to be the following we're going to have

we're going to have the full day like this then a comma and

the full day like this then a comma and the full month like this and the date

the full month like this and the date like this

like this so if we go back here

so if we go back here we have the current

so we have an error here because the initial value

initial value is known for the selected day

is known for the selected day but this is not good it shouldn't be

but this is not good it shouldn't be like that we can just change the initial

like that we can just change the initial value

value it's not

it's not not to be known but

not to be known but just an instance of the js

just an instance of the js so in that case

so in that case if we refresh it the default value is

if we refresh it the default value is going to be the current day

going to be the current day but if you we select a different

but if you we select a different value for example

value for example 24

24 it should also be 24.

it should also be 24. we should also be able to create an

we should also be able to create an event when we click

event when we click here in

here in in in a place like

in in a place like like here so let's do that

like here so let's do that let's move to the day

let's move to the day to the day

component that's the place where we have every day row

every day row and

and and below the header we're going to have

and below the header we're going to have a div

and this div is going to have a class

have a class name of

name of flex one so it goes all the way down and

flex one so it goes all the way down and it's going to have a

it's going to have a a cursor

a cursor pointer class so it looks like a button

pointer class so it looks like a button and

here well it doesn't have anything yet

well it doesn't have anything yet there i will just

there i will just put that in there as a placeholder but

put that in there as a placeholder but it has an on click event

it has an on click event and what's going to happen when we click

and what's going to happen when we click in the in here is

in the in here is we are going to we need to use the

we are going to we need to use the context so we don't have the context

context so we don't have the context here yet so

here yet so i will use that context with a hook

i will use that context with a hook use context

use context and here i can pass the global context

and here i can pass the global context remember to

remember to import those

import those and i can say set select set they

and i can say set select set they selected we're going to select the day

selected we're going to select the day and

and set show event model so we can display

set show event model so we can display the model

the model and that's what we are going to do so we

and that's what we are going to do so we are going to say

are going to say set select

set select set day selected it's going to be the

set day selected it's going to be the the day

the day that we have as a property here

that we have as a property here this day

this day and below that we can say show the model

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

places you can see that it's going to create a

you can see that it's going to create a new event for that day

new event for that day 24 24

24 24 and also from here

and also from here so let's go back to the model

so let's go back to the model so below

so below below the

below the the current date you're going to have

the current date you're going to have another icon so let's copy that icon

another icon so let's copy that icon and this icon is going to be

called segment like this

like this it has the same classes

it has the same classes and this one is just this icon to add a

and this one is just this icon to add a description

description so for the description i'm just going to

so for the description i'm just going to copy and paste the same input

copy and paste the same input but

but we are going to have another state for

we are going to have another state for that so it's going to just be this

that so it's going to just be this description

description and set description

and set description and the description is going to be an

and the description is going to be an empty array at the beginning

empty array at the beginning here we are going to read from the

here we are going to read from the description

description and here we are going to set the

and here we are going to set the description

and the name is not title is description

the name is not title is description and the placeholder is as

and the placeholder is as a

a description

description one other minor change is that the text

one other minor change is that the text is not going to be

is not going to be xl for this

xl for this so we can just remove that

so we can just remove that and default the font is not going to be

and default the font is not going to be semi-volt

semi-volt so we can reset

so we can reset that and here we have the description

that and here we have the description so now

so now we are going to have below that we are

we are going to have below that we are going to have

going to have another

another icon

icon i'm just going to copy this but

i'm just going to copy this but the icon name is going to be this one

the icon name is going to be this one bookmark border

bookmark border and this is going to be for the tags

and this is going to be for the tags so

so at the top of this file i'm going to

at the top of this file i'm going to declare

declare a new variable that's going to have

a new variable that's going to have all of the different

all of the different types of colors for labels that we can

types of colors for labels that we can have

have it's going to be indigo gray green blue

it's going to be indigo gray green blue red or

red or purple

purple and we can look through that

and we can look through that through that array to display different

through that array to display different of

of labels

labels options for for that

options for for that so let's start with the

so let's start with the container

container for that this is going to have the class

for that this is going to have the class of flex and it's going to have a gap

of flex and it's going to have a gap in the x-axis of two

in the x-axis of two this is the container and now we can

this is the container and now we can loop

loop on on those labels with map as before

on on those labels with map as before here we can just

here we can just say something like label class

say something like label class like this

like this and what we also can read the index

and what we also can read the index to use as a key

to use as a key and

and for the asx

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

and this is going to have the key as the key is going to be

as the key is going to be the index that we have

the index that we have then we are going to give it a class

then we are going to give it a class and this is going to be the dynamic so

and this is going to be the dynamic so we need to add those back tails

we need to add those back tails it's going to have a background

it's going to have a background and here

and here the background is going to be from this

the background is going to be from this from this class that we have here

from this class that we have here label class

label class with an ascent of 500 then we need to

with an ascent of 500 then we need to define a width that's going to be six

define a width that's going to be six a height of six it's going to be

a height of six it's going to be rounded

rounded at the full

at the full it's going to be flex with with the

it's going to be flex with with the items at the center

items at the center and

and also

also justify send center and

justify send center and finally it's going to have the class of

finally it's going to have the class of cursor

cursor and pointer

and pointer so that's going to be

so that's going to be the class name for this

the class name for this and now we're just going to have an

and now we're just going to have an icon so let me copy again this

icon so let me copy again this but the text is going to be white

but the text is going to be white and the text is going to be small

and the text is going to be small this is just going to be a tick

this is just going to be a tick so we can have something and

so we can have something and that's the

that's the the name of the icon check

the name of the icon check and that's that this is what we have so

and that's that this is what we have so right now everything is selected as you

right now everything is selected as you can see

can see so let's fix that

so let's fix that and we are again we are going to use the

and we are again we are going to use the context for this

context for this uh well not not the context we don't

uh well not not the context we don't need that context we can keep this in

need that context we can keep this in the

the in

in here locally so i'm going to duplicate

here locally so i'm going to duplicate this state

this state and we can say

and we can say selected

selected label

label and set selected

and set selected label

so now let's just give that

now let's just give that like

like here once we click on that

here once we click on that container we are going to set

label and it's going to be the

the label class that we have here

label class that we have here uh here the initial value is going to be

uh here the initial value is going to be the first

the first one of the array so we can

one of the array so we can have it like this

have it like this and now

and now once we click that we are going to

once we click that we are going to change the selected label

change the selected label and we are only going to split

and we are only going to split display the check one once that

display the check one once that label is selected so we can use a

label is selected so we can use a conditional that says if the selected

conditional that says if the selected label

label equals the label class that we have here

equals the label class that we have here only if that's true

only if that's true we are going to display

we are going to display this jsx

this jsx that's the icon

that's the icon so now

so now you can see that

you can see that we can have some selection here every

we can have some selection here every time we click

time we click so most of the form is done the only

so most of the form is done the only thing that is missing is the folder

thing that is missing is the folder of that form so we can go

of that form so we can go below

this is stiff i think let me see

yeah we'll

we'll just before the for the closing tag of

just before the for the closing tag of the form i'm going to have a footer

the form i'm going to have a footer so i can

so i can have a footer like this

have a footer like this for attack

for attack and this is going to have the

and this is going to have the last name of flex

last name of flex we are going to justify

we are going to justify justify the items at the end

justify the items at the end we are going to have a width of

at the top that's going

that's going also some painting

also some painting and i'm marching at the top

and i'm marching at the top and here we are just going to have a

and here we are just going to have a button

button that's going to be the type

that's going to be the type of sumit to submit that this

of sumit to submit that this and

and it's going to have a class

it's going to have a class of background blue

of background blue at 500

at 500 and once we hover it's going to change

and once we hover it's going to change that to background

that to background blue 600

appearing in the x y axis of 6

axis of 6 appearing on the

appearing on the y axis of two

y axis of two it's going to be rounded and it's going

it's going to be rounded and it's going to have the text

to have the text white

white and here it's just going to say save

and here it's just going to say save like like that

like like that and this is the result

now let's i think we don't need this width of 100

width of 100 i don't think we need this

i don't think we need this so let's see

so let's see yeah we don't need that

yeah we don't need that and

all right so for this for saving the events we're going to get a little bit

events we're going to get a little bit fancy

fancy we're going to use a

we're going to use a used reducer hook

used reducer hook and that's going to come in handy

and that's going to come in handy because we have to

because we have to save different kinds of events

save different kinds of events you know like deleting or updating

you know like deleting or updating an event

an event so let's go to the

so let's go to the first go to the

first go to the global context

global context and we're going to

and we're going to have

have well not here

well not here let's go

let's go to

to the

the context wrapper

context wrapper wrapper

wrapper and here

and here we are going to have

we are going to have a

a an

an hook that's going to be they use reducer

hook that's going to be they use reducer hook

hook so we are going to import that from here

so we are going to import that from here and

and we first need the state so this is just

we first need the state so this is just going to be like before the where we

going to be like before the where we first declared the state is going to be

first declared the state is going to be saved

saved events that's the state

events that's the state and here we're going to have a function

and here we're going to have a function that's going to dispatch

that's going to dispatch different types of events for for the

different types of events for for the estate to change it's going to be called

estate to change it's going to be called dispatch

dispatch called event

called event so

so we have that now and this use reducer

we have that now and this use reducer takes three parameters mainly

takes three parameters mainly the first parameter is going to be the

the first parameter is going to be the reducer

reducer so the reducer is just a function

so the reducer is just a function and let's declare that function so let's

and let's declare that function so let's call it saved

call it saved events reducer

events reducer it's just going to be a function that

it's just going to be a function that has

has first if it has the

first if it has the state and then it has the different

state and then it has the different the events that we

the events that we push to the

push to the reducer and this is going to be an

reducer and this is going to be an object that's going to have a type

object that's going to have a type and also it's going to have a payload

and also it's going to have a payload and this is what we are going to pass

and this is what we are going to pass every time we dispatch a new event

every time we dispatch a new event and this reducer is just a different way

and this reducer is just a different way of declaring the status nothing from

of declaring the status nothing from from nothing weird

from nothing weird we just are going to have a switch

we just are going to have a switch statement

statement we are going to switch between different

we are going to switch between different types of

types of of events for these

of events for these so we need to have this here this switch

so we need to have this here this switch type

type and here we have different case that are

and here we have different case that are going to be the type of of this patch

going to be the type of of this patch that we have so

that we have so we can have for example a type of push

we can have for example a type of push and this one is going to be when we

and this one is going to be when we create a new event it's just going to

create a new event it's just going to push to the current state

push to the current state so we can just re and we need to return

so we can just re and we need to return and state for this right so we're going

and state for this right so we're going to return the current state and the

to return the current state and the current state is going to be an array

current state is going to be an array and we are spreading that array so it

and we are spreading that array so it concatenates with

concatenates with with the payload and the payload is

with the payload and the payload is going to be the new event

going to be the new event so that's the case when we are going to

so that's the case when we are going to push the default we are going to throw a

push the default we are going to throw a new

a new error because that's not the type that we allow for this

not the type that we allow for this reducer so that's the case when we push

reducer so that's the case when we push and let's declare the other cases

and let's declare the other cases so we are also going to have a case

so we are also going to have a case where we update a current event

where we update a current event and for that we are going to return we

and for that we are going to return we are going to take the state and the

are going to take the state and the state remember that the state is going

state remember that the state is going to be an array

to be an array and that is going to have

and that is going to have an event

an event for each

for each element of that array we can run this

element of that array we can run this callback

callback and here we are going to take that event

and here we are going to take that event and we are going to compare that

and we are going to compare that with the payload

with the payload every event is going to have an id and

every event is going to have an id and we are going to compare that

we are going to compare that one when with the id that's been passed

one when with the id that's been passed so if the

so if the if the current event that we have for

if the current event that we have for every item

every item the id equals the same of the payload if

the id equals the same of the payload if that's true

that's true so

so in that case we're going to

return the payload and the payload is going to be the other event that's going

going to be the other event that's going to be updated

to be updated and if that's not the case we're going

and if that's not the case we're going to return that event

to return that event that same event so this is just a

that same event so this is just a way to

way to to updating that event

to updating that event inside that array because we have a lot

inside that array because we have a lot of items in that array we're just

of items in that array we're just mapping through that array finding the

mapping through that array finding the event and replacing that with a new

event and replacing that with a new state

state and

and the final case is going to be delete

the final case is going to be delete and for this

and for this we are going to do something really

we are going to do something really kind of similar so i'm going to copy

kind of similar so i'm going to copy this but the difference is

this but the difference is difference is that in here we are going

difference is that in here we are going to filter

to filter right we're going to filter

right we're going to filter the event when this is different

the event when this is different and

and we don't need this so we are going to

we don't need this so we are going to return a new

return a new array that has all the events that are

array that has all the events that are different from the one that we provide

different from the one that we provide into the payload payload

into the payload payload so we have our reducer now we need to

so we have our reducer now we need to pass that reducer as a first argument

pass that reducer as a first argument then the second value is going to be the

then the second value is going to be the initial value

and the third one is an initializer that's that can be an

is an initializer that's that can be an array

array uh sorry and

uh sorry and a function so we're going to use that

a function so we're going to use that function

function and

and we're going to declare that that's going

we're going to declare that that's going to say init

to say init events and we are doing this because we

events and we are doing this because we are going to save these events into the

are going to save these events into the storage

storage so we want to grab that from the storage

so we want to grab that from the storage the not

the not is not always going to be an empty array

is not always going to be an empty array so that's why it's really nice that we

so that's why it's really nice that we can use this function

can use this function we're going to say

we're going to say storage

storage events

events equals

equals and here we can use the local storage

and here we can use the local storage object

object and the gate item method

and the gate item method and the

and the key is going to be called saved events

key is going to be called saved events and now we can say something like parsed

and now we can say something like parsed events and this is just going to be this

events and this is just going to be this if the if this is if this is not on the

if the if this is if this is not on the finance because this can be undefined

finance because this can be undefined for example the first time

for example the first time so

so it does

it does that is the case we're going to because

that is the case we're going to because this is a string we need to parse that

this is a string we need to parse that string

string so i can say

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

the storage events is not present we can just

just return an empty array

return an empty array so now let's just return that

so now let's just return that so this is going to be the initial value

so this is going to be the initial value and we can represent that

and we can represent that in a

in a function and now i can just pass

function and now i can just pass that that function here

that that function here so we have that

so we have that and

and the last thing that i want to do

the last thing that i want to do in here

in here is that i want to use an effect

is that i want to use an effect so every time

so every time this save it

this save it events change

events change so every time this change with the

so every time this change with the reducer

reducer what i'm going to do

what i'm going to do is just i'm going to

is just i'm going to save that into the local storage

save that into the local storage with set

with set item

item and here i'm going to save

and here i'm going to save use that save events key that we have

use that save events key that we have before

before and i can json that string if stringify

and i can json that string if stringify the saved events

the saved events so in that way every time this changes

so in that way every time this changes we are just saving that directly into

we are just saving that directly into the

the storage

storage so we have everything set up

so we have everything set up but now we need to dispatch those those

but now we need to dispatch those those actions

actions so i can here i can just

so i can here i can just send this to the value of the context

send this to the value of the context and this is what also is going to be

and this is what also is going to be used in the global context

used in the global context and this is just a function right

and this is just a function right so it needs to be in both places with

so it needs to be in both places with the same name remember that

and yeah now well i can say

yeah now well i can say that this is an object that has the type

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

we can have a button we have a button and this button is just going to be

and this button is just going to be handle surfmit

so we have the handle submit and

and if now we can

if now we can use

use the

the dispatcher that we have

dispatcher that we have so is

so is what was the name

what was the name this dispatch called event

this dispatch called event and we are reading that from the context

and we are reading that from the context so now we can declare a function

so now we can declare a function that's going to be handle summit

and here we are going to first declare what's

we are going to first declare what's what's in that how how is

what's in that how how is that event so i can say well first we

that event so i can say well first we need to

need to read the event

read the event the dom event and we are going to

the dom event and we are going to prevent

prevent the default the default is that the page

the default the default is that the page is going to reload so we don't want that

is going to reload so we don't want that then i'm going to declare a new

then i'm going to declare a new variable called calendar calling

variable called calendar calling that event

that event and this is just going to be an object

and this is just going to be an object and it's going to have the title

and it's going to have the title the title from here

the title from here it's also going to have the description

like this it's also going to have a label

a label that's and that's one is the selected

that's and that's one is the selected label

it's going to have a day and the day is going to be

and the day is going to be that they selected

that they selected that value

that value so

so i i store this like this

i i store this like this uh this value of

uh this value of value of is going to have

value of is going to have like a number

like a number like

like it's just going to be a number a

it's just going to be a number a timestamp and i store that like this

timestamp and i store that like this because if we just store the selected

because if we just store the selected value

value it's going to be the whole

it's going to be the whole day js instance so we can't stringify

day js instance so we can't stringify that

that it's not possible but we can stringify a

it's not possible but we can stringify a number so that's why i store that like

number so that's why i store that like this

this and the id is just going to be

the current timestamp so just to have an unique value

unique value is going to be all the time is going to

is going to be all the time is going to be different so that's going to be the

be different so that's going to be the id

id now that we have the event we need to

now that we have the event we need to dispatch that

dispatch that and

and we already know how to do that

we already know how to do that so we just dispatched the cal event

so we just dispatched the cal event like this

like this and here we need to pass an object right

and here we need to pass an object right so we need to give it a type and the

so we need to give it a type and the type needs to be in this case is going

type needs to be in this case is going to be push

to be push because we are pushing a new event and

because we are pushing a new event and the payload remember the payload

the payload remember the payload is just going to be this object

is just going to be this object so we are updating that and now we can

so we are updating that and now we can save shows event model so we are going

save shows event model so we are going to close the model

to close the model like this

so this

this should work so let's test it so if i

should work so let's test it so if i create a new event

create a new event so

so new event

new event we can have a description hi

we can have a description hi and save it

if we look into the storage

storage here in go back go to the local storage

here in go back go to the local storage we can see that here we have

we can see that here we have we have our events so it's working

we have our events so it's working because we have that into the console

because we have that into the console and here we have

and here we have the label and everything so we can test

the label and everything so we can test and try to save another one with this

and let's give it this and now we have two values

and now we have two values into a storage

into a storage so we have the values but we need to

so we have the values but we need to display display those

display display those into every every day right

into every every day right so we need to display those events into

so we need to display those events into every

every grid

grid so

so for that we are just going to

for that we are just going to open the day.js component

open the day.js component and here we are going to

from the saved events but we haven't exported that yet so let's

exported that yet so let's let's do it now so we're going to have a

let's do it now so we're going to have a save at events

save at events here

here and

and don't forget to add a comma here it's

don't forget to add a comma here it's going to be an

going to be an array

array and in our context wrapper

and in our context wrapper we already have that right

we already have that right is here

is here so we just need to pass it

so we just need to pass it that into the value

that into the value now we that we can read those saved

now we that we can read those saved events

events we are going to

we are going to use some state here so

so let me move this below

let me move this below and the state is going to be

and the state is going to be the

the events

events set

set day events

day events and this is going to

and this is going to we need to use the

we need to use the user state the initial value is going to

user state the initial value is going to be an empty array so we are going to

be an empty array so we are going to use another use effect hook here

use another use effect hook here and this what this is going to do

and this what this is going to do this is going to take us a dependency

this is going to take us a dependency the save it events

the save it events let me move

let me move this at the top

this at the top it's going to take this as a dependency

it's going to take this as a dependency the save with events

the save with events and every time the saved events

and every time the saved events gets updated we are going to

gets updated we are going to find the events of the day so we can say

find the events of the day so we can say something like events equals

something like events equals and

and here we can just grab

here we can just grab those

those saved events and i can

and i can filter

filter so i'm going to filter in battery

so i'm going to filter in battery and here i have an event

and here i have an event and i'm going to use the eas

and i'm going to use the eas for this

for this i'm going to pass the event

i'm going to pass the event event that they so as a constructor we

event that they so as a constructor we can pass this this timestamp

can pass this this timestamp and it's going to create a new

and it's going to create a new a new

a new a new djs object for us

a new djs object for us and then i can format that so i'm going

and then i can format that so i'm going to compare to

to compare to two strings

two strings i can format that

i can format that like this

like this so i can compare that

to the day that we have in the as a prop

day that we have in the as a prop and

and here i can

here i can format that with the same format

format that with the same format to compare it

to compare it so this is going to give me

so this is going to give me all of the events that correspond to

all of the events that correspond to this day because we are filtering that

this day because we are filtering that out

out from all the events we are just

from all the events we are just filtering the ones that belong to this

filtering the ones that belong to this current day

current day then once we have that we can set the

then once we have that we can set the set

set what's the name say today events

and the value is going to be these events right here

these events right here and one other thing is that we need to

and one other thing is that we need to add this day as a dependency because

add this day as a dependency because this day right here because we are also

this day right here because we are also depending on that to update

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

belongs to this state and now we need to display that

display that and let's do it so we are going to

and let's do it so we are going to in this div that we have this

in this div that we have this like the body

like the body we are going to have a day

we are going to have a day events

events day events

day events and this is the array that we have at

and this is the array that we have at the top we are going to map through that

the top we are going to map through that array so we're going to have

array so we're going to have an event and an index

the content is going to be the event that's title

be the event that's title and this is the

and this is the the title of every event is going to be

the title of every event is going to be the

the content and

content and here

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

need to use curly blaxes and then play the strings

the strings and it's because we're going to have a

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

is that's the color of the label it's just going to be with an accent

just going to be with an accent of 200

of 200 and

and below that we are going to have a

below that we are going to have a padding painting of one

padding painting of one and margin right of three

and margin right of three the text is going to be

the text is going to be gray

gray 600

600 is going to be small

is going to be small it's going to be rounded

it's going to be rounded also

also we're going to have a merging bottom

we're going to have a merging bottom bottom of one

bottom of one and

and we're going through

we're going through we're going to truncate the text

we're going to truncate the text and this is because we want if the

and this is because we want if the if the title is too long we just want to

if the title is too long we just want to display like dots

and i think that's

i think that's everything that we need

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

item we need to use the key and yeah it's working

and yeah it's working as it should

as it should so we can see that we have different

so we can see that we have different colors for every

colors for every for every event and it's been displayed

for every event and it's been displayed in the correct in the correct place

in the correct in the correct place so

so now

now what we need to do is once we click here

what we need to do is once we click here it should show

it should show this event right

this event right is it's not working like that now

is it's not working like that now is it's not showing the title and

is it's not showing the title and and

and again we're going to use context for

again we're going to use context for that

that so let's go to the context wrapper

so let's go to the context wrapper wrapper

context wrapper and here we are going to have another

we are going to have another state

state and this is going to be called

and this is going to be called let me just duplicate this one

let me just duplicate this one it's going to be called

it's going to be called select

select selected

event right

right and the value is going to be set

and the value is going to be set selected

selected event

event the initial value is going to be null

the initial value is going to be null so at the beginning nothing is being

so at the beginning nothing is being selected

selected and don't forget to pass

and don't forget to pass this

this here

here and here set selected event to the value

and here set selected event to the value and we also need it in the global

and we also need it in the global context

context like this

like this as a function and the global in the global context

and the global in the global context so now let's go back to the date

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

tag into that we are going we first need to consume the

to consume the the context so we have set selected

the context so we have set selected event

and that's going to be what we are going to do here so once we

what we are going to do here so once we click we are going to set the select

click we are going to set the select event to the current event

event to the current event that we have in here

that we have in here so now that we are setting that we need

so now that we are setting that we need to read that into the model

to read that into the model and again i can do it

and again i can do it right here so select that event

right here so select that event and what's going to happen is we're

and what's going to happen is we're going to reference that

going to reference that select event

select event and we can say in the user state for

and we can say in the user state for example

example the title uh let me

the title uh let me graph this right here at the top of the

graph this right here at the top of the so for the

so for the for

for the title for example we can say

the title for example we can say selected

event and if this is

and if this is this is different than the null so we

this is different than the null so we can check that like this

can check that like this if we do have a select

if we do have a select event

event so we are just going to

so we are just going to have the selected event that title

have the selected event that title if that's not true we are going to have

if that's not true we are going to have an empty array

an empty array so that's how it's going to be

so that's how it's going to be pre-populated

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

different and that's because that's an array but

and that's because that's an array but that's not an issue so if we have a

that's not an issue so if we have a select event

select event if this is true we're going to

if this is true we're going to grab the label classes

grab the label classes classes

classes and we're going to find the one that's

and we're going to find the one that's equal

equal to

to the labels it needs to be equal to the

the labels it needs to be equal to the selected event that label

selected event that label and if that's not true

and if that's not true we are going to if this is true we

we are going to if this is true we find that in true or

find that in true or labeled classes and otherwise we just

labeled classes and otherwise we just pick the first element

pick the first element so that's with the state

so that's with the state but

but we also need to

we also need to so

so if we have a selected event

if we have a selected event so in that case we're going to this

so in that case we're going to this patch

an event but this event is going to be different

different so i'm going to add an else here so else

so i'm going to add an else here so else clause is going to remain the same

clause is going to remain the same but

but the

the when we have an element selected the

when we have an element selected the type is not going to be pushed it's just

type is not going to be pushed it's just going to be update right

going to be update right and this remains the same

and this remains the same so that should take care of update and

so that should take care of update and the event

the event and now

and now we should also display display in a

we should also display display in a header we should also display

header we should also display a trash icon

a trash icon so i'm going to

so i'm going to wrap this into a

wrap this into a div element i'm going to move that in

div element i'm going to move that in that

that close button inside here

close button inside here and here i can say something like if we

and here i can say something like if we have to select it

have to select it if we

if we have a

have a selected event

selected event so in that case

so in that case we are going to have a button that's

we are going to have a button that's similar to this

similar to this one has the

one has the material icons outlined in the text

material icons outlined in the text grade

grade but also has a cursor verb of pointer

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

is going what's going to do is going to dispatch a call 11

dispatch a call 11 event

event and this is going to be of the type

the late that's the type that we need for this

for this and this

and this and

and the payload is going to be

the payload is going to be what's going to be the payload it's just

what's going to be the payload it's just going to be the selected element

selected event all right

all right so

so we need i'm going to

we need i'm going to have this between

have this between curly braces

curly braces because after this

because after this i'm going to

i'm going to set show

set show element to false i'm going to close the

element to false i'm going to close the model

model one thing here to keep in mind

one thing here to keep in mind is that

here the id

the id we

we when if we have a selected

when if we have a selected event

event if this is true

if this is true we are just going to graph the current

we are just going to graph the current id

like this we are not override that so only once new

only once new that's when we are going to invoke this

that's when we are going to invoke this function

function so that's that's it so let's test and

so that's that's it so let's test and see if this is working so if we click

see if this is working so if we click here we can see that yeah it's working

here we can see that yeah it's working we have the the correct title the

we have the the correct title the correct description

correct description if i update this

if i update this it didn't work so let's see

so let me

let me clean this

so you can see that actually it updated

updated into the

into the local storage but it's not being updated

local storage but it's not being updated here

and i think i know why i think

so this should be called every time the save with events

called every time the save with events change

oh i know what's why it's not changing it's just because i'm not changing the

it's just because i'm not changing the tight the description

tight the description if i need i want it to change

yeah that will work so

that will work so let me just remove this console

let me just remove this console now seems that i also have a 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

yeah it changes the color and if i click here it should go away

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

that we need to do is we need to be able to filter by tax

we need to be able to filter by tax and

and for that let's start with the ui

for that let's start with the ui if we go to the sidebar

if we go to the sidebar we're going to have

we're going to have a

component called labels

labels.js react functional component let's go back here import labels

let's go back here import labels so we have the component

so we have the component now let's build the component

all right so we need we need

we need to have some state for those labels so

to have some state for those labels so let's go to the

let's go to the context wrapper

context wrapper and

and here

we're going to have here we're going to have an state again

here we're going to have an state again called labels

called labels set select set labels

set select set labels so this one are going to be this labels

so this one are going to be this labels are as they're available

are as they're available and we are going to use

and we are going to use some state

some state and the initial value is going to be an

and the initial value is going to be an empty array so we don't have slave

empty array so we don't have slave labels at the beginning but now

labels at the beginning but now [Music]

[Music] we are going to have a

we are going to have a use effect

use effect that listens

that listens to the saved events but this one

to the saved events but this one is going to be

is going to be a little bit different

a little bit different so we're going to set the labels based

so we're going to set the labels based on saved events

on saved events we're going to extract from the events

we're going to extract from the events we're going to extract the labels

we're going to extract the labels and we need to

and we need to in this case we're going to read from

in this case we're going to read from the previous labels like this

the previous labels like this so

so if we use set state like this it we also

if we use set state like this it we also we as a callback we have access to the

we as a callback we have access to the brief labels

brief labels and inside here we're going to return

and inside here we're going to return a new array

a new array right

right so this array is going to be a new set

so this array is going to be a new set and what's a set i said it's just a

and what's a set i said it's just a data structure that has

data structure that has is like a list but only has unique

is like a list but only has unique values because if we take in

values because if we take in consideration all of the

consideration all of the events

events some labels are going to be repeated so

some labels are going to be repeated so we have a unique set of values that's

we have a unique set of values that's what we use

what we use new set and we spread that to convert

new set and we spread that to convert that into an array so this can take as a

that into an array so this can take as a constructor an array so that array is

constructor an array so that array is going to take

going to take the save it

the save it events and we can map into those events

events and we can map into those events we're going to have an event for each

we're going to have an event for each item

item and what we're going to take here is

and what we're going to take here is we're going to take the event that label

we're going to take the event that label so we have a new we have the set that

so we have a new we have the set that has unique labels with it

has unique labels with it now that we have that we're going to map

now that we have that we're going to map into that array that has unique labels

into that array that has unique labels for example it will only have one

for example it will only have one instant instance of red of indigo of

instant instance of red of indigo of blue

blue and

and we're going to take that label

we're going to take that label and

and we are going to

return an object so this is going to

this is going to have an object that's first going to

have an object that's first going to have the label

have the label and then it's going to

and then it's going to have a checked value that's going to be

have a checked value that's going to be a boolean

a boolean and for that boolean we can say it

and for that boolean we can say it current label

current label so we're going to take the previous

so we're going to take the previous labels that we have here

labels that we have here and we are going to see if that label

and we are going to see if that label exceeds exceeds axis

exceeds exceeds axis already so we can take that label

already so we can take that label and we can compare that label that label

and we can compare that label that label because this is an object

because this is an object we are going to access the label object

we are going to access the label object and we are com are going to come back

and we are com are going to come back compare that with the current label that

compare that with the current label that we have in the loop

we have in the loop so

so this is going to return the label or if

this is going to return the label or if it doesn't find the label is going to

it doesn't find the label is going to return undefined so if we do have a

return undefined so if we do have a current label if this is true we are

current label if this is true we are going to just take that label and return

going to just take that label and return the current value

the current value of that checked property so we are not

of that checked property so we are not going to overwrite that but if that's

going to overwrite that but if that's not the case and is adding a new label

not the case and is adding a new label we're just going to return true

we're just going to return true so we we have

so we we have kind of confusing but we just

kind of confusing but we just are building

are building an array of

an array of objects with labels they have proper

objects with labels they have proper they has the property of of the label

they has the property of of the label and a checked value and we're doing that

and a checked value and we're doing that because

because this is going to be a check box we so we

this is going to be a check box we so we just want to keep track of the state of

just want to keep track of the state of that checkbox and if the label already

that checkbox and if the label already exists

exists we're going to just use that already

we're going to just use that already exists

exists checked value

checked value from the saved events otherwise we're

from the saved events otherwise we're just going to check automatically the

just going to check automatically the new label so every time we create a new

new label so every time we create a new event it can potentially create a new

event it can potentially create a new label for us to filter so we have the

label for us to filter so we have the the labels so now let's

the labels so now let's also export that export does those two

also export that export does those two things so we have set labels and we also

things so we have set labels and we also need

need the labels itself

the labels itself set labels and labels

set labels and labels and

and now if we go to the global context we

now if we go to the global context we also need to have this

also need to have this right here

right here so

so let me just copy this so i may

let me just copy this so i may make a mistake and

make a mistake and i can have it like this

i can have it like this and the labels like an empty array now

and the labels like an empty array now we have that into the context

we have that into the context so we can now

so we can now read that

read that in here

in here we can just

we can just use the context like this use context

use the context like this use context remember to import that

remember to import that and here we can pass the global context

and here we can pass the global context that we also need to import

that we also need to import and here we can just grab the labels

we can say something like label

label label is just

label is just going to this is just

going to this is just our

our all right so let's first

here we need to first have like

like we're going to have a

we're going to have a react

react fragment again

fragment again react.fragment

react.fragment and inside here we are going to have a b

and inside here we are going to have a b tag

tag that's going to have the class name

that's going to have the class name of text

of text gray 500

gray 500 and a font

and a font bold

and a margin of of 10

of 10 and inside here

and inside here it's just going to

it's just going to label like this

and below this we're going to math map through the labels from them

through the labels from them from the context so we can map into that

from the context so we can map into that label

label we're going to have a

we're going to have a label property inside here

label property inside here that i'm going to rename to renamed like

that i'm going to rename to renamed like this

this and

below that we're going to have a checked property i'm just

property i'm just deconstructing that

from the parameters from the object and i also will have an index

and here i can return my jsx so i can have it like this

have it like this label

label the

the key is going to be

key is going to be the index that we have

there and the class name is going to be

and the class name is going to be of items

of items center

margin top of three and it's going to be displayed as block

displayed as block inside here we're going to have

inside here we're going to have an input

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

current value of checked that comes from a label object

a label object and

and class name is going to be

class name is going to be is also going to be dynamic

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

the plugin that we added this is not a native class from

native class from tailwing this is from the plugin

tailwing this is from the plugin h05 a width of 5

h05 a width of 5 and the text is going to take that

and the text is going to take that label color that we have

500 400 is going to be rounded it's going to

is going to be rounded it's going to have

have when once we focus

when once we focus it's going to have a ring

it's going to have a ring of 0

of 0 cursor

cursor of

of pointer

and below that we're going to have an span

span tag

tag and this is just going to be the label

and this is just going to be the label name the color

name the color we can give it a class name

we can give it a class name of

of margin left of 2

margin left of 2 text

text gray of of 700

gray of of 700 and we're going to capitalize that

and we're going to capitalize that so let's go back here and yeah

so let's go back here and yeah we have the label

we have the label and if we add a new one let's say

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

can't change the state so let's do that now

now how we change the state is we need the

how we change the state is we need the own

own change

event listener and here we are going to have

have an update

an update label

this is going to be an object

be an object this doesn't exist yet we're going to

this doesn't exist yet we're going to add that to the cons the context but let

add that to the cons the context but let me just

me just have it like this and then i will add

have it like this and then i will add that so it's going to have a label and

that so it's going to have a label and that's going to be this label

that's going to be this label from here and

from here and the checked value is going to be

the opposite of what we currently have right

opposite of what we currently have right so it's if if it was true

so it's if if it was true once we click it's going to be false if

once we click it's going to be false if that makes sense

that makes sense so it's just going to invert that

so it's just going to invert that because this these are booleans we can

because this these are booleans we can use have

use have something like that here

something like that here in the context wrapper we are going to

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

function that we haven't yet so if i go

so if i go here

here this function it's going to take is the

this function it's going to take is the label as a parameter

label as a parameter and this is the object that we declare

and this is the object that we declare and here i'm going to set those labels

and here i'm going to set those labels so i'm just going to grab the current

so i'm just going to grab the current labels i'm going to map

labels i'm going to map through that

through that i'm going to have a label right here

i'm going to have a label right here i'm going to compare that label that

i'm going to compare that label that label so that's the color with the label

label so that's the color with the label that we have from the parameter

that we have from the parameter so

like this and if this is and if this is equals we're going to

and if this is equals we're going to just replace that label right with the

just replace that label right with the updated value it's the same thing that

updated value it's the same thing that we did here

we did here we're doing that but now for labels for

we're doing that but now for labels for the labels

the labels and if that's not the case we're just

and if that's not the case we're just going to return the original label

going to return the original label we have that

we have that now let's pass that

now let's pass that here update label

here update label and

and do it

do it let's do that also here

let's do that also here and this is just a function

so now let's see if that works

let's see if that works so

so we can change the state of the checkbox

we can change the state of the checkbox but nothing is happening here

but nothing is happening here and we

and we we need to filter that so we are going

we need to filter that so we are going to do that also in the

to do that also in the context wrapper

context wrapper wrapper

wrapper and

and we are going to use another hook for

we are going to use another hook for this one that's called use memo

this one that's called use memo and we're using use memo because this is

and we're using use memo because this is going to be like a little bit expensive

going to be like a little bit expensive operation

operation so we want to do it in an efficient well

so we want to do it in an efficient well way so we are going to declare a new

way so we are going to declare a new like state that's going to be called

like state that's going to be called filtered

filtered events

events filtered events this is going we're

filtered events this is going we're going to

going to use this use memo hook remember to

use this use memo hook remember to import that from react

import that from react and this use memo is

it is just going to have like computed values

values so it also takes um

so it also takes um dependency lists so what's going to be

dependency lists so what's going to be the dependency list is going to be the

the dependency list is going to be the saved events and the labels because this

saved events and the labels because this is filter events depends on on those

is filter events depends on on those things so it's just like a computed

things so it's just like a computed value

value computed

computed computed

computed property so we need to return something

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

need to have we are just going to return

save with events

events we're going to filter on into those

we're going to filter on into those events

events we have an individual event here

we have an individual event here we're going to take the labels

we're going to take the labels the labels from here

the labels from here and what we're going to do with those

and what we're going to do with those labels

labels we're also going to filter

we're also going to filter because this is an object we have a

because this is an object we have a label right here

label right here and what we are going to filter in here

and what we are going to filter in here is just

is just the labels

the labels that are checked

that are checked we we can do it like like this

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

boolean so only when this is true we are going to have only the labels that are

going to have only the labels that are checked

checked and

and once we have that we are going to map

once we have that we are going to map those labels

those labels so we only have the strings the labels

so we only have the strings the labels that label

that label this is just only the string

this is just only the string and we are going to check if this array

and we are going to check if this array includes

includes what includes the

what includes the event the

event the from the saved events the event that

from the saved events the event that label

label a little bit confusing again but

a little bit confusing again but we're just like filtering in

we're just like filtering in we have all of the events right we're

we have all of the events right we're filtering

filtering in those events one by one and we're

in those events one by one and we're checking we're filtering in the labels

checking we're filtering in the labels that are checked

that are checked we're mapping that through strings and

we're mapping that through strings and we're using the includes method that

we're using the includes method that will check if this string that has only

will check if this string that has only labels that are checked includes the

labels that are checked includes the label of the event if this is true

label of the event if this is true then we are going to display that event

then we are going to display that event so and we are using memo because we want

so and we are using memo because we want to memorize these values we don't want

to memorize these values we don't want to render this every time we render

to render this every time we render anything here so that's why we're using

anything here so that's why we're using that

that now we can just pass this right here

now we can just pass this right here inside here and also into the global

inside here and also into the global context

context it needs to it's it's going to be an

it needs to it's it's going to be an array

array and

and inside the day js file we're not going

inside the day js file we're not going to

to read from the saved events we

read from the saved events we i'm going to replace that

i'm going to replace that with

with the filtered

the filtered events

events right

right so i'm just replacing that in the places

so i'm just replacing that in the places that i was using saved events but now

that i was using saved events but now the source of true it's going to be the

the source of true it's going to be the array that's that's filter in between

array that's that's filter in between all of

all of all of the events so if we go back

all of the events so if we go back and you can see that now we can hide

and you can see that now we can hide or show different things depending on on

or show different things depending on on the things that we

the things that we have

is it preserves the previous state

it preserves the previous state so yeah that's

so yeah that's let's try it

let's try it like this in another month

and if we remove that it doesn't show in any place

any place so there's one more thing that we need

so there's one more thing that we need to fix is if you can see i selected this

to fix is if you can see i selected this but if i create and try to create a new

but if i create and try to create a new event

event it remains of the previous selected

it remains of the previous selected events so

events so for that we can just go to the

for that we can just go to the wrapper to the context wrapper and here

wrapper to the context wrapper and here i can

i can have another effect

have another effect so this is going to be

so this is going to be every time

every time we close the model and how we know when

we close the model and how we know when we close the model well we first need to

we close the model well we first need to listen to that by passing the dependency

listen to that by passing the dependency so set

show event model

event model and

and every time this is false so every time

every time this is false so every time this is false so we can check it like

this is false so we can check it like this

this every time this is false we are going to

every time this is false we are going to set the selected events to null

set the selected events to null in that way we are creating cleaning

in that way we are creating cleaning every time we close that model we are

every time we close that model we are going to clean that

going to clean that so if we go back

so if we go back and we click here

and we click here and

and now if i click here it clicks it clears

now if i click here it clicks it clears out

out so only

so only when i click into the model we have

when i click into the model we have we have that but we can now

we have that but we can now click

click below that and it will

below that and it will clean also if i click here you can see

clean also if i click here you can see that

that we have the logic that we have before

we have the logic that we have before and

and and yeah that's that's i think the last

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

tutorial i hope you find it useful and again if you like it please subscribe to

again if you like it please subscribe to the channel

the channel and i will see you in the next video bye

Click on any text or timestamp to jump to that moment in the video

Most transcripts ready in under 5 seconds

One-Click Copy125+ LanguagesSearch ContentJump to Timestamps

Paste YouTube URL

Enter any YouTube video link to get the full transcript

Most transcripts ready in under 5 seconds

Get Our Chrome Extension

Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube TranscriptPreparing your results…

YouTube Transcript:Google Calendar Clone with React - React Hooks ,React Context and Tailwind

AutoDub

Video Transcript

Summary

Core Theme

Paste YouTube URL

Transcript Extraction Form

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube Transcript:
Google Calendar Clone with React - React Hooks ,React Context and Tailwind