Add Publish Announcement Card

src/components/PublishAnnouncementCard/index.js

@@ -0,0 +1,64 @@
+import {
+  Avatar,
+  Button,
+  Card,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useState } from 'react';
+import styles from './styles';
+
+function PublishAnnouncementCard({ layoutType, user, value, onChange }) {
+  const [isComposing, setIsComposing] = useState(false);
+  const { card, publishAnnouncement } = styles[layoutType];
+
+  return (
+    <Card sx={card} elevation={4} variant="elevation">
+      {isComposing ? (
+        <Stack
+          sx={publishAnnouncement}
+          alignItems="end"
+          direction="column"
+          spacing={2}
+        >
+          <TextField
+            value={value}
+            onChange={onChange}
+            sx={{ width: '100%' }}
+            id="outlined-multiline-static"
+            label="Escreva um comunicado para sua turma"
+            autoFocus
+            multiline
+            minRows={4}
+          />
+
+          <Stack direction="row" spacing={4}>
+            <Button onClick={() => setIsComposing(false)} variant="text">
+              Cancelar
+            </Button>
+
+            <Button onClick={() => console.log('clicked')} variant="contained">
+              Postar
+            </Button>
+          </Stack>
+        </Stack>
+      ) : (
+        <Stack
+          sx={publishAnnouncement}
+          alignItems="center"
+          direction="row"
+          spacing={2}
+          onClick={() => setIsComposing(true)}
+        >
+          <Avatar alt={user.firstName} src={user.avatar} />
+          <Typography id="outlined-multiline-static" sx={{ width: '100%' }}>
+            Escreva um comunicado para sua turma
+          </Typography>
+        </Stack>
+      )}
+    </Card>
+  );
+}
+
+export default PublishAnnouncementCard;

src/components/PublishAnnouncementCard/styles.js

@@ -0,0 +1,42 @@
+// ========== Desktop ==========
+const desktopCard = {
+  width: '100%',
+  padding: '20px',
+};
+
+const desktopPublishAnnouncement = {
+  cursor: 'pointer',
+  ':hover': {
+    color: '#32A041',
+  },
+};
+
+const desktop = {
+  publishAnnouncement: desktopPublishAnnouncement,
+  card: desktopCard,
+};
+
+// ========== Mobile ==========
+const mobilePublishAnnouncement = {
+  cursor: 'pointer',
+  ':hover': {
+    color: '#32A041',
+  },
+};
+
+const mobileCard = {};
+
+const mobile = {
+  publishAnnouncement: mobilePublishAnnouncement,
+  card: mobileCard,
+};
+
+// ========== Unset ==========
+
+const unset = {
+  publishAnnouncement: null,
+  card: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;

src/screens/professor/Classroom/AnnouncementsTab/index.js

@@ -3,7 +3,6 @@ import {
   Card,
   Container,
   Grid,
-  Link,
   Skeleton,
   Stack,
   Typography,
@@ -13,8 +12,16 @@ import AnnouncementCard from '../../../../components/AnnouncementCard';
 import styles from './styles';
 import jitsiLogo from '../../../../assets/jitsi.svg';
 import { createArrayFrom1ToN } from '../../../../utils/createArrayFrom1ToN';
+import PublishAnnouncementCard from '../../../../components/PublishAnnouncementCard';
+import { useState } from 'react';
 
-function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
+function AnnouncementsTab({
+  layoutType,
+  announcementsTabData,
+  classroom,
+  user,
+}) {
+  const [composingTextValue, setComposingTextValue] = useState('');
   const { container, emptyStateContainer } = styles[layoutType];
 
   const layoutResolver = (state, layoutType) => {
@@ -112,6 +119,12 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
                   direction="row"
                   gap="30px"
                 >
+                  <PublishAnnouncementCard
+                    layoutType={layoutType}
+                    user={user}
+                    value={composingTextValue}
+                    onChange={e => setComposingTextValue(e.target.value)}
+                  />
                   {announcementsTabData.announcements.length !== 0 ? (
                     announcementsTabData.announcements.map(announcement => (
                       <AnnouncementCard
@@ -234,6 +247,12 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
                 direction="row"
                 gap="30px"
               >
+                <PublishAnnouncementCard
+                  layoutType={layoutType}
+                  user={user}
+                  value={composingTextValue}
+                  onChange={e => setComposingTextValue(e.target.value)}
+                />
                 {announcementsTabData.announcements.length !== 0 ? (
                   announcementsTabData.announcements.map(announcement => (
                     <AnnouncementCard

src/screens/professor/Classroom/AnnouncementsTab/styles.js

@@ -42,6 +42,7 @@ const mobile = {
 // ========== Unset ==========
 const unset = {
   container: null,
+  emptyStateContainer: null,
 };
 
 const styles = { desktop, mobile, unset };

src/screens/professor/Classroom/View.js

@@ -15,6 +15,7 @@ function View({
   assignmentsTabData,
   peopleTabData,
   gradesTabData,
+  user,
   isLoading,
 }) {
   const { container } = styles[layoutType];
@@ -31,6 +32,7 @@ function View({
         layoutType={layoutType}
         announcementsTabData={announcementsTabData}
         classroom={classroom && classroom}
+        user={user && user}
       />
       <AssignmentsTab
         layoutType={layoutType}

src/screens/professor/Classroom/index.js

@@ -8,7 +8,7 @@ import View from './View';
 function Classroom() {
   const params = useParams();
   const layoutType = useLayoutType();
-  const { userService } = useUser();
+  const { userService, state } = useUser();
   const [classroom, setClassroom] = useState(null);
   const [tabData, setTabData] = useState(null);
 
@@ -126,6 +126,7 @@ function Classroom() {
       gradesTabData={
         tabData && tabData.tab === 'grades' ? tabData : { state: 'gone' }
       }
+      user={state && state.user}
       isLoading={tabData && tabData.state === 'loading'}
     />
   );

src/utils/mocks/responses.js

@@ -674,10 +674,11 @@ const professorUser = {
   email: 'carlos.junior@ifmg.edu.br',
   password: '#carlos1234', // TODO: Remove this!
   firstName: 'Carlos',
-  lastName: 'Severiano',
+  lastName: 'Alexandre Silva',
   token: 'xkhfb9458hnsdfsi9q8345bsdf9b834yr',
   phone: '31111111111',
-  avatar: 'https://i.pravatar.cc/300?img=61',
+  avatar:
+    'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
   course: 0,
   termsAgreed: true,
   year: 2018,