Split only routes and fix register redirect

src/app/AuthenticatedApp.js

@@ -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'));
+import MainMenu from '../components/MainMenu';
-const StudentApp = lazy(() => import('./StudentApp'));
+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' ? (
+  const routeResolver = role => {
-    <StudentApp user={state.user} pathname={state.pathname} />
+    switch (role) {
-  ) : (
+      case 'STUDENT':
-    <ProfessorApp />
+        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>
+      </>
+    )
   );
 }
 

src/app/ProfessorApp.js

@@ -1,5 +0,0 @@
-function ProfessorApp() {
-  return <h1>Professor app</h1>;
-}
-
-export default ProfessorApp;

src/app/ProfessorRoutes.js

@@ -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;

src/app/StudentApp.js

@@ -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;

src/app/StudentRoutes.js

@@ -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;

src/app/data.js

@@ -28,6 +28,7 @@ const menuOptions = activePath => [
     isActive:
       activePath === '/home' ||
       activePath === '/login' ||
+      activePath === '/register' ||
       activePath === '/profile' ||
       activePath === '/' ||
       activePath.indexOf('class') !== -1 ||

src/context/auth.js

@@ -22,10 +22,9 @@ function AuthProvider(props) {
 
   const register = data => {
     setState({ ...state, status: 'pending' });
-    let shouldFail = false;
 
-    return registerUser(data, shouldFail).then(data => {
+    return registerUser(data).then(data => {
-      if (shouldFail) {
+      if (data.message) {
         return setState({ status: 'error', user: null, error: data });
       } else {
         return setState({ status: 'success', user: data, error: null });

src/services/user-service.js

@@ -99,15 +99,18 @@ const getUser = (email, password) =>
     return user;
   });
 
-const registerUser = (data, shouldFail) =>
+const registerUser = data =>
   sleep(300).then(() => {
-    if (shouldFail) {
+    let userData;
-      return authFailure;
+    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);
+      return authFailure;
-      window.localStorage.setItem('$USER', JSON.stringify(data));
-      return data;
     }
+    window.localStorage.setItem('$USER', JSON.stringify(data));
+    return userData;
   });
 
 export {