From d00a9482577da3e58c3c6313322bb71de9435d72 Mon Sep 17 00:00:00 2001 From: Anastasiia Matiushenko <102433497+docia@users.noreply.github.com> Date: Mon, 8 Jul 2024 21:43:38 +0300 Subject: [PATCH] Fixed lesson and quiz icons in edit and saved mode (#2051) * fix * update ResourceItem * Update ResourceItem.tsx * Update AppTextField.tsx * Update AppTextField.tsx --- .../CooperationSectionView.styles.ts | 2 +- .../CooperationSectionView.tsx | 21 +++++++++++++------ .../course-section/CourseSectionContainer.tsx | 2 +- .../resource-item/ResourceItem.tsx | 7 ++++++- .../resources-list/ResourcesList.styles.ts | 2 +- .../course/interfaces/course.interface.ts | 5 +++-- 6 files changed, 27 insertions(+), 12 deletions(-) diff --git a/src/components/cooperation-section-view/CooperationSectionView.styles.ts b/src/components/cooperation-section-view/CooperationSectionView.styles.ts index 91000fb6a..3c74aa666 100644 --- 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 index 299addc40..3b7ba5f55 100644 --- 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 = ({ const [isVisible, setIsVisible] = useState(true) const { t } = useTranslation() - const resources = item.activities?.map((item) => ( - - )) + const resources = useMemo( + () => + item.activities?.map((activity: Activities) => ( + + )), + [item.activities] + ) return ( diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx index 065d01c7a..cb4b93729 100644 --- a/src/containers/course-section/CourseSectionContainer.tsx +++ b/src/containers/course-section/CourseSectionContainer.tsx @@ -145,7 +145,7 @@ const CourseSectionContainer: FC = ({ 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 index 4f7b6fac3..2286ad811 100644 --- 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 = ({ resource, + resourceType, deleteResource, setResourceAvailability, editResource, @@ -61,7 +63,9 @@ const ResourceItem: FC = ({ 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 = ({ } 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 index 81ec29f0c..7b1b70dee 100644 --- 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 index 6dafb4ffb..c5bc0280e 100644 --- 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 {