Refactor tabOptions and data fetch effect for tabs

src/screens/Classroom/Header/index.js

@@ -45,7 +45,7 @@ function Header({
           variant="fullWidth"
           sx={tabs}
         >
-          {TAB_OPTIONS.map(option => (
+          {Object.values(TAB_OPTIONS).map(option => (
             <Tab key={option.value} label={option.lable} />
           ))}
         </Tabs>

src/screens/Classroom/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useUser } from '../../context/user';
 import useLayoutType from '../../hooks/useLayoutType';
@@ -15,15 +15,40 @@ function Classroom() {
   } = useUser();
   const [classroom, setClassroom] = useState(null);
   const [selectedTabOption, setSelectedTabOption] = useState(
-    TAB_OPTIONS.map(o => o.value).indexOf('announcements')
+    TAB_OPTIONS.announcements.value
   );
 
-  const [tabData, setTabData] = useState(null);
+  const [tabData, setTabData] = useState(TAB_OPTIONS.announcements);
 
   const onSelectTabOption = (_, value) => {
     setSelectedTabOption(value);
   };
 
+  const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
+    const announcements = await fetchClassroomAnnouncements(params.id);
+    const upcomingAssignments = await fetchUpcomingAssignments(params.id);
+
+    setTabData({
+      tab: 'announcements',
+      announcements: [...announcements.data],
+      upcomingAssignments: [...upcomingAssignments.data],
+    });
+  }, [fetchClassroomAnnouncements, fetchUpcomingAssignments, params.id]);
+
+  useEffect(() => {
+    async function getSelectedTabData() {
+      setTabData(null);
+      if (selectedTabOption === 0) {
+        fetchAndPopulateAnnouncementsTabData();
+      } else if (selectedTabOption === 1) {
+        console.log('Fetch assignments');
+      } else if (selectedTabOption === 2) {
+        console.log('Fetch people');
+      }
+    }
+    getSelectedTabData();
+  }, [selectedTabOption, params, fetchAndPopulateAnnouncementsTabData]);
+
   useEffect(() => {
     async function getClassroomById(classId) {
       document.title = 'Carregando...';
@@ -41,32 +66,6 @@ function Classroom() {
     updateDocumentTitle();
   }, [fetchClassroomById, params, classroom]);
 
-  useEffect(() => {
-    async function getSelectedTabData() {
-      setTabData(null);
-      if (selectedTabOption === 0) {
-        const announcements = await fetchClassroomAnnouncements(params.id);
-        const upcomingAssignments = await fetchUpcomingAssignments(params.id);
-
-        setTabData({
-          tab: TAB_OPTIONS[selectedTabOption].value,
-          announcements: [...announcements.data],
-          upcomingAssignments: [...upcomingAssignments.data],
-        });
-      } else if (selectedTabOption === 1) {
-        console.log('Fetch assignments');
-      } else if (selectedTabOption === 2) {
-        console.log('Fetch people');
-      }
-    }
-    getSelectedTabData();
-  }, [
-    fetchClassroomAnnouncements,
-    fetchUpcomingAssignments,
-    selectedTabOption,
-    params,
-  ]);
-
   return (
     <View
       layoutType={layoutType}

src/screens/Classroom/tabOptions.js

@@ -1,16 +1,16 @@
-const TAB_OPTIONS = [
+const TAB_OPTIONS = {
-  {
+  announcements: {
-    value: 'announcements',
+    value: 0,
     lable: 'Comunicados',
   },
-  {
+  assignments: {
-    value: 'assignments',
+    value: 1,
     lable: 'Atividades',
   },
-  {
+  people: {
-    value: 'people',
+    value: 2,
     lable: 'Pessoas',
   },
-];
+};
 
 export { TAB_OPTIONS };