Binded confirmation modal on resources edit (#2554)

* binded confirmation modal on resources edit * deleted skip test * fixed test * increased tests coverage
ita-social-projects · Sep 26, 2024 · eb7b68c · eb7b68c
1 parent c3149e4
commit eb7b68c
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 166 deletions.
diff --git a/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx b/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useMemo } from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
@@ -17,7 +18,6 @@ import { useModalContext } from '~/context/modal-context'
 import Loader from '~/components/loader/Loader'
 import useAxios from '~/hooks/use-axios'
 import { CourseService } from '~/services/course-service'
-import { useMemo } from 'react'
 
 interface ChangeResourceConfirmModalProps {
   resourceId?: string
@@ -61,10 +61,16 @@ const ChangeResourceConfirmModal = ({
   )
   ////////////////////////////////////!
 
-  const handleConfirm = () => {
-    onConfirm?.()
+  const handleConfirm = useCallback(() => {
     closeModal()
-  }
+    onConfirm?.()
+  }, [closeModal, onConfirm])
+
+  useEffect(() => {
+    if (!loading && !courseList?.length) {
+      handleConfirm()
+    }
+  }, [courseList, handleConfirm, loading])
 
   if (loading) {
     return (
@@ -75,7 +81,6 @@ const ChangeResourceConfirmModal = ({
   }
 
   if (!loading && !courseList?.length) {
-    handleConfirm()
     return null
   }
 

diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx
@@ -54,6 +54,7 @@ import { useModalContext } from '~/context/modal-context'
 
 import useAxios from '~/hooks/use-axios'
 import useMenu from '~/hooks/use-menu'
+import ChangeResourceConfirmModal from '../change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 interface SectionProps extends CourseSectionHandlers {
   sectionData: CourseSection
@@ -173,12 +174,22 @@ const CourseSectionContainer: FC<SectionProps> = ({
     if (!resourceType) return
 
     if (resourceType === ResourceType.Attachment) {
+      const handleConfirm = () =>
+        openModal({
+          component: (
+            <EditAttachmentModal
+              attachment={resource as Attachment}
+              closeModal={closeModal}
+              updateAttachment={updateData}
+            />
+          )
+        })
       openModal({
         component: (
-          <EditAttachmentModal
-            attachment={resource as Attachment}
-            closeModal={closeModal}
-            updateAttachment={updateData}
+          <ChangeResourceConfirmModal
+            onConfirm={handleConfirm}
+            resourceId={resource.isDuplicate ? '' : resource._id}
+            title={(resource as Attachment).fileName}
           />
         )
       })

diff --git a/src/containers/my-quizzes/QuizzesContainer.tsx b/src/containers/my-quizzes/QuizzesContainer.tsx
@@ -12,6 +12,7 @@ import useBreakpoints from '~/hooks/use-breakpoints'
 import useAxios from '~/hooks/use-axios'
 import usePagination from '~/hooks/table/use-pagination'
 import { authRoutes } from '~/router/constants/authRoutes'
+import { useModalContext } from '~/context/modal-context'
 
 import { defaultResponses, snackbarVariants } from '~/constants'
 import {
@@ -35,6 +36,7 @@ import {
 } from '~/utils/helper-functions'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
+import ChangeResourceConfirmModal from '../change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 const QuizzesContainer = () => {
   const dispatch = useAppDispatch()
@@ -44,6 +46,7 @@ const QuizzesContainer = () => {
   const searchTitle = useRef<string>('')
   const breakpoints = useBreakpoints()
   const [selectedItems, setSelectedItems] = useState<string[]>([])
+  const { openModal } = useModalContext()
 
   const { sort } = sortOptions
   const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit)
@@ -82,10 +85,6 @@ const QuizzesContainer = () => {
     []
   )
 
-  const onEdit = (id: string) => {
-    navigate(createUrlPath(authRoutes.myResources.editQuiz.path, id))
-  }
-
   const { response, loading, fetchData } = useAxios<
     ItemsWithCount<Quiz>,
     GetResourcesParams
@@ -95,6 +94,21 @@ const QuizzesContainer = () => {
     onResponseError
   })
 
+  const onEdit = (id: string) => {
+    const resource = response.items.find((item) => item._id === id)
+    openModal({
+      component: (
+        <ChangeResourceConfirmModal
+          onConfirm={() =>
+            navigate(createUrlPath(authRoutes.myResources.editQuiz.path, id))
+          }
+          resourceId={id}
+          title={resource?.title}
+        />
+      )
+    })
+  }
+
   const props = {
     columns: columnsToShow,
     data: { response, getData: fetchData },

diff --git a/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx b/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx
@@ -1,10 +1,4 @@
-import {
-  ChangeEvent,
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useState
-} from 'react'
+import { ChangeEvent, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useParams } from 'react-router-dom'
 import { AxiosResponse } from 'axios'
@@ -56,7 +50,6 @@ import { createUrlPath } from '~/utils/helper-functions'
 import { styles } from '~/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
-import ChangeResourceConfirmModal from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 const CreateOrEditQuizContainer = ({
   title,
@@ -222,21 +215,6 @@ const CreateOrEditQuizContainer = ({
           resourceType: ResourceType.Quiz
         })
 
-  const openChangeResourceConfirmModal: MouseEventHandler<HTMLButtonElement> = (
-    e
-  ) => {
-    e.preventDefault()
-    openModal({
-      component: (
-        <ChangeResourceConfirmModal
-          onConfirm={() => onSaveQuiz()}
-          resourceId={id}
-          title={title}
-        />
-      )
-    })
-  }
-
   if (getQuizLoading) {
     return <Loader pageLoad />
   }
@@ -322,7 +300,7 @@ const CreateOrEditQuizContainer = ({
             {t('common.cancel')}
           </AppButton>
           <AppButton
-            onClick={openChangeResourceConfirmModal}
+            onClick={onSaveQuiz}
             size={SizeEnum.ExtraLarge}
             type={ButtonTypeEnum.Submit}
           >

diff --git a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx
@@ -36,6 +36,7 @@ import { styles } from '~/containers/my-resources/attachments-container/Attachme
 import { useAppDispatch } from '~/hooks/use-redux'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
+import ChangeResourceConfirmModal from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 const AttachmentsContainer = () => {
   const { t } = useTranslation()
@@ -137,12 +138,23 @@ const AttachmentsContainer = () => {
   const onEdit = (id: string) => {
     const attachment = response.items.find((item) => item._id === id)
 
+    const handleConfirm = () =>
+      openModal({
+        component: (
+          <EditAttachmentModal
+            attachment={attachment as Attachment}
+            closeModal={closeModal}
+            updateAttachment={updateData}
+          />
+        )
+      })
+
     openModal({
       component: (
-        <EditAttachmentModal
-          attachment={attachment as Attachment}
-          closeModal={closeModal}
-          updateAttachment={updateData}
+        <ChangeResourceConfirmModal
+          onConfirm={handleConfirm}
+          resourceId={id}
+          title={attachment?.fileName}
         />
       )
     })

diff --git a/src/containers/my-resources/lessons-container/LessonsContainer.tsx b/src/containers/my-resources/lessons-container/LessonsContainer.tsx
@@ -34,10 +34,13 @@ import {
 import { useAppDispatch } from '~/hooks/use-redux'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
+import { useModalContext } from '~/context/modal-context'
+import ChangeResourceConfirmModal from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 const LessonsContainer = () => {
   const dispatch = useAppDispatch()
   const navigate = useNavigate()
+  const { openModal } = useModalContext()
   const { page, handleChangePage } = usePagination()
   const sortOptions = useSort({ initialSort })
   const searchTitle = useRef<string>('')
@@ -81,10 +84,6 @@ const LessonsContainer = () => {
     []
   )
 
-  const onEdit = (id: string) => {
-    navigate(createUrlPath(authRoutes.myResources.editLesson.path, id))
-  }
-
   const { response, loading, fetchData } = useAxios<
     ItemsWithCount<Lesson>,
     GetResourcesParams
@@ -94,6 +93,21 @@ const LessonsContainer = () => {
     onResponseError
   })
 
+  const onEdit = (id: string) => {
+    const resource = response.items.find((item) => item._id === id)
+    openModal({
+      component: (
+        <ChangeResourceConfirmModal
+          onConfirm={() =>
+            navigate(createUrlPath(authRoutes.myResources.editLesson.path, id))
+          }
+          resourceId={id}
+          title={resource?.title}
+        />
+      )
+    })
+  }
+
   const props = {
     columns: columnsToShow,
     data: { response, getData: fetchData },

diff --git a/src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx b/src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx
@@ -1,4 +1,4 @@
-import { MouseEventHandler, SyntheticEvent, useEffect } from 'react'
+import { SyntheticEvent, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useParams } from 'react-router-dom'
 import { AxiosResponse } from 'axios'
@@ -51,7 +51,6 @@ import {
 } from '~/types'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
-import ChangeResourceConfirmModal from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 const CreateOrEditLesson = () => {
   const { t } = useTranslation()
@@ -192,21 +191,6 @@ const CreateOrEditLesson = () => {
     onResponseError: handleResponseError
   })
 
-  const openChangeResourceConfirmModal: MouseEventHandler<HTMLButtonElement> = (
-    e
-  ) => {
-    e.preventDefault()
-    openModal({
-      component: (
-        <ChangeResourceConfirmModal
-          onConfirm={() => handleSubmit()}
-          resourceId={id}
-          title={data.title}
-        />
-      )
-    })
-  }
-
   useEffect(() => {
     if (id) {
       void fetchDataLesson(id)
@@ -282,11 +266,7 @@ const CreateOrEditLesson = () => {
           >
             {t('common.cancel')}
           </AppButton>
-          <AppButton
-            onClick={openChangeResourceConfirmModal}
-            size={SizeEnum.XXL}
-            type={ButtonTypeEnum.Submit}
-          >
+          <AppButton size={SizeEnum.XXL} type={ButtonTypeEnum.Submit}>
             {t('common.save')}
           </AppButton>
         </Box>

diff --git a/src/pages/lesson-details/LessonDetails.tsx b/src/pages/lesson-details/LessonDetails.tsx
@@ -24,12 +24,15 @@ import { styles } from '~/pages/lesson-details/LessonsDetails.styles'
 import { Lesson, TypographyVariantEnum } from '~/types'
 import { createUrlPath } from '~/utils/helper-functions'
 import { useAppSelector } from '~/hooks/use-redux'
+import { useModalContext } from '~/context/modal-context'
+import ChangeResourceConfirmModal from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal'
 
 const LessonDetails = () => {
   const { lessonId } = useParams()
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { userId } = useAppSelector((state) => state.appMain)
+  const { openModal } = useModalContext()
 
   const [expandedItems, handleAccordionChange] = useAccordion({
     initialState: 0,
@@ -56,7 +59,19 @@ const LessonDetails = () => {
   }
 
   const handleEditLesson = () => {
-    navigate(createUrlPath(authRoutes.myResources.editLesson.path, lessonId))
+    openModal({
+      component: (
+        <ChangeResourceConfirmModal
+          onConfirm={() =>
+            navigate(
+              createUrlPath(authRoutes.myResources.editLesson.path, lessonId)
+            )
+          }
+          resourceId={lessonId}
+          title={response.title}
+        />
+      )
+    })
   }
 
   const attachmentsList = response.attachments.map((attachment) => (