Add ability to reorder uploaded media before posting in web UI

Based on Gargron's changes in Mastodon: https://github.com/mastodon/mastodon/pull/28456

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/features/compose/components/upload-form.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
+import { changeMediaOrder } from 'soapbox/actions/compose';
 import { HStack } from 'soapbox/components/ui';
-import { useCompose } from 'soapbox/hooks';
+import { useAppDispatch, useCompose } from 'soapbox/hooks';
 
 import Upload from './upload';
 import UploadProgress from './upload-progress';
@@ -15,15 +16,42 @@ interface IUploadForm {
 }
 
 const UploadForm: React.FC<IUploadForm> = ({ composeId, onSubmit }) => {
+  const dispatch = useAppDispatch();
+
   const mediaIds = useCompose(composeId).media_attachments.map((item: AttachmentEntity) => item.id);
 
+  const dragItem = useRef<string | null>();
+  const dragOverItem = useRef<string | null>();
+
+  const handleDragStart = useCallback((id: string) => {
+    dragItem.current = id;
+  }, [dragItem]);
+
+  const handleDragEnter = useCallback((id: string) => {
+    dragOverItem.current = id;
+  }, [dragOverItem]);
+
+  const handleDragEnd = useCallback(() => {
+    dispatch(changeMediaOrder(composeId, dragItem.current!, dragOverItem.current!));
+    dragItem.current = null;
+    dragOverItem.current = null;
+  }, [dragItem, dragOverItem]);
+
   return (
     <div className='overflow-hidden'>
       <UploadProgress composeId={composeId} />
 
       <HStack wrap className={clsx('overflow-hidden', mediaIds.size !== 0 && 'p-1')}>
         {mediaIds.map((id: string) => (
-          <Upload id={id} key={id} composeId={composeId} onSubmit={onSubmit} />
+          <Upload
+            id={id}
+            key={id}
+            composeId={composeId}
+            onSubmit={onSubmit}
+            onDragStart={handleDragStart}
+            onDragEnter={handleDragEnter}
+            onDragEnd={handleDragEnd}
+          />
         ))}
       </HStack>
     </div>

src/features/compose/components/upload.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose';
 import Upload from 'soapbox/components/upload';
@@ -8,9 +8,12 @@ interface IUploadCompose {
   id: string;
   composeId: string;
   onSubmit?(): void;
+  onDragStart: (id: string) => void;
+  onDragEnter: (id: string) => void;
+  onDragEnd: () => void;
 }
 
-const UploadCompose: React.FC<IUploadCompose> = ({ composeId, id, onSubmit }) => {
+const UploadCompose: React.FC<IUploadCompose> = ({ composeId, id, onSubmit, onDragStart, onDragEnter, onDragEnd }) => {
   const dispatch = useAppDispatch();
   const { pleroma: { metadata: { description_limit: descriptionLimit } } } = useInstance();
 
@@ -24,12 +27,23 @@ const UploadCompose: React.FC<IUploadCompose> = ({ composeId, id, onSubmit }) =>
     dispatch(undoUploadCompose(composeId, media.id));
   };
 
+  const handleDragStart = useCallback(() => {
+    onDragStart(id);
+  }, [onDragStart, id]);
+
+  const handleDragEnter = useCallback(() => {
+    onDragEnter(id);
+  }, [onDragEnter, id]);
+
   return (
     <Upload
       media={media}
       onDelete={handleDelete}
       onDescriptionChange={handleDescriptionChange}
       onSubmit={onSubmit}
+      onDragStart={handleDragStart}
+      onDragEnter={handleDragEnter}
+      onDragEnd={onDragEnd}
       descriptionLimit={descriptionLimit}
       withPreview
     />