Handle tab data fetching for announcements

src/screens/Classroom/View.js

@@ -12,7 +12,13 @@ import {
 import { TAB_OPTIONS } from './tabOptions';
 import styles from './styles';
 
-function View({ layoutType, classroom, selectedTabOption, onSelectTabOption }) {
+function View({
+  layoutType,
+  classroom,
+  selectedTabOption,
+  onSelectTabOption,
+  announcements,
+}) {
   const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
   return (
     <Container disableGutters sx={container}>
@@ -53,6 +59,28 @@ function View({ layoutType, classroom, selectedTabOption, onSelectTabOption }) {
           </Paper>
         </Container>
       )}
+      {announcements === null ? (
+        <h1>Loading...</h1>
+      ) : (
+        announcements.data.map(announcement => (
+          <Paper
+            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>
+            </Stack>
+            {announcement.text}
+          </Paper>
+        ))
+      )}
     </Container>
   );
 }

src/screens/Classroom/index.js

@@ -14,7 +14,7 @@ function Classroom() {
     TAB_OPTIONS.map(o => o.value).indexOf('announcements')
   );
 
-  const [announcements, setAnnouncements] = useState(null);
+  const [tabData, setTabData] = useState(null);
 
   const onSelectTabOption = (_, value) => {
     setSelectedTabOption(value);
@@ -38,10 +38,14 @@ function Classroom() {
 
   useEffect(() => {
     async function getSelectedTabData() {
+      setTabData(null);
       if (selectedTabOption === 0) {
         console.log('Fetch announcements');
         const result = await fetchClassroomAnnouncements(params.id);
-        setAnnouncements(result.data);
+        setTabData({
+          tab: TAB_OPTIONS[selectedTabOption].value,
+          data: [...result.data],
+        });
       } else if (selectedTabOption === 1) {
         console.log('Fetch assignments');
       } else if (selectedTabOption === 2) {
@@ -57,6 +61,9 @@ function Classroom() {
       classroom={classroom}
       selectedTabOption={selectedTabOption}
       onSelectTabOption={onSelectTabOption}
+      announcements={
+        tabData && tabData.tab === 'announcements' ? tabData : null
+      }
     />
   );
 }