diff --git a/src/screens/Classroom/Header/index.js b/src/screens/Classroom/Header/index.js
index 9512bfc..134f5ac 100644
--- a/src/screens/Classroom/Header/index.js
+++ b/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 => (
))}
diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js
index 6c3bf7a..7b3a48e 100644
--- a/src/screens/Classroom/index.js
+++ b/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 (