Added "Add attachment" to attachments table (#1110)

* Inplemented uploading files * Small fix * Added type * Move uploadin to modal window * Small fix * Fixed buttons * Fixed buttons * Fixed comments * Fixed comment * Added sorting to quizzes tab (#1043) * added sorting to quizzes tab * removed redundant destructured variable * renamed variable * fixed code smell * Add sort to attachments on myResources (#1059) * fix conflicts * fix conflicts 3 * init * finished * fix * fix * fix * fix * refactored styles * fixed conflicts * fix --------- Co-authored-by: Yura Didenko <[email protected]> Co-authored-by: Taras Chaika <[email protected]> Co-authored-by: Artur Bekh <[email protected]>
ita-social-projects · Sep 12, 2023 · 3fcbe03 · 3fcbe03
1 parent 319dd5f
commit 3fcbe03
Show file tree

Hide file tree

Showing 12 changed files with 157 additions and 50 deletions.
diff --git a/src/components/file-uploader/FileUploader.styles.ts b/src/components/file-uploader/FileUploader.styles.ts
@@ -1,16 +1,6 @@
 import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-around',
-    border: '1px solid',
-    borderColor: 'primary.200',
-    borderRadius: '5px',
-    maxWidth: '270px',
-    overflow: 'auto'
-  },
   rootDrag: {
     borderColor: 'primary.900',
     backgroundColor: 'basic.grey'
@@ -36,9 +26,6 @@ export const styles = {
     color: 'primary.700',
     fontSize: '20px'
   },
-  uploadBtn: {
-    textAlign: 'center'
-  },
   fileSize: {
     mt: '10px',
     typography: TypographyVariantEnum.Body2

diff --git a/src/components/file-uploader/FileUploader.tsx b/src/components/file-uploader/FileUploader.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -15,12 +15,12 @@ import useUpload from '~/hooks/use-upload'
 import { styles } from '~/components/file-uploader/FileUploader.styles'
 import {
   AddDocuments,
+  ButtonVariantEnum,
   ComponentEnum,
   Emitter,
   InputEnum,
   SizeEnum
 } from '~/types'
-import { spliceSx } from '~/utils/helper-functions'
 
 interface FileUploaderProps {
   buttonText: string
@@ -33,6 +33,8 @@ interface FileUploaderProps {
     root?: SxProps
     button?: SxProps
   }
+  variant?: ButtonVariantEnum
+  icon?: ReactElement
 }
 
 const FileUploader: FC<FileUploaderProps> = ({
@@ -42,7 +44,9 @@ const FileUploader: FC<FileUploaderProps> = ({
   initialError = '',
   validationData,
   isImages = false,
-  sx = {}
+  sx = {},
+  variant,
+  icon
 }) => {
   const { t } = useTranslation()
 
@@ -66,19 +70,17 @@ const FileUploader: FC<FileUploaderProps> = ({
   ))
 
   const uploadButton = (
-    <Button
-      component={ComponentEnum.Label}
-      sx={spliceSx(styles.uploadBtn, sx.button)}
-    >
+    <Button component={ComponentEnum.Label} sx={sx.button} variant={variant}>
       {isImages && <CloudUploadIcon sx={styles.icon} />}
       {buttonText}
+      {icon}
       <input hidden multiple onChange={addFiles} type={InputEnum.File} />
     </Button>
   )
 
   return (
     <>
-      <Box sx={spliceSx(styles.root, sx.root)}>
+      <Box sx={sx.root}>
         {initialState.length && isImages ? (
           <List sx={styles.filesList}>{filesList}</List>
         ) : (

diff --git a/src/containers/add-attachments/AddAttachments.tsx b/src/containers/add-attachments/AddAttachments.tsx
@@ -129,6 +129,7 @@ const AddAttachments: FC<AddAttachmentsProps> = ({
       message: error ? `errors.${error.code}` : ''
     })
   }
+
   const { fetchData: fetchCreateAttachment } = useAxios({
     service: createAttachments,
     fetchOnMount: false,

diff --git a/src/containers/add-documents/AddDocuments.tsx b/src/containers/add-documents/AddDocuments.tsx
@@ -1,24 +1,35 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, ReactElement, useEffect, useState } from 'react'
 import Box from '@mui/material/Box'
+import { SxProps } from '@mui/material'
 
 import FileUploader from '~/components/file-uploader/FileUploader'
-import { validationData } from '~/containers/add-documents/AddDocuments.constants'
 import { useSnackBarContext } from '~/context/snackbar-context'
 
-import { snackbarVariants } from '~/constants'
+import { validationData } from '~/containers/add-documents/AddDocuments.constants'
 import { styles } from '~/containers/add-documents/AddDocuments.styles'
-import { Emitter } from '~/types'
+import { snackbarVariants } from '~/constants'
+import { ButtonVariantEnum, Emitter } from '~/types'
+import { spliceSx } from '~/utils/helper-functions'
 
 interface AddDocumentsProps {
   fetchData: (formData: FormData) => Promise<void>
   formData: FormData
   buttonText: string
+  variant?: ButtonVariantEnum
+  sx?: {
+    root?: SxProps
+    button?: SxProps
+  }
+  icon?: ReactElement
 }
 
 const AddDocuments: FC<AddDocumentsProps> = ({
   fetchData,
   formData,
-  buttonText
+  buttonText,
+  variant,
+  sx = {},
+  icon
 }) => {
   const [documents, setDocuments] = useState<File[]>([])
   const [documentsError, setDocumentsError] = useState<string>('')
@@ -50,10 +61,15 @@ const AddDocuments: FC<AddDocumentsProps> = ({
       <FileUploader
         buttonText={buttonText}
         emitter={addDocuments}
+        icon={icon}
         initialError={documentsError}
         initialState={documents}
-        sx={styles.fileUpload}
+        sx={{
+          root: spliceSx(styles.fileUpload.root, sx?.root),
+          button: spliceSx(styles.fileUpload.button, sx?.button)
+        }}
         validationData={validationData}
+        variant={variant}
       />
     </Box>
   )

diff --git a/src/containers/my-quizzes/QuizzesContainer.tsx b/src/containers/my-quizzes/QuizzesContainer.tsx
@@ -18,6 +18,7 @@ import {
   itemsLoadLimit,
   removeColumnRules
 } from '~/containers/my-quizzes/QuizzesContainer.constants'
+
 import {
   ItemsWithCount,
   GetResourcesParams,

diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
@@ -1,4 +1,10 @@
-import { useState, ChangeEvent, FC, MutableRefObject } from 'react'
+import {
+  useState,
+  ChangeEvent,
+  FC,
+  MutableRefObject,
+  ReactElement
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import SearchIcon from '@mui/icons-material/Search'
@@ -12,17 +18,19 @@ import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import { styles } from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles'
 
 interface AddResourceWithInputProps {
-  btnText: string
+  btnText?: string
   fetchData: () => Promise<void>
-  link: string
+  link?: string
   searchRef: MutableRefObject<string>
+  button?: ReactElement
 }
 
 const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
   btnText,
   fetchData,
   link,
-  searchRef
+  searchRef,
+  button
 }) => {
   const { t } = useTranslation()
   const [searchInput, setSearchInput] = useState<string>('')
@@ -45,10 +53,14 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
 
   return (
     <Box sx={styles.container}>
-      <AppButton component={Link} to={link}>
-        {t(btnText)}
-        <AddIcon sx={styles.addIcon} />
-      </AppButton>
+      {!button ? (
+        <AppButton component={Link} to={link}>
+          {!button && btnText && t(btnText)}
+          <AddIcon sx={styles.addIcon} />
+        </AppButton>
+      ) : (
+        button
+      )}
 
       <InputWithIcon
         endAdornment={<SearchIcon sx={styles.searchIcon} />}

diff --git a/src/containers/my-resources/attachments-container/AttachmentsContainer.styles.ts b/src/containers/my-resources/attachments-container/AttachmentsContainer.styles.ts
@@ -21,7 +21,14 @@ export const styles = {
   searchIcon: {
     color: 'primary.700'
   },
-  addAttachmentBtn: { width: 'fit-content' },
+  addAttachmentBtn: {
+    button: {
+      backgroundColor: 'primary.900',
+      typography: TypographyVariantEnum.Body1,
+      fontWeight: '500',
+      py: '12.5px'
+    }
+  },
   addAttachmentIcon: { ml: '5px', width: { xs: '18px', sm: '22px' } },
   table: {
     '& td,th': {

diff --git a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useRef, useState } from 'react'
 import Box from '@mui/material/Box'
+import AddIcon from '@mui/icons-material/Add'
+import { useTranslation } from 'react-i18next'
 
 import { useSnackBarContext } from '~/context/snackbar-context'
 import { ResourceService } from '~/services/resource-service'
@@ -10,6 +12,8 @@ import useSort from '~/hooks/table/use-sort'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import useAxios from '~/hooks/use-axios'
 import usePagination from '~/hooks/table/use-pagination'
+import AddDocuments from '~/containers/add-documents/AddDocuments'
+import { attachmentService } from '~/services/attachment-service'
 
 import { defaultResponses, snackbarVariants } from '~/constants'
 import {
@@ -24,18 +28,21 @@ import {
   Attachment,
   ErrorResponse,
   UpdateAttachmentParams,
-  ResourcesTabsEnum
+  ResourcesTabsEnum,
+  ButtonVariantEnum
 } from '~/types'
 import { ajustColumns, getScreenBasedLimit } from '~/utils/helper-functions'
 import { styles } from '~/containers/my-resources/attachments-container/AttachmentsContainer.styles'
 
 const AttachmentsContainer = () => {
+  const { t } = useTranslation()
   const { setAlert } = useSnackBarContext()
   const breakpoints = useBreakpoints()
   const { page } = usePagination()
   const sortOptions = useSort({ initialSort })
   const searchFileName = useRef<string>('')
   const [selectedItemId, setSelectedItemId] = useState<string>('')
+  const formData = new FormData()
 
   const { sort } = sortOptions
   const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit)
@@ -76,16 +83,20 @@ const AttachmentsContainer = () => {
     []
   )
 
-  const { response, loading, fetchData } = useAxios<
-    ItemsWithCount<Attachment>,
-    GetResourcesParams
-  >({
+  const {
+    response,
+    loading,
+    fetchData: fetchAttachments
+  } = useAxios<ItemsWithCount<Attachment>, GetResourcesParams>({
     service: getAttachments,
     defaultResponse: defaultResponses.itemsWithCount,
     onResponseError
   })
 
-  const onAttachmentUpdate = useCallback(() => void fetchData(), [fetchData])
+  const onAttachmentUpdate = useCallback(
+    () => void fetchAttachments(),
+    [fetchAttachments]
+  )
 
   const { fetchData: updateData } = useAxios({
     service: updateAttachment,
@@ -95,6 +106,29 @@ const AttachmentsContainer = () => {
     fetchOnMount: false
   })
 
+  const createAttachments = useCallback(
+    (data?: FormData) => attachmentService.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 uploadFile = async (data: FormData) => {
+    await fetchCreateAttachment(data)
+    await fetchAttachments()
+  }
+
   const onSave = async (fileName: string) => {
     const id = selectedItemId
     setSelectedItemId('')
@@ -111,7 +145,7 @@ const AttachmentsContainer = () => {
 
   const props = {
     columns: columnsToShow,
-    data: { response, getData: fetchData },
+    data: { response, getData: fetchAttachments },
     services: { deleteService: deleteAttachment },
     itemsPerPage,
     actions: { onEdit },
@@ -120,14 +154,26 @@ const AttachmentsContainer = () => {
     sx: styles.table
   }
 
+  const addAttachmentBlock = (
+    <AddResourceWithInput
+      button={
+        <AddDocuments
+          buttonText={t('myResourcesPage.attachments.addBtn')}
+          fetchData={uploadFile}
+          formData={formData}
+          icon={<AddIcon sx={styles.addAttachmentIcon} />}
+          sx={styles.addAttachmentBtn}
+          variant={ButtonVariantEnum.Contained}
+        />
+      }
+      fetchData={fetchAttachments}
+      searchRef={searchFileName}
+    />
+  )
+
   return (
     <Box>
-      <AddResourceWithInput
-        btnText={'myResourcesPage.attachments.addBtn'}
-        fetchData={fetchData}
-        link={'#'}
-        searchRef={searchFileName}
-      />
+      {addAttachmentBlock}
       {loading ? (
         <Loader pageLoad size={50} />
       ) : (

diff --git a/src/containers/tutor-home-page/add-photo-step/AddPhotoStep.jsx b/src/containers/tutor-home-page/add-photo-step/AddPhotoStep.jsx
@@ -81,6 +81,7 @@ const AddPhotoStep = ({ btnsBox, stepLabel }) => {
             initialError={photoError}
             initialState={photo}
             isImages
+            sx={style.fileUploader}
             validationData={validationData}
           />
         </Box>