From 0904b6a2a0dfae61850ea1c65a15f8b98b391274 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 21 Apr 2023 17:13:40 -0500
Subject: [PATCH] Fix drag-and-drop interaction with ComposeModal

---
 app/soapbox/components/ui/modal/modal.tsx     | 14 +++++++++----
 app/soapbox/features/group/group-timeline.tsx |  2 +-
 .../ui/components/modals/compose-modal.tsx    | 20 +++++++++++++++----
 app/soapbox/features/ui/index.tsx             |  2 +-
 app/soapbox/pages/home-page.tsx               |  2 +-
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 69daac0b8..98b001f4c 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -55,10 +55,11 @@ interface IModal {
   title?: React.ReactNode
   width?: keyof typeof widths
   children?: React.ReactNode
+  className?: string
 }
 
 /** Displays a modal dialog box. */
-const Modal: React.FC<IModal> = ({
+const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   cancelAction,
   cancelText,
   children,
@@ -76,7 +77,8 @@ const Modal: React.FC<IModal> = ({
   skipFocus = false,
   title,
   width = 'xl',
-}) => {
+  className,
+}, ref) => {
   const intl = useIntl();
   const buttonRef = React.useRef<HTMLButtonElement>(null);
 
@@ -87,7 +89,11 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={clsx('pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 dark:text-gray-100', widths[width])}>
+    <div
+      ref={ref}
+      data-testid='modal'
+      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 dark:text-gray-100', widths[width])}
+    >
       <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>
           {title && (
@@ -157,6 +163,6 @@ const Modal: React.FC<IModal> = ({
       )}
     </div>
   );
-};
+});
 
 export default Modal;
diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx
index 2390adc0a..d189fdb68 100644
--- a/app/soapbox/features/group/group-timeline.tsx
+++ b/app/soapbox/features/group/group-timeline.tsx
@@ -69,7 +69,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
             alignItems='start'
             space={4}
             className={clsx('relative rounded-xl transition', {
-              'border-2 border-primary-600 border-dashed z-[9001] p-4': isDragging,
+              'border-2 border-primary-600 border-dashed z-[99] p-4': isDragging,
               'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
             })}
           >
diff --git a/app/soapbox/features/ui/components/modals/compose-modal.tsx b/app/soapbox/features/ui/components/modals/compose-modal.tsx
index b007ae1ba..72a06fb7c 100644
--- a/app/soapbox/features/ui/components/modals/compose-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-modal.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import clsx from 'clsx';
+import React, { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
+import { cancelReplyCompose, uploadCompose } from 'soapbox/actions/compose';
 import { openModal, closeModal } from 'soapbox/actions/modals';
 import { checkComposeContent } from 'soapbox/components/modal-root';
 import { Modal } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { useAppDispatch, useCompose, useDraggedFiles } from 'soapbox/hooks';
 
 import ComposeForm from '../../../compose/components/compose-form';
 
@@ -22,11 +23,17 @@ interface IComposeModal {
 const ComposeModal: React.FC<IComposeModal> = ({ onClose }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const node = useRef<HTMLDivElement>(null);
 
-  const compose = useCompose('compose-modal');
+  const composeId = 'compose-modal';
+  const compose = useCompose(composeId);
 
   const { id: statusId, privacy, in_reply_to: inReplyTo, quote } = compose!;
 
+  const { isDragging, isDraggedOver } = useDraggedFiles(node, (files) => {
+    dispatch(uploadCompose(composeId, files, intl));
+  });
+
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
@@ -64,8 +71,13 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose }) => {
 
   return (
     <Modal
+      ref={node}
       title={renderTitle()}
       onClose={onClickClose}
+      className={clsx({
+        'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
+        'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
+      })}
     >
       <ComposeForm id='compose-modal' />
     </Modal>
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 82bd3d27e..9635e7589 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -634,7 +634,7 @@ const UI: React.FC<IUI> = ({ children }) => {
     <HotKeys keyMap={keyMap} handlers={me ? handlers : undefined} ref={setHotkeysRef} attach={window} focused>
       <div ref={node} style={style}>
         <div
-          className={clsx('pointer-events-none fixed z-[9000] h-screen w-screen transition', {
+          className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', {
             'backdrop-blur': isDragging,
           })}
         />
diff --git a/app/soapbox/pages/home-page.tsx b/app/soapbox/pages/home-page.tsx
index f11e0bcc3..1df0572a6 100644
--- a/app/soapbox/pages/home-page.tsx
+++ b/app/soapbox/pages/home-page.tsx
@@ -56,7 +56,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
         {me && (
           <Card
             className={clsx('relative z-[1] transition', {
-              'border-2 border-primary-600 border-dashed z-[9001]': isDragging,
+              'border-2 border-primary-600 border-dashed z-[99]': isDragging,
               'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
             })}
             variant='rounded'