Hire+Plus! For Employees Here's how I built it (UI - Home/Navbar)
Tags: react, webdev, programming, tutorial
Published: 2022-08-05 09:47:00


## 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.

```javascript
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.

```javascript
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

```javascript
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

```javascript
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**
![authenticated user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk27nmiucvtu42y7096p.png)

**Signed-in**
![unauthenticated user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stisaxs8br4f0skhqe4d.png)