Add resources to course section

src/components/icon-extension-with-title/IconExtensionWithTitle.styles.ts

@@ -1,23 +1,30 @@
 import { TypographyVariantEnum } from '~/types'
 
+const iconContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minWidth: '32px',
+  height: '32px',
+  marginRight: '20px'
+}
+
 export const styles = {
   container: {
     display: 'flex',
     alignItems: 'center'
   },
   iconBox: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: '40px',
-    height: '40px',
+    ...iconContainer,
     backgroundColor: 'basic.turquoise',
     borderRadius: '5px',
-    marginRight: '20px',
     color: 'basic.white',
     fontSize: '12px',
     typography: TypographyVariantEnum.Caption
   },
+  svgBox: {
+    ...iconContainer
+  },
   titleWithDescription: {
     title: {
       typography: TypographyVariantEnum.Subtitle2

src/components/icon-extension-with-title/IconExtensionWithTitle.tsx

@@ -1,6 +1,7 @@
-import { FC } from 'react'
+import { ElementType, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
+import { SvgIcon } from '@mui/material'
 
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 
@@ -11,12 +12,14 @@ interface IconExtensionWithTitleProps {
   title: string
   description?: string
   size?: number
+  icon?: ElementType
 }
 
 const IconExtensionWithTitle: FC<IconExtensionWithTitleProps> = ({
   title,
   description,
-  size
+  size,
+  icon
 }) => {
   const { t } = useTranslation()
 
@@ -29,7 +32,13 @@ const IconExtensionWithTitle: FC<IconExtensionWithTitleProps> = ({
 
   return (
     <Box sx={styles.container}>
-      <Box sx={styles.iconBox}>{fileExtension}</Box>
+      {icon ? (
+        <Box sx={styles.svgBox}>
+          <SvgIcon component={icon} />
+        </Box>
+      ) : (
+        <Box sx={styles.iconBox}>{fileExtension}</Box>
+      )}
       <TitleWithDescription
         description={size ? convertSize(size) : description}
         style={styles.titleWithDescription}

src/constants/translations/en/my-resources-page.json

@@ -8,18 +8,20 @@
   },
   "lessons": {
     "addBtn": "New lesson",
+    "add": "Add Lessons",
     "title": "Title",
     "attachmentQty": "Attachment",
     "attachmentsQty": "Attachments",
     "attachments": "Attachments",
     "lastUpdates": "Last updates",
     "emptyItems": "You have no lessons yet",
     "confirmDeletionTitle": "Do you confirm lesson deletion?",
-    "successDeletion": "Lesson was deleted successfully"
+    "successDeletion": "Lesson was deleted successfully",
+    "category": "Category"
   },
   "attachments": {
     "addBtn": "Add Attachment",
-    "add": "Add files from your Attachments",
+    "add": "Add Attachments",
     "edit": "Edit Attachment",
     "description": "Description",
     "fileName": "File name",
@@ -30,10 +32,12 @@
     "confirmDeletionTitle": "Do you confirm attachment deletion?",
     "successDeletion": "Attachment was deleted successfully",
     "validationError": "File name cannot be longer than 55 symbol.",
-    "attachmentName": "Attachment name"
+    "attachmentName": "Attachment name",
+    "category": "Category"
   },
   "quizzes": {
     "addBtn": "New quiz",
+    "add": "Add Quizzes",
     "title": "Title",
     "question": "Question",
     "questions": "Questions",
@@ -45,7 +49,8 @@
     "defaultNewDescription": "Description...",
     "createNewQuestion": "Create new question",
     "editQuestion": "Edit question",
-    "addQuestion": "Add question"
+    "addQuestion": "Add question",
+    "category": "Category"
   },
   "questions": {
     "addBtn": "New question",

src/constants/translations/ua/my-resources-page.json

@@ -8,18 +8,20 @@
   },
   "lessons": {
     "addBtn": "Новий урок",
+    "add": "Додайте уроки",
     "title": "Заголовок",
     "attachments": "Файли",
     "attachmentQty": "Файл",
     "attachmentsQty": "Файлів",
     "lastUpdates": "Останнє оновлення",
     "emptyItems":"У вас ще немає уроків",
     "confirmDeletionTitle":"Ви підтверджуєте видалення уроку?",
-    "successDeletion":"Урок було успішно видалено"
+    "successDeletion":"Урок було успішно видалено",
+    "category": "Категорія"
   },
   "attachments": {
     "addBtn": "Додайте файли з Вкладень",
-    "add": "Додайте файли зі своїх вкладень",
+    "add": "Додайте файли",
     "edit": "Редагувати Файл",
     "description": "Опис",
     "fileName": "Ім'я файлу",
@@ -31,10 +33,12 @@
     "successDeletion":"Вкладення було успішно видалено",
     "addAttachment": "Добавити файл",
     "validationError": "Назва файлу не може бути довшою за 55 символів.",
-    "attachmentName": "Назва вкладення"
+    "attachmentName": "Назва вкладення",
+    "category": "Категорія"
   },
   "quizzes": {
     "addBtn": "Новий тест",
+    "add": "Додайте тести",
     "quizTitle": "Заголовок",
     "question": "Питання",
     "questions": "Питання",
@@ -46,7 +50,8 @@
     "defaultNewDescription":"Опис...",
     "createNewQuestion":"Створити нове питання",
     "editQuestion": "Редагувати питання",
-    "addQuestion":"Додати питання"
+    "addQuestion":"Додати питання",
+    "category": "Категорія"
   },
   "questions": {
     "addBtn": "Нове запитання",

src/containers/add-attachments/AddAttachments.constants.tsx

@@ -1,12 +1,11 @@
 import Typography from '@mui/material/Typography'
 
+import AppChip from '~/components/app-chip/AppChip'
 import IconExtensionWithTitle from '~/components/icon-extension-with-title/IconExtensionWithTitle'
 
-import {
-  getFormattedDate,
-  convertBytesToProperFormat
-} from '~/utils/helper-functions'
+import { getFormattedDate } from '~/utils/helper-functions'
 
+import { styles } from '~/containers/add-attachments/AddAttachments.styles'
 import {
   AdditionalPropsInterface,
   Attachment,
@@ -24,16 +23,20 @@ export const columns = [
       <IconExtensionWithTitle title={item.fileName} />
     )
   },
+
   {
-    label: 'myResourcesPage.attachments.size',
-    field: 'size',
-    calculatedCellValue: (
-      item: Attachment,
-      { t }: AdditionalPropsInterface
-    ) => {
-      const { size, unit } = convertBytesToProperFormat(item.size)
-      return <Typography>{size + ' ' + t(`common.${unit}`)}</Typography>
-    }
+    label: 'myResourcesPage.attachments.category',
+    field: 'category',
+    calculatedCellValue: (item: Attachment, { t }: AdditionalPropsInterface) =>
+      item.category ? (
+        <AppChip labelSx={styles.categoryChipLabel} sx={styles.categoryChip}>
+          {item.category.name}
+        </AppChip>
+      ) : (
+        <Typography sx={styles.date}>
+          {t('myResourcesPage.categories.noCategory')}
+        </Typography>
+      )
   },
   {
     label: 'myResourcesPage.attachments.lastUpdate',

src/containers/add-attachments/AddAttachments.styles.ts

@@ -0,0 +1,17 @@
+import palette from '~/styles/app-theme/app.pallete'
+import { TypographyVariantEnum } from '~/types'
+
+export const styles = {
+  categoryChip: {
+    backgroundColor: 'inherit',
+    border: `2px solid ${palette.basic.turquoiseDark}`,
+    borderRadius: '50px',
+    '& .MuiChip-label': { p: '0px 8px' }
+  },
+  categoryChipLabel: {
+    typography: TypographyVariantEnum.Caption,
+    fontWeight: 500,
+    color: 'basic.turquoiseDark'
+  },
+  date: { color: 'primary.400', typography: TypographyVariantEnum.Caption }
+}

src/containers/add-attachments/AddAttachments.tsx

@@ -1,21 +1,25 @@
 import { FC, useCallback, useState } from 'react'
 
-import { useModalContext } from '~/context/modal-context'
-import { useSnackBarContext } from '~/context/snackbar-context'
 import { ResourceService } from '~/services/resource-service'
+import { useSnackBarContext } from '~/context/snackbar-context'
+import { useModalContext } from '~/context/modal-context'
+import useSelect from '~/hooks/table/use-select'
 import useSort from '~/hooks/table/use-sort'
 import useAxios from '~/hooks/use-axios'
 import useBreakpoints from '~/hooks/use-breakpoints'
+
 import AddResourceModal from '~/containers/my-resources/add-resource-modal/AddResourceModal'
 
 import {
   columns,
   initialSort,
   removeColumnRules
 } from '~/containers/add-attachments/AddAttachments.constants'
-import { ajustColumns } from '~/utils/helper-functions'
 import { defaultResponses, snackbarVariants } from '~/constants'
+
+import { ajustColumns } from '~/utils/helper-functions'
 import { Attachment, ErrorResponse, ItemsWithCount } from '~/types'
+
 interface AddAttachmentsProps {
   attachments: Attachment[]
   onAddAttachments: (attachments: Attachment[]) => void
@@ -29,12 +33,13 @@ const AddAttachments: FC<AddAttachmentsProps> = ({
 
   const { closeModal } = useModalContext()
   const { setAlert } = useSnackBarContext()
-
   const breakpoints = useBreakpoints()
-  const sortOptions = useSort({
-    initialSort
-  })
+  const initialSelect = attachments.map((attachment) => attachment._id)
+  const select = useSelect({ initialSelect })
+  const sortOptions = useSort({ initialSort })
+
   const { sort } = sortOptions
+  const { handleSelectClick } = select
 
   const columnsToShow = ajustColumns<Attachment>(
     breakpoints,
@@ -50,32 +55,38 @@ const AddAttachments: FC<AddAttachmentsProps> = ({
     [sort]
   )
 
-  const {
-    loading,
-    response,
-    fetchData: fetchDataAttachments
-  } = useAxios<ItemsWithCount<Attachment>>({
+  const onResponseError = useCallback(
+    (error: ErrorResponse) => {
+      setAlert({
+        severity: snackbarVariants.error,
+        message: error ? `errors.${error.code}` : ''
+      })
+    },
+    [setAlert]
+  )
+
+  const { loading, response } = useAxios<ItemsWithCount<Attachment>>({
     service: getMyAttachments,
-    defaultResponse: defaultResponses.itemsWithCount
+    defaultResponse: defaultResponses.itemsWithCount,
+    onResponseError
   })
 
   const onRowClick = (item: Attachment) => {
     if (selectedRows.find((attachment) => attachment._id === item._id)) {
-      setSelectedRows((prevSelectedRows) =>
-        prevSelectedRows.filter((attachment) => attachment._id !== item._id)
+      setSelectedRows((selectedRows) =>
+        selectedRows.filter((attachment) => attachment._id !== item._id)
       )
     } else {
-      setSelectedRows((prevSelectedAttachments) => [
-        ...prevSelectedAttachments,
-        item
-      ])
+      setSelectedRows((selectedRows) => [...selectedRows, item])
     }
+    handleSelectClick(undefined, item._id)
   }
 
   const onAddItems = () => {
     onAddAttachments(selectedRows)
     closeModal()
   }
+
   const getItems = useCallback(
     (inputValue: string) =>
       response.items.filter((item) => {
@@ -91,38 +102,15 @@ const AddAttachments: FC<AddAttachmentsProps> = ({
     [response.items]
   )
 
-  const createAttachments = useCallback(
-    (data?: FormData) => ResourceService.createAttachments(data),
-    []
-  )
-
-  const onCreateAttachmentsError = (error: ErrorResponse) => {
-    setAlert({
-      severity: snackbarVariants.error,
-      message: error ? `errors.${error.code}` : ''
-    })
-  }
-
-  const { fetchData: fetchCreateAttachment } = useAxios({
-    service: createAttachments,
-    fetchOnMount: false,
-    defaultResponse: null,
-    onResponseError: onCreateAttachmentsError
-  })
-
-  const uploadItem = async (data: FormData) => {
-    await fetchCreateAttachment(data)
-    await fetchDataAttachments()
-  }
-
   const props = {
     columns: columnsToShow,
     sort: sortOptions,
+    select,
     selectedRows,
+    isSelection: true,
     onAddItems,
     data: { loading, getItems },
     onRowClick,
-    uploadItem,
     resource: 'attachments'
   }