Fix bug when open screen from /

src/AuthenticatedApp.js

@@ -94,7 +94,8 @@ const menuOptions = activePath => [
     selectedIcon: <HomeIcon />,
     unselectedIcon: <HomeOutlined />,
     pathname: '/home',
-    isActive: activePath === '/home' || activePath === '/login',
+    isActive:
+      activePath === '/home' || activePath === '/login' || activePath === '/',
   },
   {
     id: 1,

src/components/AssignmentCard.js

@@ -12,8 +12,7 @@ import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
 
 function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
-  switch (layoutType) {
-    case 'desktop':
+  if (layoutType === 'desktop') {
     return (
       <Card
         sx={{
@@ -89,8 +88,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
         </CardActionArea>
       </Card>
     );
-
-    case 'mobile':
+  } else if (layoutType === 'mobile') {
     return (
       <Card
         sx={{
@@ -165,9 +163,6 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
         </CardActionArea>
       </Card>
     );
-
-    default:
-      return null;
   }
 }
 

src/components/ClassCard.js

@@ -18,8 +18,7 @@ function ClassCard({
   layoutType,
   onClick,
 }) {
-  switch (layoutType) {
-    case 'desktop':
+  if (layoutType === 'desktop') {
     return (
       <Card sx={{ width: 390, height: 135 }}>
         <CardActionArea
@@ -86,8 +85,7 @@ function ClassCard({
         </CardActionArea>
       </Card>
     );
-
-    case 'mobile':
+  } else if (layoutType === 'mobile') {
     return (
       <Card sx={{ width: '100%' }}>
         <CardActionArea
@@ -140,9 +138,6 @@ function ClassCard({
         </CardActionArea>
       </Card>
     );
-
-    default:
-      return null;
   }
 }
 

src/components/MainMenu.js

@@ -20,8 +20,7 @@ function MainMenu({ options, layoutType }) {
     options.find(option => option.isActive)
   );
 
-  switch (layoutType) {
-    case 'desktop':
+  if (layoutType === 'desktop') {
     return (
       <Drawer sx={drawer} variant="permanent" anchor="left">
         <Toolbar disableGutters sx={toolbar}>
@@ -43,8 +42,7 @@ function MainMenu({ options, layoutType }) {
         </List>
       </Drawer>
     );
-
-    case 'mobile':
+  } else if (layoutType === 'mobile') {
     return (
       <Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
         <BottomNavigation
@@ -70,9 +68,6 @@ function MainMenu({ options, layoutType }) {
         </BottomNavigation>
       </Box>
     );
-
-    default:
-      return null;
   }
 }
 

src/components/Toolbar.js

@@ -15,8 +15,7 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
   const [anchorElUser, setAnchorElUser] = useState(null);
   const [anchorElNotifications, setAnchorElNotifications] = useState(null);
 
-  switch (layoutType) {
-    case 'desktop':
+  if (layoutType === 'desktop') {
     return (
       <Box sx={box}>
         {title}
@@ -95,8 +94,7 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
         </Box>
       </Box>
     );
-
-    case 'mobile':
+  } else if (layoutType === 'mobile') {
     return (
       <Box sx={mobileBox}>
         {title}
@@ -175,9 +173,6 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
         </Box>
       </Box>
     );
-
-    default:
-      return null;
   }
 }
 

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(() => {

src/screens/Home/View.js

@@ -9,18 +9,12 @@ import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 function View({ layoutType, classrooms, assignments, onClickClassCard }) {
   const { container, divider, assignmentsStack } = styles[layoutType];
 
-  switch (layoutType) {
-    case 'desktop':
+  if (layoutType === 'desktop') {
     return (
       <Grid sx={container} container spacing={2}>
         <Grid item xs={8}>
           <h1>Turmas</h1>
-            <Stack
-              alignItems="center"
-              flexWrap="wrap"
-              direction="row"
-              gap="30px"
-            >
+          <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
             {classrooms === null ? (
               createArrayFrom1ToN(6).map(i => (
                 <Skeleton
@@ -84,7 +78,7 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
         </Grid>
       </Grid>
     );
-    case 'mobile':
+  } else if (layoutType === 'mobile') {
     return (
       <Stack sx={container}>
         <h1>Turmas</h1>
@@ -156,9 +150,6 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
         </Stack>
       </Stack>
     );
-
-    default:
-      return null;
   }
 }
 

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;

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;