From 0ed97c74b0916e5796c76ddaabcdbb92a2cf3f24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Wed, 29 Jun 2022 10:39:36 -0300 Subject: [PATCH] Fix bug when open screen from / --- src/AuthenticatedApp.js | 3 +- src/components/AssignmentCard.js | 277 ++++++++++++++-------------- src/components/ClassCard.js | 213 +++++++++++----------- src/components/MainMenu.js | 101 +++++------ src/components/Toolbar.js | 297 +++++++++++++++---------------- src/hooks/useLayoutType.js | 2 +- src/screens/Home/View.js | 185 +++++++++---------- src/screens/Home/styles.js | 9 +- src/screens/Login/styles.js | 10 +- 9 files changed, 542 insertions(+), 555 deletions(-) diff --git a/src/AuthenticatedApp.js b/src/AuthenticatedApp.js index 4fc2b86..6c8c02a 100644 --- a/src/AuthenticatedApp.js +++ b/src/AuthenticatedApp.js @@ -94,7 +94,8 @@ const menuOptions = activePath => [ selectedIcon: , unselectedIcon: , pathname: '/home', - isActive: activePath === '/home' || activePath === '/login', + isActive: + activePath === '/home' || activePath === '/login' || activePath === '/', }, { id: 1, diff --git a/src/components/AssignmentCard.js b/src/components/AssignmentCard.js index daad853..7fada73 100644 --- a/src/components/AssignmentCard.js +++ b/src/components/AssignmentCard.js @@ -12,14 +12,95 @@ import dayjs from 'dayjs'; import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter'; function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) { - switch (layoutType) { - case 'desktop': - return ( - + {classrooms.length > 1 && + classrooms + .filter((_, i) => i > 0) + .map(c => ( +
+ ))} + + + + + {title} + + + + + {classrooms.map(c => c.name).join(', ')} + + + + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {scores.map(s => s.value).join(', ')} pts + + + + + + ); + } else if (layoutType === 'mobile') { + return ( + + {classrooms.length > 1 && @@ -30,144 +111,58 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) { key={c.id} style={{ position: 'absolute', - height: '100%', - borderLeft: `5px solid ${c.color}`, - left: 0, + width: '100%', + borderTop: `5px solid ${c.color}`, + top: 0, }} > ))} - - - - - {title} - - - - - {classrooms.map(c => c.name).join(', ')} - - - - Data de entrega: {' '} - {capitalizeFirstLetter( - dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') - )} - - - Valor: - {scores.map(s => s.value).join(', ')} pts - - - - - - ); - - case 'mobile': - return ( - - - {classrooms.length > 1 && - classrooms - .filter((_, i) => i > 0) - .map(c => ( -
- ))} - - - - {title} - - - - - {classrooms.map(c => c.name).join(', ')} - - - - Data de entrega: - {capitalizeFirstLetter( - dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') - )} - - - Valor: - {scores.map(s => s.value).join(', ')} pts - - - - - - ); - - default: - return null; + + + + {title} + + + + + {classrooms.map(c => c.name).join(', ')} + + + + Data de entrega: + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {scores.map(s => s.value).join(', ')} pts + + + + + + ); } } diff --git a/src/components/ClassCard.js b/src/components/ClassCard.js index 295bff0..ad6e534 100644 --- a/src/components/ClassCard.js +++ b/src/components/ClassCard.js @@ -18,110 +18,54 @@ function ClassCard({ layoutType, onClick, }) { - switch (layoutType) { - case 'desktop': - return ( - - onClick()} - sx={{ display: 'flex', flexDirection: 'row' }} + if (layoutType === 'desktop') { + return ( + + onClick()} + sx={{ display: 'flex', flexDirection: 'row' }} + > + - {abbreviation} + + + -

{abbreviation}

- - - - {title} - - - - {teachers.map(t => ( - - ))} - - t.name).join(', ')}> - - {teachers.map(t => t.name).join(', ')} - - - - - - - ); - - case 'mobile': - return ( - - onClick()} - sx={{ display: 'flex', flexDirection: 'column' }} - > - -

{abbreviation}

- - - - {title} - - - - {teachers.map(t => ( - - ))} - + {title} + + + + {teachers.map(t => ( + + ))} + + t.name).join(', ')}> {teachers.map(t => t.name).join(', ')} - - - - - ); - - default: - return null; + + + + + + ); + } else if (layoutType === 'mobile') { + return ( + + onClick()} + sx={{ display: 'flex', flexDirection: 'column' }} + > + +

{abbreviation}

+ + + + {title} + + + + {teachers.map(t => ( + + ))} + + + {teachers.map(t => t.name).join(', ')} + + + + + + ); } } diff --git a/src/components/MainMenu.js b/src/components/MainMenu.js index 65bd601..33540a9 100644 --- a/src/components/MainMenu.js +++ b/src/components/MainMenu.js @@ -20,59 +20,54 @@ function MainMenu({ options, layoutType }) { options.find(option => option.isActive) ); - switch (layoutType) { - case 'desktop': - return ( - - - Logotipo - - - {options.map(option => ( - - - - - {option.unselectedIcon} - - - - - - ))} - - - ); - - case 'mobile': - return ( - - { - const newOption = options.find(option => option.id === newValue); - setSelectedOption(newOption); - navigate(newOption.pathname, { replace: true }); - }} - showLabels - value={selectedOption.id} - > - {options.map(option => ( - - ))} - - - ); - - default: - return null; + if (layoutType === 'desktop') { + return ( + + + Logotipo + + + {options.map(option => ( + + + + + {option.unselectedIcon} + + + + + + ))} + + + ); + } else if (layoutType === 'mobile') { + return ( + + { + const newOption = options.find(option => option.id === newValue); + setSelectedOption(newOption); + navigate(newOption.pathname, { replace: true }); + }} + showLabels + value={selectedOption.id} + > + {options.map(option => ( + + ))} + + + ); } } diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 112e346..709f18b 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -15,169 +15,164 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) { const [anchorElUser, setAnchorElUser] = useState(null); const [anchorElNotifications, setAnchorElNotifications] = useState(null); - switch (layoutType) { - case 'desktop': - return ( - - {title} - - + {title} + + + + setAnchorElNotifications(e.currentTarget)} + sx={{ p: 2 }} + > + + + + + + setAnchorElNotifications(null)} > - - setAnchorElNotifications(e.currentTarget)} - sx={{ p: 2 }} - > - - - - - - setAnchorElNotifications(null)} + setAnchorElNotifications(null)}> + Notificacoes + + + + setAnchorElUser(e.currentTarget)} + sx={{ p: 0 }} > - setAnchorElNotifications(null)}> - Notificacoes - - - - setAnchorElUser(e.currentTarget)} - sx={{ p: 0 }} - > - - - + + + - setAnchorElUser(null)} - > - {avatarMenuOptions.map(option => ( - - {option.text} - - ))} - - + setAnchorElUser(null)} + > + {avatarMenuOptions.map(option => ( + + {option.text} + + ))} + - ); - - case 'mobile': - return ( - - {title} - - + ); + } else if (layoutType === 'mobile') { + return ( + + {title} + + + + setAnchorElNotifications(e.currentTarget)} + sx={{ p: 2 }} + > + + + + + + setAnchorElNotifications(null)} > - - setAnchorElNotifications(e.currentTarget)} - sx={{ p: 2 }} - > - - - - - - setAnchorElNotifications(null)} + setAnchorElNotifications(null)}> + Notificacoes + + + + setAnchorElUser(e.currentTarget)} + sx={{ p: 0 }} > - setAnchorElNotifications(null)}> - Notificacoes - - - - setAnchorElUser(e.currentTarget)} - sx={{ p: 0 }} - > - - - + + + - setAnchorElUser(null)} - > - {avatarMenuOptions.map(option => ( - - {option.text} - - ))} - - + setAnchorElUser(null)} + > + {avatarMenuOptions.map(option => ( + + {option.text} + + ))} + - ); - - default: - return null; + + ); } } diff --git a/src/hooks/useLayoutType.js b/src/hooks/useLayoutType.js index a717435..633e5cc 100644 --- a/src/hooks/useLayoutType.js +++ b/src/hooks/useLayoutType.js @@ -2,7 +2,7 @@ import { useMediaQuery } from '@mui/material'; import { useEffect, useState } from 'react'; export default function useLayoutType() { - const [layoutType, setLayoutType] = useState('desktop'); + const [layoutType, setLayoutType] = useState('unset'); const isMediaQueryRuleActive = useMediaQuery('(max-width:800px)'); useEffect(() => { diff --git a/src/screens/Home/View.js b/src/screens/Home/View.js index a8087d6..0d7ddc3 100644 --- a/src/screens/Home/View.js +++ b/src/screens/Home/View.js @@ -9,99 +9,19 @@ import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN'; function View({ layoutType, classrooms, assignments, onClickClassCard }) { const { container, divider, assignmentsStack } = styles[layoutType]; - switch (layoutType) { - case 'desktop': - return ( - - -

Turmas

- - {classrooms === null ? ( - createArrayFrom1ToN(6).map(i => ( - - )) - ) : classrooms.length !== 0 ? ( - classrooms.map(classroom => ( - onClickClassCard(classroom.id)} - /> - )) - ) : ( -

Nenhuma sala de aula encontrada!

- )} - - - -

Atividades

-

Atribuídas

- - {assignments === null ? ( - createArrayFrom1ToN(6).map(i => ( - - )) - ) : assignments.length !== 0 ? ( - assignments.map(assignment => ( - - )) - ) : ( -

Nenhuma atividade encontrada!

- )} - - - - ); - case 'mobile': - return ( - + if (layoutType === 'desktop') { + return ( + +

Turmas

- + {classrooms === null ? ( createArrayFrom1ToN(6).map(i => ( )) ) : classrooms.length !== 0 ? ( @@ -120,12 +40,13 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {

Nenhuma sala de aula encontrada!

)} -

Atividades

+ + +

Atividades

Atribuídas

)) ) : assignments.length !== 0 ? ( @@ -151,14 +72,84 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) { /> )) ) : ( -

Nenhuma sala de aula encontrada!

+

Nenhuma atividade encontrada!

)} + + + ); + } else if (layoutType === 'mobile') { + return ( + +

Turmas

+ + {classrooms === null ? ( + createArrayFrom1ToN(6).map(i => ( + + )) + ) : classrooms.length !== 0 ? ( + classrooms.map(classroom => ( + onClickClassCard(classroom.id)} + /> + )) + ) : ( +

Nenhuma sala de aula encontrada!

+ )} - ); - - default: - return null; +

Atividades

+

Atribuídas

+ + {assignments === null ? ( + createArrayFrom1ToN(6).map(i => ( + + )) + ) : assignments.length !== 0 ? ( + assignments.map(assignment => ( + + )) + ) : ( +

Nenhuma sala de aula encontrada!

+ )} + + + ); } } diff --git a/src/screens/Home/styles.js b/src/screens/Home/styles.js index ae9aaa6..4ddefb9 100644 --- a/src/screens/Home/styles.js +++ b/src/screens/Home/styles.js @@ -41,5 +41,12 @@ const mobile = { assignmentsStack: mobileAssignmentsStack, }; -const styles = { desktop, mobile }; +// ========== Unset ========== +const unset = { + container: null, + divider: null, + assignmentsStack: null, +}; + +const styles = { desktop, mobile, unset }; export default styles; diff --git a/src/screens/Login/styles.js b/src/screens/Login/styles.js index 72d71e8..b5ded17 100644 --- a/src/screens/Login/styles.js +++ b/src/screens/Login/styles.js @@ -77,5 +77,13 @@ const mobile = { logoContainer: logoContainerMobile, }; -const styles = { desktop, mobile }; +// ========== Unset ========== +const unset = { + paper: null, + boxLogo: null, + boxForm: null, + logoContainer: null, +}; + +const styles = { desktop, mobile, unset }; export default styles;