Merge pull request #20 from leomurca/feature/professor_classroomHEADmain

Feature/professor classroom

2 files changed, 518 insertions, 0 deletions

diff --git a/src/screens/student/Classroom/AssignmentsTab/index.js b/src/screens/student/Classroom/AssignmentsTab/index.js
new file mode 100644
index 0000000..19757b4
--- /dev/null
+++ b/src/screens/student/Classroom/AssignmentsTab/index.js
@@ -0,0 +1,384 @@
+import { Container, Link, Skeleton, Stack, Typography } from '@mui/material';
+import dayjs from 'dayjs';
+import { capitalizeFirstLetter } from '../../../../utils/capitalizeFirstLetter';
+import styles from './styles';
+
+function AssignmentsTab({ assignmentsTabData, layoutType }) {
+  const layoutResolver = (state, assignments, layoutType) => {
+    const {
+      externalContainer,
+      innerContainer,
+      sectionTitle,
+      assignmentContainer,
+      assignmentTypography,
+      assignmentLink,
+      assignmentDueDate,
+      assignmentScores,
+      emptyStateContainer,
+    } = styles[layoutType];
+    if (layoutType === 'desktop') {
+      switch (state) {
+        case 'loading':
+          return (
+            <Container sx={externalContainer} disableGutters>
+              <Stack alignItems="center">
+                <Skeleton
+                  variant="rectangular"
+                  width="90%"
+                  height={70}
+                  sx={{ marginBottom: '30px' }}
+                />
+                <Stack alignItems="flex-start" sx={{ width: '90%' }}>
+                  <Skeleton variant="rectangular" height={50} width="95%" />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={450}
+                    sx={{ marginTop: '25px' }}
+                  />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={300}
+                    sx={{ marginTop: '15px' }}
+                  />
+                </Stack>
+                <Stack
+                  alignItems="flex-start"
+                  sx={{ width: '90%', marginTop: '30px' }}
+                >
+                  <Skeleton variant="rectangular" height={50} width="95%" />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={450}
+                    sx={{ marginTop: '25px' }}
+                  />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={300}
+                    sx={{ marginTop: '15px' }}
+                  />
+                </Stack>
+              </Stack>
+
+              <Stack sx={{ marginTop: '50px' }} alignItems="center">
+                <Skeleton
+                  variant="rectangular"
+                  width="90%"
+                  height={70}
+                  sx={{ marginBottom: '30px' }}
+                />
+                <Stack alignItems="flex-start" sx={{ width: '90%' }}>
+                  <Skeleton variant="rectangular" height={50} width="95%" />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={450}
+                    sx={{ marginTop: '25px' }}
+                  />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={300}
+                    sx={{ marginTop: '15px' }}
+                  />
+                </Stack>
+              </Stack>
+            </Container>
+          );
+
+        case 'idle':
+          const assesments = assignments.filter(a => a.type === 'assessment');
+          const projects = assignments.filter(a => a.type === 'project');
+
+          return (
+            <Container sx={externalContainer} disableGutters>
+              <Container sx={innerContainer} disableGutters>
+                <Typography sx={sectionTitle} variant="h4">
+                  Provas
+                </Typography>
+                <Stack alignItems="center">
+                  {assesments.length !== 0 ? (
+                    assesments.map(a => (
+                      <Container
+                        key={a.id}
+                        sx={assignmentContainer}
+                        disableGutters
+                      >
+                        <Typography sx={assignmentTypography} variant="h5">
+                          <Link
+                            sx={assignmentLink}
+                            href={`/assignment/${a.id}`}
+                          >
+                            {a.title}
+                          </Link>
+                        </Typography>
+                        <Typography
+                          sx={assignmentDueDate}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Data de entrega: </strong>{' '}
+                          {capitalizeFirstLetter(
+                            dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
+                          )}
+                        </Typography>
+                        <Typography
+                          sx={assignmentScores}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Valor: </strong>
+                          {a.scores.map(s => s.value).join(', ')} pts
+                        </Typography>
+                      </Container>
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhuma prova encontrada!</p>
+                    </Container>
+                  )}
+                </Stack>
+              </Container>
+
+              <Container sx={innerContainer} disableGutters>
+                <Typography sx={sectionTitle} variant="h4">
+                  Trabalhos
+                </Typography>
+                <Stack alignItems="center">
+                  {projects.length !== 0 ? (
+                    projects.map(a => (
+                      <Container
+                        key={a.id}
+                        sx={assignmentContainer}
+                        disableGutters
+                      >
+                        <Typography variant="h5">
+                          <Link
+                            sx={assignmentLink}
+                            href={`/assignment/${a.id}`}
+                          >
+                            {a.title}
+                          </Link>
+                        </Typography>
+                        <Typography
+                          sx={assignmentDueDate}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Data de entrega: </strong>{' '}
+                          {capitalizeFirstLetter(
+                            dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
+                          )}
+                        </Typography>
+                        <Typography
+                          sx={assignmentScores}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Valor: </strong>
+                          {a.scores.map(s => s.value).join(', ')} pts
+                        </Typography>
+                      </Container>
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum trabalho encontrado!</p>
+                    </Container>
+                  )}
+                </Stack>
+              </Container>
+            </Container>
+          );
+
+        case 'gone':
+          return null;
+
+        default:
+          return null;
+      }
+    } else if (layoutType === 'mobile') {
+      switch (state) {
+        case 'loading':
+          return (
+            <Stack
+              alignItems="center"
+              flexWrap="wrap"
+              direction="row"
+              sx={{ marginTop: '30px' }}
+            >
+              <Skeleton
+                variant="rectangular"
+                width="100%"
+                height={70}
+                sx={{ marginTop: '30px' }}
+              />
+              <Skeleton
+                variant="rectangular"
+                width="100%"
+                height={30}
+                sx={{ marginTop: '20px' }}
+              />
+              <Skeleton
+                variant="rectangular"
+                width="100%"
+                height={15}
+                sx={{ marginTop: '20px' }}
+              />
+              <Skeleton
+                variant="rectangular"
+                width={250}
+                height={15}
+                sx={{ marginTop: '10px' }}
+              />
+
+              <Skeleton
+                variant="rectangular"
+                width="100%"
+                height={70}
+                sx={{ marginTop: '50px' }}
+              />
+              <Skeleton
+                variant="rectangular"
+                width="100%"
+                height={30}
+                sx={{ marginTop: '20px' }}
+              />
+              <Skeleton
+                variant="rectangular"
+                width="100%"
+                height={15}
+                sx={{ marginTop: '20px' }}
+              />
+              <Skeleton
+                variant="rectangular"
+                width={250}
+                height={15}
+                sx={{ marginTop: '10px' }}
+              />
+            </Stack>
+          );
+
+        case 'idle':
+          const assesments = assignments.filter(a => a.type === 'assessment');
+          const projects = assignments.filter(a => a.type === 'project');
+
+          return (
+            <Container sx={externalContainer} disableGutters>
+              <Container sx={innerContainer} disableGutters>
+                <Typography sx={sectionTitle} variant="h4">
+                  Provas
+                </Typography>
+                <Stack alignItems="center">
+                  {assesments.length !== 0 ? (
+                    assesments.map(a => (
+                      <Container
+                        key={a.id}
+                        sx={assignmentContainer}
+                        disableGutters
+                      >
+                        <Typography variant="body1" sx={assignmentTypography}>
+                          <Link
+                            sx={assignmentLink}
+                            href={`/assignment/${a.id}`}
+                          >
+                            {a.title}
+                          </Link>
+                        </Typography>
+                        <Typography
+                          sx={assignmentDueDate}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Data de entrega: </strong>{' '}
+                          {capitalizeFirstLetter(
+                            dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
+                          )}
+                        </Typography>
+                        <Typography
+                          sx={assignmentScores}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Valor: </strong>
+                          {a.scores.map(s => s.value).join(', ')} pts
+                        </Typography>
+                      </Container>
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhuma prova encontrada!</p>
+                    </Container>
+                  )}
+                </Stack>
+              </Container>
+
+              <Container sx={innerContainer} disableGutters>
+                <Typography sx={sectionTitle} variant="h4">
+                  Trabalhos
+                </Typography>
+                <Stack alignItems="center">
+                  {projects.length !== 0 ? (
+                    projects.map(a => (
+                      <Container
+                        key={a.id}
+                        sx={assignmentContainer}
+                        disableGutters
+                      >
+                        <Typography variant="body1" sx={assignmentTypography}>
+                          <Link
+                            sx={assignmentLink}
+                            href={`/assignment/${a.id}`}
+                          >
+                            {a.title}
+                          </Link>
+                        </Typography>
+                        <Typography
+                          sx={assignmentDueDate}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Data de entrega: </strong>{' '}
+                          {capitalizeFirstLetter(
+                            dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
+                          )}
+                        </Typography>
+                        <Typography
+                          sx={assignmentScores}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Valor: </strong>
+                          {a.scores.map(s => s.value).join(', ')} pts
+                        </Typography>
+                      </Container>
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum trabalho encontrado!</p>
+                    </Container>
+                  )}
+                </Stack>
+              </Container>
+            </Container>
+          );
+
+        case 'gone':
+          return null;
+
+        default:
+          return null;
+      }
+    }
+  };
+
+  return layoutResolver(
+    assignmentsTabData && assignmentsTabData.state,
+    assignmentsTabData && assignmentsTabData.assignments,
+    layoutType
+  );
+}
+
+export default AssignmentsTab;
diff --git a/src/screens/student/Classroom/AssignmentsTab/styles.js b/src/screens/student/Classroom/AssignmentsTab/styles.js
new file mode 100644
index 0000000..8c97bd3
--- /dev/null
+++ b/src/screens/student/Classroom/AssignmentsTab/styles.js
@@ -0,0 +1,134 @@
+// ========== Desktop ==========
+const desktopExternalContainer = {
+  marginTop: '50px',
+  height: '100vh',
+};
+
+const desktopInnerContainer = {
+  width: '90%',
+  marginBottom: '30px',
+};
+
+const desktopSectionTitle = {
+  padding: '10px',
+  borderBottom: '2px solid #00420D',
+  color: '#00420D',
+};
+
+const desktopAssignmentContainer = {
+  width: '95%',
+  padding: '20px',
+  borderBottom: '2px solid #BCBCBC',
+};
+
+const desktopAssignmentTypography = {};
+
+const desktopAssignmentLink = {
+  color: 'black',
+  textDecoration: 'underline #000000',
+};
+
+const desktopAssignmentDueDate = {
+  marginTop: '15px',
+  fontSize: '15px',
+};
+
+const desktopAssignmentScores = {
+  fontSize: '15px',
+};
+
+const desktopEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
+const desktop = {
+  externalContainer: desktopExternalContainer,
+  innerContainer: desktopInnerContainer,
+  sectionTitle: desktopSectionTitle,
+  assignmentContainer: desktopAssignmentContainer,
+  assignmentTypography: desktopAssignmentTypography,
+  assignmentLink: desktopAssignmentLink,
+  assignmentDueDate: desktopAssignmentDueDate,
+  assignmentScores: desktopAssignmentScores,
+  emptyStateContainer: desktopEmptyStateContainer,
+};
+
+// ========== Mobile ==========
+const mobileExternalContainer = {
+  marginTop: '50px',
+  height: '100vh',
+};
+
+const mobileInnerContainer = {
+  width: '100%',
+  marginBottom: '30px',
+};
+
+const mobileSectionTitle = {
+  padding: '10px',
+  borderBottom: '2px solid #00420D',
+  color: '#00420D',
+};
+
+const mobileAssignmentContainer = {
+  width: '100%',
+  padding: '20px',
+  borderBottom: '2px solid #BCBCBC',
+};
+
+const mobileAssignmentTypography = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const mobileAssignmentLink = {
+  color: 'black',
+  textDecoration: 'underline #000000',
+};
+
+const mobileAssignmentDueDate = {
+  marginTop: '10px',
+  fontSize: '12px',
+};
+
+const mobileAssignmentScores = {
+  fontSize: '12px',
+};
+
+const mobileEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
+const mobile = {
+  externalContainer: mobileExternalContainer,
+  innerContainer: mobileInnerContainer,
+  sectionTitle: mobileSectionTitle,
+  assignmentContainer: mobileAssignmentContainer,
+  assignmentTypography: mobileAssignmentTypography,
+  assignmentLink: mobileAssignmentLink,
+  assignmentDueDate: mobileAssignmentDueDate,
+  assignmentScores: mobileAssignmentScores,
+  emptyStateContainer: mobileEmptyStateContainer,
+};
+
+// ========== Unset ==========
+const unset = {
+  externalContainer: null,
+  innerContainer: null,
+  sectionTitle: null,
+  assignmentContainer: null,
+  assignmentTypography: null,
+  assignmentLink: null,
+  assignmentDueDate: null,
+  assignmentScores: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;