From 2a0c5d49a04d04b80919e1bf35180fdd3165accc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Wed, 3 Aug 2022 18:12:27 -0300
Subject: [PATCH] Extract announcements to separated container

---
 src/components/AnnouncementCard/index.js  |  33 ++++
 src/components/AnnouncementCard/styles.js |  26 +++
 src/screens/Classroom/View.js             | 228 ++++++++++++++++------
 src/screens/Classroom/index.js            |   1 +
 src/screens/Classroom/styles.js           |   2 +-
 src/services/mocks.js                     |  10 +-
 src/services/user-service.js              |   2 +-
 7 files changed, 238 insertions(+), 64 deletions(-)
 create mode 100644 src/components/AnnouncementCard/index.js
 create mode 100644 src/components/AnnouncementCard/styles.js

diff --git a/src/components/AnnouncementCard/index.js b/src/components/AnnouncementCard/index.js
new file mode 100644
index 0000000..de5fdf4
--- /dev/null
+++ b/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;
diff --git a/src/components/AnnouncementCard/styles.js b/src/components/AnnouncementCard/styles.js
new file mode 100644
index 0000000..5aff91b
--- /dev/null
+++ b/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 };
diff --git a/src/screens/Classroom/View.js b/src/screens/Classroom/View.js
index 5bd84e7..4c7b245 100644
--- a/src/screens/Classroom/View.js
+++ b/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,69 +22,181 @@ function View({
   announcements,
 }) {
   const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
-  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={t.name}
-                    alt={t.name}
-                    src={t.avatar}
-                    sx={avatar}
+
+  if (layoutType === 'desktop') {
+    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={t.name}
+                      alt={t.name}
+                      src={t.avatar}
+                      sx={avatar}
+                    />
+                  ))}
+                </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>
+              <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>
+        ) : (
+          <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}
                   />
                 ))}
-              </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>
-            <Tabs
-              value={selectedTabOption}
-              onChange={onSelectTabOption}
-              aria-label="Tabs para informações da disciplina"
-              variant="fullWidth"
-              sx={tabs}
+              </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"
             >
-              {TAB_OPTIONS.map(option => (
-                <Tab key={option.value} label={option.lable} />
-              ))}
-            </Tabs>
-          </Paper>
-        </Container>
-      )}
-      {announcements === null ? (
-        <h1>Loading...</h1>
-      ) : (
-        announcements.data.map(announcement => (
-          <Paper
+              <h1 style={title}>{classroom.name}</h1>
+              <Stack alignItems="center" direction="row" spacing={1}>
+                <AvatarGroup total={classroom.teachers.length}>
+                  {classroom.teachers.map(t => (
+                    <Avatar
+                      key={t.name}
+                      alt={t.name}
+                      src={t.avatar}
+                      sx={avatar}
+                    />
+                  ))}
+                </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>
+              <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' }}
-            key={announcement.id}
-            elevation={4}
-            variant="elevation"
           >
-            <Stack alignItems="center" direction="row" spacing={1}>
-              <Avatar
-                key={announcement.user.id}
-                alt={announcement.user.name}
-                src={announcement.user.avatar}
-              />
-              <Typography variant="body1">{announcement.user.name}</Typography>
+            <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>
-            {announcement.text}
-          </Paper>
-        ))
-      )}
-    </Container>
-  );
+          </Stack>
+        )}
+      </Container>
+    );
+  }
 }
 
 export default View;
diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js
index 669c49a..56ed32c 100644
--- a/src/screens/Classroom/index.js
+++ b/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}
     />
   );
 }
diff --git a/src/screens/Classroom/styles.js b/src/screens/Classroom/styles.js
index 5a15faf..c68b8c0 100644
--- a/src/screens/Classroom/styles.js
+++ b/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 => ({
diff --git a/src/services/mocks.js b/src/services/mocks.js
index bd75978..5d92767 100644
--- a/src/services/mocks.js
+++ b/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,
   },
 ];
 
diff --git a/src/services/user-service.js b/src/services/user-service.js
index 0710e39..f655877 100644
--- a/src/services/user-service.js
+++ b/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),
     };
   });