Hire+Plus! For Employees Here's how I built it (UI - Routes)
Tags: react, webdev, programming, tutorial
Published: 2022-08-05 06:30:00

## App.tsx

### imports
Half of the imported files are from the components and route pages. `setSignedIn` will be used to set the signed-in state if there is a current user signed in. `onAuthStateChangedListener` will be the listener for when the user is signed in or signed out. 

```javascript
import { useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import { useAppDispatch } from './app/hooks';
import Launch from './routes/launch/launch-page';
import { setSignedIn } from './app/features/auth/authSlice';
import { onAuthStateChangedListener } from './utils/firebase/firebase.utils';
import SignIn from './components/sign-in/sign-in.component';
import Signup from './components/sign-up/sign-up.component';
import NoMatch from './routes/noMatch/NoMatch';
import ProfilePage from './routes/profile/profile-page';
import JobsPage from './routes/job/job-page';
import PrivateRoute from './components/privateRoute/private-route.component';
import AuthPage from './routes/auth/auth-page';
import HomePage from './routes/home/home-page';
import CompanyPage from './routes/company/CompanyPage';
import JobDetail from './routes/job/job-detail';
```

---

### App()
`useEffect`: When the app mounts, it will check for the user using `onAuthStateChangedListener`. If the user is signed in, `setSignedIn` will dispatch and set the current user to state. If not, the current user will be set to nothing.

```javascript
function App() {
	const dispatch = useAppDispatch();
	useEffect(() => {
		const unsubscribe = onAuthStateChangedListener(async (user) => {
			if (user) {
				const { displayName, uid } = user;
				dispatch(
					setSignedIn({ signedIn: true, currentUser: { uid, displayName } })
				);
			} else {
				dispatch(setSignedIn({ signedIn: false, currentUser: {} }));
			}
		});
		// runs when the component unmounts
		return unsubscribe;
	}, [dispatch]);

	return ( // removed for simplicity );
}

export default App;
```

---

#### Rendering routes

```
-- /
-- /app
    -- /auth/employees
         -- /
         -- /sign-up
    -- /user/profile/:id
    -- /company/:id
    -- /job/:id
-- * 
```

**`/`** - route will render the launch page.

**`/app`** - has all other routes nested within. By default show the jobs page.

**`/auth/employees`** - has two routes nested within. By default it show the login page, and a navbar link will link to the signup page.

**`/user/profile/:id`** - will show an edit page to update the profile. This is a private view, therefore it cannot be viewed unless signed in.

**`/company/:id`** - will show the company page.

**`/job/:id`** - will show the job detail page.

**`*`** - will show catch-all page if no routes match the ones describe above.

```javascript
function App() {
// removed for simplicity

	return (
		<>
			<Routes>
				<Route path="/" element={<Launch />} />
				<Route path="/app" element={<HomePage />}>
					<Route index element={<JobsPage />} />
					<Route path="auth/employees" element={<AuthPage />}>
						<Route index element={<SignIn />} />
						<Route path="sign-up" element={<Signup />} />
						...
					</Route>
					<Route
						path="user/profile/:id"
						element={
							<PrivateRoute>
								<ProfilePage />
							</PrivateRoute>
						}
					/>
					<Route path="company/:id" element={<CompanyPage />} />
					<Route path="job/:id" element={<JobDetail />} />
				</Route>
				<Route path="*" element={<NoMatch />} />
			</Routes>
		</>
	);
}

export default App;
```

---

## Routes folder Structure
Quick brief on how this is structured. I organized them by the features, similar to how it is in the redux section. Only part that are not featured related are `launch`, `noMatch`, and `home`. 

![Routes folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eu79bj1ygx6n3rkzxmq.png)
 
## Components folder Structure

![Components folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmaexflnrhyvp9s2os62.png)

That's all for the routes portion of the project, stay tuned!