Fixed lesson and quiz icons in edit and saved mode (#2051)

* fix * update ResourceItem * Update ResourceItem.tsx * Update AppTextField.tsx * Update AppTextField.tsx
ita-social-projects · Jul 8, 2024 · d00a948 · d00a948
1 parent b5477fb
commit d00a948
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 12 deletions.
diff --git a/src/components/cooperation-section-view/CooperationSectionView.styles.ts b/src/components/cooperation-section-view/CooperationSectionView.styles.ts
@@ -13,7 +13,7 @@ export const styles = {
     disabled: true
   },
   descriptionInput: {
-    style: {
+    sx: {
       m: '0 0 0 45px'
     },
     disableUnderline: true

diff --git a/src/components/cooperation-section-view/CooperationSectionView.tsx b/src/components/cooperation-section-view/CooperationSectionView.tsx
@@ -1,17 +1,17 @@
 import Box from '@mui/material/Box'
 
-import { FC, useState } from 'react'
+import { FC, useState, ReactNode, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 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 { CourseSection, TextFieldVariantEnum } from '~/types'
+import { Activities, CourseSection, TextFieldVariantEnum } from '~/types'
 
 import { styles } from '~/components/cooperation-section-view/CooperationSectionView.styles'
 
 interface CooperationSectionViewProps {
-  id: string
+  id?: string
   item: CourseSection
 }
 
@@ -22,9 +22,18 @@ const CooperationSectionView: FC<CooperationSectionViewProps> = ({
   const [isVisible, setIsVisible] = useState(true)
   const { t } = useTranslation()
 
-  const resources = item.activities?.map((item) => (
-    <ResourceItem isView key={item.resource._id} resource={item.resource} />
-  ))
+  const resources = useMemo<undefined | ReactNode[]>(
+    () =>
+      item.activities?.map((activity: Activities) => (
+        <ResourceItem
+          isView
+          key={activity.resource._id}
+          resource={activity.resource}
+          resourceType={activity.resourceType}
+        />
+      )),
+    [item.activities]
+  )
 
   return (
     <Box sx={styles.root}>

diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx
@@ -145,7 +145,7 @@ const CourseSectionContainer: FC<SectionProps> = ({
   useEffect(() => {
     setResources((prevResources) => {
       const allResourcesItems = getAllResourcesItems()
-      const displayOrder = sectionData.order
+      const displayOrder = sectionData.order || []
       const updatedResourcesItems = updateResources(
         prevResources,
         allResourcesItems,

diff --git a/src/containers/course-section/resource-item/ResourceItem.tsx b/src/containers/course-section/resource-item/ResourceItem.tsx
@@ -32,6 +32,7 @@ import { styles } from '~/containers/course-section/resource-item/ResourceItem.s
 
 interface ResourceItemProps {
   resource: CourseResource
+  resourceType?: ResourcesTypes
   deleteResource?: (resource: CourseResource) => void
   setResourceAvailability?: SetResourseAvailability
   editResource?: (resource: CourseResource) => void
@@ -40,6 +41,7 @@ interface ResourceItemProps {
 
 const ResourceItem: FC<ResourceItemProps> = ({
   resource,
+  resourceType,
   deleteResource,
   setResourceAvailability,
   editResource,
@@ -61,7 +63,9 @@ const ResourceItem: FC<ResourceItemProps> = ({
   const renderResourceIcon = () => {
     const { Lessons, Quizzes } = ResourcesTypes
 
-    switch (resource.resourceType) {
+    const type = resourceType || resource.resourceType
+
+    switch (type) {
       case Lessons:
         return resourcesData.lessons.icon
       case Quizzes:
@@ -72,6 +76,7 @@ const ResourceItem: FC<ResourceItemProps> = ({
   }
 
   const resourceAvailability = resource.availability
+
   const resourceAvailabilityStatus =
     resourceAvailability?.status ?? ResourceAvailabilityStatusEnum.Open
 

diff --git a/src/containers/course-section/resources-list/ResourcesList.styles.ts b/src/containers/course-section/resources-list/ResourcesList.styles.ts
@@ -21,7 +21,7 @@ export const styles = {
   dragIcon: {
     left: '24px',
     position: 'absolute',
-    top: '24px',
+    top: '22px',
     color: 'primary.700',
     '&:hover': {
       color: 'primary.400'

diff --git a/src/types/course/interfaces/course.interface.ts b/src/types/course/interfaces/course.interface.ts
@@ -8,7 +8,8 @@ import {
   Quiz,
   Attachment,
   Lesson,
-  CourseResource
+  CourseResource,
+  ResourcesTabsEnum
 } from '~/types'
 
 export interface Course extends CommonEntityFields {
@@ -33,7 +34,7 @@ export interface CourseForm
 
 export interface Activities {
   resource: CourseResource
-  resourceType: string
+  resourceType: ResourcesTabsEnum
 }
 
 export interface CourseSection {