1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
import { useCallback, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useUser } from '../../../context/user';
import useLayoutType from '../../../hooks/useLayoutType';
import { TAB_OPTIONS } from './tabOptions';
import View from './View';
function Classroom() {
const params = useParams();
const layoutType = useLayoutType();
const { userService } = useUser();
const [classroom, setClassroom] = useState(null);
const [tabData, setTabData] = useState(null);
const [selectedTabOption, setSelectedTabOption] = useState(
TAB_OPTIONS.announcements.value
);
const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
setTabData({ tab: 'announcements', state: 'loading' });
const announcements = await userService.fetchClassroomAnnouncements(
params.id
);
const upcomingAssignments =
await userService.fetchUpcomingAssignmentsByClassId(params.id);
setTabData({
tab: 'announcements',
state: 'idle',
announcements: [...announcements.data],
upcomingAssignments: [...upcomingAssignments.data],
});
}, [userService, params.id]);
const fetchAndPopulateAssignmentsTabData = useCallback(async () => {
setTabData({ tab: 'assignments', state: 'loading' });
const assignments = await userService.fetchAssignmentsByClassId(params.id);
setTabData({
tab: 'assignments',
state: 'idle',
assignments: [...assignments.data],
});
}, [userService, params.id]);
const fetchAndPopulatePeopleTabData = useCallback(async () => {
setTabData({ tab: 'people', state: 'loading' });
const people = await userService.fetchPeopleByClassId(params.id);
setTabData({
tab: 'people',
state: 'idle',
people: [...people.data],
});
}, [userService, params.id]);
useEffect(() => {
async function getSelectedTabData() {
switch (selectedTabOption) {
case TAB_OPTIONS.announcements.value:
fetchAndPopulateAnnouncementsTabData();
break;
case TAB_OPTIONS.assignments.value:
fetchAndPopulateAssignmentsTabData();
break;
case TAB_OPTIONS.people.value:
fetchAndPopulatePeopleTabData();
break;
default:
console.log('Invalid tab option');
}
}
getSelectedTabData();
}, [
selectedTabOption,
params,
fetchAndPopulateAnnouncementsTabData,
fetchAndPopulateAssignmentsTabData,
fetchAndPopulatePeopleTabData,
]);
useEffect(() => {
async function getClassroomById(classId) {
document.title = 'Carregando...';
const result = await userService.fetchClassroomById(classId);
setClassroom(result.data);
}
function updateDocumentTitle() {
if (classroom !== null) {
document.title = classroom.name;
}
}
getClassroomById(params.id);
updateDocumentTitle();
}, [userService, userService.fetchClassroomById, params, classroom]);
return (
<View
layoutType={layoutType}
classroom={classroom}
selectedTabOption={selectedTabOption}
onSelectTabOption={(_, value) => setSelectedTabOption(value)}
announcementsTabData={
tabData && tabData.tab === 'announcements' ? tabData : { state: 'gone' }
}
assignmentsTabData={
tabData && tabData.tab === 'assignments' ? tabData : { state: 'gone' }
}
peopleTabData={
tabData && tabData.tab === 'people' ? tabData : { state: 'gone' }
}
isLoading={tabData && tabData.state === 'loading'}
/>
);
}
export default Classroom;
|
