Нанять+Плюс! Для сотрудников Вот как я его создал (UI — Маршруты)


App.tsx

импортирует

Половина импортированных файлов относится к компонентам и страницам маршрутов. setSignedIn будет использоваться для установки состояния входа, если есть текущий пользователь, подписанный на сайт. onAuthStateChangedListener будет слушателем, когда пользователь входит или выходит из системы.

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: Когда приложение монтируется, оно будет проверять наличие пользователя с помощью onAuthStateChangedListener. Если пользователь подписан, setSignedIn выполнит диспетчеризацию и установит текущего пользователя в состояние. Если нет, то текущий пользователь не будет установлен ни во что.

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;
Вход в полноэкранный режим Выход из полноэкранного режима

Маршруты рендеринга

-- /
-- /app
    -- /auth/employees
         -- /
         -- /sign-up
    -- /user/profile/:id
    -- /company/:id
    -- /job/:id
-- * 
Вход в полноэкранный режим Выход из полноэкранного режима

/ — маршрут отрисовывает стартовую страницу.

/app — содержит все остальные маршруты, вложенные в него. По умолчанию отображает страницу заданий.

/auth/employees — имеет два вложенных маршрута. По умолчанию он показывает страницу входа в систему, а ссылка на панели навигации ведет на страницу регистрации.

/user/profile/:id — покажет страницу редактирования для обновления профиля. Это частный вид, поэтому его нельзя просмотреть, если не войти в систему.

/company/:id — отображает страницу компании.

/job/:id — отображает страницу с подробной информацией о работе.

* — покажет общую страницу, если ни один маршрут не соответствует описанным выше.

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;
Войти в полноэкранный режим Выход из полноэкранного режима

Структура папки «Маршруты

Кратко о том, как они структурированы. Я организовал их по функциям, аналогично тому, как это сделано в разделе redux. Только launch, noMatch и home не относятся к функциям.

Структура папки Components

Это все для части проекта, посвященной маршрутам, следите за новостями!

Оцените статью
devanswers.ru
Добавить комментарий