Create list of classrooms for home page

src/components/ClassCard.js

@@ -0,0 +1,54 @@
+import {
+  Card,
+  CardContent,
+  Typography,
+  CardActionArea,
+  Container,
+  Avatar,
+  Stack,
+} from '@mui/material';
+
+function ClassCard({ abbreviation, title, teachers }) {
+  return (
+    <Card sx={{ width: 420 }}>
+      <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
+        <Container
+          sx={{
+            backgroundColor: 'tomato',
+            width: '140px',
+            height: '145px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <h1>{abbreviation}</h1>
+        </Container>
+        <CardContent sx={{ width: '280px' }}>
+          <Typography gutterBottom variant="h5" component="div">
+            {title}
+          </Typography>
+          {teachers.map(teacher => (
+            <Stack
+              key={teacher.name}
+              alignItems="center"
+              direction="row"
+              spacing={1}
+            >
+              <Avatar
+                alt={teacher.name}
+                src={teacher.avatar}
+                sx={{ width: 30, height: 30 }}
+              />
+              <Typography variant="body2" color="text.secondary">
+                {teacher.name}
+              </Typography>
+            </Stack>
+          ))}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}
+
+export default ClassCard;

src/context/user.js

@@ -11,27 +11,55 @@ const getClassrooms = userId =>
         {
           name: 'Introdução à Ciência de Dados',
           abbreviation: 'ICD',
-          teacher: 'Carlos Alexandre Silva',
+          teachers: [
+            {
+              name: 'Carlos Alexandre Silva',
+              avatar:
+                'https://lh3.googleusercontent.com/a-/AOh14GgmBInEbkv1D4FuLyz64phoyOfI4Y8kql8LYVy0_w=s75-c',
+            },
+          ],
         },
         {
           name: 'Gestão de Projetos',
           abbreviation: 'GP',
-          teacher: 'Míriam Lúcia Barbosa',
+          teachers: [
+            {
+              name: 'Míriam Lúcia Barbosa',
+              avatar: '/assets/miriam.jpg',
+            },
+          ],
         },
         {
           name: 'Banco de Dados II',
           abbreviation: 'BDII',
-          teacher: 'Cristiane Norbiato Targa',
+          teachers: [
+            {
+              name: 'Cristiane Norbiato Targa',
+              avatar:
+                'https://lh3.googleusercontent.com/a-/AOh14GhwNeQ0h2eKl2WXGuwyDzvLWtrvyrG2kJtZ7A1EBw=s75-c',
+            },
+          ],
         },
         {
           name: 'Contabilidade Básica',
           abbreviation: 'CB',
-          teacher: 'Alexandre Couto Cardoso',
+          teachers: [
+            {
+              name: 'Alexandre Couto Cardoso',
+              avatar: '/assets/alex.jpg',
+            },
+          ],
         },
         {
           name: 'Linguagens de Programação',
           abbreviation: 'LP',
-          teacher: 'Gabriel Felipe Cândido Novy',
+          teachers: [
+            {
+              name: 'Gabriel Felipe Cândido Novy',
+              avatar:
+                'https://lh3.googleusercontent.com/a-/AOh14GgvfrD--cl25V_3UOAR93sN_jKdYNJ9PXhUH2zXhQ=s75-c',
+            },
+          ],
         },
       ],
     };
@@ -45,7 +73,6 @@ function UserProvider(props) {
   const [state, setState] = useState({
     status: 'idle',
     user: null,
-    classrooms: [],
     error: null,
     pathname: '',
   });
@@ -54,30 +81,21 @@ function UserProvider(props) {
     setState({ user, pathname });
   }, [user, pathname]);
 
-  const classrooms = () => {
-    setState({ ...state, status: 'pending' });
-    getClassrooms(user.id).then(data =>
-      setState({
-        status: 'success',
-        user,
-        classrooms: data.data,
-        error: null,
-        pathname,
-      })
-    );
+  const fetchClassrooms = () => {
+    return getClassrooms(user.id);
   };
 
-  return <UserContext.Provider value={{ state, classrooms }} {...props} />;
+  return <UserContext.Provider value={{ state, fetchClassrooms }} {...props} />;
 }
 
 function useUser() {
-  const { state, classrooms } = useContext(UserContext);
+  const { state, fetchClassrooms } = useContext(UserContext);
   const isPending = state.status === 'pending';
 
   return {
     state,
     isPending,
-    classrooms,
+    fetchClassrooms,
   };
 }
 

src/screens/Home/index.js

@@ -1,14 +1,63 @@
+import { useEffect, useState } from 'react';
+import { CircularProgress, Grid, Stack } from '@mui/material';
 import { useUser } from '../../context/user';
 
+import ClassCard from '../../components/ClassCard';
+
 function Home() {
-  const { isPending, classrooms } = useUser();
+  const { fetchClassrooms } = useUser();
+  const [classrooms, setClassrooms] = useState(null);
+
+  useEffect(() => {
+    async function getClassrooms() {
+      const result = await fetchClassrooms();
+      setClassrooms(result.data);
+    }
+    getClassrooms();
+  }, [fetchClassrooms]);
 
   return (
-    <div>
-      <h2>Página inicial</h2>
-      <button onClick={classrooms}>Get classrooms</button>
-      {isPending && <h1>Loading...</h1>}
-    </div>
+    <Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
+      <Grid sx={{}} item xs={8}>
+        <h1>Turmas</h1>
+        <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
+          {classrooms === null ? (
+            <CircularProgress sx={{ margin: '0 auto' }} thickness={5} />
+          ) : classrooms.length !== 0 ? (
+            classrooms.map(classroom => (
+              <ClassCard
+                key={classroom.name}
+                abbreviation={classroom.abbreviation}
+                title={classroom.name}
+                teachers={classroom.teachers}
+              />
+            ))
+          ) : (
+            <h1>Nenhuma sala de aula encontrada!</h1>
+          )}
+        </Stack>
+      </Grid>
+      <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">
+          {classrooms === null ? (
+            <CircularProgress sx={{ margin: '0 auto' }} thickness={5} />
+          ) : classrooms.length !== 0 ? (
+            classrooms.map(classroom => (
+              <ClassCard
+                key={classroom.name}
+                abbreviation={classroom.abbreviation}
+                title={classroom.name}
+                teachers={classroom.teachers}
+              />
+            ))
+          ) : (
+            <h1>Nenhuma sala de aula encontrada!</h1>
+          )}
+        </Stack>
+      </Grid>
+    </Grid>
   );
 }