3 files changed, 289 insertions, 0 deletions
diff --git a/src/screens/student/Home/View.js b/src/screens/student/Home/View.js
new file mode 100644
index 0000000..27b0f78
--- /dev/null
+++ b/src/screens/student/Home/View.js
@@ -0,0 +1,186 @@
+import { Container, Grid, Skeleton, Stack } from '@mui/material';
+
+import ClassCard from '../../../components/ClassCard';
+import AssignmentCard from '../../../components/AssignmentCard';
+
+import styles from './styles';
+import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
+
+function View({
+  layoutType,
+  classrooms,
+  assignments,
+  onClickClassCard,
+  onClickAssignmentCard,
+}) {
+  const { container, divider, assignmentsStack } = styles[layoutType];
+
+  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">
+            {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</h1>
+          <h2>Atribuídas</h2>
+          <Stack
+            sx={assignmentsStack}
+            alignItems="end"
+            flexWrap="wrap"
+            direction="row"
+            gap="30px"
+          >
+            {assignments === null ? (
+              createArrayFrom1ToN(6).map(i => (
+                <Skeleton
+                  key={i}
+                  variant="rectangular"
+                  width="35em"
+                  height={145}
+                />
+              ))
+            ) : assignments.length !== 0 ? (
+              assignments.map(assignment => (
+                <AssignmentCard
+                  key={assignment.title}
+                  title={assignment.title}
+                  classrooms={assignment.classrooms}
+                  dueDate={assignment.dueDate}
+                  scores={assignment.scores}
+                  layoutType={layoutType}
+                  onClick={() => onClickAssignmentCard(assignment.id)}
+                />
+              ))
+            ) : (
+              <Container
+                sx={{
+                  height: '100vh',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                disableGutters
+              >
+                <p>Nenhuma atividade encontrada!</p>
+              </Container>
+            )}
+          </Stack>
+        </Grid>
+      </Grid>
+    );
+  } else if (layoutType === 'mobile') {
+    return (
+      <Stack sx={container}>
+        <h1>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</h1>
+        <h2>Atribuídas</h2>
+        <Stack
+          sx={assignmentsStack}
+          alignItems="center"
+          justifyContent="center"
+          flexWrap="wrap"
+          direction="row"
+          gap="30px"
+        >
+          {assignments === null ? (
+            createArrayFrom1ToN(6).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width="100%"
+                height={190}
+              />
+            ))
+          ) : assignments.length !== 0 ? (
+            assignments.map(assignment => (
+              <AssignmentCard
+                key={assignment.title}
+                title={assignment.title}
+                classrooms={assignment.classrooms}
+                dueDate={assignment.dueDate}
+                scores={assignment.scores}
+                layoutType={layoutType}
+                onClick={() => onClickAssignmentCard(assignment.id)}
+              />
+            ))
+          ) : (
+            <Container disableGutters>
+              <p>Nenhuma atividade encontrada!</p>
+            </Container>
+          )}
+        </Stack>
+      </Stack>
+    );
+  }
+}
+
+export default View;
diff --git a/src/screens/student/Home/index.js b/src/screens/student/Home/index.js
new file mode 100644
index 0000000..75d734e
--- /dev/null
+++ b/src/screens/student/Home/index.js
@@ -0,0 +1,51 @@
+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 { userService } = useUser();
+  const [classrooms, setClassrooms] = useState(null);
+  const [assignments, setAssignments] = useState(null);
+
+  useEffect(() => {
+    async function getClassrooms() {
+      const result = await userService.fetchClassrooms();
+      setClassrooms(result.data);
+    }
+    getClassrooms();
+  }, [userService, userService.fetchClassrooms]);
+
+  useEffect(() => {
+    async function getAssignments() {
+      const result = await userService.fetchAllAssignments();
+      setAssignments(result.data);
+    }
+    getAssignments();
+  }, [userService, userService.fetchAllAssignments]);
+
+  const onClickClassCard = id => {
+    navigate(`/class/${id}`);
+  };
+
+  const onClickAssignmentCard = id => {
+    navigate(`/assignment/${id}`);
+  };
+
+  return (
+    <View
+      layoutType={layoutType}
+      classrooms={classrooms}
+      assignments={assignments}
+      onClickClassCard={onClickClassCard}
+      onClickAssignmentCard={onClickAssignmentCard}
+    />
+  );
+}
+
+export default Home;
diff --git a/src/screens/student/Home/styles.js b/src/screens/student/Home/styles.js
new file mode 100644
index 0000000..4ddefb9
--- /dev/null
+++ b/src/screens/student/Home/styles.js
@@ -0,0 +1,52 @@
+// ========== Desktop  ==========
+const desktopContainer = {
+  height: '100vh',
+  margin: 0,
+};
+
+const desktopDivider = {
+  borderLeft: '4px solid #CFCFCF',
+};
+
+const desktopAssignmentsStack = {
+  paddingBottom: '100px',
+};
+
+const desktop = {
+  container: desktopContainer,
+  divider: desktopDivider,
+  assignmentsStack: desktopAssignmentsStack,
+};
+
+// ========== Mobile ==========
+const mobileContainer = {
+  height: 'inherit',
+  width: '100%',
+  padding: '10px 20px ',
+  margin: 0,
+};
+
+const mobileDivider = {
+  borderTop: '2px solid #CFCFCF',
+  paddingTop: '15px',
+};
+
+const mobileAssignmentsStack = {
+  paddingBottom: '100px',
+};
+
+const mobile = {
+  container: mobileContainer,
+  divider: mobileDivider,
+  assignmentsStack: mobileAssignmentsStack,
+};
+
+// ========== Unset ==========
+const unset = {
+  container: null,
+  divider: null,
+  assignmentsStack: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;