Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added course component #1412

Merged
merged 4 commits into from
Nov 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/components/course-card/CourseCard.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { TypographyVariantEnum } from '~/types'
import { ellipsisTextStyle } from '~/utils/helper-functions'

export const styles = {
card: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
maxWidth: '312px',
minHeight: '245px',
backgroundColor: 'basic.white',
borderRadius: '6px',
p: '24px 24px 16px'
},
title: {
typography: TypographyVariantEnum.H5,
...ellipsisTextStyle(2),
fontWeight: '600',
lineHeight: '24px',
letterSpacing: '0.15px'
},
description: {
typography: TypographyVariantEnum.Body1,
...ellipsisTextStyle(2),
m: '8px 0px'
},
secondaryText: {
typography: TypographyVariantEnum.Body2,
color: 'basic.turquoiseDark',
m: '8px 0px'
},
dateContainer: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
},
line: {
m: '16px 0'
},
chipContainer: {
position: 'relative'
}
}
64 changes: 64 additions & 0 deletions src/components/course-card/CourseCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { FC } from 'react'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import IconButton from '@mui/material/IconButton'
import MoreVertIcon from '@mui/icons-material/MoreVert'
import Divider from '@mui/material/Divider'

import SubjectLevelChips from '~/components/subject-level-chips/SubjectLevelChips'
Mav-Ivan marked this conversation as resolved.
Show resolved Hide resolved

import { styles } from '~/components/course-card/CourseCard.styles'
import { getFormattedDate } from '~/utils/helper-functions'
import { Course } from '~/types'
import { useTranslation } from 'react-i18next'

interface CourseCardProps {
course: Course
}

const CourseCard: FC<CourseCardProps> = ({ course }) => {
const { t } = useTranslation()

const {
title,
description,
category,
subject,
proficiencyLevel,
sections = [{}],
createdAt
} = course

const date = getFormattedDate({ date: createdAt })

return (
<Box sx={styles.card}>
<Box>
<Typography sx={styles.title}>{title}</Typography>
<Typography sx={styles.description}>{description}</Typography>
<SubjectLevelChips
color={category.appearance.color}
proficiencyLevel={proficiencyLevel}
subject={subject.name}
sx={styles.chipContainer}
/>
<Typography sx={styles.secondaryText}>
{`${sections.length} ${
sections.length > 1 ? t('course.sections') : t('course.section')
}`}
</Typography>
</Box>
<Box>
<Divider sx={styles.line} />
<Box sx={styles.dateContainer}>
<Typography sx={styles.secondaryText}>{date}</Typography>
<IconButton>
<MoreVertIcon />
</IconButton>
</Box>
</Box>
</Box>
)
}

export default CourseCard
2 changes: 2 additions & 0 deletions src/constants/translations/en/course.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"addSectionBtn": "Add Section",
"section": "section",
"sections": "sections",
"courseSection": {
"defaultNewTitle": "Section 1",
"defaultNewDescription": "Description...",
Expand Down
2 changes: 2 additions & 0 deletions src/constants/translations/ua/course.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"addSectionBtn": "Новий курс",
"section": "Розділ",
"sections": "Розділи",
"courseSection": {
"defaultNewTitle": "Розділ 1",
"defaultNewDescription": "Опис ...",
Expand Down
14 changes: 12 additions & 2 deletions src/types/course/interfaces/course.interface.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
import { CommonEntityFields, Lesson, Quiz, Attachment, Category } from '~/types'
import {
CommonEntityFields,
Lesson,
Quiz,
Attachment,
CategoryInterface,
SubjectNameInterface,
ProficiencyLevelEnum
} from '~/types'

export interface Course extends CommonEntityFields {
title: string
description: string
sections?: CourseSection[]
category: Category | null
category: CategoryInterface
subject: SubjectNameInterface
proficiencyLevel: ProficiencyLevelEnum[]
}

export interface CourseSection {
Expand Down
45 changes: 45 additions & 0 deletions tests/unit/components/course-card/CourseCard.spec.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { render, screen } from '@testing-library/react'
import CourseCard from '~/components/course-card/CourseCard'

describe('CourseCard', () => {
const mockCourse = {
proficiencyLevel: ['Beginner'],
title: 'Advanced Lineal Math: Theoretical Concepts',
description: 'The mathematical language of quantum mechanics',
languages: ['English'],
subject: {
_id: '648850c4fdc2d1a130c24aea',
name: 'Quantum Mechanics'
},
category: {
_id: '64884f21fdc2d1a130c24ac0',
appearance: {
icon: 'mocked-path-to-icon',
color: '#66C42C'
}
},
sections: [{}, {}, {}],
createdAt: '2023-09-19T12:12:25.098Z',
updatedAt: '2023-09-19T12:17:10.447Z'
}

beforeEach(() => {
render(<CourseCard course={mockCourse} />)
})

it('Should render title and description of component ', () => {
const title = screen.getByText('Advanced Lineal Math: Theoretical Concepts')
const description = screen.getByText(
'The mathematical language of quantum mechanics'
)

expect(title).toBeInTheDocument()
expect(description).toBeInTheDocument()
})

it('Should render sum of sections', () => {
const sections = screen.getByText('3 course.sections')

expect(sections).toBeInTheDocument()
})
})