Lesing we have to take care of inside the head.
Before we move on to our next feature is to make sure that the logo up here is a link that the user
can click to go back to some root page inside of our application.
Now the reason that the header up here or the link inside of it is going to be a little bit more tricky.
Is that the page that the link directs to is going to change depending on whether or not the user is
logged in.
So just think about it if the user is not signed into our application.
Clicking on this on this button right here should probably take the user back to our route route where
essentially the landing component right here.
However if the user is logged in and so if we log in right now by going through the flow I would really
want to make sure that the logo instead sends the user back to the dashboard screen which we are on
right now.
And remember we can access this dashboard screen by going to the slash survey's route.
So essentially depending on whether or not you were logged in I wanted to change where the user goes
when they click on the logo up here.
So let's open up our head or component inside of our source components directory will find the header
file.
Here it is right here.
And if we scroll down a little bit we'll find the existing tag that houses the email the logo that is
appearing on the left hand side of the screen.
Now here's the thing.
At present we are using an anchor tag and anchor tags.
How are how we do classic navigation between HTML documents inside of a traditional web page.
However we don't really have a traditional web page here.
We have a page that is being rendered by re-act router.
And so when we say that we want to have a link that we can click to go to a different page.
What we really mean to say is that we want a link to click that will tell a re-act router to update
some of the components are actually visible on the screen.
So let's take a look at a diagram we're now going to move forward with re-act router and use that for
a lot of the different navigation inside of our application to handle navigation with re-act router.
We had access to something called the link tag.
This is the tag or react component that is provided by the re-act router library and we use it to navigate
around to different routes that are hosted or being routed by re-act router.
This is in direct competition with traditional atax or anchor tags which are used to navigate to completely
different HTL documents.
So some locations inside of our application we really do want an anchor tag because we want to navigate
to a completely different domain or a completely different age HTML document and a great example of
that would be the logon button that weve already put together.
So up here inside of our switch statement inside the header we have the case in which a user is not
logged in to log in with Google.
We want to make sure that the user navigates to a completely different domain a different age HTML document
to go through the water flow.
But in order for a user to just navigate around our application we will instead use this link tag right
here.
So let's figure out how you celing tag.
We're going to first import it into our head or component and then replace the existing anchor tag that
we have to represent the logo with that link tag.
OK so back over here inside the header at the very top.
I'm first going to import the link component from re-act router DOM like so.
And just as a reminder remember that we are making use a library called re-act Rotterdam which is specifically
the flavor of re-act router that works inside of the browser.
Now down inside of our render method we'll find the existing anchor tag.
And we don't want to anchor tag anymore.
Instead we want to use the linked tag because we want to tell us specifically re-act router that we
want to show something else on the screen.
So I'm going to replace the anchor tag with a link tag instead.
Next we're going to tell the link tag where it should redirect the user to.
Whenever someone clicks on it so I'm going to add on an additional property called to
now remember that I just said that we want the page that the user goes to when they click on this link
to change depending upon whether or not they are currently signed in.
So we're going to make sure that we have access to that prop called off.
Remember we've linked this up just very recently.
This dark not start off tells us whether or not the users currently signed into the application.
So if we look at that this drops off property and it is truthy or it contains an object then we want
to make sure that this is a route to the slash surveys route.
Otherwise the user should be redirected to the route route of just forward slash by itself.
So going to give myself a little bit of space to work with here.
I'm going to New Line once and twice and I'm going to take the closing bracket over here.
I'm going to put it on the new line like so.
So now we've got oping link to class name and then the closing bracket.
Then inside of the two statement right here the two prop we're going to look at this prop stock user
if this thing exists I want to go to slash service otherwise I want to go to just slash and so to get
that logic in here we're going to use a turner free expression a turner expression exists by placing
some type of Boolean logic right here.
Something that is either truthy or falsie.
We then put down a question mark we put down the value that we want to return.
If this is truthy which for us is going to be slash surveys and then a colon then the value to return.
If this is falsie which is going to be for us for cash like so.
So essentially does this not start user exist if this is an object.
Remember it's an object if the user is signed in it's going to be the user model then we're going to
return the string slash service.
Otherwise if this is falsie.
So if this user is no or false and McCain the user is not logged in then we are going to return forward
slash like so.
OK.
So let's test this out and see how it works.
I'll save the page.
We'll flip back over.
There's the refresh now when I hover over the logo up here it looks like it is a link.
If I click it however I get sent back to the root of the application.
And you know what I just realized I made a little typo over here.
It's not this Propst user it's prod start off.
I apologize for that typo.
OK let's try that again.
So now when I hover over it I'm currently logged in see how it says log out over here.
So when I click on the link I get sent to the dashboard screen.
But if I log out and then I click the link again it continues to just send me back to the landing screen.
Now I can log in with Google again and go through the Auth. flow.
I'm now signed in and when I click on the link I get sent get sent to slash surveys.
So yep it looks like it's working correctly.
Again I apologize for the typo.
Here it is not this prob stop user stop start off.
I sometimes call this the stop Propst user on personal projects I work on.
About half as many times I call it auth.
So sometimes I just mentally get a little mixed up between the two.
Anyways it looks like this has worked out pretty well.
So I think that the header now really truly and I know I've said this a couple of times.
I think the header is pretty well buttoned up.
So let's continue the next section and talk about the next feature that we're going to work on inside
of our.