Implemented edit button (#2053)

* implemented edit button

* implemented and fixed tests

package.json

@@ -59,6 +59,7 @@
     "@types/react-dom": "^18.2.14",
     "@types/react-redux": "^7.1.28",
     "@types/react-swipeable-views": "^0.13.3",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
     "@vitejs/plugin-react": "^4.1.1",

src/components/cooperation-section-view/CooperationSectionView.tsx

@@ -22,7 +22,7 @@ const CooperationSectionView: FC<CooperationSectionViewProps> = ({
   const [isVisible, setIsVisible] = useState(true)
   const { t } = useTranslation()
 
-  const resources = item.activities.map((item) => (
+  const resources = item.activities?.map((item) => (
     <ResourceItem isView key={item.resource._id} resource={item.resource} />
   ))
 

src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import { Link } from 'react-router-dom'
-import { FC } from 'react'
+import { Dispatch, FC, SetStateAction } from 'react'
 
 import AppSelect from '~/components/app-select/AppSelect'
 import AppButton from '~/components/app-button/AppButton'
@@ -28,10 +28,12 @@ import { styles } from '~/containers/cooperation-details/cooperation-activities/
 
 interface CooperationActivitiesProps {
   cooperationId?: string
+  setEditMode: Dispatch<SetStateAction<boolean>>
 }
 
 const CooperationActivities: FC<CooperationActivitiesProps> = ({
-  cooperationId
+  cooperationId,
+  setEditMode
 }) => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
@@ -50,6 +52,7 @@ const CooperationActivities: FC<CooperationActivitiesProps> = ({
         message: 'cooperationsPage.acceptModal.successMessage'
       })
     )
+    setEditMode((prev: boolean) => !prev)
   }
 
   const cooperationOption = cooperationTranslationKeys.map(

src/containers/cooperation-details/cooperetion-activities-view/CooperationActivitiesView.style.ts

@@ -11,5 +11,13 @@ export const styles = {
       marginTop: 0
     },
     disableUnderline: true
+  },
+  editContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  editButton: {
+    p: '16px',
+    backgroundColor: 'basic.grey'
   }
 }

src/containers/cooperation-details/cooperetion-activities-view/CooperationActivitiesView.tsx

@@ -1,23 +1,46 @@
 import { FC } from 'react'
 import Box from '@mui/material/Box'
+import { IconButton } from '@mui/material'
+import EditIcon from '@mui/icons-material/Edit'
 
 import CooperationSectionView from '~/components/cooperation-section-view/CooperationSectionView'
-import { CourseSection } from '~/types'
+import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
+import {
+  cooperationsSelector,
+  setIsAddedClicked
+} from '~/redux/features/cooperationsSlice'
 
 import { styles } from '~/containers/cooperation-details/cooperetion-activities-view/CooperationActivitiesView.style'
 
 interface CooperationActivitiesViewProps {
-  sections: CourseSection[]
+  setEditMode: () => void
 }
 
 const CooperationActivitiesView: FC<CooperationActivitiesViewProps> = ({
-  sections
+  setEditMode
 }) => {
+  const { sections } = useAppSelector(cooperationsSelector)
+  const dispatch = useAppDispatch()
+
+  const onEdit = () => {
+    setEditMode()
+    dispatch(setIsAddedClicked(false))
+  }
+
   return (
     <Box sx={styles.root}>
       {sections.map((item) => (
         <CooperationSectionView id={item._id} item={item} key={item._id} />
       ))}
+      <Box sx={styles.editContainer}>
+        <IconButton
+          data-testid='iconButton'
+          onClick={onEdit}
+          sx={styles.editButton}
+        >
+          <EditIcon />
+        </IconButton>
+      </Box>
     </Box>
   )
 }

src/containers/course-section/CourseSectionContainer.tsx

@@ -78,14 +78,24 @@ const CourseSectionContainer: FC<SectionProps> = ({
   const [activeMenu, setActiveMenu] = useState<string>('')
   const [isVisible, setIsVisible] = useState<boolean>(true)
   const [resources, setResources] = useState<CourseResource[]>([])
+  const activities: CourseResource[] = sectionData.activities?.map((item) => {
+    return { ...item.resource, resourceType: item.resourceType }
+  })
 
   const getAllResourcesItems = useCallback((): CourseResource[] => {
-    return [
-      ...sectionData.lessons,
-      ...sectionData.quizzes,
-      ...sectionData.attachments
-    ]
-  }, [sectionData.lessons, sectionData.quizzes, sectionData.attachments])
+    return activities?.length
+      ? [...activities]
+      : [
+          ...sectionData.lessons,
+          ...sectionData.quizzes,
+          ...sectionData.attachments
+        ]
+  }, [
+    sectionData.lessons,
+    sectionData.quizzes,
+    sectionData.attachments,
+    activities
+  ])
 
   const updateResources = useCallback(
     (

src/containers/course-sections-list/CourseSectionsList.tsx

@@ -9,6 +9,7 @@ import MenuItem from '@mui/material/MenuItem'
 import Typography from '@mui/material/Typography'
 import ViewComfyOutlinedIcon from '@mui/icons-material/ViewComfyOutlined'
 import { Add } from '@mui/icons-material'
+import { v4 as uuidv4 } from 'uuid'
 
 import AddCourseTemplateModal from '~/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal'
 import SortableWrapper from '~/containers/sortable-wrapper/SortableWrapper'
@@ -44,6 +45,7 @@ const CourseSectionsList: FC<CourseSectionsListProps> = ({
   addNewSection
 }) => {
   const { enabled } = useDroppable()
+  const Id = uuidv4()
 
   const {
     activeItem,
@@ -133,7 +135,7 @@ const CourseSectionsList: FC<CourseSectionsListProps> = ({
         <Divider flexItem>
           <Typography
             data-testid='Add activity'
-            id={item.id}
+            id={Id}
             onClick={handleActivitiesMenuClick}
             sx={styles.activityButton}
           >
@@ -149,7 +151,7 @@ const CourseSectionsList: FC<CourseSectionsListProps> = ({
       <Fragment key={item.id}>
         {coorperationMenu}
         <SortableWrapper
-          id={item.id}
+          id={Id}
           onDragEndStyles={styles.section(isDragOver)}
           onDragStartStyles={styles.section(true)}
         >