From 89716c89ad7452b1ae381098f9b88d9a919a30cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Tue, 22 Nov 2022 21:07:33 -0300 Subject: [PATCH 1/4] Add role based lazy loading --- src/app/AuthenticatedApp.js | 64 ++++--------------------------------- src/app/ProfessorApp.js | 5 +++ src/app/StudentApp.js | 58 +++++++++++++++++++++++++++++++++ src/services/mocks.js | 1 + 4 files changed, 71 insertions(+), 57 deletions(-) create mode 100644 src/app/ProfessorApp.js create mode 100644 src/app/StudentApp.js diff --git a/src/app/AuthenticatedApp.js b/src/app/AuthenticatedApp.js index 80d66be..0d6b9cf 100644 --- a/src/app/AuthenticatedApp.js +++ b/src/app/AuthenticatedApp.js @@ -1,66 +1,16 @@ -import { Navigate, Route, Routes, useNavigate } from 'react-router-dom'; -import { Container } from '@mui/system'; +import { lazy } from 'react'; import { useUser } from '../context/user'; -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'; +const ProfessorApp = lazy(() => import('./ProfessorApp')); +const StudentApp = lazy(() => import('./StudentApp')); function AuthenticatedApp() { - const navigate = useNavigate(); const { state } = useUser(); - const { logout } = useAuthState(); - const layoutType = useLayoutType(); - const { container, toolbar } = styles[layoutType]; - return ( - state && - state.user && ( - <> - - Olá, {state.user.firstName} 👋 -

- } - layoutType={layoutType} - avatarMenuOptions={avatarMenuOptions(navigate, logout)} - user={state.user} - /> - - - - } /> - } /> - } /> - } /> - - } /> - - - } /> - - } /> - } /> - } /> - - - - ) + return state && state.user && state.user.role === 'STUDENT' ? ( + + ) : ( + ); } diff --git a/src/app/ProfessorApp.js b/src/app/ProfessorApp.js new file mode 100644 index 0000000..a29f32d --- /dev/null +++ b/src/app/ProfessorApp.js @@ -0,0 +1,5 @@ +function ProfessorApp() { + return

Professor app

; +} + +export default ProfessorApp; diff --git a/src/app/StudentApp.js b/src/app/StudentApp.js new file mode 100644 index 0000000..1122807 --- /dev/null +++ b/src/app/StudentApp.js @@ -0,0 +1,58 @@ +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 ( + <> + + Olá, {user.firstName} 👋 +

+ } + layoutType={layoutType} + avatarMenuOptions={avatarMenuOptions(navigate, logout)} + user={user} + /> + + + + } /> + } /> + } /> + } /> + + } /> + + + } /> + + } /> + } /> + } /> + + + + ); +} + +export default StudentApp; diff --git a/src/services/mocks.js b/src/services/mocks.js index fce3b29..a00ebd3 100644 --- a/src/services/mocks.js +++ b/src/services/mocks.js @@ -548,6 +548,7 @@ const user = { course: 0, termsAgreed: true, year: 2018, + role: 'STUDENT', }; const authFailure = { From beb7b3eee37b01783ea042abe7bfa83442eecd14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Tue, 22 Nov 2022 21:34:02 -0300 Subject: [PATCH 2/4] Update login and register mocked users --- src/context/auth.js | 5 ++--- src/services/mocks.js | 22 ++++++++++++++++++++-- src/services/user-service.js | 17 +++++++++++------ 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/context/auth.js b/src/context/auth.js index 655b8d1..bed6354 100644 --- a/src/context/auth.js +++ b/src/context/auth.js @@ -35,10 +35,9 @@ function AuthProvider(props) { const login = (email, password) => { setState({ ...state, status: 'pending' }); - let shouldFail = email !== 'teste@teste.com' || password !== '#teste1234'; - return getUser(shouldFail).then(data => { - if (shouldFail) { + return getUser(email, password).then(data => { + if (data.message) { return setState({ status: 'error', user: null, error: data }); } else { return setState({ status: 'success', user: data, error: null }); diff --git a/src/services/mocks.js b/src/services/mocks.js index a00ebd3..a3bfb97 100644 --- a/src/services/mocks.js +++ b/src/services/mocks.js @@ -534,7 +534,7 @@ const allPeople = [ }, ]; -const user = { +const studentUser = { id: '123', ra: '0021123', username: 'ronaldosilva', @@ -551,6 +551,23 @@ const user = { role: 'STUDENT', }; +const professorUser = { + id: '321', + ra: '0021123', + username: 'cazalbe', + email: 'carlos.junior@ifmg.edu.br', + password: '#carlos1234', // TODO: Remove this! + firstName: 'Carlos', + lastName: 'Severiano', + token: 'xkhfb9458hnsdfsi9q8345bsdf9b834yr', + phone: '31111111111', + avatar: 'https://i.pravatar.cc/300?img=61', + course: 0, + termsAgreed: true, + year: 2018, + role: 'PROFESSOR', +}; + const authFailure = { message: 'Falha na autenticação', }; @@ -561,7 +578,8 @@ export { allClassroomAnnouncements, allPeople, faq, - user, + studentUser, + professorUser, authFailure, allUpcomingAssignments, }; diff --git a/src/services/user-service.js b/src/services/user-service.js index d256832..998d760 100644 --- a/src/services/user-service.js +++ b/src/services/user-service.js @@ -3,7 +3,8 @@ import { allClassrooms, allAssignments, faq, - user, + studentUser, + professorUser, authFailure, allClassroomAnnouncements, allUpcomingAssignments, @@ -84,14 +85,18 @@ const getFaq = () => }; }); -const getUser = shouldFail => +const getUser = (email, password) => sleep(300).then(() => { - if (shouldFail) { - return authFailure; + let user; + if (email === 'p@test.com' && password === 'p123') { + user = professorUser; + } else if (email === 's@test.com' && password === 's123') { + user = studentUser; } else { - window.localStorage.setItem('$USER', JSON.stringify(user)); - return user; + return authFailure; } + window.localStorage.setItem('$USER', JSON.stringify(user)); + return user; }); const registerUser = (data, shouldFail) => From 9035f7f1023ed2e32fd4ab4c730ac1c9de08e3f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Tue, 22 Nov 2022 23:32:26 -0300 Subject: [PATCH 3/4] Split only routes and fix register redirect --- src/app/AuthenticatedApp.js | 57 +++++++++++++++++++++++++++++++---- src/app/ProfessorApp.js | 5 ---- src/app/ProfessorRoutes.js | 14 +++++++++ src/app/StudentApp.js | 58 ------------------------------------ src/app/StudentRoutes.js | 30 +++++++++++++++++++ src/app/data.js | 1 + src/context/auth.js | 5 ++-- src/services/user-service.js | 15 ++++++---- 8 files changed, 107 insertions(+), 78 deletions(-) delete mode 100644 src/app/ProfessorApp.js create mode 100644 src/app/ProfessorRoutes.js delete mode 100644 src/app/StudentApp.js create mode 100644 src/app/StudentRoutes.js diff --git a/src/app/AuthenticatedApp.js b/src/app/AuthenticatedApp.js index 0d6b9cf..b4a9412 100644 --- a/src/app/AuthenticatedApp.js +++ b/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')); -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' ? ( - - ) : ( - + const routeResolver = role => { + switch (role) { + case 'STUDENT': + return ; + case 'PROFESSOR': + return ; + default: + return null; + } + }; + + return ( + state && + state.user && ( + <> + + Olá, {state.user.firstName} 👋 +

+ } + layoutType={layoutType} + avatarMenuOptions={avatarMenuOptions(navigate, logout)} + user={state.user} + /> + + + {routeResolver(state.user.role)} + + + ) ); } diff --git a/src/app/ProfessorApp.js b/src/app/ProfessorApp.js deleted file mode 100644 index a29f32d..0000000 --- a/src/app/ProfessorApp.js +++ /dev/null @@ -1,5 +0,0 @@ -function ProfessorApp() { - return

Professor app

; -} - -export default ProfessorApp; diff --git a/src/app/ProfessorRoutes.js b/src/app/ProfessorRoutes.js new file mode 100644 index 0000000..0daac42 --- /dev/null +++ b/src/app/ProfessorRoutes.js @@ -0,0 +1,14 @@ +import { Navigate, Route, Routes } from 'react-router-dom'; + +function ProfessorRoutes() { + return ( + + Home} /> + } /> + } /> + } /> + + ); +} + +export default ProfessorRoutes; diff --git a/src/app/StudentApp.js b/src/app/StudentApp.js deleted file mode 100644 index 1122807..0000000 --- a/src/app/StudentApp.js +++ /dev/null @@ -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 ( - <> - - Olá, {user.firstName} 👋 -

- } - layoutType={layoutType} - avatarMenuOptions={avatarMenuOptions(navigate, logout)} - user={user} - /> - - - - } /> - } /> - } /> - } /> - - } /> - - - } /> - - } /> - } /> - } /> - - - - ); -} - -export default StudentApp; diff --git a/src/app/StudentRoutes.js b/src/app/StudentRoutes.js new file mode 100644 index 0000000..b3d2961 --- /dev/null +++ b/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 ( + + } /> + } /> + } /> + } /> + + } /> + + + } /> + + } /> + } /> + } /> + + ); +} + +export default StudentRoutes; diff --git a/src/app/data.js b/src/app/data.js index e7048f5..647eb01 100644 --- a/src/app/data.js +++ b/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 || diff --git a/src/context/auth.js b/src/context/auth.js index bed6354..fd5104b 100644 --- a/src/context/auth.js +++ b/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 => { - 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 }); diff --git a/src/services/user-service.js b/src/services/user-service.js index 998d760..0f0fb92 100644 --- a/src/services/user-service.js +++ b/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) { - 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 { From 87d2bd636286f5996552a2d74e515cd98c2e69c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Tue, 22 Nov 2022 23:47:07 -0300 Subject: [PATCH 4/4] Add placeholder routes --- src/app/ProfessorRoutes.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/ProfessorRoutes.js b/src/app/ProfessorRoutes.js index 0daac42..419cb42 100644 --- a/src/app/ProfessorRoutes.js +++ b/src/app/ProfessorRoutes.js @@ -3,6 +3,9 @@ import { Navigate, Route, Routes } from 'react-router-dom'; function ProfessorRoutes() { return ( + Calendar} /> + Profile} /> + Information} /> Home} /> } /> } />