From 661653f56166bdde814e8ede4f635f779510a933 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Fri, 1 Jul 2022 17:25:25 -0300 Subject: [PATCH] Refactor AssignmentCard --- src/components/AssignmentCard.js | 169 ------------------------ src/components/AssignmentCard/index.js | 118 +++++++++++++++++ src/components/AssignmentCard/styles.js | 136 +++++++++++++++++++ 3 files changed, 254 insertions(+), 169 deletions(-) delete mode 100644 src/components/AssignmentCard.js create mode 100644 src/components/AssignmentCard/index.js create mode 100644 src/components/AssignmentCard/styles.js diff --git a/src/components/AssignmentCard.js b/src/components/AssignmentCard.js deleted file mode 100644 index 7fada73..0000000 --- a/src/components/AssignmentCard.js +++ /dev/null @@ -1,169 +0,0 @@ -import { - Card, - CardContent, - Typography, - CardActionArea, - Stack, - Tooltip, - Divider, -} from '@mui/material'; -import dayjs from 'dayjs'; - -import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter'; - -function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) { - if (layoutType === 'desktop') { - return ( - - {classrooms.length > 1 && - classrooms - .filter((_, i) => i > 0) - .map(c => ( -
- ))} - - - - - {title} - - - - - {classrooms.map(c => c.name).join(', ')} - - - - Data de entrega: {' '} - {capitalizeFirstLetter( - dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') - )} - - - Valor: - {scores.map(s => s.value).join(', ')} pts - - - - - - ); - } else if (layoutType === 'mobile') { - return ( - - - {classrooms.length > 1 && - classrooms - .filter((_, i) => i > 0) - .map(c => ( -
- ))} - - - - {title} - - - - - {classrooms.map(c => c.name).join(', ')} - - - - Data de entrega: - {capitalizeFirstLetter( - dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') - )} - - - Valor: - {scores.map(s => s.value).join(', ')} pts - - - - - - ); - } -} - -export default AssignmentCard; diff --git a/src/components/AssignmentCard/index.js b/src/components/AssignmentCard/index.js new file mode 100644 index 0000000..18c3ed7 --- /dev/null +++ b/src/components/AssignmentCard/index.js @@ -0,0 +1,118 @@ +import { + Card, + CardContent, + Typography, + CardActionArea, + Stack, + Tooltip, + Divider, +} from '@mui/material'; +import dayjs from 'dayjs'; + +import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'; + +import styles from './styles'; + +function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) { + const { + cardContainer, + classroomLinesIndicator, + cardActionArea, + cardContent, + typographyTitle, + stackClassroomNames, + typographyClassroomNames, + dividerMiddle, + typographyDueDate, + } = styles[layoutType]; + + if (layoutType === 'desktop') { + return ( + + {classrooms.length > 1 && + classrooms + .filter((_, i) => i > 0) + .map(c =>
)} + + + + + {title} + + + + + {classrooms.map(c => c.name).join(', ')} + + + + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {scores.map(s => s.value).join(', ')} pts + + + + + + ); + } else if (layoutType === 'mobile') { + return ( + + + {classrooms.length > 1 && + classrooms + .filter((_, i) => i > 0) + .map(c =>
)} + + + + {title} + + + + + {classrooms.map(c => c.name).join(', ')} + + + + Data de entrega: + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {scores.map(s => s.value).join(', ')} pts + + + + + + ); + } +} + +export default AssignmentCard; diff --git a/src/components/AssignmentCard/styles.js b/src/components/AssignmentCard/styles.js new file mode 100644 index 0000000..eed3fdf --- /dev/null +++ b/src/components/AssignmentCard/styles.js @@ -0,0 +1,136 @@ +// ========== Desktop ========== +const desktopCardContainer = classrooms => ({ + position: 'relative', + width: '100%', + borderLeft: `5px solid ${classrooms[0].color}`, +}); + +const desktopClassroomLinesIndicator = classroom => ({ + position: 'absolute', + height: '100%', + borderLeft: `5px solid ${classroom.color}`, + left: 0, +}); + +const desktopCardActionArea = { + display: 'flex', + flexDirection: 'row', + justifyContent: 'start', +}; + +const desktopCardContent = { + width: '100%', +}; + +const desktopTypographyTitle = { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + fontSize: '17px', +}; + +const desktopStackClassroomNames = { + width: '100%', +}; + +const desktopTypographyClassroomNames = { + fontWeight: 'bold', +}; + +const desktopDividerMiddle = { + marginTop: '10px', +}; + +const desktopTypographyDueDate = { + marginTop: '10px', +}; + +const desktop = { + cardContainer: desktopCardContainer, + classroomLinesIndicator: desktopClassroomLinesIndicator, + cardActionArea: desktopCardActionArea, + cardContent: desktopCardContent, + typographyTitle: desktopTypographyTitle, + stackClassroomNames: desktopStackClassroomNames, + typographyClassroomNames: desktopTypographyClassroomNames, + dividerMiddle: desktopDividerMiddle, + typographyDueDate: desktopTypographyDueDate, +}; + +// ========== Mobile ========== +const mobileCardContainer = classrooms => ({ + width: 390, + borderTop: `5px solid ${classrooms[0].color}`, +}); + +const mobileClassroomLinesIndicator = classroom => ({ + position: 'absolute', + width: '100%', + borderTop: `5px solid ${classroom.color}`, + top: 0, +}); + +const mobileCardActionArea = { + position: 'relative', + display: 'flex', + flexDirection: 'column', +}; + +const mobileCardContent = { + width: '100%', +}; + +const mobileTypographyTitle = { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + fontSize: '17px', +}; + +const mobileStackClassroomNames = { + width: '100%', +}; + +const mobileTypographyClassroomNames = { + fontWeight: 'bold', +}; + +const mobileDividerMiddle = { + marginTop: '10px', +}; + +const mobileTypographyDueDate = { + marginTop: '10px', +}; + +const mobile = { + cardContainer: mobileCardContainer, + classroomLinesIndicator: mobileClassroomLinesIndicator, + cardActionArea: mobileCardActionArea, + cardContent: mobileCardContent, + typographyTitle: mobileTypographyTitle, + stackClassroomNames: mobileStackClassroomNames, + typographyClassroomNames: mobileTypographyClassroomNames, + dividerMiddle: mobileDividerMiddle, + typographyDueDate: mobileTypographyDueDate, +}; + +// ========== Unset ========== +const unset = { + cardContainer: null, + classroomLinesIndicator: null, + cardActionArea: null, + cardContent: null, + typographyTitle: null, + stackClassroomNames: null, + typographyClassroomNames: null, + dividerMiddle: null, + typographyDueDate: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles;