Overview: All funcs called are coming from the authSlice reducer.
Home Route Page
inside routes > home > home-page.tsx
Outlet will render whatever is nested inside the /app route dynamically. The Navigation component will be on every page.
import { Outlet } from 'react-router';
import Navigation from '../../components/navigation/navigation.component';
const HomePage = () => {
return (
<div>
<Navigation />
<Outlet />
</div>
);
};
export default HomePage;
Navigation Component
inside components > navigation > navigation.component.tsx
Imports
Importing useAppSelector and useAppDispatch from the hooks I created earlier. I created a logo for this project using Canva and importing here. Link and useNavigate to redirect to diff pages.
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import { Link, useNavigate } from 'react-router-dom';
import { signoutUser } from '../../app/features/auth/authSlice';
import logo from '../../assets/plus.svg';
Functionality
I needed to check if a user is signed-in or not, so I need IsSignedIn. If so, I'll display users name, so I need currentUser both from auth state.
logout - logout user then redirects to sign-in component
const Navigation = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const { isSignedIn, currentUser } = useAppSelector((state) => state.auth);
const logout = () => {
try {
dispatch(signoutUser())
.unwrap()
.then(() => {
navigate('auth/employees/');
});
} catch (error) {
console.log('from logout', error);
}
};
return ({/* removed for simplicity */});
};
export default Navigation;
UI
const Navigation = () => {
{/* removed for simplicity */}
return (
<header className="logo sticky top-0 z-10 border-b-2 border-gray-700 px-10">
<div className="container mx-auto flex flex-wrap flex-col md:flex-row items-center">
<a href="https://hire-plus-v1.vercel.app/" className="mr-2">
<img src={logo} alt="logo" style={{ height: '75px' }} />
</a>
<Link
to="/app"
className="flex title-font font-bold items-center mb-4 md:mb-0 text-md"
>
{isSignedIn && currentUser.displayName ? (
<span> {currentUser.displayName}</span>
) : null}
</Link>
{isSignedIn ? (
<>
<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
<Link to="/app" className="mr-5 hover:text-gray-500">
Jobs
</Link>
<Link
to={`user/profile/${currentUser.uid}`}
className="mr-5 hover:text-gray-500"
>
Profile
</Link>
</nav>
<button
onClick={logout}
className="bg-indigo-700 inline-flex items-center border-0 py-1 px-3 focus:outline-none rounded text-base mt-4 md:mt-0 text-white"
>
Logout
</button>
</>
) : (
<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
<Link to="/app" className="mr-5 hover:text-gray-500">
JOBS
</Link>
<Link to="auth/employees" className="mr-5 hover:text-gray-500">
SIGN IN
</Link>
<Link
to="auth/employees/sign-up"
className="mr-5 hover:text-gray-500"
>
SIGN UP
</Link>
</nav>
)}
</div>
</header>
);
};
export default Navigation;
Screenshots
Not signed-in
Signed-in
Top comments (0)