So, to output the favorites
on the my favorites page,
we can go to this favorites page here, in the pages folder.
And again, tap into our context here
because on this page we now in the end wanna get
all the favorites from the context.
Now for this we can of course import useContext again
from
react
and also import the FavoritesContext object from
the store folder and there favorites context.
And then we connect to the context
just as we did it before
we create a constant which then stores this context object
and we call use context and past as context object
we created in that context file to use context.
And that gives us the current context snapshot then.
Now we got our context here and that means that now
from that favorites context
we can get our favorites array.
So (indistinct) here, we can now return let's say a section
where we say in h1 tag
my favorites
and below that I wanna output a list of meetups.
A list of my favorite meetups.
For this we can recycle the meetup list component
because this component does not care
whether it's all meetups or a subset of the meetups.
All it cares about
is that we output items that have these properties.
So we can import
meetup list from
the components folder meetups
meetup list
and then output that below the h1 tag.
Meetup list like this.
And set the meetups prop here
equal to favoritesCtx.favorites
because that is our array of favorites.
Now if we do that, on that favorites page we see
all the favorites we have.
The problem just is that if I remove a favorite
we don't see anything here
which makes sense because I currently have no favorites.
But we might wanna render some fallback message
for this case
And one way of doing this is
that we define a little helper variable here content
and we then check if favorites context total favorites
is equal to zero.
TotalFavorites is a never property
we're managing in our context.
And if that is zero, we know we have no favorites.
Then all set content equal to let's say a paragraph
where I simply say you got no favorites
yet.
Start adding some ?
Else if we do have favorites
I set content equal to
my meetup list here.
So in the end to, this line of code.
And this might look strange
storing HTML elements in variables
but it's actually not strange than returning HTML elements.
You can use JSX code anywhere, where a value is needed.
We saw it in arrays
in return statements you can also store JSX in variables.
That is totally fine.
And now we can simply output the value
of that content variable in our returned JSX code
to then have different values here
depending on whether we have favorites or not.
We now save this.
I got no favorites yet here
but if I add an item as a favorite, I see that instead.
And if I remove it, we're back to this (indistinct) text.
So this works.
One important note though,
if I add an item to my favorites and I then reload the page
it will be lost.
The reason for this is that our context
is only stored in memory.
Because we're only working with state
and with constants here, it's not stored permanently.
If you would want to store it permanently
you would need to use some browsers storage here
in the favorites context provider
like local storage, for example,
or store it on a server as well.
I'm not doing that here because I wanna focus on this
core feature of react context
but that is something you could add
if you wanna enhance this application.
For the moment it's simply some temporary storage
which survives as long as we are on this page
but if we ever reload or leave the page
our favorites will be lost.
Our meetups won't because those are stored on a server.
It's just something that is worth knowing.
And now with that, that's almost it.
As a last step I now just wanna make sure that
in the main navigation we also see a batch
next to the my favorites text
that indicates how many favorites we currently have.
And that simply means that in the main navigation JS file
we also wanna connect to context and get values from there.
So I'll again import use context here, from react
and import my context object
the favorites context from going up
going up store favorites context
and in main navigation we then get the favorites context
by using, use context, and connecting that to
the favorites context.
And then here on the favorites link
we can simply add a little extra span
next to this my favorites text
in which we output
favoritesCtx.totalFavorites
because that is a number
managed in our context
with the total number of meetup items in our array.
And I'll give this span a class of classes.badge.
Which is one of the classes prepared in this CSS file
I gave to you earlier.
And with this, we now have this badge here.
And if we add items to the context
that badge does update.
And also if we remove items of course.