Add assignment screen desktop layout witouth file upload

package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
         "dayjs": "^1.11.3",
+        "html-react-parser": "^3.0.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-number-format": "^5.0.0-beta.4",
@@ -8113,6 +8114,84 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/html-dom-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.2.tgz",
+      "integrity": "sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw==",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "8.0.1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -8154,6 +8233,34 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-react-parser": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.4.tgz",
+      "integrity": "sha512-va68PSmC7uA6PbOEc9yuw5Mu3OHPXmFKUpkLGvUPdTuNrZ0CJZk1s/8X/FaHjswK/6uZghu2U02tJjussT8+uw==",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "3.1.2",
+        "react-property": "2.0.0",
+        "style-to-js": "1.1.1"
+      },
+      "peerDependencies": {
+        "react": "0.14 || 15 || 16 || 17 || 18"
+      }
+    },
+    "node_modules/html-react-parser/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -8411,6 +8518,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
     "node_modules/internal-slot": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -12363,6 +12475,11 @@
         "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
+      "integrity": "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13535,6 +13652,22 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz",
+      "integrity": "sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==",
+      "dependencies": {
+        "style-to-object": "0.3.0"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "dependencies": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -20952,6 +21085,61 @@
         }
       }
     },
+    "html-dom-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.2.tgz",
+      "integrity": "sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw==",
+      "requires": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "8.0.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+          "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.1"
+          }
+        },
+        "entities": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+          "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+        },
+        "htmlparser2": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+          "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "domutils": "^3.0.1",
+            "entities": "^4.3.0"
+          }
+        }
+      }
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -20984,6 +21172,27 @@
         "terser": "^5.10.0"
       }
     },
+    "html-react-parser": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.4.tgz",
+      "integrity": "sha512-va68PSmC7uA6PbOEc9yuw5Mu3OHPXmFKUpkLGvUPdTuNrZ0CJZk1s/8X/FaHjswK/6uZghu2U02tJjussT8+uw==",
+      "requires": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "3.1.2",
+        "react-property": "2.0.0",
+        "style-to-js": "1.1.1"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -21159,6 +21368,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
     "internal-slot": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -23888,6 +24102,11 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
+      "integrity": "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -24756,6 +24975,22 @@
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
       "requires": {}
     },
+    "style-to-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz",
+      "integrity": "sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==",
+      "requires": {
+        "style-to-object": "0.3.0"
+      }
+    },
+    "style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "requires": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
     "stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "dayjs": "^1.11.3",
+    "html-react-parser": "^3.0.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-number-format": "^5.0.0-beta.4",

src/context/user.js

@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { useAuthState } from './auth';
 import {
   getAllAssignments,
+  getAssignmentById,
   getAssignmentsByClassId,
   getClassroomAnnouncementsById,
   getClassroomById,
@@ -31,6 +32,8 @@ function UserProvider(props) {
 
   const fetchAllAssignments = () => getAllAssignments(user.id);
 
+  const fetchAssignmentById = assignmentId => getAssignmentById(assignmentId);
+
   const fetchAssignmentsByClassId = classId => getAssignmentsByClassId(classId);
 
   const fetchClassroomById = classId => getClassroomById(classId);
@@ -51,6 +54,7 @@ function UserProvider(props) {
         state,
         fetchClassrooms,
         fetchAllAssignments,
+        fetchAssignmentById,
         fetchAssignmentsByClassId,
         fetchClassroomById,
         fetchFAQ,
@@ -67,6 +71,7 @@ function useUser() {
   const {
     state,
     fetchClassrooms,
+    fetchAssignmentById,
     fetchAllAssignments,
     fetchAssignmentsByClassId,
     fetchClassroomById,
@@ -80,6 +85,7 @@ function useUser() {
     state,
     fetchClassrooms,
     fetchAllAssignments,
+    fetchAssignmentById,
     fetchAssignmentsByClassId,
     fetchClassroomById,
     fetchFAQ,

src/screens/Assignment/View.js

@@ -0,0 +1,78 @@
+import parse from 'html-react-parser';
+import { Button, Container, Stack, Typography } from '@mui/material';
+import dayjs from 'dayjs';
+import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
+
+function View({ assignment, layoutType }) {
+  return assignment === null ? (
+    <h1>Loading...</h1>
+  ) : (
+    <Container
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginTop: '30px',
+      }}
+      disableGutters
+    >
+      <Stack
+        sx={{
+          width: '70%',
+          paddingBottom: '5px',
+          borderBottom: '1px solid black',
+        }}
+      >
+        <Typography sx={{ fontWeight: 'bold', padding: '15px 0' }} variant="h4">
+          {assignment.title}
+        </Typography>
+        <Stack
+          sx={{ padding: '5px 0' }}
+          flexDirection="row"
+          justifyContent="space-between"
+        >
+          <Typography variant="body1" component="div">
+            <strong>Valor: </strong>
+            {assignment.scores.map(s => s.value).join(', ')} pts
+          </Typography>
+          <Typography variant="body1" component="div">
+            <strong>Data de entrega: </strong>
+            {capitalizeFirstLetter(
+              dayjs(assignment.dueDate).format('dddd, DD/MM | HH:mm[h]')
+            )}
+          </Typography>
+        </Stack>
+      </Stack>
+      <Stack
+        sx={{
+          width: '70%',
+          paddingTop: '30px',
+          paddingBottom: '30px',
+          borderBottom: '1px solid black',
+        }}
+      >
+        <div>{parse(assignment.description)}</div>;
+      </Stack>
+      <Stack
+        sx={{
+          width: '70%',
+          paddingTop: '30px',
+          paddingBottom: '30px',
+        }}
+        flexDirection="row"
+        justifyContent="flex-end"
+      >
+        <Button
+          sx={{ width: '30%' }}
+          onClick={() => console.log('clicked')}
+          variant="contained"
+        >
+          Entregar
+        </Button>
+      </Stack>
+    </Container>
+  );
+}
+
+export default View;

src/screens/Assignment/index.js

@@ -1,9 +1,33 @@
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useUser } from '../../context/user';
+import useLayoutType from '../../hooks/useLayoutType';
+import View from './View';
 
 function Assignment() {
   const params = useParams();
+  const layoutType = useLayoutType();
+  const { fetchAssignmentById } = useUser();
+  const [assignment, setAssignment] = useState(null);
 
-  return <h1>Assignment id: {params.id}</h1>;
+  useEffect(() => {
+    async function getAssignmentById(assignmentId) {
+      document.title = 'Carregando...';
+      const result = await fetchAssignmentById(assignmentId);
+      setAssignment(result.data);
+    }
+
+    function updateDocumentTitle() {
+      if (assignment !== null) {
+        document.title = assignment.title;
+      }
+    }
+
+    getAssignmentById(params.id);
+    updateDocumentTitle();
+  }, [params, fetchAssignmentById, assignment]);
+
+  return <View assignment={assignment} layoutType={layoutType} />;
 }
 
 export default Assignment;

src/services/mocks.js

@@ -101,6 +101,8 @@ const allAssignments = [
     type: 'assessment',
     title:
       'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
+    description:
+      '<p>Mussum Ipsum, cacilds vidis litro abertis. N&atilde;o sou faixa preta cumpadi, sou preto inteiris, inteiris.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.Sapien in monti palavris qui num significa nadis i pareci latim.Suco de cevadiss deixa as pessoas mais interessantis.</p><p>Suco de cevadiss, &eacute; um leite divinis, qui tem lupuliz, matis, aguis e fermentis.Interagi no m&eacute;, cursus quis, vehicula ac nisi.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Per aumento de cachacis, eu reclamis.</p><p>Quem manda na minha terra sou euzis!Paisis, filhis, espiritis santis.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus.</p>',
     dueDate: '2022-07-01 23:59',
     scores: [
       {
@@ -115,6 +117,8 @@ const allAssignments = [
     type: 'assessment',
     title:
       'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
+    description:
+      '<p>Mussum Ipsum, cacilds vidis litro abertis. N&atilde;o sou faixa preta cumpadi, sou preto inteiris, inteiris.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.Sapien in monti palavris qui num significa nadis i pareci latim.Suco de cevadiss deixa as pessoas mais interessantis.</p><p>Suco de cevadiss, &eacute; um leite divinis, qui tem lupuliz, matis, aguis e fermentis.Interagi no m&eacute;, cursus quis, vehicula ac nisi.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Per aumento de cachacis, eu reclamis.</p><p>Quem manda na minha terra sou euzis!Paisis, filhis, espiritis santis.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus.</p>',
     dueDate: '2022-09-01 23:59',
     scores: [
       {
@@ -128,6 +132,8 @@ const allAssignments = [
     id: '1234',
     type: 'project',
     title: 'Trabalho NoSQL',
+    description:
+      '<p>Mussum Ipsum, cacilds vidis litro abertis. N&atilde;o sou faixa preta cumpadi, sou preto inteiris, inteiris.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.Sapien in monti palavris qui num significa nadis i pareci latim.Suco de cevadiss deixa as pessoas mais interessantis.</p><p>Suco de cevadiss, &eacute; um leite divinis, qui tem lupuliz, matis, aguis e fermentis.Interagi no m&eacute;, cursus quis, vehicula ac nisi.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Per aumento de cachacis, eu reclamis.</p><p>Quem manda na minha terra sou euzis!Paisis, filhis, espiritis santis.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus.</p>',
     dueDate: '2022-06-29 22:00',
     scores: [
       {
@@ -141,6 +147,8 @@ const allAssignments = [
     id: '1234',
     type: 'assessment',
     title: 'Atividade 2 - Estudo de caso Sapiens Informática',
+    description:
+      '<p>Mussum Ipsum, cacilds vidis litro abertis. N&atilde;o sou faixa preta cumpadi, sou preto inteiris, inteiris.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.Sapien in monti palavris qui num significa nadis i pareci latim.Suco de cevadiss deixa as pessoas mais interessantis.</p><p>Suco de cevadiss, &eacute; um leite divinis, qui tem lupuliz, matis, aguis e fermentis.Interagi no m&eacute;, cursus quis, vehicula ac nisi.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Per aumento de cachacis, eu reclamis.</p><p>Quem manda na minha terra sou euzis!Paisis, filhis, espiritis santis.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus.</p>',
     dueDate: '2022-06-25 23:59',
     scores: [
       {
@@ -155,6 +163,8 @@ const allAssignments = [
     type: 'assessment',
     title:
       'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
+    description:
+      '<p>Mussum Ipsum, cacilds vidis litro abertis. N&atilde;o sou faixa preta cumpadi, sou preto inteiris, inteiris.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.Sapien in monti palavris qui num significa nadis i pareci latim.Suco de cevadiss deixa as pessoas mais interessantis.</p><p>Suco de cevadiss, &eacute; um leite divinis, qui tem lupuliz, matis, aguis e fermentis.Interagi no m&eacute;, cursus quis, vehicula ac nisi.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Per aumento de cachacis, eu reclamis.</p><p>Quem manda na minha terra sou euzis!Paisis, filhis, espiritis santis.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus.</p>',
     dueDate: '2022-07-23 10:00',
     scores: [
       {
@@ -168,6 +178,8 @@ const allAssignments = [
     id: '1717',
     type: 'project',
     title: 'Trabalho interdisciplinar',
+    description:
+      '<p>Mussum Ipsum, cacilds vidis litro abertis. N&atilde;o sou faixa preta cumpadi, sou preto inteiris, inteiris.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.Sapien in monti palavris qui num significa nadis i pareci latim.Suco de cevadiss deixa as pessoas mais interessantis.</p><p>Suco de cevadiss, &eacute; um leite divinis, qui tem lupuliz, matis, aguis e fermentis.Interagi no m&eacute;, cursus quis, vehicula ac nisi.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Per aumento de cachacis, eu reclamis.</p><p>Quem manda na minha terra sou euzis!Paisis, filhis, espiritis santis.A ordem dos tratores n&atilde;o altera o p&atilde;o duris.Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus.</p>',
     dueDate: '2022-08-20 23:59',
     scores: [
       {

src/services/user-service.js

@@ -38,8 +38,8 @@ const getUpcomingAssignmentsByClassId = classId =>
   sleep(3000).then(() => {
     console.log('Getting upcoming assignments by class id ' + classId);
     return {
-      data: allUpcomingAssignments.filter(
+      data: allUpcomingAssignments.filter(a =>
-        a => a.classrooms.filter(c => c.id === classId)[0]
+        a.classrooms.filter(c => c.id === classId)
       ),
     };
   });
@@ -52,8 +52,16 @@ const getAllAssignments = userId =>
     };
   });
 
-const getAssignmentsByClassId = classId =>
+const getAssignmentById = assignmentId =>
   sleep(4000).then(() => {
+    console.log('Getting assignment by id ' + assignmentId);
+    return {
+      data: allAssignments.filter(a => a.id === assignmentId)[0],
+    };
+  });
+
+const getAssignmentsByClassId = classId =>
+  sleep(3000).then(() => {
     console.log('Getting assignments by class id ' + classId);
     return {
       data: allAssignments.filter(a => a.classrooms[0].id === classId),
@@ -101,6 +109,7 @@ export {
   getClassrooms,
   getClassroomById,
   getAllAssignments,
+  getAssignmentById,
   getAssignmentsByClassId,
   getClassroomAnnouncementsById,
   getUpcomingAssignmentsByClassId,