Merge pull request #16 from leomurca/feature/professor_home_screen

Layout inicial da home do professor

src/app/ProfessorRoutes.js

@@ -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" />} />

src/components/AssignmentCard/index.js

@@ -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">
+              {deliveredByStudents >= 0 && total && (
-                <strong>Valor: </strong>
+                <Typography variant="p" component="div">
-                {scores.map(s => s.value).join(', ')} pts
+                  <strong>Entregues: </strong>{' '}
-              </Typography>
+                  {`${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">
+              {deliveredByStudents >= 0 && total && (
-                <strong>Valor: </strong>
+                <Typography variant="p" component="div">
-                {scores.map(s => s.value).join(', ')} pts
+                  <strong>Entregues: </strong>{' '}
-              </Typography>
+                  {`${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>

src/components/ClassCard/index.js

@@ -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}>
+            {teachers && (
-              <AvatarGroup total={teachers.length}>
+              <Stack alignItems="center" direction="row" spacing={1}>
-                {teachers.map(t => (
+                <AvatarGroup total={teachers.length}>
-                  <Avatar
+                  {teachers.map(t => (
-                    key={t.name}
+                    <Avatar
-                    alt={t.name}
+                      key={t.name}
-                    src={t.avatar}
+                      alt={t.name}
-                    sx={avatar}
+                      src={t.avatar}
-                  />
+                      sx={avatar}
-                ))}
+                    />
-              </AvatarGroup>
+                  ))}
-              <Tooltip title={teachers.map(t => t.name).join(', ')}>
+                </AvatarGroup>
-                <Typography sx={tooltip} variant="body3" color="text.secondary">
+                <Tooltip title={teachers.map(t => t.name).join(', ')}>
-                  {teachers.map(t => t.name).join(', ')}
+                  <Typography
-                </Typography>
+                    sx={tooltip}
-              </Tooltip>
+                    variant="body3"
-            </Stack>
+                    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}>
+            {teachers && (
-              <AvatarGroup total={teachers.length}>
+              <Stack alignItems="center" direction="row" spacing={1}>
-                {teachers.map(t => (
+                <AvatarGroup total={teachers.length}>
-                  <Avatar
+                  {teachers.map(t => (
-                    key={t.name}
+                    <Avatar
-                    alt={t.name}
+                      key={t.name}
-                    src={t.avatar}
+                      alt={t.name}
-                    sx={avatar}
+                      src={t.avatar}
-                  />
+                      sx={avatar}
-                ))}
+                    />
-              </AvatarGroup>
+                  ))}
-              <Typography sx={tooltip} variant="body2" color="text.secondary">
+                </AvatarGroup>
-                {teachers.map(t => t.name).join(', ')}
+                <Typography sx={tooltip} variant="body2" color="text.secondary">
-              </Typography>
+                  {teachers.map(t => t.name).join(', ')}
-            </Stack>
+                </Typography>
+              </Stack>
+            )}
+            {course && <Typography variant="body2">{course}</Typography>}
           </CardContent>
         </CardActionArea>
       </Card>

src/context/auth.js

@@ -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 {

src/context/user.js

@@ -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);
+  return <UserContext.Provider value={{ state, userService }} {...props} />;
-
-  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}
-    />
-  );
 }
 
 function useUser() {
-  const {
+  const { state, userService } = useContext(UserContext);
-    state,
-    fetchClassrooms,
-    fetchAssignmentById,
-    fetchAllAssignments,
-    fetchAssignmentsByClassId,
-    fetchClassroomById,
-    fetchFAQ,
-    fetchClassroomAnnouncements,
-    fetchUpcomingAssignmentsByClassId,
-    fetchPeopleByClassId,
-  } = useContext(UserContext);
 
-  return {
+  return { state, userService };
-    state,
-    fetchClassrooms,
-    fetchAllAssignments,
-    fetchAssignmentById,
-    fetchAssignmentsByClassId,
-    fetchClassroomById,
-    fetchFAQ,
-    fetchClassroomAnnouncements,
-    fetchUpcomingAssignmentsByClassId,
-    fetchPeopleByClassId,
-  };
 }
 
 export { UserProvider, useUser };

src/screens/Assignment/index.js

@@ -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} />

src/screens/Classroom/index.js

@@ -8,13 +8,7 @@ import View from './View';
 function Classroom() {
   const params = useParams();
   const layoutType = useLayoutType();
-  const {
+  const { userService } = useUser();
-    fetchClassroomById,
-    fetchClassroomAnnouncements,
-    fetchUpcomingAssignmentsByClassId,
-    fetchAssignmentsByClassId,
-    fetchPeopleByClassId,
-  } = 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 announcements = await userService.fetchClassroomAnnouncements(
-    const upcomingAssignments = await fetchUpcomingAssignmentsByClassId(
       params.id
     );
+    const upcomingAssignments =
+      await userService.fetchUpcomingAssignmentsByClassId(params.id);
 
     setTabData({
       tab: 'announcements',
@@ -34,33 +29,29 @@ function Classroom() {
       announcements: [...announcements.data],
       upcomingAssignments: [...upcomingAssignments.data],
     });
-  }, [
+  }, [userService, params.id]);
-    fetchClassroomAnnouncements,
-    fetchUpcomingAssignmentsByClassId,
-    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

src/screens/Home/index.js

@@ -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}`);

src/screens/Information/index.js

@@ -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} />;
 }

src/screens/professor/Home/View.js

@@ -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;

src/screens/professor/Home/index.js

@@ -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;

src/screens/professor/Home/styles.js

@@ -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;

src/services/professor.js

@@ -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);
+}

src/services/provider.js

@@ -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;
+    },
+  };
+})();

src/services/student.js

@@ -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);
+}

src/services/user-service.js

@@ -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,
-};

src/utils/mocks/api.js

@@ -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 };

src/utils/mocks/responses.js

@@ -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,
 };