Add desktop assignments tab layout without loading

src/screens/Classroom/AssignmentsTab/index.js

@@ -1,8 +1,166 @@
-function AssignmentsTab({ assignmentsTabData }) {
+import { Container, Link, Stack, Typography } from '@mui/material';
-  return assignmentsTabData && assignmentsTabData.state === 'loading' ? (
+import dayjs from 'dayjs';
-    <h1>Loading..</h1>
+import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter';
-  ) : assignmentsTabData.state === 'gone' ? null : (
+
-    <h1>Assignments Tab</h1>
+function AssignmentsTab({ assignmentsTabData, layoutType }) {
+  console.log(assignmentsTabData);
+  const layoutResolver = (state, assignments, layoutType) => {
+    if (layoutType === 'desktop') {
+      switch (state) {
+        case 'loading':
+          return <h1>Loading...</h1>;
+
+        case 'idle':
+          return (
+            <Container sx={{ marginTop: '50px' }} disableGutters>
+              <Container sx={{ width: '90%' }} disableGutters>
+                <Typography
+                  sx={{
+                    padding: '10px',
+                    borderBottom: '2px solid #00420D',
+                    color: '#00420D',
+                  }}
+                  variant="h4"
+                >
+                  Provas
+                </Typography>
+                <Stack alignItems="center">
+                  {assignments
+                    .filter(a => a.type === 'assessment')
+                    .map(a => (
+                      <Container
+                        key={a.id}
+                        sx={{
+                          width: '95%',
+                          padding: '20px',
+                          borderBottom: '2px solid #BCBCBC',
+                        }}
+                        disableGutters
+                      >
+                        <Typography variant="h5">
+                          <Link
+                            sx={{
+                              color: 'black',
+                              textDecoration: 'underline #000000',
+                            }}
+                            href={`/assignment/${a.id}`}
+                          >
+                            {a.title}
+                          </Link>
+                        </Typography>
+                        <Typography
+                          sx={{ marginTop: '15px', fontSize: '15px' }}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Data de entrega: </strong>{' '}
+                          {capitalizeFirstLetter(
+                            dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
+                          )}
+                        </Typography>
+                        <Typography
+                          sx={{ fontSize: '15px' }}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Valor: </strong>
+                          {a.scores.map(s => s.value).join(', ')} pts
+                        </Typography>
+                      </Container>
+                    ))}
+                </Stack>
+              </Container>
+
+              <Container
+                sx={{ width: '90%', marginTop: '30px' }}
+                disableGutters
+              >
+                <Typography
+                  sx={{
+                    padding: '10px',
+                    borderBottom: '2px solid #00420D',
+                    color: '#00420D',
+                  }}
+                  variant="h4"
+                >
+                  Trabalhos
+                </Typography>
+                <Stack alignItems="center">
+                  {assignments
+                    .filter(a => a.type === 'project')
+                    .map(a => (
+                      <Container
+                        key={a.id}
+                        sx={{
+                          width: '95%',
+                          padding: '20px',
+                          borderBottom: '2px solid #BCBCBC',
+                        }}
+                        disableGutters
+                      >
+                        <Typography variant="h5">
+                          <Link
+                            sx={{
+                              color: 'black',
+                              textDecoration: 'underline #000000',
+                            }}
+                            href={`/assignment/${a.id}`}
+                          >
+                            {a.title}
+                          </Link>
+                        </Typography>
+                        <Typography
+                          sx={{ marginTop: '15px', fontSize: '15px' }}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Data de entrega: </strong>{' '}
+                          {capitalizeFirstLetter(
+                            dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
+                          )}
+                        </Typography>
+                        <Typography
+                          sx={{ fontSize: '15px' }}
+                          variant="p"
+                          component="div"
+                        >
+                          <strong>Valor: </strong>
+                          {a.scores.map(s => s.value).join(', ')} pts
+                        </Typography>
+                      </Container>
+                    ))}
+                </Stack>
+              </Container>
+            </Container>
+          );
+
+        case 'gone':
+          return null;
+
+        default:
+          return null;
+      }
+    } else if (layoutType === 'mobile') {
+      switch (state) {
+        case 'loading':
+          return <h1>Loading...</h1>;
+
+        case 'idle':
+          return <h1>Assignments Tab</h1>;
+
+        case 'gone':
+          return null;
+
+        default:
+          return null;
+      }
+    }
+  };
+
+  return layoutResolver(
+    assignmentsTabData && assignmentsTabData.state,
+    assignmentsTabData && assignmentsTabData.assignments,
+    layoutType
   );
 }
 

src/screens/Classroom/View.js

@@ -28,7 +28,10 @@ function View({
         announcementsTabData={announcementsTabData}
         classroom={classroom && classroom}
       />
-      <AssignmentsTab assignmentsTabData={assignmentsTabData} />
+      <AssignmentsTab
+        layoutType={layoutType}
+        assignmentsTabData={assignmentsTabData}
+      />
     </Container>
   );
 }

src/services/mocks.js

@@ -98,6 +98,7 @@ const allClassrooms = [
 const allAssignments = [
   {
     id: '5435',
+    type: 'assessment',
     title:
       'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
     dueDate: '2022-07-01 23:59',
@@ -111,6 +112,7 @@ const allAssignments = [
   },
   {
     id: '0128',
+    type: 'assessment',
     title:
       'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
     dueDate: '2022-09-01 23:59',
@@ -124,6 +126,7 @@ const allAssignments = [
   },
   {
     id: '1234',
+    type: 'project',
     title: 'Trabalho NoSQL',
     dueDate: '2022-06-29 22:00',
     scores: [
@@ -136,6 +139,7 @@ const allAssignments = [
   },
   {
     id: '1234',
+    type: 'assessment',
     title: 'Atividade 2 - Estudo de caso Sapiens Informática',
     dueDate: '2022-06-25 23:59',
     scores: [
@@ -148,6 +152,7 @@ const allAssignments = [
   },
   {
     id: '3671',
+    type: 'assessment',
     title:
       'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
     dueDate: '2022-07-23 10:00',
@@ -161,6 +166,7 @@ const allAssignments = [
   },
   {
     id: '1717',
+    type: 'project',
     title: 'Trabalho interdisciplinar',
     dueDate: '2022-08-20 23:59',
     scores: [
@@ -294,6 +300,7 @@ const allClassroomAnnouncements = [
 const allUpcomingAssignments = [
   {
     id: '5435',
+    type: 'assessment',
     title:
       'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
     dueDate: '2022-07-01 23:59',
@@ -307,6 +314,7 @@ const allUpcomingAssignments = [
   },
   {
     id: '0128',
+    type: 'assessment',
     title:
       'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
     dueDate: '2022-09-01 23:59',
@@ -320,6 +328,7 @@ const allUpcomingAssignments = [
   },
   {
     id: '1234',
+    type: 'project',
     title: 'Trabalho NoSQL',
     dueDate: '2022-06-29 22:00',
     scores: [