leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #16 from leomurca/feature/professor_home_screen

Browse source 
Layout inicial da home do professor
This commit is contained in:
Leonardo Murça 2022-11-30 21:30:41 -03:00 committed by GitHub
commit faa597726b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 739 additions and 275 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/ProfessorRoutes.js
View file

@ -1,4 +1,5 @@
import { Navigate, Route, Routes } from 'react-router-dom';
import Home from '../screens/professor/Home';
function ProfessorRoutes() {
return (
@ -6,7 +7,7 @@ function ProfessorRoutes() {
<Route path="/calendar" element={<h1>Calendar</h1>} />
<Route path="/profile" element={<h1>Profile</h1>} />
<Route path="/info" element={<h1>Information</h1>} />
<Route path="/home" element={<h1>Home</h1>} />
<Route path="/home" element={<Home />} />
<Route path="/login" element={<Navigate to="/home" />} />
<Route path="/register" element={<Navigate to="/home" />} />
<Route path="/" element={<Navigate to="/home" />} />

47
src/components/AssignmentCard/index.js
View file

@ -18,6 +18,10 @@ function AssignmentCard({
classrooms,
dueDate,
scores,
deliveredByStudents,
reviewed,
total,
isAssignmentToReview,
layoutType,
onClick,
}) {
@ -61,16 +65,30 @@ function AssignmentCard({
{classrooms.map(c => c.name).join(', ')}
</Typography>
<Divider sx={dividerMiddle} />
<Typography sx={typographyDueDate} variant="p" component="div">
<strong>Data de entrega: </strong>{' '}
{capitalizeFirstLetter(
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
)}
</Typography>
<Typography variant="p" component="div">
<strong>Valor: </strong>
{scores.map(s => s.value).join(', ')} pts
</Typography>
{deliveredByStudents >= 0 && total && (
<Typography variant="p" component="div">
<strong>Entregues: </strong>{' '}
{`${deliveredByStudents} de ${total}`}
</Typography>
)}
{reviewed >= 0 && total && (
<Typography variant="p" component="div">
<strong>Corrigidas: </strong> {`${reviewed} de ${total}`}
</Typography>
)}
{!isAssignmentToReview && (
<Typography variant="p" component="div">
<strong>Valor: </strong>
{scores.map(s => s.value).join(', ')} pts
</Typography>
)}
</Stack>
</CardContent>
</CardActionArea>
@ -110,10 +128,23 @@ function AssignmentCard({
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
)}
</Typography>
<Typography variant="p" component="div">
<strong>Valor: </strong>
{scores.map(s => s.value).join(', ')} pts
</Typography>
{deliveredByStudents >= 0 && total && (
<Typography variant="p" component="div">
<strong>Entregues: </strong>{' '}
{`${deliveredByStudents} de ${total}`}
</Typography>
)}
{reviewed >= 0 && total && (
<Typography variant="p" component="div">
<strong>Corrigidas: </strong> {`${reviewed} de ${total}`}
</Typography>
)}
{!isAssignmentToReview && (
<Typography variant="p" component="div">
<strong>Valor: </strong>
{scores.map(s => s.value).join(', ')} pts
</Typography>
)}
</Stack>
</CardContent>
</CardActionArea>

75
src/components/ClassCard/index.js
View file

@ -17,6 +17,7 @@ function ClassCard({
title,
color,
teachers,
course,
layoutType,
onClick,
}) {
@ -45,23 +46,30 @@ function ClassCard({
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={avatar}
/>
))}
</AvatarGroup>
<Tooltip title={teachers.map(t => t.name).join(', ')}>
<Typography sx={tooltip} variant="body3" color="text.secondary">
{teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack>
{teachers && (
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={avatar}
/>
))}
</AvatarGroup>
<Tooltip title={teachers.map(t => t.name).join(', ')}>
<Typography
sx={tooltip}
variant="body3"
color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack>
)}
{course && <Typography variant="body2">{course}</Typography>}
</CardContent>
</CardActionArea>
</Card>
@ -82,21 +90,24 @@ function ClassCard({
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={avatar}
/>
))}
</AvatarGroup>
<Typography sx={tooltip} variant="body2" color="text.secondary">
{teachers.map(t => t.name).join(', ')}
</Typography>
</Stack>
{teachers && (
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={avatar}
/>
))}
</AvatarGroup>
<Typography sx={tooltip} variant="body2" color="text.secondary">
{teachers.map(t => t.name).join(', ')}
</Typography>
</Stack>
)}
{course && <Typography variant="body2">{course}</Typography>}
</CardContent>
</CardActionArea>
</Card>

6
src/context/auth.js
View file

@ -1,5 +1,5 @@
import { createContext, useContext, useEffect, useState } from 'react';
import { getUser, registerUser } from '../services/user-service';
import { CommonApi } from '../utils/mocks/api';
const AuthContext = createContext();
@ -23,7 +23,7 @@ function AuthProvider(props) {
const register = data => {
setState({ ...state, status: 'pending' });
return registerUser(data).then(data => {
return CommonApi.registerUser(data).then(data => {
if (data.message) {
return setState({ status: 'error', user: null, error: data });
} else {
@ -35,7 +35,7 @@ function AuthProvider(props) {
const login = (email, password) => {
setState({ ...state, status: 'pending' });
return getUser(email, password).then(data => {
return CommonApi.getUser(email, password).then(data => {
if (data.message) {
return setState({ status: 'error', user: null, error: data });
} else {

85
src/context/user.js
View file

@ -1,23 +1,14 @@
import { createContext, useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { UserServiceProvider } from '../services/provider';
import { useAuthState } from './auth';
import {
getAllAssignments,
getAssignmentById,
getAssignmentsByClassId,
getClassroomAnnouncementsById,
getClassroomById,
getClassrooms,
getFaq,
getPeopleByClassId,
getUpcomingAssignmentsByClassId,
} from '../services/user-service';
const UserContext = createContext();
function UserProvider(props) {
const { user } = useAuthState();
const { pathname } = useLocation();
const [userService, setUserService] = useState(null);
const [state, setState] = useState({
user: null,
error: null,
@ -26,73 +17,23 @@ function UserProvider(props) {
useEffect(() => {
setState({ user, pathname });
async function initUserService() {
if (user) {
const instance = await UserServiceProvider.getInstance(user);
setUserService(instance);
}
}
initUserService();
}, [user, pathname]);
const fetchClassrooms = () => getClassrooms(user.id);
const fetchAllAssignments = () => getAllAssignments(user.id);
const fetchAssignmentById = assignmentId => getAssignmentById(assignmentId);
const fetchAssignmentsByClassId = classId => getAssignmentsByClassId(classId);
const fetchClassroomById = classId => getClassroomById(classId);
const fetchFAQ = () => getFaq();
const fetchClassroomAnnouncements = classId =>
getClassroomAnnouncementsById(classId);
const fetchUpcomingAssignmentsByClassId = classId =>
getUpcomingAssignmentsByClassId(classId);
const fetchPeopleByClassId = classId => getPeopleByClassId(classId);
return (
<UserContext.Provider
value={{
state,
fetchClassrooms,
fetchAllAssignments,
fetchAssignmentById,
fetchAssignmentsByClassId,
fetchClassroomById,
fetchFAQ,
fetchClassroomAnnouncements,
fetchUpcomingAssignmentsByClassId,
fetchPeopleByClassId,
}}
{...props}
/>
);
return <UserContext.Provider value={{ state, userService }} {...props} />;
}
function useUser() {
const {
state,
fetchClassrooms,
fetchAssignmentById,
fetchAllAssignments,
fetchAssignmentsByClassId,
fetchClassroomById,
fetchFAQ,
fetchClassroomAnnouncements,
fetchUpcomingAssignmentsByClassId,
fetchPeopleByClassId,
} = useContext(UserContext);
const { state, userService } = useContext(UserContext);
return {
state,
fetchClassrooms,
fetchAllAssignments,
fetchAssignmentById,
fetchAssignmentsByClassId,
fetchClassroomById,
fetchFAQ,
fetchClassroomAnnouncements,
fetchUpcomingAssignmentsByClassId,
fetchPeopleByClassId,
};
return { state, userService };
}
export { UserProvider, useUser };

6
src/screens/Assignment/index.js
View file

@ -8,14 +8,14 @@ import View from './View';
function Assignment() {
const params = useParams();
const layoutType = useLayoutType();
const { fetchAssignmentById } = useUser();
const { userService } = useUser();
const [assignment, setAssignment] = useState(null);
const dropzone = useDropzone({ maxFiles: 5 });
useEffect(() => {
async function getAssignmentById(assignmentId) {
document.title = 'Carregando...';
const result = await fetchAssignmentById(assignmentId);
const result = await userService.fetchAssignmentById(assignmentId);
setAssignment(result.data);
}
@ -27,7 +27,7 @@ function Assignment() {
getAssignmentById(params.id);
updateDocumentTitle();
}, [params, fetchAssignmentById, assignment]);
}, [params, userService, userService.fetchAssignmentById, assignment]);
return (
<View assignment={assignment} dropzone={dropzone} layoutType={layoutType} />

31
src/screens/Classroom/index.js
View file

@ -8,13 +8,7 @@ import View from './View';
function Classroom() {
const params = useParams();
const layoutType = useLayoutType();
const {
fetchClassroomById,
fetchClassroomAnnouncements,
fetchUpcomingAssignmentsByClassId,
fetchAssignmentsByClassId,
fetchPeopleByClassId,
} = useUser();
const { userService } = useUser();
const [classroom, setClassroom] = useState(null);
const [tabData, setTabData] = useState(null);
const [selectedTabOption, setSelectedTabOption] = useState(
@ -23,10 +17,11 @@ function Classroom() {
const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
setTabData({ tab: 'announcements', state: 'loading' });
const announcements = await fetchClassroomAnnouncements(params.id);
const upcomingAssignments = await fetchUpcomingAssignmentsByClassId(
const announcements = await userService.fetchClassroomAnnouncements(
params.id
);
const upcomingAssignments =
await userService.fetchUpcomingAssignmentsByClassId(params.id);
setTabData({
tab: 'announcements',
@ -34,33 +29,29 @@ function Classroom() {
announcements: [...announcements.data],
upcomingAssignments: [...upcomingAssignments.data],
});
}, [
fetchClassroomAnnouncements,
fetchUpcomingAssignmentsByClassId,
params.id,
]);
}, [userService, params.id]);
const fetchAndPopulateAssignmentsTabData = useCallback(async () => {
setTabData({ tab: 'assignments', state: 'loading' });
const assignments = await fetchAssignmentsByClassId(params.id);
const assignments = await userService.fetchAssignmentsByClassId(params.id);
setTabData({
tab: 'assignments',
state: 'idle',
assignments: [...assignments.data],
});
}, [fetchAssignmentsByClassId, params.id]);
}, [userService, params.id]);
const fetchAndPopulatePoepleTabData = useCallback(async () => {
setTabData({ tab: 'people', state: 'loading' });
const people = await fetchPeopleByClassId(params.id);
const people = await userService.fetchPeopleByClassId(params.id);
setTabData({
tab: 'people',
state: 'idle',
people: [...people.data],
});
}, [fetchPeopleByClassId, params.id]);
}, [userService, params.id]);
useEffect(() => {
async function getSelectedTabData() {
@ -90,7 +81,7 @@ function Classroom() {
useEffect(() => {
async function getClassroomById(classId) {
document.title = 'Carregando...';
const result = await fetchClassroomById(classId);
const result = await userService.fetchClassroomById(classId);
setClassroom(result.data);
}
@ -102,7 +93,7 @@ function Classroom() {
getClassroomById(params.id);
updateDocumentTitle();
}, [fetchClassroomById, params, classroom]);
}, [userService, userService.fetchClassroomById, params, classroom]);
return (
<View

10
src/screens/Home/index.js
View file

@ -9,25 +9,25 @@ function Home() {
useDocumentTitle('Página Inicial');
const navigate = useNavigate();
const layoutType = useLayoutType();
const { fetchClassrooms, fetchAllAssignments } = useUser();
const { userService } = useUser();
const [classrooms, setClassrooms] = useState(null);
const [assignments, setAssignments] = useState(null);
useEffect(() => {
async function getClassrooms() {
const result = await fetchClassrooms();
const result = await userService.fetchClassrooms();
setClassrooms(result.data);
}
getClassrooms();
}, [fetchClassrooms]);
}, [userService, userService.fetchClassrooms]);
useEffect(() => {
async function getAssignments() {
const result = await fetchAllAssignments();
const result = await userService.fetchAllAssignments();
setAssignments(result.data);
}
getAssignments();
}, [fetchAllAssignments]);
}, [userService, userService.fetchAllAssignments]);
const onClickClassCard = id => {
navigate(`/class/${id}`);

6
src/screens/Information/index.js
View file

@ -9,16 +9,16 @@ import { sectors } from './data';
function Information() {
useDocumentTitle('Informações');
const layoutType = useLayoutType();
const { fetchFAQ } = useUser();
const { userService } = useUser();
const [faq, setFaq] = useState(null);
useEffect(() => {
async function getClassrooms() {
const result = await fetchFAQ();
const result = await userService.fetchFAQ();
setFaq(result.data);
}
getClassrooms();
}, [fetchFAQ]);
}, [userService, userService.fetchFAQ]);
return <View faq={faq} sectors={sectors} layoutType={layoutType} />;
}

200
src/screens/professor/Home/View.js Normal file
View file

@ -0,0 +1,200 @@
import { Grid, Skeleton, Stack } from '@mui/material';
import { Container } from '@mui/system';
import AssignmentCard from '../../../components/AssignmentCard';
import ClassCard from '../../../components/ClassCard';
import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
import styles from './styles';
function View({
layoutType,
classrooms,
assignmentsToReview,
onClickClassCard,
}) {
const { container, divider, assignmentsStack, onClickAssignmentCard } =
styles[layoutType];
if (layoutType === 'desktop') {
return (
<Grid sx={container} container spacing={2}>
<Grid item xs={8}>
<h1>Minhas Turmas</h1>
<Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
{classrooms === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width={390}
height={145}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
course={classroom.course}
layoutType={layoutType}
onClick={() => onClickClassCard(classroom.id)}
/>
))
) : (
<Container
sx={{
height: '100vh',
display: 'flex',
justifyContent: 'center',
}}
disableGutters
>
<p>Nenhuma sala de aula encontrada!</p>
</Container>
)}
</Stack>
</Grid>
<Grid sx={divider} item xs={4}>
<h1>Atividades para corrigir</h1>
<Stack
sx={assignmentsStack}
alignItems="end"
flexWrap="wrap"
direction="row"
gap="30px"
>
{assignmentsToReview === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="35em"
height={145}
/>
))
) : assignmentsToReview.length !== 0 ? (
assignmentsToReview.map(assignment => (
<AssignmentCard
key={assignment.title}
title={assignment.title}
classrooms={assignment.classrooms}
dueDate={assignment.dueDate}
scores={assignment.scores}
layoutType={layoutType}
deliveredByStudents={assignment.deliveredByStudents}
reviewed={assignment.reviewed}
isAssignmentToReview={assignment.status !== null}
total={assignment.total}
onClick={() => onClickAssignmentCard(assignment.id)}
/>
))
) : (
<Container
sx={{
height: '100vh',
display: 'flex',
justifyContent: 'center',
}}
disableGutters
>
<p>Nenhuma atividade encontrada!</p>
</Container>
)}
</Stack>
</Grid>
</Grid>
);
} else if (layoutType === 'mobile') {
return (
<Stack sx={container}>
<h1>Minhas Turmas</h1>
<Stack
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{classrooms === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={245}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
course={classroom.course}
layoutType={layoutType}
onClick={() => onClickClassCard(classroom.id)}
/>
))
) : (
<Container disableGutters>
<p>Nenhuma sala de aula encontrada!</p>
</Container>
)}
</Stack>
<h1 style={divider}>Atividades para corrigir</h1>
<Stack
sx={assignmentsStack}
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{assignmentsToReview === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="35em"
height={145}
/>
))
) : assignmentsToReview.length !== 0 ? (
assignmentsToReview.map(assignment => (
<AssignmentCard
key={assignment.title}
title={assignment.title}
classrooms={assignment.classrooms}
dueDate={assignment.dueDate}
scores={assignment.scores}
layoutType={layoutType}
deliveredByStudents={assignment.deliveredByStudents}
reviewed={assignment.reviewed}
isAssignmentToReview={assignment.status !== null}
total={assignment.total}
onClick={() => onClickAssignmentCard(assignment.id)}
/>
))
) : (
<Container
sx={{
height: '100vh',
display: 'flex',
justifyContent: 'center',
}}
disableGutters
>
<p>Nenhuma atividade encontrada!</p>
</Container>
)}
</Stack>
</Stack>
);
}
}
export default View;

51
src/screens/professor/Home/index.js Normal file
View file

@ -0,0 +1,51 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useUser } from '../../../context/user';
import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
import useLayoutType from '../../../hooks/useLayoutType';
import View from './View';
function Home() {
useDocumentTitle('Página Inicial');
const navigate = useNavigate();
const layoutType = useLayoutType();
const { userService } = useUser();
const [classrooms, setClassrooms] = useState(null);
const [assignmentsToReview, setAssignmentsToReview] = useState(null);
useEffect(() => {
async function getClassrooms() {
const result = await userService.fetchClassrooms();
setClassrooms(result.data);
}
getClassrooms();
}, [userService, userService.fetchClassrooms]);
useEffect(() => {
async function getAssignmentsToReview() {
const result = await userService.fetchAssignmentsToReview();
setAssignmentsToReview(result.data);
}
getAssignmentsToReview();
}, [userService, userService.fetchAllAssignments]);
const onClickClassCard = id => {
navigate(`/class/${id}`);
};
const onClickAssignmentCard = id => {
navigate(`/assignment/${id}`);
};
return (
<View
layoutType={layoutType}
classrooms={classrooms}
assignmentsToReview={assignmentsToReview}
onClickClassCard={onClickClassCard}
onClickAssignmentCard={onClickAssignmentCard}
/>
);
}
export default Home;

42
src/screens/professor/Home/styles.js Normal file
View file

@ -0,0 +1,42 @@
// ========== Desktop ==========
const desktopContainer = {
height: '100vh',
margin: 0,
};
const desktopDivider = {
borderLeft: '4px solid #CFCFCF',
};
const desktop = {
container: desktopContainer,
divider: desktopDivider,
};
// ========== Mobile ==========
const mobileContainer = {
height: 'inherit',
width: '100%',
padding: '10px 20px ',
margin: 0,
};
const mobileDivider = {
borderTop: '2px solid #CFCFCF',
paddingTop: '15px',
};
const mobile = {
container: mobileContainer,
divider: mobileDivider,
};
// ========== Unset ==========
const unset = {
container: null,
divider: null,
assignmentsStack: null,
};
const styles = { desktop, mobile, unset };
export default styles;

12
src/services/professor.js Normal file
View file

@ -0,0 +1,12 @@
import { ProfessorApi } from '../utils/mocks/api';
export default class ProfessorService {
constructor(user) {
this.user = user;
}
fetchClassrooms = () => ProfessorApi.getClassrooms(this.user.id);
fetchAssignmentsToReview = () =>
ProfessorApi.getAssignmentsToReview(this.user.id);
}

31
src/services/provider.js Normal file
View file

@ -0,0 +1,31 @@
export const UserServiceProvider = (function () {
let instance;
async function createInstance(user) {
switch (user.role) {
case 'STUDENT':
const studentService = await import('./student');
if (studentService) {
return new studentService.default(user);
}
break;
case 'PROFESSOR':
const professorService = await import('./professor');
if (professorService) {
return new professorService.default(user);
}
break;
default:
throw new Error('Invalid Role!');
}
}
return {
getInstance: async function (user) {
if (!instance) {
instance = await createInstance(user);
}
return instance;
},
};
})();

29
src/services/student.js Normal file
View file

@ -0,0 +1,29 @@
import { StudentApi } from '../utils/mocks/api';
export default class StudentService {
constructor(user) {
this.user = user;
}
fetchClassrooms = () => StudentApi.getClassrooms(this.user.id);
fetchAllAssignments = () => StudentApi.getAllAssignments(this.user.id);
fetchAssignmentById = assignmentId =>
StudentApi.getAssignmentById(assignmentId);
fetchAssignmentsByClassId = classId =>
StudentApi.getAssignmentsByClassId(classId);
fetchClassroomById = classId => StudentApi.getClassroomById(classId);
fetchFAQ = () => StudentApi.getFaq();
fetchClassroomAnnouncements = classId =>
StudentApi.getClassroomAnnouncementsById(classId);
fetchUpcomingAssignmentsByClassId = classId =>
StudentApi.getUpcomingAssignmentsByClassId(classId);
fetchPeopleByClassId = classId => StudentApi.getPeopleByClassId(classId);
}

128
src/services/user-service.js
View file

@ -1,128 +0,0 @@
import { sleep } from '../utils/sleep';
import {
allClassrooms,
allAssignments,
faq,
studentUser,
professorUser,
authFailure,
allClassroomAnnouncements,
allUpcomingAssignments,
allPeople,
} from './mocks';
const getClassrooms = userId =>
sleep(300).then(() => {
console.log('Get classrooms ' + userId);
return {
data: allClassrooms,
};
});
const getClassroomById = classId =>
sleep(300).then(() => {
console.log('Get classroom by id ' + classId);
return {
data: allClassrooms.filter(c => c.id === classId)[0],
};
});
const getClassroomAnnouncementsById = classId =>
sleep(300).then(() => {
console.log('Get classroon announcements by id ' + classId);
return {
data: allClassroomAnnouncements.filter(c => c.classroom.id === classId),
};
});
const getUpcomingAssignmentsByClassId = classId =>
sleep(300).then(() => {
console.log('Getting upcoming assignments by class id ' + classId);
return {
data: allUpcomingAssignments.filter(
a => a.classrooms.filter(c => c.id === classId)[0]
),
};
});
const getAllAssignments = userId =>
sleep(400).then(() => {
console.log('Getting all assignments ' + userId);
return {
data: allAssignments,
};
});
const getAssignmentById = assignmentId =>
sleep(400).then(() => {
console.log('Getting assignment by id ' + assignmentId);
return {
data: allAssignments.filter(a => a.id === assignmentId)[0],
};
});
const getAssignmentsByClassId = classId =>
sleep(300).then(() => {
console.log('Getting assignments by class id ' + classId);
return {
data: allAssignments.filter(a => a.classrooms[0].id === classId),
};
});
const getPeopleByClassId = classId =>
sleep(400).then(() => {
console.log('Getting people by class id ' + classId);
return {
data: allPeople.filter(p => p.classes[0].id === classId),
};
});
const getFaq = () =>
sleep(300).then(() => {
console.log('Fetching FAQ...');
return {
data: faq,
};
});
const getUser = (email, password) =>
sleep(300).then(() => {
let user;
if (email === 'p@test.com' && password === 'p123') {
user = professorUser;
} else if (email === 's@test.com' && password === 's123') {
user = studentUser;
} else {
return authFailure;
}
window.localStorage.setItem('$USER', JSON.stringify(user));
return user;
});
const registerUser = data =>
sleep(300).then(() => {
let userData;
if (data.email === 'p@test.com') {
userData = { ...data, role: 'PROFESSOR' };
} else if (data.email === 's@test.com') {
userData = { ...data, role: 'STUDENT' };
} else {
return authFailure;
}
window.localStorage.setItem('$USER', JSON.stringify(data));
return userData;
});
export {
getClassrooms,
getClassroomById,
getAllAssignments,
getAssignmentById,
getAssignmentsByClassId,
getClassroomAnnouncementsById,
getUpcomingAssignmentsByClassId,
getPeopleByClassId,
getFaq,
getUser,
registerUser,
};

141
src/utils/mocks/api.js Normal file
View file

@ -0,0 +1,141 @@
import { sleep } from '../sleep';
import {
allClassrooms,
allAssignments,
faq,
studentUser,
professorUser,
authFailure,
allClassroomAnnouncements,
allUpcomingAssignments,
allPeople,
professorClassrooms,
assignmentsToReview,
} from './responses';
const CommonApi = {
getUser: (email, password) =>
sleep(300).then(() => {
let user;
if (email === 'p@test.com' && password === 'p123') {
user = professorUser;
} else if (email === 's@test.com' && password === 's123') {
user = studentUser;
} else {
return authFailure;
}
window.localStorage.setItem('$USER', JSON.stringify(user));
return user;
}),
registerUser: data =>
sleep(300).then(() => {
let userData;
if (data.email === 'p@test.com') {
userData = { ...data, role: 'PROFESSOR' };
} else if (data.email === 's@test.com') {
userData = { ...data, role: 'STUDENT' };
} else {
return authFailure;
}
window.localStorage.setItem('$USER', JSON.stringify(data));
return userData;
}),
};
const StudentApi = {
...CommonApi,
getClassrooms: userId =>
sleep(300).then(() => {
console.log('Get classrooms ' + userId);
return {
data: allClassrooms,
};
}),
getClassroomById: classId =>
sleep(300).then(() => {
console.log('Get classroom by id ' + classId);
return {
data: allClassrooms.filter(c => c.id === classId)[0],
};
}),
getClassroomAnnouncementsById: classId =>
sleep(300).then(() => {
console.log('Get classroon announcements by id ' + classId);
return {
data: allClassroomAnnouncements.filter(c => c.classroom.id === classId),
};
}),
getUpcomingAssignmentsByClassId: classId =>
sleep(300).then(() => {
console.log('Getting upcoming assignments by class id ' + classId);
return {
data: allUpcomingAssignments.filter(
a => a.classrooms.filter(c => c.id === classId)[0]
),
};
}),
getAllAssignments: userId =>
sleep(400).then(() => {
console.log('Getting all assignments ' + userId);
return {
data: allAssignments,
};
}),
getAssignmentById: assignmentId =>
sleep(400).then(() => {
console.log('Getting assignment by id ' + assignmentId);
return {
data: allAssignments.filter(a => a.id === assignmentId)[0],
};
}),
getAssignmentsByClassId: classId =>
sleep(300).then(() => {
console.log('Getting assignments by class id ' + classId);
return {
data: allAssignments.filter(a => a.classrooms[0].id === classId),
};
}),
getPeopleByClassId: classId =>
sleep(400).then(() => {
console.log('Getting people by class id ' + classId);
return {
data: allPeople.filter(p => p.classes[0].id === classId),
};
}),
getFaq: () =>
sleep(300).then(() => {
console.log('Fetching FAQ...');
return {
data: faq,
};
}),
};
const ProfessorApi = {
...CommonApi,
getClassrooms: userId =>
sleep(300).then(() => {
console.log('Get classrooms ' + userId);
return {
data: professorClassrooms,
};
}),
getAssignmentsToReview: userId =>
sleep(400).then(() => {
console.log('Getting assignments to review' + userId);
return {
data: assignmentsToReview,
};
}),
};
export { StudentApi, ProfessorApi, CommonApi };

111
src/services/mocks.js → src/utils/mocks/responses.js
View file

@ -95,6 +95,41 @@ const allClassrooms = [
},
];
const professorClassrooms = [
{
id: '321',
name: 'Introdução à Ciência de Dados',
abbreviation: 'ICD',
color: '#006FF2',
course: 'BSI 2020',
appointmentSlots: [
{ weekDay: 'Quarta-feira', start: '10:00', end: '11:40' },
{ weekDay: 'Sexta-feira', start: '10:00', end: '11:40' },
],
},
{
id: '123',
name: 'Teoria dos Grafos',
abbreviation: 'TDG',
color: '#d30000',
course: 'BSI 2018',
appointmentSlots: [
{ weekDay: 'Quarta-feira', start: '11:00', end: '12:00' },
{ weekDay: 'Segunda-feira', start: '10:00', end: '11:40' },
],
},
{
id: '666',
name: 'Matemática Discreta',
abbreviation: 'MD',
color: '#149b00',
course: 'BSI 2020',
appointmentSlots: [
{ weekDay: 'Quarta-feira', start: '9:00', end: '10:00' },
],
},
];
const allAssignments = [
{
id: '5435',
@ -309,6 +344,80 @@ const allClassroomAnnouncements = [
},
];
const assignmentsToReview = [
{
id: '0123',
type: 'assessment',
title:
'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
dueDate: '2022-07-01 23:59',
scores: [
{
classroomId: '321',
value: 30,
},
],
classrooms: professorClassrooms.filter(c => c.id === '321'),
status: 'OPEN',
deliveredByStudents: 10,
reviewed: 6,
total: 30,
},
{
id: '0128',
type: 'assessment',
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: professorClassrooms.filter(c => c.id === '321'),
status: 'CLOSED',
deliveredByStudents: 30,
reviewed: 1,
total: 30,
},
{
id: '0129',
type: 'assessment',
title: 'Lista de Exercícios 1 - Caminhos e circuitos',
dueDate: '2022-09-01 23:59',
scores: [
{
classroomId: '123',
value: 30,
},
],
classrooms: professorClassrooms.filter(c => c.id === '123'),
status: 'CLOSED',
deliveredByStudents: 30,
reviewed: 0,
total: 30,
},
{
id: '0130',
type: 'assessment',
title: 'Lista de Exercícios 2 - Tabela verdade',
dueDate: '2022-09-01 23:59',
scores: [
{
classroomId: '666',
value: 30,
},
],
classrooms: professorClassrooms.filter(c => c.id === '666'),
status: 'OPEN',
deliveredByStudents: 0,
reviewed: 0,
total: 30,
},
];
const allUpcomingAssignments = [
{
id: '5435',
@ -582,4 +691,6 @@ export {
professorUser,
authFailure,
allUpcomingAssignments,
professorClassrooms,
assignmentsToReview,
};