Support multiple classes for a single assignment

src/components/AssignmentCard.js

@@ -12,15 +12,30 @@ import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
 
 function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
+  console.log(classrooms);
   switch (layoutType) {
     case 'desktop':
       return (
         <Card
           sx={{
+            position: 'relative',
             width: '100%',
             borderLeft: `5px solid ${classrooms[0].color}`,
           }}
         >
+          {classrooms.length > 1 &&
+            classrooms
+              .filter((_, i) => i > 0)
+              .map(c => (
+                <div
+                  style={{
+                    position: 'absolute',
+                    height: '100%',
+                    borderLeft: `5px solid  ${c.color}`,
+                    left: 0,
+                  }}
+                ></div>
+              ))}
           <CardActionArea
             sx={{
               display: 'flex',
@@ -52,7 +67,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
                   variant="p"
                   component="div"
                 >
-                  {classrooms.map(c => c.name).join(',')}
+                  {classrooms.map(c => c.name).join(', ')}
                 </Typography>
                 <Divider sx={{ marginTop: '10px' }} />
                 <Typography
@@ -67,7 +82,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
                 </Typography>
                 <Typography variant="p" component="div">
                   <strong>Valor: </strong>
-                  {scores.map(s => s.value).join(',')} pts
+                  {scores.map(s => s.value).join(', ')} pts
                 </Typography>
               </Stack>
             </CardContent>
@@ -85,10 +100,24 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
         >
           <CardActionArea
             sx={{
+              position: 'relative',
               display: 'flex',
               flexDirection: 'column',
             }}
           >
+            {classrooms.length > 1 &&
+              classrooms
+                .filter((_, i) => i > 0)
+                .map(c => (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      width: '100%',
+                      borderTop: `5px solid  ${c.color}`,
+                      top: 0,
+                    }}
+                  ></div>
+                ))}
             <CardContent sx={{ width: '100%' }}>
               <Tooltip title={title}>
                 <Typography
@@ -113,7 +142,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
                   variant="p"
                   component="div"
                 >
-                  {classrooms.map(c => c.name).join(',')}
+                  {classrooms.map(c => c.name).join(', ')}
                 </Typography>
                 <Divider sx={{ marginTop: '10px' }} />
                 <Typography
@@ -128,7 +157,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
                 </Typography>
                 <Typography variant="p" component="div">
                   <strong>Valor: </strong>
-                  {scores.map(s => s.value).join(',')} pts
+                  {scores.map(s => s.value).join(', ')} pts
                 </Typography>
               </Stack>
             </CardContent>

src/context/user.js

@@ -194,6 +194,49 @@ const getAssignments = userId =>
             },
           ],
         },
+        {
+          id: '1717',
+          title: 'Trabalho interdisciplinar',
+          dueDate: '2022-08-20 23:59',
+          scores: [
+            {
+              classroomId: '666',
+              value: 20,
+            },
+            {
+              classroomId: '321',
+              value: 30,
+            },
+          ],
+          classrooms: [
+            {
+              id: '666',
+              name: 'Banco de Dados II',
+              abbreviation: 'BDII',
+              color: '#FF7A00',
+              teachers: [
+                {
+                  name: 'Cristiane Norbiato Targa',
+                  avatar:
+                    'https://lh3.googleusercontent.com/a-/AOh14GhwNeQ0h2eKl2WXGuwyDzvLWtrvyrG2kJtZ7A1EBw=s75-c',
+                },
+              ],
+            },
+            {
+              id: '321',
+              name: 'Introdução à Ciência de Dados',
+              abbreviation: 'ICD',
+              color: '#006FF2',
+              teachers: [
+                {
+                  name: 'Carlos Alexandre Silva',
+                  avatar:
+                    'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
+                },
+              ],
+            },
+          ],
+        },
       ],
     };
   });

src/screens/Home/index.js

@@ -70,7 +70,13 @@ function Home() {
           <Grid sx={{ borderLeft: '4px solid #CFCFCF' }} item xs={4}>
             <h1>Atividades</h1>
             <h2>Atribuídas</h2>
-            <Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
+            <Stack
+              sx={{ paddingBottom: '100px' }}
+              alignItems="end"
+              flexWrap="wrap"
+              direction="row"
+              gap="30px"
+            >
               {assignments === null ? (
                 Array(6)
                   .fill()