Add upcoming assignments card and fetch
This commit is contained in:
parent
2a0c5d49a0
commit
62def4510d
5 changed files with 116 additions and 31 deletions
|
|
@ -7,6 +7,7 @@ import {
|
|||
getClassroomById,
|
||||
getClassrooms,
|
||||
getFaq,
|
||||
getUpcomingAssignmentsById,
|
||||
} from '../services/user-service';
|
||||
|
||||
const UserContext = createContext();
|
||||
|
|
@ -35,6 +36,9 @@ function UserProvider(props) {
|
|||
const fetchClassroomAnnouncements = classId =>
|
||||
getClassroomAnnouncementsById(classId);
|
||||
|
||||
const fetchUpcomingAssignments = classId =>
|
||||
getUpcomingAssignmentsById(classId);
|
||||
|
||||
return (
|
||||
<UserContext.Provider
|
||||
value={{
|
||||
|
|
@ -44,6 +48,7 @@ function UserProvider(props) {
|
|||
fetchClassroomById,
|
||||
fetchFAQ,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignments,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
|
|
@ -58,6 +63,7 @@ function useUser() {
|
|||
fetchClassroomById,
|
||||
fetchFAQ,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignments,
|
||||
} = useContext(UserContext);
|
||||
|
||||
return {
|
||||
|
|
@ -67,6 +73,7 @@ function useUser() {
|
|||
fetchClassroomById,
|
||||
fetchFAQ,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignments,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Link,
|
||||
Paper,
|
||||
Stack,
|
||||
Tab,
|
||||
|
|
@ -19,10 +21,9 @@ function View({
|
|||
classroom,
|
||||
selectedTabOption,
|
||||
onSelectTabOption,
|
||||
announcements,
|
||||
announcementsTabData,
|
||||
}) {
|
||||
const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
|
||||
|
||||
if (layoutType === 'desktop') {
|
||||
return (
|
||||
<Container disableGutters sx={container}>
|
||||
|
|
@ -71,20 +72,26 @@ function View({
|
|||
</Paper>
|
||||
</Container>
|
||||
)}
|
||||
{announcements === null ? (
|
||||
{announcementsTabData === null ? (
|
||||
<h1>Loading...</h1>
|
||||
) : (
|
||||
<Grid sx={container} container spacing={2}>
|
||||
<Grid item xs={4}>
|
||||
<Container
|
||||
disableGutters
|
||||
sx={{
|
||||
backgroundColor: 'tomato',
|
||||
height: '100vh',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
Left
|
||||
<Container disableGutters>
|
||||
<Card
|
||||
sx={{ width: '100%', padding: '20px' }}
|
||||
elevation={4}
|
||||
variant="elevation"
|
||||
>
|
||||
<Stack justifyContent="flex-start" spacing={1}>
|
||||
<h3>Próximas Atividades</h3>
|
||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||
<Link sx={{ fontSize: '15px' }} key={ua.id}>
|
||||
{ua.title}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Container>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
|
|
@ -96,7 +103,7 @@ function View({
|
|||
direction="row"
|
||||
gap="30px"
|
||||
>
|
||||
{announcements.data.map(announcement => (
|
||||
{announcementsTabData.announcements.map(announcement => (
|
||||
<AnnouncementCard
|
||||
key={announcement.id}
|
||||
announcement={announcement}
|
||||
|
|
@ -156,7 +163,7 @@ function View({
|
|||
</Paper>
|
||||
</Container>
|
||||
)}
|
||||
{announcements === null ? (
|
||||
{announcementsTabData === null ? (
|
||||
<h1>Loading...</h1>
|
||||
) : (
|
||||
<Stack
|
||||
|
|
@ -167,15 +174,21 @@ function View({
|
|||
gap="30px"
|
||||
sx={{ marginTop: '30px' }}
|
||||
>
|
||||
<Container
|
||||
disableGutters
|
||||
sx={{
|
||||
backgroundColor: 'tomato',
|
||||
height: '400px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
Left
|
||||
<Container disableGutters>
|
||||
<Card
|
||||
sx={{ width: '100%', padding: '20px' }}
|
||||
elevation={4}
|
||||
variant="elevation"
|
||||
>
|
||||
<Stack justifyContent="flex-start" spacing={1}>
|
||||
<h3>Próximas Atividades</h3>
|
||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||
<Link sx={{ fontSize: '15px' }} key={ua.id}>
|
||||
{ua.title}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Container>
|
||||
<Stack
|
||||
sx={{ width: '100%' }}
|
||||
|
|
@ -185,7 +198,7 @@ function View({
|
|||
direction="row"
|
||||
gap="30px"
|
||||
>
|
||||
{announcements.data.map(announcement => (
|
||||
{announcementsTabData.announcements.map(announcement => (
|
||||
<AnnouncementCard
|
||||
key={announcement.id}
|
||||
announcement={announcement}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ import View from './View';
|
|||
function Classroom() {
|
||||
const params = useParams();
|
||||
const layoutType = useLayoutType();
|
||||
const { fetchClassroomById, fetchClassroomAnnouncements } = useUser();
|
||||
const {
|
||||
fetchClassroomById,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignments,
|
||||
} = useUser();
|
||||
const [classroom, setClassroom] = useState(null);
|
||||
const [selectedTabOption, setSelectedTabOption] = useState(
|
||||
TAB_OPTIONS.map(o => o.value).indexOf('announcements')
|
||||
|
|
@ -40,11 +44,13 @@ function Classroom() {
|
|||
async function getSelectedTabData() {
|
||||
setTabData(null);
|
||||
if (selectedTabOption === 0) {
|
||||
console.log('Fetch announcements');
|
||||
const result = await fetchClassroomAnnouncements(params.id);
|
||||
const announcements = await fetchClassroomAnnouncements(params.id);
|
||||
const upcomingAssignments = await fetchUpcomingAssignments(params.id);
|
||||
|
||||
setTabData({
|
||||
tab: TAB_OPTIONS[selectedTabOption].value,
|
||||
data: [...result.data],
|
||||
announcements: [...announcements.data],
|
||||
upcomingAssignments: [...upcomingAssignments.data],
|
||||
});
|
||||
} else if (selectedTabOption === 1) {
|
||||
console.log('Fetch assignments');
|
||||
|
|
@ -53,7 +59,12 @@ function Classroom() {
|
|||
}
|
||||
}
|
||||
getSelectedTabData();
|
||||
}, [fetchClassroomAnnouncements, selectedTabOption, params]);
|
||||
}, [
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignments,
|
||||
selectedTabOption,
|
||||
params,
|
||||
]);
|
||||
|
||||
return (
|
||||
<View
|
||||
|
|
@ -61,10 +72,9 @@ function Classroom() {
|
|||
classroom={classroom}
|
||||
selectedTabOption={selectedTabOption}
|
||||
onSelectTabOption={onSelectTabOption}
|
||||
announcements={
|
||||
announcementsTabData={
|
||||
tabData && tabData.tab === 'announcements' ? tabData : null
|
||||
}
|
||||
people={tabData && tabData.tab === 'people' ? tabData : null}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,6 +89,19 @@ const allAssignments = [
|
|||
],
|
||||
classrooms: allClassrooms.filter(c => c.id === '321'),
|
||||
},
|
||||
{
|
||||
id: '0128',
|
||||
title:
|
||||
'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
|
||||
dueDate: '2022-09-01 23:59',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '321',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: allClassrooms.filter(c => c.id === '321'),
|
||||
},
|
||||
{
|
||||
id: '1234',
|
||||
title: 'Trabalho NoSQL',
|
||||
|
|
@ -197,6 +210,35 @@ const allClassroomAnnouncements = [
|
|||
},
|
||||
];
|
||||
|
||||
const allUpcomingAssignments = [
|
||||
{
|
||||
id: '5435',
|
||||
title:
|
||||
'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
|
||||
dueDate: '2022-07-01 23:59',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '321',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: allClassrooms.filter(c => c.id === '321'),
|
||||
},
|
||||
{
|
||||
id: '0128',
|
||||
title:
|
||||
'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
|
||||
dueDate: '2022-09-01 23:59',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '321',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: allClassrooms.filter(c => c.id === '321'),
|
||||
},
|
||||
];
|
||||
|
||||
const faq = [
|
||||
{
|
||||
question: 'Como faço para acessar a biblicoteca virtual?',
|
||||
|
|
@ -244,4 +286,5 @@ export {
|
|||
faq,
|
||||
user,
|
||||
authFailure,
|
||||
allUpcomingAssignments,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
user,
|
||||
authFailure,
|
||||
allClassroomAnnouncements,
|
||||
allUpcomingAssignments,
|
||||
} from './mocks';
|
||||
|
||||
const getClassrooms = userId =>
|
||||
|
|
@ -32,6 +33,16 @@ const getClassroomAnnouncementsById = classId =>
|
|||
};
|
||||
});
|
||||
|
||||
const getUpcomingAssignmentsById = classId =>
|
||||
sleep(3000).then(() => {
|
||||
console.log('classId ' + classId);
|
||||
return {
|
||||
data: allUpcomingAssignments.filter(a =>
|
||||
a.classrooms.filter(c => c.id === classId)
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const getAssignments = userId =>
|
||||
sleep(4000).then(() => {
|
||||
console.log('userId: ' + userId);
|
||||
|
|
@ -63,6 +74,7 @@ export {
|
|||
getClassroomById,
|
||||
getAssignments,
|
||||
getClassroomAnnouncementsById,
|
||||
getUpcomingAssignmentsById,
|
||||
getFaq,
|
||||
getUser,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue