I'd like to show you some images before we build it.
So we'll have a logo on the left hand side and some other logos.
These are not too much important.
The most important thing here is that these two buttons.
So when we have some notifications, we will see some count.
And if we have some network connection requests we would see here as well.
So in the navbar component we would like to fetch these data right.
And we can use use query for them.
So let's go ahead and try to maybe first build that right.
I'll say const.
We're going to get some data from the use query hook.
So here I can just put the query key where we can basically first fetch the notifications.
And you can pause the video and try to do it by yourself.
I'll just say query function.
It's going to be an async function.
where we would like to basically call the Axios dot instance dot get slash notifications.
So this is going to be our endpoint.
But here there is one catch.
So let's try to just see it I will say give me also the oath user I'll just rename this let's say use
query.
Our query key is going to be Oath user.
And let's make this to be one liner so that it looks clean.
Okay.
Just like this.
And I'll rename this to be notification or notifications.
So the catch here is that if we don't have the authenticated user, we don't really want to fetch this
data.
And how can we make this so that this is going to wait until we have the oath user field.
Well basically there is a field called enabled.
And you will just say like bang bang operators.
And then the oath user.
This basically returns true or false.
If you have the oath user and we just say if we have the oath user only, then go ahead and run this
query function.
I hope this makes sense.
So the query has just thought of everything for you.
Here you can see they have the enabled flag query function.
Let's just see like millions of other things that you can't really even imagine right.
So these are all the things you can retry, update the retry delay refetch on window change and things
like that.
Okay.
So I hope that makes sense.
This is kind of like the motivation behind it.
Let's try to duplicate this.
And as I said I would like to also fetch the connections that we have the connection requests.
So I will say connection free right.
And we can give this as a query key as well.
The endpoint is going to be, let's say, uh, we had slash connections and slash requests.
And we will again just say only call this function if we have the authenticated user.
Now we can try to console log the notifications and the connection requests.
Which is going to be empty arrays I believe because we don't really have any of them for now.
Um, I'll just go ahead.
Refresh.
Okay.
So here it says this is not found.
Why this is the case.
API v1 not connection, but connections.
It should be.
Let's try to refresh.
And here we can see for the notifications we got an empty array.
And for the connection requests we also got an empty array.
This is what we returned from the backend because we don't have any of them.
But here we can see it is working successfully.
So we just fetched our data and we would like to also have the logout functionality, which is also
going to be a mutation, so that when we clicked it, it is just going to log us out.
Okay.
So you can pause the video here and maybe just try to implement it.
This is going to be a mutation.
Just a spoiler alert.
And basically you would have your mutation function.
And this is going to give us the mutate function.
And we can call this as logout.
And let's say like we can put the async or you can just have it as a normal function because we are
not going to return anything from here.
I'll just say Axios instance dot post method to the auth logout and on success case we can show a toast,
right?
You can just add it, but we don't really need to show a toast.
For now.
We will We'll just save and let's have a button on the nav bar.
I will say like log out, but I don't want to collect it because if we click to that, that would just
log us out and we wouldn't be able to see the nav bar component, I think.
Um, like we should be able to see it.
But for now, let's just try to build the UI and then we will come back to this function.
So I promise this is going to be super quick.
I can delete these.
And instead of just having them console logs, what we can do is just grab them as variables because
we'll be using them.
Let's say const un notification count.
And we can basically filter out all the notifications that are not read right.
So I'll say notifications dot data because this is what react query sends you under the data.
You can get that and we'll say, um, like filter.
And for each notification we'll just check if it is not red.
So notification dot read or red like this.
We'll just filter out them.
And the other ones will be the unread notifications.
And we'll just say get the length.
So I hope I have explained this clearly, but basically we are just filtering out the notifications
that are already being read, right.
So I accidentally paused the video.
Uh, but I was just saying this is going to give us the unread notification count and we can save this.
We also want to get the unread connection requests count.
So this is really longer to type.
I'll just copy and paste.
We say connection requests dot data dot length so that we can really display them here for the notifications
and then for the connection requests.
Okay I hope that makes sense.
Now we can build the UI.
What I'll be doing is basically go ahead, copy it and paste it completely.
It's about 70 lines of code.
You can do the exact same thing.
Just copy it and paste it with me.
I'll zoom out like they are just classes completely.
And I'll just like I'll just not try to type this out, right?
So I'll just try to import and walk you through it.
So we'll take the get the home icon from Lucid React.
We would like to get the user's icon from Lucid React Bell icon.
And we have unread notifications count or maybe notification count.
This is how we called it.
Let's import everything and I'll just walk you through it.
Okay.
Let's save what we're going to see.
This is how that look right.
We will fix the logo.
But basically we have the home my network notifications Since me and logout button.
So these are the classes that we give to be able to get that output.
And we say if the connection request count is greater than zero then show this part.
So here I'll just make this to be true so that you can see it.
And I will just say three.
So this is how it's going to look like if you have some requests.
And same thing for this one.
Let's just say if this is true and if we have like three there we go.
So really these are not too much important.
They are classes.
But the important part is here above which we typed it together.
And when you click to the logout button you are calling the logout function which is our mutation,
right?
In this case, let's just try to save and just try to test this out.
Now when I click to this it is going to lock me out.
I didn't click this yet.
I will open up the application.
Take a look at my cookies.
I have the JWT linked in here, right?
Once I clicked it, it has been cleared out and I am logged out.
But it didn't refresh my page to be able to make this work.
What we can do is use something called Use query client.
So let's see use query client.
Call this and we will put it into the query client variable.
So we will say once we log that on success I want you to invalidate a query.
So here I'll just say query client dot.
Um I think I didn't remember the name.
So let me just check this out.
Sorry.
Okay.
So we'll just say invalidate queries and the query name that we would like to invalid.
Let's say query key is going to be the oath user.
So what this does when you log out, if it is completed successfully we just say could you please refetch
this data?
Could you please refresh this query which is going to run this here?
This is the query key that we have.
And it's going to see that user is null.
It is 401 right.
Not authenticated.
And that would take us to the login page.
So let's try to refresh this and just see this in action.
I'll try to maybe just sign up.
And by the way this is the view.
If you are not logged in for the navbar you can check out the component.
So here for the name I don't know what to give.
Let's just say Jesse.
And we can give the Pinkman.
Let's just give it an email.
I'll go ahead and copy this, paste it and add gmail.com.
123456.
Okay, now we just created our account and it didn't refresh this.
So we can also fix that.
We'll go into the signup form and we will say if we completed this successfully could you please refetch
the authenticated user.
And let's just do the exact same thing.
Get the query client.
And on success we will invalidate that query just like that.
And now for like let's just go into this page refresh.
And if I click to that it would immediately take me to the login page because as I said it is going
to rerun this query.
Uh, where where is it.
Okay.
So it's going to rerun this query because we say invalidate this query.
I hope this makes sense.
This is how we can sign up and log in or log out.
My bad.
Let's try to fix the logo on the nav bar.
So here we have an image component that says small I mean small logo dot png.
Let me just provide this to you.
You can grab this from the GitHub repo and paste it to here.
Now if you refresh you should be able to see that logo.
It is working as expected.
So now we can build the login page, which is going to be pretty similar to what we have here.
Same for the design and same for the functionality.
So let's try to build it pretty quickly.
We will have a login form dot JSX.
You can basically try to import it.
We will come back to the UI design and under the login page let's try to build the UI.