Split only routes and fix register redirect
This commit is contained in:
parent
beb7b3eee3
commit
9035f7f102
8 changed files with 107 additions and 78 deletions
|
@ -1,16 +1,61 @@
|
|||
import { lazy } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Container } from '@mui/system';
|
||||
import { useAuthState } from '../context/auth';
|
||||
import { useUser } from '../context/user';
|
||||
|
||||
const ProfessorApp = lazy(() => import('./ProfessorApp'));
|
||||
const StudentApp = lazy(() => import('./StudentApp'));
|
||||
import MainMenu from '../components/MainMenu';
|
||||
import useLayoutType from '../hooks/useLayoutType';
|
||||
import Toolbar from '../components/Toolbar';
|
||||
|
||||
import { avatarMenuOptions, menuOptions } from './data';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
const StudentRoutes = lazy(() => import('./StudentRoutes'));
|
||||
const ProfessorRoutes = lazy(() => import('./ProfessorRoutes'));
|
||||
|
||||
function AuthenticatedApp() {
|
||||
const navigate = useNavigate();
|
||||
const { state } = useUser();
|
||||
const { logout } = useAuthState();
|
||||
const layoutType = useLayoutType();
|
||||
const { container, toolbar } = styles[layoutType];
|
||||
|
||||
return state && state.user && state.user.role === 'STUDENT' ? (
|
||||
<StudentApp user={state.user} pathname={state.pathname} />
|
||||
) : (
|
||||
<ProfessorApp />
|
||||
const routeResolver = role => {
|
||||
switch (role) {
|
||||
case 'STUDENT':
|
||||
return <StudentRoutes />;
|
||||
case 'PROFESSOR':
|
||||
return <ProfessorRoutes />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
state &&
|
||||
state.user && (
|
||||
<>
|
||||
<Toolbar
|
||||
title={
|
||||
<p style={toolbar}>
|
||||
Olá, <strong>{state.user.firstName}</strong> 👋
|
||||
</p>
|
||||
}
|
||||
layoutType={layoutType}
|
||||
avatarMenuOptions={avatarMenuOptions(navigate, logout)}
|
||||
user={state.user}
|
||||
/>
|
||||
<Container maxWidth="false" sx={container}>
|
||||
<MainMenu
|
||||
options={menuOptions(state.pathname)}
|
||||
layoutType={layoutType}
|
||||
/>
|
||||
{routeResolver(state.user.role)}
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
function ProfessorApp() {
|
||||
return <h1>Professor app</h1>;
|
||||
}
|
||||
|
||||
export default ProfessorApp;
|
14
src/app/ProfessorRoutes.js
Normal file
14
src/app/ProfessorRoutes.js
Normal file
|
@ -0,0 +1,14 @@
|
|||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
||||
function ProfessorRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/home" element={<h1>Home</h1>} />
|
||||
<Route path="/login" element={<Navigate to="/home" />} />
|
||||
<Route path="/register" element={<Navigate to="/home" />} />
|
||||
<Route path="/" element={<Navigate to="/home" />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfessorRoutes;
|
|
@ -1,58 +0,0 @@
|
|||
import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
|
||||
import { Container } from '@mui/system';
|
||||
import { useAuthState } from '../context/auth';
|
||||
|
||||
import MainMenu from '../components/MainMenu';
|
||||
import Home from '../screens/Home';
|
||||
import Information from '../screens/Information';
|
||||
import Calendar from '../screens/Calendar';
|
||||
import useLayoutType from '../hooks/useLayoutType';
|
||||
import Toolbar from '../components/Toolbar';
|
||||
import Classroom from '../screens/Classroom';
|
||||
import Assignment from '../screens/Assignment';
|
||||
import Profile from '../screens/Profile';
|
||||
|
||||
import { avatarMenuOptions, menuOptions } from './data';
|
||||
|
||||
import styles from './styles';
|
||||
function StudentApp({ user, pathname }) {
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useAuthState();
|
||||
const layoutType = useLayoutType();
|
||||
const { container, toolbar } = styles[layoutType];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toolbar
|
||||
title={
|
||||
<p style={toolbar}>
|
||||
Olá, <strong>{user.firstName}</strong> 👋
|
||||
</p>
|
||||
}
|
||||
layoutType={layoutType}
|
||||
avatarMenuOptions={avatarMenuOptions(navigate, logout)}
|
||||
user={user}
|
||||
/>
|
||||
<Container maxWidth="false" sx={container}>
|
||||
<MainMenu options={menuOptions(pathname)} layoutType={layoutType} />
|
||||
<Routes>
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/info" element={<Information />} />
|
||||
<Route path="/calendar" element={<Calendar />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/class">
|
||||
<Route path=":id" element={<Classroom />} />
|
||||
</Route>
|
||||
<Route path="/assignment">
|
||||
<Route path=":id" element={<Assignment />} />
|
||||
</Route>
|
||||
<Route path="/login" element={<Navigate to="/home" />} />
|
||||
<Route path="/register" element={<Navigate to="/home" />} />
|
||||
<Route path="/" element={<Navigate to="/home" />} />
|
||||
</Routes>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default StudentApp;
|
30
src/app/StudentRoutes.js
Normal file
30
src/app/StudentRoutes.js
Normal file
|
@ -0,0 +1,30 @@
|
|||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import Home from '../screens/Home';
|
||||
import Information from '../screens/Information';
|
||||
import Calendar from '../screens/Calendar';
|
||||
import Classroom from '../screens/Classroom';
|
||||
import Assignment from '../screens/Assignment';
|
||||
import Profile from '../screens/Profile';
|
||||
|
||||
function StudentRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/info" element={<Information />} />
|
||||
<Route path="/calendar" element={<Calendar />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/class">
|
||||
<Route path=":id" element={<Classroom />} />
|
||||
</Route>
|
||||
<Route path="/assignment">
|
||||
<Route path=":id" element={<Assignment />} />
|
||||
</Route>
|
||||
<Route path="/login" element={<Navigate to="/home" />} />
|
||||
<Route path="/register" element={<Navigate to="/home" />} />
|
||||
<Route path="/" element={<Navigate to="/home" />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default StudentRoutes;
|
|
@ -28,6 +28,7 @@ const menuOptions = activePath => [
|
|||
isActive:
|
||||
activePath === '/home' ||
|
||||
activePath === '/login' ||
|
||||
activePath === '/register' ||
|
||||
activePath === '/profile' ||
|
||||
activePath === '/' ||
|
||||
activePath.indexOf('class') !== -1 ||
|
||||
|
|
|
@ -22,10 +22,9 @@ function AuthProvider(props) {
|
|||
|
||||
const register = data => {
|
||||
setState({ ...state, status: 'pending' });
|
||||
let shouldFail = false;
|
||||
|
||||
return registerUser(data, shouldFail).then(data => {
|
||||
if (shouldFail) {
|
||||
return registerUser(data).then(data => {
|
||||
if (data.message) {
|
||||
return setState({ status: 'error', user: null, error: data });
|
||||
} else {
|
||||
return setState({ status: 'success', user: data, error: null });
|
||||
|
|
|
@ -99,15 +99,18 @@ const getUser = (email, password) =>
|
|||
return user;
|
||||
});
|
||||
|
||||
const registerUser = (data, shouldFail) =>
|
||||
const registerUser = data =>
|
||||
sleep(300).then(() => {
|
||||
if (shouldFail) {
|
||||
return authFailure;
|
||||
let userData;
|
||||
if (data.email === 'p@test.com') {
|
||||
userData = { ...data, role: 'PROFESSOR' };
|
||||
} else if (data.email === 's@test.com') {
|
||||
userData = { ...data, role: 'STUDENT' };
|
||||
} else {
|
||||
console.log(data);
|
||||
window.localStorage.setItem('$USER', JSON.stringify(data));
|
||||
return data;
|
||||
return authFailure;
|
||||
}
|
||||
window.localStorage.setItem('$USER', JSON.stringify(data));
|
||||
return userData;
|
||||
});
|
||||
|
||||
export {
|
||||
|
|
Loading…
Reference in a new issue