diff --git a/src/context/user.js b/src/context/user.js index b168ba7..bc0ea65 100644 --- a/src/context/user.js +++ b/src/context/user.js @@ -2,12 +2,13 @@ import { createContext, useContext, useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { useAuthState } from './auth'; import { - getAssignments, + getAllAssignments, + getAssignmentsByClassId, getClassroomAnnouncementsById, getClassroomById, getClassrooms, getFaq, - getUpcomingAssignmentsById, + getUpcomingAssignmentsByClassId, } from '../services/user-service'; const UserContext = createContext(); @@ -27,7 +28,9 @@ function UserProvider(props) { const fetchClassrooms = () => getClassrooms(user.id); - const fetchAssignments = () => getAssignments(user.id); + const fetchAllAssignments = () => getAllAssignments(user.id); + + const fetchAssignmentsByClassId = classId => getAssignmentsByClassId(classId); const fetchClassroomById = classId => getClassroomById(classId); @@ -36,19 +39,20 @@ function UserProvider(props) { const fetchClassroomAnnouncements = classId => getClassroomAnnouncementsById(classId); - const fetchUpcomingAssignments = classId => - getUpcomingAssignmentsById(classId); + const fetchUpcomingAssignmentsByClassId = classId => + getUpcomingAssignmentsByClassId(classId); return ( @@ -59,21 +63,23 @@ function useUser() { const { state, fetchClassrooms, - fetchAssignments, + fetchAllAssignments, + fetchAssignmentsByClassId, fetchClassroomById, fetchFAQ, fetchClassroomAnnouncements, - fetchUpcomingAssignments, + fetchUpcomingAssignmentsByClassId, } = useContext(UserContext); return { state, fetchClassrooms, - fetchAssignments, + fetchAllAssignments, + fetchAssignmentsByClassId, fetchClassroomById, fetchFAQ, fetchClassroomAnnouncements, - fetchUpcomingAssignments, + fetchUpcomingAssignmentsByClassId, }; } diff --git a/src/screens/Classroom/AnnouncementsTab/index.js b/src/screens/Classroom/AnnouncementsTab/index.js index 582ec4f..358576e 100644 --- a/src/screens/Classroom/AnnouncementsTab/index.js +++ b/src/screens/Classroom/AnnouncementsTab/index.js @@ -17,7 +17,7 @@ import jitsiLogo from '../../../assets/jitsi.svg'; function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) { const { container } = styles[layoutType]; if (layoutType === 'desktop') { - return announcementsTabData === null ? ( + return announcementsTabData && announcementsTabData.state === 'loading' ? ( {createArrayFrom1ToN(3).map(i => ( @@ -42,7 +42,7 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) { ))} - ) : ( + ) : announcementsTabData.state === 'gone' ? null : ( @@ -123,7 +123,7 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) { ); } else if (layoutType === 'mobile') { - return announcementsTabData === null ? ( + return announcementsTabData && announcementsTabData.state === 'loading' ? ( ))} - ) : ( + ) : announcementsTabData.state === 'gone' ? null : ( Loading.. + ) : assignmentsTabData.state === 'gone' ? null : ( +

Assignments Tab

+ ); +} + +export default AssignmentsTab; diff --git a/src/screens/Classroom/View.js b/src/screens/Classroom/View.js index 8500047..d559917 100644 --- a/src/screens/Classroom/View.js +++ b/src/screens/Classroom/View.js @@ -2,6 +2,7 @@ import { Container } from '@mui/material'; import Header from './Header'; import AnnouncementsTab from './AnnouncementsTab'; +import AssignmentsTab from './AssignmentsTab'; import styles from './styles'; @@ -11,6 +12,7 @@ function View({ selectedTabOption, onSelectTabOption, announcementsTabData, + assignmentsTabData, }) { const { container } = styles[layoutType]; return ( @@ -26,6 +28,7 @@ function View({ announcementsTabData={announcementsTabData} classroom={classroom && classroom} /> + ); } diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js index 83f3d9e..00c2491 100644 --- a/src/screens/Classroom/index.js +++ b/src/screens/Classroom/index.js @@ -11,29 +11,45 @@ function Classroom() { const { fetchClassroomById, fetchClassroomAnnouncements, - fetchUpcomingAssignments, + fetchUpcomingAssignmentsByClassId, + fetchAssignmentsByClassId, } = useUser(); const [classroom, setClassroom] = useState(null); const [selectedTabOption, setSelectedTabOption] = useState( TAB_OPTIONS.announcements.value ); - const [tabData, setTabData] = useState(TAB_OPTIONS.announcements); + const [tabData, setTabData] = useState(null); const fetchAndPopulateAnnouncementsTabData = useCallback(async () => { + setTabData({ tab: 'announcements', state: 'loading' }); const announcements = await fetchClassroomAnnouncements(params.id); - const upcomingAssignments = await fetchUpcomingAssignments(params.id); + const upcomingAssignments = await fetchUpcomingAssignmentsByClassId( + params.id + ); setTabData({ tab: 'announcements', + state: 'idle', announcements: [...announcements.data], upcomingAssignments: [...upcomingAssignments.data], }); - }, [fetchClassroomAnnouncements, fetchUpcomingAssignments, params.id]); + }, [ + fetchClassroomAnnouncements, + fetchUpcomingAssignmentsByClassId, + params.id, + ]); const fetchAndPopulateAssignmentsTabData = useCallback(async () => { - console.log('Fetch assignments'); - }, []); + setTabData({ tab: 'assignments', state: 'loading' }); + const assignments = await fetchAssignmentsByClassId(params.id); + + setTabData({ + tab: 'assignments', + state: 'idle', + assignments: [...assignments.data], + }); + }, [fetchAssignmentsByClassId, params.id]); const fetchAndPopulatePoepleTabData = useCallback(async () => { console.log('Fetch assignments'); @@ -41,7 +57,6 @@ function Classroom() { useEffect(() => { async function getSelectedTabData() { - setTabData(null); switch (selectedTabOption) { case TAB_OPTIONS.announcements.value: fetchAndPopulateAnnouncementsTabData(); @@ -89,7 +104,10 @@ function Classroom() { selectedTabOption={selectedTabOption} onSelectTabOption={(_, value) => setSelectedTabOption(value)} announcementsTabData={ - tabData && tabData.tab === 'announcements' ? tabData : null + tabData && tabData.tab === 'announcements' ? tabData : { state: 'gone' } + } + assignmentsTabData={ + tabData && tabData.tab === 'assignments' ? tabData : { state: 'gone' } } /> ); diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index a6dfc81..913de6b 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -9,7 +9,7 @@ function Home() { useDocumentTitle('Página Inicial'); const navigate = useNavigate(); const layoutType = useLayoutType(); - const { fetchClassrooms, fetchAssignments } = useUser(); + const { fetchClassrooms, fetchAllAssignments } = useUser(); const [classrooms, setClassrooms] = useState(null); const [assignments, setAssignments] = useState(null); @@ -23,11 +23,11 @@ function Home() { useEffect(() => { async function getAssignments() { - const result = await fetchAssignments(); + const result = await fetchAllAssignments(); setAssignments(result.data); } getAssignments(); - }, [fetchAssignments]); + }, [fetchAllAssignments]); const onClickClassCard = id => { navigate(`/class/${id}`, { replace: true }); diff --git a/src/services/mocks.js b/src/services/mocks.js index 8ff4fd5..d6bed3b 100644 --- a/src/services/mocks.js +++ b/src/services/mocks.js @@ -318,6 +318,18 @@ const allUpcomingAssignments = [ ], classrooms: allClassrooms.filter(c => c.id === '321'), }, + { + id: '1234', + title: 'Trabalho NoSQL', + dueDate: '2022-06-29 22:00', + scores: [ + { + classroomId: '666', + value: 35, + }, + ], + classrooms: allClassrooms.filter(c => c.id === '666'), + }, ]; const faq = [ diff --git a/src/services/user-service.js b/src/services/user-service.js index 4693036..7f91cab 100644 --- a/src/services/user-service.js +++ b/src/services/user-service.js @@ -11,7 +11,7 @@ import { const getClassrooms = userId => sleep(3000).then(() => { - console.log('userId: ' + userId); + console.log('Get classrooms ' + userId); return { data: allClassrooms, }; @@ -19,7 +19,7 @@ const getClassrooms = userId => const getClassroomById = classId => sleep(3000).then(() => { - console.log('classId ' + classId); + console.log('Get classroom by id ' + classId); return { data: allClassrooms.filter(c => c.id === classId)[0], }; @@ -27,30 +27,38 @@ const getClassroomById = classId => const getClassroomAnnouncementsById = classId => sleep(3000).then(() => { - console.log('classId ' + classId); + console.log('Get classroon announcements by id ' + classId); return { data: allClassroomAnnouncements.filter(c => c.classroom.id === classId), }; }); -const getUpcomingAssignmentsById = classId => +const getUpcomingAssignmentsByClassId = classId => sleep(3000).then(() => { - console.log('classId ' + classId); + console.log('Getting upcoming assignments by class id ' + classId); return { - data: allUpcomingAssignments.filter(a => - a.classrooms.filter(c => c.id === classId) + data: allUpcomingAssignments.filter( + a => a.classrooms.filter(c => c.id === classId)[0] ), }; }); -const getAssignments = userId => +const getAllAssignments = userId => sleep(4000).then(() => { - console.log('userId: ' + userId); + console.log('Getting all assignments ' + userId); return { data: allAssignments, }; }); +const getAssignmentsByClassId = classId => + sleep(4000).then(() => { + console.log('Getting assignments by class id ' + classId); + return { + data: allAssignments.filter(a => a.classrooms[0].id === classId), + }; + }); + const getFaq = () => sleep(2000).then(() => { console.log('Fetching FAQ...'); @@ -72,9 +80,10 @@ const getUser = shouldFail => export { getClassrooms, getClassroomById, - getAssignments, + getAllAssignments, + getAssignmentsByClassId, getClassroomAnnouncementsById, - getUpcomingAssignmentsById, + getUpcomingAssignmentsByClassId, getFaq, getUser, };