save3-bug-dragable-moda

Author: AntoLC

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx

@@ -3,7 +3,7 @@ import { getEventCoordinates } from '@dnd-kit/utilities';
 import { useModal } from '@gouvfr-lasuite/cunningham-react';
 import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-kit';
 import { useQueryClient } from '@tanstack/react-query';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { AlertModal, Card, Text } from '@/components';
@@ -15,6 +15,7 @@ import {
   useDeleteDocInvitation,
 } from '@/docs/doc-share';
 import { useMoveDoc } from '@/docs/doc-tree';
+import { useResponsiveStore } from '@/stores/useResponsiveStore';
 
 import { DocDragEndData, useDragAndDrop } from '../hooks/useDragAndDrop';
 
@@ -134,7 +135,6 @@ export const DraggableDocGridContentList = ({
     handleDragEnd,
     updateCanDrop,
   } = useDragAndDrop(onDrag);
-
   const { t } = useTranslation();
 
   const overlayText = useMemo(() => {
@@ -151,10 +151,6 @@ export const DraggableDocGridContentList = ({
   const cannotMoveDoc =
     !canDrag || (canDrop !== undefined && !canDrop) || isError;
 
-  if (docs.length === 0) {
-    return null;
-  }
-
   return (
     <>
       <DndContext
@@ -246,10 +242,34 @@ export const DraggableDocGridItem = ({
 };
 
 export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
+  const { isDesktop } = useResponsiveStore();
+  const [isDraggableDisabled, setIsDraggableDisabled] = useState(false);
+
+  useEffect(() => {
+    const checkModal = () => {
+      const modalOpen = document.querySelector('[role="dialog"]');
+      setIsDraggableDisabled(!!modalOpen);
+    };
+
+    checkModal();
+
+    const observer = new MutationObserver(checkModal);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   if (docs.length === 0) {
     return null;
   }
 
+  if (isDesktop && !isDraggableDisabled) {
+    return <DraggableDocGridContentList docs={docs} />;
+  }
+
   return docs.map((doc) => (
     <DocsGridItem dragMode={false} doc={doc} key={doc.id} />
   ));

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -14,10 +14,7 @@ import { useImport } from '../../docs-import/hooks/useImport';
 import { useInfiniteDocsTrashbin } from '../api';
 import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
 
-import {
-  DocGridContentList,
-  DraggableDocGridContentList,
-} from './DocGridContentList';
+import { DocGridContentList } from './DocGridContentList';
 import { DocsGridLoader } from './DocsGridLoader';
 
 type DocsGridProps = {
@@ -153,11 +150,7 @@ export const DocsGrid = ({
                 </Box>
               </Box>
               <Box role="rowgroup">
-                {isDesktop ? (
-                  <DraggableDocGridContentList docs={docs} />
-                ) : (
-                  <DocGridContentList docs={docs} />
-                )}
+                <DocGridContentList docs={docs} />
               </Box>
             </Box>
             {hasNextPage && !loading && (

src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx

@@ -1,5 +1,4 @@
 import { Data, useDraggable } from '@dnd-kit/core';
-import { useEffect, useState } from 'react';
 
 type DraggableProps<T> = {
   id: string;
@@ -8,44 +7,11 @@ type DraggableProps<T> = {
 };
 
 export const Draggable = <T,>(props: DraggableProps<T>) => {
-  const [isDisabled, setIsDisabled] = useState(false);
-
   const { attributes, listeners, setNodeRef } = useDraggable({
     id: props.id,
     data: props.data,
-    disabled: isDisabled,
   });
 
-  useEffect(() => {
-    const checkModal = () => {
-      const modalOpen = document.querySelector('[role="dialog"]');
-      setIsDisabled(!!modalOpen);
-    };
-
-    checkModal();
-
-    const observer = new MutationObserver(checkModal);
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  if (isDisabled) {
-    return (
-      <div
-        data-testid={`draggable-doc-${props.id}`}
-        className="--docs--grid-draggable --disabled"
-        role="none"
-        style={{ pointerEvents: 'none' }}
-      >
-        {props.children}
-      </div>
-    );
-  }
-
   return (
     <div
       ref={setNodeRef}

src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useModalDetection.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+
+let observer: MutationObserver | null = null;
+let listeners = new Set<(isOpen: boolean) => void>();
+let currentModalState = false;
+
+const checkModal = () => {
+  const modalOpen = !!document.querySelector('[role="dialog"]');
+  if (modalOpen !== currentModalState) {
+    currentModalState = modalOpen;
+    listeners.forEach((listener) => listener(modalOpen));
+  }
+};
+
+const initObserver = () => {
+  if (!observer) {
+    observer = new MutationObserver(checkModal);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }
+};
+
+const cleanupObserver = () => {
+  if (observer && listeners.size === 0) {
+    observer.disconnect();
+    observer = null;
+  }
+};
+
+export const useModalDetection = () => {
+  const [isModalOpen, setIsModalOpen] = useState(currentModalState);
+
+  useEffect(() => {
+    // Initialize observer if this is the first listener
+    if (listeners.size === 0) {
+      initObserver();
+      checkModal(); // Check immediately
+    }
+
+    // Add this component's listener
+    listeners.add(setIsModalOpen);
+
+    // Set initial state
+    setIsModalOpen(currentModalState);
+
+    return () => {
+      // Remove this component's listener
+      listeners.delete(setIsModalOpen);
+      // Cleanup observer if this was the last listener
+      cleanupObserver();
+    };
+  }, []);
+
+  return isModalOpen;
+};