Add custom class card for professor

src/components/ClassCard/index.js

@@ -17,6 +17,7 @@ function ClassCard({
   title,
   color,
   teachers,
+  course,
   layoutType,
   onClick,
 }) {
@@ -45,6 +46,7 @@ function ClassCard({
             >
               {title}
             </Typography>
+            {teachers && (
               <Stack alignItems="center" direction="row" spacing={1}>
                 <AvatarGroup total={teachers.length}>
                   {teachers.map(t => (
@@ -57,11 +59,17 @@ function ClassCard({
                   ))}
                 </AvatarGroup>
                 <Tooltip title={teachers.map(t => t.name).join(', ')}>
-                <Typography sx={tooltip} variant="body3" color="text.secondary">
+                  <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,6 +90,7 @@ function ClassCard({
             >
               {title}
             </Typography>
+            {teachers && (
               <Stack alignItems="center" direction="row" spacing={1}>
                 <AvatarGroup total={teachers.length}>
                   {teachers.map(t => (
@@ -97,6 +106,8 @@ function ClassCard({
                   {teachers.map(t => t.name).join(', ')}
                 </Typography>
               </Stack>
+            )}
+            {course && <Typography variant="body2">{course}</Typography>}
           </CardContent>
         </CardActionArea>
       </Card>

src/screens/professor/Home/View.js

@@ -30,6 +30,7 @@ function View({ layoutType, classrooms, onClickClassCard }) {
                   title={classroom.name}
                   color={classroom.color}
                   teachers={classroom.teachers}
+                  course={classroom.course}
                   layoutType={layoutType}
                   onClick={() => onClickClassCard(classroom.id)}
                 />
@@ -92,6 +93,7 @@ function View({ layoutType, classrooms, onClickClassCard }) {
                 title={classroom.name}
                 color={classroom.color}
                 teachers={classroom.teachers}
+                course={classroom.course}
                 layoutType={layoutType}
                 onClick={() => onClickClassCard(classroom.id)}
               />

src/screens/professor/Home/styles.js

@@ -4,8 +4,13 @@ const desktopContainer = {
   margin: 0,
 };
 
+const desktopDivider = {
+  borderLeft: '4px solid #CFCFCF',
+};
+
 const desktop = {
   container: desktopContainer,
+  divider: desktopDivider,
 };
 
 // ========== Mobile ==========
@@ -16,8 +21,14 @@ const mobileContainer = {
   margin: 0,
 };
 
+const mobileDivider = {
+  borderTop: '2px solid #CFCFCF',
+  paddingTop: '15px',
+};
+
 const mobile = {
   container: mobileContainer,
+  divider: mobileDivider,
 };
 
 // ========== Unset ==========

src/utils/mocks/api.js

@@ -9,6 +9,7 @@ import {
   allClassroomAnnouncements,
   allUpcomingAssignments,
   allPeople,
+  professorClassrooms,
 } from './responses';
 
 const CommonApi = {
@@ -124,7 +125,7 @@ const ProfessorApi = {
     sleep(300).then(() => {
       console.log('Get classrooms ' + userId);
       return {
-        data: allClassrooms,
+        data: professorClassrooms,
       };
     }),
 };

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: '123',
+    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',
@@ -582,4 +617,5 @@ export {
   professorUser,
   authFailure,
   allUpcomingAssignments,
+  professorClassrooms,
 };