Added course component (#1412)

* added course component

* add test and fix issues

* added translation and refactored

* fixed test

src/components/course-card/CourseCard.styles.ts

@@ -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'
+  }
+}

src/components/course-card/CourseCard.tsx

@@ -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'
+
+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

src/constants/translations/en/course.json

@@ -1,5 +1,7 @@
 {
     "addSectionBtn": "Add Section",
+    "section": "section",
+    "sections": "sections",
     "courseSection": {
         "defaultNewTitle": "Section 1",
         "defaultNewDescription": "Description...",

src/constants/translations/ua/course.json

@@ -1,5 +1,7 @@
 {
     "addSectionBtn": "Новий курс",
+    "section": "Розділ",
+    "sections": "Розділи",
     "courseSection": {
         "defaultNewTitle": "Розділ 1",
         "defaultNewDescription": "Опис ...",

src/types/course/interfaces/course.interface.ts

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

tests/unit/components/course-card/CourseCard.spec.jsx

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