Hire+Plus! For Employees Here's how I built it (UI - Routes)

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.

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.

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.

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.

Components folder Structure

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