Add assignment screen desktop layout witouth file upload

2022-09-16 19:06:54 -03:00 · 2022-09-16 19:06:54 -03:00 · aca64c62b8
commit aca64c62b8
parent 2f4bc2300d
7 changed files with 369 additions and 4 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/context/user.js
+++ b/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,
--- a/src/screens/Assignment/View.js
+++ b/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;
--- a/src/screens/Assignment/index.js
+++ b/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;
--- a/src/services/mocks.js
+++ b/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: [
      {
--- a/src/services/user-service.js
+++ b/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(
-        a => a.classrooms.filter(c => c.id === classId)[0]
+      data: allUpcomingAssignments.filter(a =>
+        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,