added second menu and section delete

ita-social-projects · Oct 30, 2023 · dd4b6b7 · dd4b6b7
1 parent 5c59b56
commit dd4b6b7
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 17 deletions.
diff --git a/src/constants/translations/en/course.json b/src/constants/translations/en/course.json
@@ -8,6 +8,9 @@
             "lessonMenuItem": "Lesson",
             "quizMenuItem": "Quiz",
             "attachmentMenuItem": "Attachment"
+        },
+        "sectionMenu": {
+            "deleteSection": "Delete"
         }
     },
     "errorMessages": {

diff --git a/src/constants/translations/ua/course.json b/src/constants/translations/ua/course.json
@@ -3,11 +3,14 @@
     "courseSection": {
         "defaultNewTitle": "Розділ 1",
         "defaultNewDescription": "Опис ...",
-        "adddResourceBtn": "Додати матеріал",
+        "addResourceBtn": "Додати матеріал",
         "resourcesMenu": {
             "lessonMenuItem": "Урок",
             "quizMenuItem": "Тест",
             "attachmentMenuItem": "Вкладення"
+        },
+        "sectionMenu": {
+            "deleteSection": "Видалити"
         }
     },
     "errorMessages": {

diff --git a/src/containers/course-section/CourseSectionContainer.constants.tsx b/src/containers/course-section/CourseSectionContainer.constants.tsx
@@ -0,0 +1,4 @@
+export const menuTypes = {
+  resourcesMenu: 'resources',
+  sectionMenu: 'section'
+}
diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx
@@ -15,6 +15,7 @@ import AppButton from '~/components/app-button/AppButton'
 import useMenu from '~/hooks/use-menu'
 
 import { styles } from '~/containers/course-section/CourseSectionContainer.styles'
+import { menuTypes } from '~/containers/course-section/CourseSectionContainer.constants'
 import {
   TextFieldVariantEnum,
   SizeEnum,
@@ -30,10 +31,14 @@ interface SectionProps {
 
 type openModalFunc = () => void
 
-const CourseSectionContainer: FC<SectionProps> = ({ sectionData }) => {
+const CourseSectionContainer: FC<SectionProps> = ({
+  sectionData,
+  setSectionsItems
+}) => {
   const { t } = useTranslation()
   const { openMenu, renderMenu, closeMenu } = useMenu()
 
+  const [activeMenu, setActiveMenu] = useState<string>('')
   const [isVisible, setIsVisible] = useState<boolean>(true)
   const [titleInput, setTitleInput] = useState<string>(sectionData.title)
   const [descriptionInput, setDescriptionInput] = useState(
@@ -44,6 +49,10 @@ const CourseSectionContainer: FC<SectionProps> = ({ sectionData }) => {
     setIsVisible((isVisible) => !isVisible)
   }
 
+  const onAction = (actionFunc: openModalFunc) => {
+    actionFunc()
+  }
+
   const onTitleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTitleInput(event.target.value)
   }
@@ -52,39 +61,49 @@ const CourseSectionContainer: FC<SectionProps> = ({ sectionData }) => {
     setDescriptionInput(event.target.value)
   }
 
-  const onAction = (actionFunc: openModalFunc) => {
-    actionFunc()
+  const onDeleteSection = () => {
+    setSectionsItems((prev) => {
+      return prev.filter((item) => item.section_id !== sectionData.section_id)
+    })
   }
 
+  const sectionActions = [
+    {
+      id: 1,
+      label: <Box>{t('course.courseSection.sectionMenu.deleteSection')}</Box>,
+      func: onDeleteSection
+    }
+  ]
+
+  const sectionMenuItems = sectionActions.map(({ label, func, id }) => (
+    <MenuItem key={id} onClick={func}>
+      {label}
+    </MenuItem>
+  ))
+
   const addResourceActions = [
     {
       id: 1,
       label: (
-        <Box>
-          {` ${t('course.courseSection.resourcesMenu.lessonMenuItem')}`}
-        </Box>
+        <Box>{t('course.courseSection.resourcesMenu.lessonMenuItem')}</Box>
       ),
       func: closeMenu
     },
     {
       id: 2,
-      label: (
-        <Box>{` ${t('course.courseSection.resourcesMenu.quizMenuItem')}`}</Box>
-      ),
+      label: <Box>{t('course.courseSection.resourcesMenu.quizMenuItem')}</Box>,
       func: closeMenu
     },
     {
       id: 3,
       label: (
-        <Box>
-          {` ${t('course.courseSection.resourcesMenu.attachmentMenuItem')}`}
-        </Box>
+        <Box>{t('course.courseSection.resourcesMenu.attachmentMenuItem')}</Box>
       ),
       func: closeMenu
     }
   ]
 
-  const menuItems = addResourceActions.map(({ label, func, id }) => (
+  const resourcesMenuItems = addResourceActions.map(({ label, func, id }) => (
     <MenuItem key={id} onClick={() => onAction(func)} sx={styles.menuItem}>
       {label}
     </MenuItem>
@@ -119,9 +138,15 @@ const CourseSectionContainer: FC<SectionProps> = ({ sectionData }) => {
           value={titleInput}
           variant={TextFieldVariantEnum.Standard}
         />
-        <IconButton>
+        <IconButton
+          onClick={(event) => {
+            setActiveMenu(menuTypes.sectionMenu)
+            openMenu(event)
+          }}
+        >
           <MoreVertIcon color={ColorEnum.Primary} sx={styles.headerIcon} />
         </IconButton>
+        {activeMenu === menuTypes.sectionMenu && renderMenu(sectionMenuItems)}
       </Box>
       {isVisible && (
         <Box>
@@ -141,14 +166,18 @@ const CourseSectionContainer: FC<SectionProps> = ({ sectionData }) => {
           />
           <AppButton
             endIcon={<KeyboardArrowDownIcon fontSize={SizeEnum.Small} />}
-            onClick={openMenu}
+            onClick={(event) => {
+              setActiveMenu(menuTypes.resourcesMenu)
+              openMenu(event)
+            }}
             size={SizeEnum.Large}
             startIcon={<AddIcon fontSize={SizeEnum.Small} />}
             variant={ButtonVariantEnum.Contained}
           >
             {t('course.courseSection.addResourceBtn')}
           </AppButton>
-          {renderMenu(menuItems)}
+          {activeMenu === menuTypes.resourcesMenu &&
+            renderMenu(resourcesMenuItems)}
         </Box>
       )}
     </Box>