Create AssignmentCard and some refactorings

src/components/AssignmentCard.js

@@ -0,0 +1,135 @@
+import {
+  Card,
+  CardContent,
+  Typography,
+  CardActionArea,
+  Stack,
+  Tooltip,
+  Divider,
+} from '@mui/material';
+
+function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
+  switch (layoutType) {
+    case 'desktop':
+      return (
+        <Card
+          sx={{
+            width: '100%',
+            borderLeft: `5px solid ${classrooms[0].color}`,
+          }}
+        >
+          <CardActionArea
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'start',
+            }}
+          >
+            <CardContent sx={{ width: '100%' }}>
+              <Tooltip title={title}>
+                <Typography
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    fontSize: '17px',
+                  }}
+                  gutterBottom
+                  variant="h6"
+                  component="div"
+                >
+                  {title}
+                </Typography>
+              </Tooltip>
+              <Stack sx={{ width: '100%' }}>
+                <Typography
+                  sx={{ fontWeight: 'bold' }}
+                  variant="p"
+                  component="div"
+                >
+                  {classrooms.map(c => c.name).join(',')}
+                </Typography>
+                <Divider sx={{ marginTop: '10px' }} />
+                <Typography
+                  sx={{ marginTop: '10px' }}
+                  variant="p"
+                  component="div"
+                >
+                  <strong>Data de entrega: </strong> {dueDate}
+                </Typography>
+                <Typography variant="p" component="div">
+                  <strong>Valor: </strong>
+                  {scores.map(s => s.value).join(',')} pts
+                </Typography>
+              </Stack>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      );
+
+    case 'mobile':
+      return (
+        <Card
+          sx={{
+            width: 390,
+            borderTop: `5px solid ${classrooms[0].color}`,
+          }}
+        >
+          <CardActionArea
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <CardContent sx={{ width: '100%' }}>
+              <Tooltip title={title}>
+                <Typography
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    fontSize: '17px',
+                  }}
+                  gutterBottom
+                  variant="h6"
+                  component="div"
+                >
+                  {title}
+                </Typography>
+              </Tooltip>
+              <Stack sx={{ width: '100%' }}>
+                <Typography
+                  sx={{ fontWeight: 'bold' }}
+                  variant="p"
+                  component="div"
+                >
+                  {classrooms.map(c => c.name).join(',')}
+                </Typography>
+                <Divider sx={{ marginTop: '10px' }} />
+                <Typography
+                  sx={{ marginTop: '10px' }}
+                  variant="p"
+                  component="div"
+                >
+                  <strong>Data de entrega: </strong> {dueDate}
+                </Typography>
+                <Typography variant="p" component="div">
+                  <strong>Valor: </strong>
+                  {scores.map(s => s.value).join(',')} pts
+                </Typography>
+              </Stack>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      );
+
+    default:
+      return null;
+  }
+}
+
+export default AssignmentCard;

src/components/ClassCard.js

@@ -14,12 +14,12 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
   switch (layoutType) {
     case 'desktop':
       return (
-        <Card sx={{ width: 390, height: 145 }}>
+        <Card sx={{ width: 390, height: 135 }}>
           <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
             <Container
               sx={{
                 backgroundColor: color,
-                width: '30%',
+                width: '35%',
                 height: '145px',
                 display: 'flex',
                 alignItems: 'center',
@@ -37,9 +37,10 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
                   display: '-webkit-box',
                   WebkitLineClamp: 2,
                   WebkitBoxOrient: 'vertical',
+                  fontSize: '17px',
                 }}
                 gutterBottom
-                variant="h5"
+                variant="h6"
                 component="div"
               >
                 {title}
@@ -64,7 +65,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
                       WebkitLineClamp: 2,
                       WebkitBoxOrient: 'vertical',
                     }}
-                    variant="body2"
+                    variant="body3"
                     color="text.secondary"
                   >
                     {teachers.map(t => t.name).join(', ')}
@@ -94,7 +95,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
               <h1>{abbreviation}</h1>
             </Container>
             <CardContent sx={{ width: '100%' }}>
-              <Typography gutterBottom variant="h5" component="div">
+              <Typography gutterBottom variant="h6" component="div">
                 {title}
               </Typography>
               <Stack alignItems="center" direction="row" spacing={1}>

src/context/user.js

@@ -9,6 +9,7 @@ const getClassrooms = userId =>
     return {
       data: [
         {
+          id: '321',
           name: 'Introdução à Ciência de Dados',
           abbreviation: 'ICD',
           color: '#006FF2',
@@ -21,6 +22,7 @@ const getClassrooms = userId =>
           ],
         },
         {
+          id: '123',
           name: 'Gestão de Projetos',
           abbreviation: 'GP',
           color: '#7900F2',
@@ -37,6 +39,7 @@ const getClassrooms = userId =>
           ],
         },
         {
+          id: '666',
           name: 'Banco de Dados II',
           abbreviation: 'BDII',
           color: '#FF7A00',
@@ -49,6 +52,7 @@ const getClassrooms = userId =>
           ],
         },
         {
+          id: '765',
           name: 'Contabilidade Básica',
           abbreviation: 'CB',
           color: '#BB0000',
@@ -60,6 +64,7 @@ const getClassrooms = userId =>
           ],
         },
         {
+          id: '333',
           name: 'Linguagens de Programação',
           abbreviation: 'LP',
           color: '#039200',
@@ -75,6 +80,124 @@ const getClassrooms = userId =>
     };
   });
 
+const getAssignments = userId =>
+  sleep(3000).then(() => {
+    console.log('userId: ' + userId);
+    return {
+      data: [
+        {
+          id: '5435',
+          title:
+            'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
+          dueDate: '2022-07-01',
+          scores: [
+            {
+              classroomId: '321',
+              value: 30,
+            },
+          ],
+          classrooms: [
+            {
+              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',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: '1234',
+          title: 'Trabalho NoSQL',
+          dueDate: '2022-06-29',
+          scores: [
+            {
+              classroomId: '666',
+              value: 35,
+            },
+          ],
+          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: '1234',
+          title: 'Atividade 2 - Estudo de caso Sapiens Informática',
+          dueDate: '2022-06-25',
+          scores: [
+            {
+              classroomId: '123',
+              value: 10,
+            },
+          ],
+          classrooms: [
+            {
+              id: '123',
+              name: 'Gestão de Projetos',
+              abbreviation: 'GP',
+              color: '#7900F2',
+              teachers: [
+                {
+                  name: 'Míriam Lúcia Barbosa',
+                  avatar:
+                    'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
+                },
+                {
+                  name: 'Alexandre Couto Cardoso',
+                  avatar: '/assets/alex.jpg',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: '3671',
+          title:
+            'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
+          dueDate: '2022-07-23',
+          scores: [
+            {
+              classroomId: '765',
+              value: 1,
+            },
+          ],
+          classrooms: [
+            {
+              id: '765',
+              name: 'Contabilidade Básica',
+              abbreviation: 'CB',
+              color: '#BB0000',
+              teachers: [
+                {
+                  name: 'Alexandre Couto Cardoso',
+                  avatar: '/assets/alex.jpg',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  });
+
 const UserContext = createContext();
 
 function UserProvider(props) {
@@ -95,17 +218,27 @@ function UserProvider(props) {
     return getClassrooms(user.id);
   };
 
-  return <UserContext.Provider value={{ state, fetchClassrooms }} {...props} />;
+  const fetchAssignments = () => {
+    return getAssignments(user.id);
+  };
+
+  return (
+    <UserContext.Provider
+      value={{ state, fetchClassrooms, fetchAssignments }}
+      {...props}
+    />
+  );
 }
 
 function useUser() {
-  const { state, fetchClassrooms } = useContext(UserContext);
+  const { state, fetchClassrooms, fetchAssignments } = useContext(UserContext);
   const isPending = state.status === 'pending';
 
   return {
     state,
     isPending,
     fetchClassrooms,
+    fetchAssignments,
   };
 }
 

src/screens/Home/index.js

@@ -4,11 +4,13 @@ import { useUser } from '../../context/user';
 
 import ClassCard from '../../components/ClassCard';
 import useLayoutType from '../../hooks/useLayoutType';
+import AssignmentCard from '../../components/AssignmentCard';
 
 function Home() {
   const layoutType = useLayoutType();
-  const { fetchClassrooms } = useUser();
+  const { fetchClassrooms, fetchAssignments } = useUser();
   const [classrooms, setClassrooms] = useState(null);
+  const [assignments, setAssignments] = useState(null);
 
   useEffect(() => {
     async function getClassrooms() {
@@ -18,6 +20,14 @@ function Home() {
     getClassrooms();
   }, [fetchClassrooms]);
 
+  useEffect(() => {
+    async function getAssignments() {
+      const result = await fetchAssignments();
+      setAssignments(result.data);
+    }
+    getAssignments();
+  }, [fetchAssignments]);
+
   switch (layoutType) {
     case 'desktop':
       return (
@@ -61,7 +71,7 @@ function Home() {
             <h1>Atividades</h1>
             <h2>Atribuídas</h2>
             <Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
-              {classrooms === null ? (
+              {assignments === null ? (
                 Array(6)
                   .fill()
                   .map((_, index) => (
@@ -72,19 +82,19 @@ function Home() {
                       height={145}
                     />
                   ))
-              ) : classrooms.length !== 0 ? (
+              ) : assignments.length !== 0 ? (
-                classrooms.map(classroom => (
+                assignments.map(assignment => (
-                  <ClassCard
+                  <AssignmentCard
-                    key={classroom.name}
+                    key={assignment.title}
-                    abbreviation={classroom.abbreviation}
+                    title={assignment.title}
-                    title={classroom.name}
+                    classrooms={assignment.classrooms}
-                    color={classroom.color}
+                    dueDate={assignment.dueDate}
-                    teachers={classroom.teachers}
+                    scores={assignment.scores}
                     layoutType={layoutType}
                   />
                 ))
               ) : (
-                <h1>Nenhuma sala de aula encontrada!</h1>
+                <h1>Nenhuma atividade encontrada!</h1>
               )}
             </Stack>
           </Grid>
@@ -147,7 +157,7 @@ function Home() {
             direction="row"
             gap="30px"
           >
-            {classrooms === null ? (
+            {assignments === null ? (
               Array(6)
                 .fill()
                 .map((_, index) => (
@@ -158,14 +168,14 @@ function Home() {
                     height={245}
                   />
                 ))
-            ) : classrooms.length !== 0 ? (
+            ) : assignments.length !== 0 ? (
-              classrooms.map(classroom => (
+              assignments.map(assignment => (
-                <ClassCard
+                <AssignmentCard
-                  key={classroom.name}
+                  key={assignment.title}
-                  abbreviation={classroom.abbreviation}
+                  title={assignment.title}
-                  title={classroom.name}
+                  classrooms={assignment.classrooms}
-                  color={classroom.color}
+                  dueDate={assignment.dueDate}
-                  teachers={classroom.teachers}
+                  scores={assignment.scores}
                   layoutType={layoutType}
                 />
               ))