Extract announcements to separated container

src/components/AnnouncementCard/index.js

@@ -0,0 +1,33 @@
+import { Avatar, Card, Stack, Typography } from '@mui/material';
+import { Container } from '@mui/system';
+import dayjs from 'dayjs';
+import { styles } from './styles';
+
+function AnnouncementCard({ announcement }) {
+  const { cardContainer, typographyName, typographyCreatedAt, textContainer } =
+    styles;
+  return (
+    <Card sx={cardContainer} elevation={4} variant="elevation">
+      <Stack alignItems="center" direction="row" spacing={1}>
+        <Avatar
+          key={announcement.user.id}
+          alt={announcement.user.name}
+          src={announcement.user.avatar}
+        />
+        <Stack>
+          <Typography sx={typographyName} variant="body1">
+            {announcement.user.name}
+          </Typography>
+          <Typography sx={typographyCreatedAt} variant="body1">
+            {dayjs(announcement.createdAt).format('DD [de] MMM [de] YYYY')}
+          </Typography>
+        </Stack>
+      </Stack>
+      <Container sx={textContainer} disableGutters>
+        {announcement.text}
+      </Container>
+    </Card>
+  );
+}
+
+export default AnnouncementCard;

src/components/AnnouncementCard/styles.js

@@ -0,0 +1,26 @@
+const cardContainer = {
+  width: '100%',
+  padding: '20px',
+};
+
+const typographyName = {
+  fontWeight: 400,
+};
+
+const typographyCreatedAt = {
+  fontWeight: 400,
+  fontSize: '12px',
+};
+
+const textContainer = {
+  marginTop: '20px',
+};
+
+const styles = {
+  cardContainer,
+  typographyName,
+  typographyCreatedAt,
+  textContainer,
+};
+
+export { styles };

src/screens/Classroom/View.js

@@ -2,6 +2,7 @@ import {
   Avatar,
   AvatarGroup,
   Container,
+  Grid,
   Paper,
   Stack,
   Tab,
@@ -11,6 +12,7 @@ import {
 } from '@mui/material';
 import { TAB_OPTIONS } from './tabOptions';
 import styles from './styles';
+import AnnouncementCard from '../../components/AnnouncementCard';
 
 function View({
   layoutType,
@@ -20,13 +22,19 @@ function View({
   announcements,
 }) {
   const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
+
+  if (layoutType === 'desktop') {
     return (
       <Container disableGutters sx={container}>
         {classroom === null ? (
           <h1>Loading...</h1>
         ) : (
           <Container disableGutters>
-          <Paper sx={paper(classroom.color)} elevation={4} variant="elevation">
+            <Paper
+              sx={paper(classroom.color)}
+              elevation={4}
+              variant="elevation"
+            >
               <h1 style={title}>{classroom.name}</h1>
               <Stack alignItems="center" direction="row" spacing={1}>
                 <AvatarGroup total={classroom.teachers.length}>
@@ -40,7 +48,11 @@ function View({
                   ))}
                 </AvatarGroup>
                 <Tooltip title={classroom.teachers.map(t => t.name).join(', ')}>
-                <Typography sx={tooltip} variant="body3" color="text.secondary">
+                  <Typography
+                    sx={tooltip}
+                    variant="body3"
+                    color="text.secondary"
+                  >
                     {classroom.teachers.map(t => t.name).join(', ')}
                   </Typography>
                 </Tooltip>
@@ -62,27 +74,129 @@ function View({
         {announcements === null ? (
           <h1>Loading...</h1>
         ) : (
-        announcements.data.map(announcement => (
-          <Paper
-            sx={{ marginTop: '30px' }}
+          <Grid sx={container} container spacing={2}>
+            <Grid item xs={4}>
+              <Container
+                disableGutters
+                sx={{
+                  backgroundColor: 'tomato',
+                  height: '100vh',
+                  textAlign: 'center',
+                }}
+              >
+                Left
+              </Container>
+            </Grid>
+            <Grid item xs={8}>
+              <Stack
+                sx={{ width: '100%' }}
+                alignItems="center"
+                justifyContent="center"
+                flexWrap="wrap"
+                direction="row"
+                gap="30px"
+              >
+                {announcements.data.map(announcement => (
+                  <AnnouncementCard
                     key={announcement.id}
+                    announcement={announcement}
+                  />
+                ))}
+              </Stack>
+            </Grid>
+          </Grid>
+        )}
+      </Container>
+    );
+  } else if (layoutType === 'mobile') {
+    return (
+      <Container disableGutters sx={container}>
+        {classroom === null ? (
+          <h1>Loading...</h1>
+        ) : (
+          <Container disableGutters>
+            <Paper
+              sx={paper(classroom.color)}
               elevation={4}
               variant="elevation"
             >
+              <h1 style={title}>{classroom.name}</h1>
               <Stack alignItems="center" direction="row" spacing={1}>
+                <AvatarGroup total={classroom.teachers.length}>
+                  {classroom.teachers.map(t => (
                     <Avatar
-                key={announcement.user.id}
-                alt={announcement.user.name}
-                src={announcement.user.avatar}
+                      key={t.name}
+                      alt={t.name}
+                      src={t.avatar}
+                      sx={avatar}
                     />
-              <Typography variant="body1">{announcement.user.name}</Typography>
+                  ))}
+                </AvatarGroup>
+                <Tooltip title={classroom.teachers.map(t => t.name).join(', ')}>
+                  <Typography
+                    sx={tooltip}
+                    variant="body3"
+                    color="text.secondary"
+                  >
+                    {classroom.teachers.map(t => t.name).join(', ')}
+                  </Typography>
+                </Tooltip>
               </Stack>
-            {announcement.text}
+              <Tabs
+                value={selectedTabOption}
+                onChange={onSelectTabOption}
+                aria-label="Tabs para informações da disciplina"
+                variant="fullWidth"
+                sx={tabs}
+              >
+                {TAB_OPTIONS.map(option => (
+                  <Tab key={option.value} label={option.lable} />
+                ))}
+              </Tabs>
             </Paper>
-        ))
+          </Container>
+        )}
+        {announcements === null ? (
+          <h1>Loading...</h1>
+        ) : (
+          <Stack
+            alignItems="center"
+            justifyContent="center"
+            flexWrap="wrap"
+            direction="row"
+            gap="30px"
+            sx={{ marginTop: '30px' }}
+          >
+            <Container
+              disableGutters
+              sx={{
+                backgroundColor: 'tomato',
+                height: '400px',
+                textAlign: 'center',
+              }}
+            >
+              Left
+            </Container>
+            <Stack
+              sx={{ width: '100%' }}
+              alignItems="center"
+              justifyContent="center"
+              flexWrap="wrap"
+              direction="row"
+              gap="30px"
+            >
+              {announcements.data.map(announcement => (
+                <AnnouncementCard
+                  key={announcement.id}
+                  announcement={announcement}
+                />
+              ))}
+            </Stack>
+          </Stack>
         )}
       </Container>
     );
   }
+}
 
 export default View;

src/screens/Classroom/index.js

@@ -64,6 +64,7 @@ function Classroom() {
       announcements={
         tabData && tabData.tab === 'announcements' ? tabData : null
       }
+      people={tabData && tabData.tab === 'people' ? tabData : null}
     />
   );
 }

src/screens/Classroom/styles.js

@@ -54,10 +54,10 @@ const mobileTitle = {
 
 const mobileContainer = {
   width: '90%',
-  height: '100vh',
   backgroundColor: '#red',
   padding: 0,
   marginTop: '30px',
+  paddingBottom: '100px',
 };
 
 const mobilePaper = classColor => ({

src/services/mocks.js

@@ -147,9 +147,8 @@ const allAssignments = [
 const allClassroomAnnouncements = [
   {
     id: '850006245121695744',
-    classId: '321',
-    createdAt: 'Thu Apr 06 15:24:15 +0000 2017',
-    text: '1/ Today we\u2019re sharing our vision for the future of the Twitter API platform!\nhttps://t.co/XweGngmxlP',
+    createdAt: '2022-08-01T16:00:00.000Z',
+    text: 'Mussum Ipsum, cacilds vidis litro abertis. Viva Forevis aptent taciti sociosqu ad litora torquent.Quem num gosta di mim que vai caçá sua turmis!Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi.Mais vale um bebadis conhecidiss, que um alcoolatra anonimis.\n\n Cevadis im ampola pa arma uma pindureta.Paisis, filhis, espiritis santis.Quem manda na minha terra sou euzis!Per aumento de cachacis, eu reclamis.',
     user: {
       id: '2342',
       name: 'Carlos Alexandre Silva',
@@ -169,11 +168,11 @@ const allClassroomAnnouncements = [
         },
       ],
     },
+    attachments: null,
   },
   {
     id: '39450273466121695744',
-    classId: '321',
-    createdAt: 'Thu Apr 06 15:24:15 +0000 2017',
+    createdAt: '2022-05-26T16:00:00.000Z',
     text: 'Mussum Ipsum, cacilds vidis litro abertis. Quem manda na minha terra sou euzis!Viva Forevis aptent taciti sociosqu ad litora torquent.Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.Quem num gosta di mim que vai caçá sua turmis!',
     user: {
       id: '2342',
@@ -194,6 +193,7 @@ const allClassroomAnnouncements = [
         },
       ],
     },
+    attachments: null,
   },
 ];
 

src/services/user-service.js

@@ -28,7 +28,7 @@ const getClassroomAnnouncementsById = classId =>
   sleep(3000).then(() => {
     console.log('classId ' + classId);
     return {
-      data: allClassroomAnnouncements.filter(c => c.classId === classId),
+      data: allClassroomAnnouncements.filter(c => c.classroom.id === classId),
     };
   });