From faf7890efa1b2393f8f1725ae81f46ed8fb6a63b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Wed, 30 Nov 2022 16:03:18 -0300
Subject: [PATCH] Add custom class card for professor

---
 src/components/ClassCard/index.js    | 75 ++++++++++++++++------------
 src/screens/professor/Home/View.js   |  2 +
 src/screens/professor/Home/styles.js | 11 ++++
 src/utils/mocks/api.js               |  3 +-
 src/utils/mocks/responses.js         | 36 +++++++++++++
 5 files changed, 94 insertions(+), 33 deletions(-)

diff --git a/src/components/ClassCard/index.js b/src/components/ClassCard/index.js
index 79bf495..6c78254 100644
--- a/src/components/ClassCard/index.js
+++ b/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}>
-              <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>
diff --git a/src/screens/professor/Home/View.js b/src/screens/professor/Home/View.js
index 64046f5..c7cb6a2 100644
--- a/src/screens/professor/Home/View.js
+++ b/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)}
               />
diff --git a/src/screens/professor/Home/styles.js b/src/screens/professor/Home/styles.js
index 1a8a842..cd02a41 100644
--- a/src/screens/professor/Home/styles.js
+++ b/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 ==========
diff --git a/src/utils/mocks/api.js b/src/utils/mocks/api.js
index 9f31001..55e4889 100644
--- a/src/utils/mocks/api.js
+++ b/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,
       };
     }),
 };
diff --git a/src/utils/mocks/responses.js b/src/utils/mocks/responses.js
index a3bfb97..661a166 100644
--- a/src/utils/mocks/responses.js
+++ b/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,
 };