Initial structure for professor home screen

src/app/ProfessorRoutes.js

@@ -1,4 +1,5 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
+import Home from '../screens/professor/Home';
 
 function ProfessorRoutes() {
   return (
@@ -6,7 +7,7 @@ function ProfessorRoutes() {
       <Route path="/calendar" element={<h1>Calendar</h1>} />
       <Route path="/profile" element={<h1>Profile</h1>} />
       <Route path="/info" element={<h1>Information</h1>} />
-      <Route path="/home" element={<h1>Home</h1>} />
+      <Route path="/home" element={<Home />} />
       <Route path="/login" element={<Navigate to="/home" />} />
       <Route path="/register" element={<Navigate to="/home" />} />
       <Route path="/" element={<Navigate to="/home" />} />

src/screens/professor/Home/View.js

@@ -0,0 +1,123 @@
+import { Grid, Skeleton, Stack } from '@mui/material';
+import { Container } from '@mui/system';
+import ClassCard from '../../../components/ClassCard';
+import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
+import styles from './styles';
+
+function View({ layoutType, classrooms, onClickClassCard }) {
+  const { container, divider, assignmentsStack } = styles[layoutType];
+
+  if (layoutType === 'desktop') {
+    return (
+      <Grid sx={container} container spacing={2}>
+        <Grid item xs={8}>
+          <h1>Minhas Turmas</h1>
+          <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
+            {classrooms === null ? (
+              createArrayFrom1ToN(6).map(i => (
+                <Skeleton
+                  key={i}
+                  variant="rectangular"
+                  width={390}
+                  height={145}
+                />
+              ))
+            ) : classrooms.length !== 0 ? (
+              classrooms.map(classroom => (
+                <ClassCard
+                  key={classroom.name}
+                  abbreviation={classroom.abbreviation}
+                  title={classroom.name}
+                  color={classroom.color}
+                  teachers={classroom.teachers}
+                  layoutType={layoutType}
+                  onClick={() => onClickClassCard(classroom.id)}
+                />
+              ))
+            ) : (
+              <Container
+                sx={{
+                  height: '100vh',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                disableGutters
+              >
+                <p>Nenhuma sala de aula encontrada!</p>
+              </Container>
+            )}
+          </Stack>
+        </Grid>
+        <Grid sx={divider} item xs={4}>
+          <h1>Atividades para corrigir</h1>
+          <h2>Atribuídas</h2>
+          <Stack
+            sx={assignmentsStack}
+            alignItems="end"
+            flexWrap="wrap"
+            direction="row"
+            gap="30px"
+          >
+            <h3>Atividade 1</h3>
+            <h3>Atividade 2</h3>
+          </Stack>
+        </Grid>
+      </Grid>
+    );
+  } else if (layoutType === 'mobile') {
+    return (
+      <Stack sx={container}>
+        <h1>Minhas Turmas</h1>
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          flexWrap="wrap"
+          direction="row"
+          gap="30px"
+        >
+          {classrooms === null ? (
+            createArrayFrom1ToN(6).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width="100%"
+                height={245}
+              />
+            ))
+          ) : classrooms.length !== 0 ? (
+            classrooms.map(classroom => (
+              <ClassCard
+                key={classroom.name}
+                abbreviation={classroom.abbreviation}
+                title={classroom.name}
+                color={classroom.color}
+                teachers={classroom.teachers}
+                layoutType={layoutType}
+                onClick={() => onClickClassCard(classroom.id)}
+              />
+            ))
+          ) : (
+            <Container disableGutters>
+              <p>Nenhuma sala de aula encontrada!</p>
+            </Container>
+          )}
+        </Stack>
+        <h1 style={divider}>Atividades para corrigir</h1>
+        <h2>Atribuídas</h2>
+        <Stack
+          sx={assignmentsStack}
+          alignItems="center"
+          justifyContent="center"
+          flexWrap="wrap"
+          direction="row"
+          gap="30px"
+        >
+          <h3>Atividade 1</h3>
+          <h3>Atividade 2</h3>
+        </Stack>
+      </Stack>
+    );
+  }
+}
+
+export default View;

src/screens/professor/Home/index.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useUser } from '../../../context/user';
+import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
+import useLayoutType from '../../../hooks/useLayoutType';
+import View from './View';
+
+function Home() {
+  useDocumentTitle('Página Inicial');
+  const navigate = useNavigate();
+  const layoutType = useLayoutType();
+  const { fetchClassrooms } = useUser();
+  const [classrooms, setClassrooms] = useState(null);
+
+  useEffect(() => {
+    async function getClassrooms() {
+      const result = await fetchClassrooms();
+      setClassrooms(result.data);
+    }
+    getClassrooms();
+  }, [fetchClassrooms]);
+
+  const onClickClassCard = id => {
+    navigate(`/class/${id}`);
+  };
+
+  console.log(classrooms);
+
+  return (
+    <View
+      layoutType={layoutType}
+      classrooms={classrooms}
+      onClickClassCard={onClickClassCard}
+    />
+  );
+}
+
+export default Home;

src/screens/professor/Home/styles.js

@@ -0,0 +1,31 @@
+// ========== Desktop  ==========
+const desktopContainer = {
+  height: '100vh',
+  margin: 0,
+};
+
+const desktop = {
+  container: desktopContainer,
+};
+
+// ========== Mobile ==========
+const mobileContainer = {
+  height: 'inherit',
+  width: '100%',
+  padding: '10px 20px ',
+  margin: 0,
+};
+
+const mobile = {
+  container: mobileContainer,
+};
+
+// ========== Unset ==========
+const unset = {
+  container: null,
+  divider: null,
+  assignmentsStack: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;