Combined lessons, quizzes, attachments into 'activities' array in coo…

…peration store #2085 (#2168)

* Combined lessons, quizzes, attachments into 'activities' array in cooperation store #2085

* Rewrote spec for CooperationActivitiesList.tsx container #2075

* Added spec for "CourseSectionContainer" container #2071

* Added spec for "CourseSectionsList" container #2072

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

@@ -1,15 +1,15 @@
-import Box from '@mui/material/Box'
-
 import { FC, useState, ReactNode, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import Box from '@mui/material/Box'
+
+import ResourceItem from '~/containers/course-section/resource-item/ResourceItem'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import HeaderTextWithDropdown from '~/components/header-text-with-dropdown/HeaderTextWithDropdown'
-import ResourceItem from '~/containers/course-section/resource-item/ResourceItem'
-import { Activities, CourseSection, TextFieldVariantEnum } from '~/types'
-
 import { styles } from '~/components/cooperation-section-view/CooperationSectionView.styles'
 
+import { Activity, CourseSection, TextFieldVariantEnum } from '~/types'
+
 interface CooperationSectionViewProps {
   id?: string
   item: CourseSection
@@ -19,12 +19,12 @@ const CooperationSectionView: FC<CooperationSectionViewProps> = ({
   item,
   id
 }) => {
-  const [isVisible, setIsVisible] = useState(true)
   const { t } = useTranslation()
+  const [isVisible, setIsVisible] = useState(true)
 
   const resources = useMemo<undefined | ReactNode[]>(
     () =>
-      item.activities?.map((activity: Activities) => (
+      item.activities?.map((activity: Activity) => (
         <ResourceItem
           isView
           key={activity.resource._id}

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

@@ -1,19 +1,20 @@
 import { FC, Dispatch, SetStateAction } from 'react'
+
 import Box from '@mui/material/Box'
-import { IconButton } from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
+import { IconButton } from '@mui/material'
 
 import CooperationSectionView from '~/components/cooperation-section-view/CooperationSectionView'
-import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
+import { styles } from '~/containers/cooperation-details/cooperetion-activities-view/CooperationActivitiesView.style'
+
 import {
   cooperationsSelector,
   setIsAddedClicked
 } from '~/redux/features/cooperationsSlice'
 
-import { styles } from '~/containers/cooperation-details/cooperetion-activities-view/CooperationActivitiesView.style'
+import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
 
 interface CooperationActivitiesViewProps {
-  sections: CourseSection[]
   setEditMode: Dispatch<SetStateAction<boolean>>
 }
 
@@ -24,7 +25,7 @@ const CooperationActivitiesView: FC<CooperationActivitiesViewProps> = ({
   const dispatch = useAppDispatch()
 
   const onEdit = () => {
-    setEditMode()
+    setEditMode(true)
     dispatch(setIsAddedClicked(false))
   }
 

src/containers/course-section/CourseSectionContainer.tsx

@@ -44,7 +44,6 @@ import {
   CourseSectionHandlers,
   UpdateAttachmentParams,
   CourseResourceEventType,
-  ResourcesTabsEnum,
   CourseSectionEventType,
   ResourceAvailability
 } from '~/types'
@@ -74,33 +73,37 @@ const CourseSectionContainer: FC<SectionProps> = ({
   const { openMenu, renderMenu, closeMenu } = useMenu()
   const { openModal, closeModal } = useModalContext()
 
-  const [descriptionInput, setDescriptionInput] = useState<string>(
-    sectionData.description
-  )
   const [activeMenu, setActiveMenu] = useState<string>('')
   const [isVisible, setIsVisible] = useState<boolean>(true)
 
   const allResources = useMemo(
+    () => sectionData.activities.map((activity) => activity.resource),
+    [sectionData.activities]
+  )
+
+  const lessons = useMemo(
     () =>
-      [
-        ...sectionData.lessons,
-        ...sectionData.quizzes,
-        ...sectionData.attachments
-      ] as CourseResource[],
-    [sectionData.lessons, sectionData.quizzes, sectionData.attachments]
+      allResources.filter(
+        (resource) => resource.resourceType === ResourcesTypes.Lessons
+      ) as Lesson[],
+    [allResources]
   )
 
-  const allSectionResources = useMemo(() => {
-    const allResourcesMap = new Map(
-      allResources.map((resource) => [resource._id, resource])
-    )
+  const quizzes = useMemo(
+    () =>
+      allResources.filter(
+        (resource) => resource.resourceType === ResourcesTypes.Quizzes
+      ) as Quiz[],
+    [allResources]
+  )
 
-    return sectionData.order?.length
-      ? sectionData.order
-          .filter((id) => allResourcesMap.has(id))
-          .map((id) => allResourcesMap.get(id)!)
-      : allResources
-  }, [allResources, sectionData.order])
+  const attachments = useMemo(
+    () =>
+      allResources.filter(
+        (resource) => resource.resourceType === ResourcesTypes.Attachments
+      ) as Attachment[],
+    [allResources]
+  )
 
   const handleResourcesSort = useCallback(
     (resources: CourseResource[]) => {
@@ -119,7 +122,6 @@ const CourseSectionContainer: FC<SectionProps> = ({
         type: CourseResourceEventType.ResourceUpdated,
         sectionId: sectionData.id,
         resourceId: resource._id,
-        resourceType: resource.resourceType,
         resource: {
           availability
         }
@@ -132,7 +134,6 @@ const CourseSectionContainer: FC<SectionProps> = ({
     resourceEventHandler?.({
       type: CourseResourceEventType.ResourceRemoved,
       sectionId: sectionData.id,
-      resourceType: resource.resourceType,
       resourceId: resource._id
     })
   }
@@ -148,7 +149,6 @@ const CourseSectionContainer: FC<SectionProps> = ({
         type: CourseResourceEventType.ResourceUpdated,
         sectionId: sectionData.id,
         resourceId: attachment._id,
-        resourceType: ResourcesTabsEnum.Attachments,
         resource: attachment
       })
     }
@@ -198,14 +198,10 @@ const CourseSectionContainer: FC<SectionProps> = ({
     })
   }
 
-  const handleAddResources = <T extends CourseResource>(
-    newResources: T[],
-    type: ResourcesTypes
-  ) => {
+  const handleAddResources = <T extends CourseResource>(newResources: T[]) => {
     resourceEventHandler?.({
-      type: CourseResourceEventType.SetSectionResources,
+      type: CourseResourceEventType.AddSectionResources,
       sectionId: sectionData.id,
-      resourceType: type,
       resources: newResources
     })
   }
@@ -215,13 +211,11 @@ const CourseSectionContainer: FC<SectionProps> = ({
       component: (
         <AddResources<Lesson>
           columns={lessonColumns}
-          onAddResources={(resources) =>
-            handleAddResources(resources, ResourcesTypes.Lessons)
-          }
+          onAddResources={handleAddResources}
           removeColumnRules={removeLessonColumnRules}
           requestService={ResourceService.getUsersLessons}
           resourceType={resourcesData.lessons.resource}
-          resources={sectionData.lessons}
+          resources={lessons}
         />
       )
     })
@@ -232,13 +226,11 @@ const CourseSectionContainer: FC<SectionProps> = ({
       component: (
         <AddResources<Quiz>
           columns={quizColumns}
-          onAddResources={(resources) => {
-            handleAddResources(resources, ResourcesTypes.Quizzes)
-          }}
+          onAddResources={handleAddResources}
           removeColumnRules={removeQuizColumnRules}
           requestService={ResourceService.getQuizzes}
           resourceType={resourcesData.quizzes.resource}
-          resources={sectionData.quizzes}
+          resources={quizzes}
         />
       )
     })
@@ -249,13 +241,11 @@ const CourseSectionContainer: FC<SectionProps> = ({
       component: (
         <AddResources<Attachment>
           columns={attachmentColumns}
-          onAddResources={(resources) =>
-            handleAddResources(resources, ResourcesTypes.Attachments)
-          }
+          onAddResources={handleAddResources}
           removeColumnRules={removeAttachmentColumnRules}
           requestService={ResourceService.getAttachments}
           resourceType={resourcesData.attachments.resource}
-          resources={sectionData.attachments}
+          resources={attachments}
         />
       )
     })
@@ -317,7 +307,7 @@ const CourseSectionContainer: FC<SectionProps> = ({
             fullWidth
             inputProps={styles.input}
             label={
-              descriptionInput
+              sectionData.description
                 ? ''
                 : t('course.courseSection.defaultNewDescription')
             }
@@ -328,15 +318,21 @@ const CourseSectionContainer: FC<SectionProps> = ({
                 event.target.value
               )
             }
-            onChange={(event) => setDescriptionInput(event.target.value)}
-            value={descriptionInput}
+            onChange={(event) =>
+              handleSectionInputChange(
+                sectionData.id,
+                'description',
+                event.target.value
+              )
+            }
+            value={sectionData.description}
             variant={TextFieldVariantEnum.Standard}
           />
           <ResourcesList
             deleteResource={deleteResource}
             editResource={editResource}
             isCooperation={isCooperation}
-            items={allSectionResources}
+            items={allResources}
             sortResources={handleResourcesSort}
             updateAvailability={handleResourceAvailabilityChange}
           />

src/containers/course-section/resource-item/ResourceItem.tsx

@@ -2,13 +2,13 @@ import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
+import EditIcon from '@mui/icons-material/Edit'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
-import TextField from '@mui/material/TextField'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import EditIcon from '@mui/icons-material/Edit'
 
 import AppSelect from '~/components/app-select/AppSelect'
 import IconExtensionWithTitle from '~/components/icon-extension-with-title/IconExtensionWithTitle'
@@ -122,7 +122,7 @@ const ResourceItem: FC<ResourceItemProps> = ({
               label={t('cooperationDetailsPage.datePickerLabel')}
               onChange={setOpenFromDate}
               renderInput={(params) => <TextField {...params} />}
-              value={resourceAvailability.date ?? null}
+              value={resourceAvailability?.date ?? null}
             />
           </Box>
         </LocalizationProvider>

src/containers/my-cooperations/cooperation-activities-list/CooperationActivitiesList.constants.ts

@@ -1,17 +1,8 @@
-import { CourseSection, ResourcesTabsEnum } from '~/types'
+import { CourseSection } from '~/types'
 
 export const initialCooperationSectionData: CourseSection = {
   id: '',
   title: '',
   description: '',
-  lessons: [],
-  quizzes: [],
-  attachments: [],
-  order: []
+  activities: []
 }
-
-export const COOPERATION_RESOURCE_TYPES = [
-  ResourcesTabsEnum.Lessons,
-  ResourcesTabsEnum.Quizzes,
-  ResourcesTabsEnum.Attachments
-]

src/containers/my-cooperations/cooperation-activities-list/CooperationActivitiesList.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from 'react'
+import { v4 as uuidv4 } from 'uuid'
 
 import Box from '@mui/material/Box'
-import { v4 as uuidv4 } from 'uuid'
 
-import CourseSectionsList from '~/containers/course-sections-list/CourseSectionsList'
 import Loader from '~/components/loader/Loader'
+import CourseSectionsList from '~/containers/course-sections-list/CourseSectionsList'
 import { initialCooperationSectionData } from '~/containers/my-cooperations/cooperation-activities-list/CooperationActivitiesList.constants'
 
 import {
@@ -22,7 +22,7 @@ import {
   deleteResource,
   setCooperationSections,
   setIsNewActivity,
-  setSectionResources,
+  addSectionResources,
   updateCooperationSection,
   updateResource,
   updateResourcesOrder
@@ -50,15 +50,15 @@ const CooperationActivitiesList = () => {
       addNewSection()
     }
 
-    if (selectedCourse && !sections?.length && isAddedClicked) {
+    if (selectedCourse && !sections.length && isAddedClicked) {
       const allSections = selectedCourse.sections.map((section) => ({
         ...section,
         id: Id
       }))
       setSectionsData(allSections)
     }
 
-    if (selectedCourse && sections?.length && isAddedClicked) {
+    if (selectedCourse && sections.length && isAddedClicked) {
       const addNewSectionsCourse = (index: number | undefined = undefined) => {
         const newSectionData = selectedCourse.sections.map((section) => ({
           ...section,
@@ -147,7 +147,6 @@ const CooperationActivitiesList = () => {
           dispatch(
             updateResource({
               sectionId: event.sectionId,
-              resourceType: event.resourceType,
               resourceId: event.resourceId,
               resource: event.resource
             })
@@ -161,11 +160,10 @@ const CooperationActivitiesList = () => {
             })
           )
           break
-        case CourseResourceEventType.SetSectionResources:
+        case CourseResourceEventType.AddSectionResources:
           dispatch(
-            setSectionResources({
+            addSectionResources({
               sectionId: event.sectionId,
-              resourceType: event.resourceType,
               resources: event.resources
             })
           )
@@ -174,7 +172,6 @@ const CooperationActivitiesList = () => {
           dispatch(
             deleteResource({
               sectionId: event.sectionId,
-              resourceType: event.resourceType,
               resourceId: event.resourceId
             })
           )