They should instead be called
from inside some of our other components and pages.
So actually what we wanna do here is
we don't just wanna manage values
which are then accessible by different components,
but also functions that will change those values
that are accessible from different components.
And hence we can expose pointers at these functions
to our different components as well.
So in our context here, we don't just have the values
for our favorites, but we also can add function steer.
We can add add favorite key, for example
which stores are pointer at the add
favorite handler as a value.
So we don't execute the function here
we point at it, and that exposes
this function defined in this component
to all components in this application that are interested.
And you will see how to use this context
in our components in just a second.
And we can therefore also add,
remove favorite here and point at
the remove favorite handler
and add the item is favorite key
and point at the item is favorite handler function.
And now we expose these functions
to all interested components as well.
Now that that's the case, I will also go
to my initial context and add those keys here as well
and set that to empty functions
that just gets the correct parameters
and I'm only doing this because that
will actually give us better auto completion later.
It doesn't really do anything here
since these are functions that don't do anything
but it will help us with
auto-completion in the IDE later.
And that's why we'll just add them here
to the initial context as well.
Okay, so now with that, we spent a lot
of time in that file and I could imagine
that it's not all 100% clear yet
but we're now done with working in this file.
Now we need to wrap our context provider around
all the components that want to interact with this context.
And then in the different components
we need to pull out the values we're interested in
or call the methods, the functions here we defined.
And for that we need to export
this favorites context for wider component here
by adding the export keyword in front of this function
and also maybe at the bottom of the file export
the context as itself, the favorites context itself
as a default.
So we have two exports this function here,
which we export by its name, and then
this default export, which is
our favorites context itself.
These two things are exported here
because we need to interact with both objects,
with both things from outside this file.
Now let's start with interacting
with this favorites context provider component.
I mentioned multiple times that
we wanna wrap this component around
all the components that are interested
in our context data.
And in this case, the my favorites page
will be interested, the navigation bar will be interested
since I wanna show a batch here
and the all meetups page will also be interested
or to be precise, the meetup item components
will be interested because there I have
this two favorites button which for example,
should trigger the add favorite handler.
So I have various components from all
over the app that are interested
and hence the easiest way of providing
the context is probably to wrap everything with it.
So here in index JS I will import the favorite
favorites context provider wider from
the store folder and there to favorites context file
and actually I'll wrap it in curly braces because
I don't want the default export the context object here
but I want my component functioning stat.
These favorites context provider function
which I export like this under its name
and we import named exports between curly braces.
That is standard Java script.
Now we can wrap this provider component
around the browser router and the app
and with that everything, all components
in this application are able
to interact with this context.
Now, how do we interact though?
Let's maybe start with the meetup item component.
Here we have this two favorites button.
I wanna make sure that when this button is clicked
we add this item to our context.
And I also wanna update the text on the button
depending on whether this item is
already part of my context or not.
And actually, if it is part of the context already
if we already did favorite and meetup item
this button should no longer add this item to the context
but remove it from my favorites array in the context.
Hence first step is to add a function
in this meetup item component
which we could name toggle favorite status handler.
The name is up to you though, and I'll bind
this function to the on click prop of this button.
so that when we click this button,
this function will be executed.
And now in this function,
we will need data from the context.
We need to find out whether this meetup item
is already part of the context or not
and then do different things depending on that information.
Now for that, we now need to tap
into the context and get values from there.
And we do this with help of another hook provided by react.
And that would be the use context hook.
This hook allows us to establish a connection
between this component and the context
simply by calling use context here,
and then by passing the context object
to which we wanna connect as our argument.
And here, I'm not talking about
our favorites context provider component
but about the context object, which we created
with create context, which is why I'm exporting
that as a default as well.
With this in meetup item we can import
the favorites context, whoops, like this
so that default export from going up
going up store favorites context,
and instead the favorites context,
which we pass to use context.
And that now gives us access to
this favorites context object
so to this object here, which we're distributing
through the value prop to all the components.
So to this object to this object
will have access now instead of meetup item.
That's the object which is stored
in this favorites, CTX constant now.
And now we can, for example, find out
if this item this meetup item here
is a favorite by using this favorites
CTX constant and calling item it's favorite.
So this method, which we defined
on our context there as well, this method
which points at the item, it's favorite handler function.
We execute this function now
by executing it here in the component like this.
And we need to pass in the idea of the meetup
for what you wanna check, whether it's favorite or not.
And we get the idea of this meetup through props.
There is this ID prop, which we pass
into our meetup item here when we render it.
So we can use props that ID to pass the ID
off this specific meetup to item as favorite
and add will return true or false
so here we then have that response.
Now here in the toggle favorite status handler
we can check if the item is a favorite
so if this constant has a true value,
and if that's the case we know that
we wanna remove that item from the context now
when that button was clicked.
Because it is a favorite already
which means now we wanna get rid of it.
So then we use our favorites, CTX, constant
this context object, and call remove favorite
and remove favorite alls that wants to meet up ID
So we pass props.id here.
Else if the item is not a favorite yet
we call favorites, CTX.add favorite.
And here we need to pass in a new meetup item now
so I will construct our object on the fly
and simply set my ID to props.id
the title to props.title
the description to props.description
the image to props.image
and the address to props.address.
And that now recreates this meetup item
and passes it as an argument to the add favorite function
which in the end triggers this add favorite handler function
in this favorites context provider component.
And add will then update the state there
add this item to the user favorites array.
And because the state was updated
it will update all child components
because this component here as a whole
will be updated and hence the JSX code
with all the child components will be updated again.
And hence all components will have access
to that latest state now.
So that's how we can now trigger
a state update to this global state,
this favorite state from insight to
meet up item component.
We changed some state, which is not managed
in this component, but on a global level.
And now going down to this button,
we probably wanna change the caption
depending on whether the item is a favorite or not.
So I'll put something dynamic here as a caption
and check if item is favorite.
So I'm using this constant here again,
which has true or false as a value.
And if it's true, then the button should say,
remove from favorites.
If it's false so if the item is not a favorite yet
the button should say to favorites
because then clicking the button
will add the item to the favorites.
And now that was a lot of work.
But if you did all of that, if you save this,
now you should be able to reload and click to favorites
and it should change to remove from favorites
and back and forth.
We don't see the favorites on the my favorites page yet
but adding favorites does work as we can tell
by this button.
Now let's make sure we also render
the favorites on this my favorites page,
and that we have a little batch here.