refactor: dispatch openModal() 'MEDIA' with raw objects

src/components/status.tsx

@@ -151,7 +151,7 @@ const Status: React.FC<IStatus> = (props) => {
       if (firstAttachment.type === 'video') {
         dispatch(openModal('VIDEO', { status, media: firstAttachment, time: 0 }));
       } else {
-        dispatch(openModal('MEDIA', { status, media: status.media_attachments, index: 0 }));
+        dispatch(openModal('MEDIA', { status: status.toJS(), media: status.media_attachments.toJS(), index: 0 }));
       }
     }
   };

src/components/upload.tsx

@@ -140,7 +140,7 @@ const Upload: React.FC<IUpload> = ({
   };
 
   const handleOpenModal = () => {
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(media).toJS(), index: 0 }));
   };
 
   const active = hovered || focused;

src/features/account-gallery/index.tsx

@@ -74,7 +74,7 @@ const AccountGallery = () => {
       const media = (attachment.status as Status).media_attachments;
       const index = media.findIndex((x) => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status }));
     }
   };
 

src/features/account/components/header.tsx

@@ -266,7 +266,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       type: 'image',
       url: account.avatar,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar).toJS(), index: 0 }));
   };
 
   const handleAvatarClick: React.MouseEventHandler = (e) => {
@@ -281,7 +281,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       type: 'image',
       url: account.header,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(header), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(header).toJS(), index: 0 }));
   };
 
   const handleHeaderClick: React.MouseEventHandler = (e) => {

src/features/chats/components/chat-upload.tsx

@@ -22,7 +22,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
   const clickable = attachment.type !== 'unknown';
 
   const handleOpenModal = () => {
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(attachment), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(attachment).toJS(), index: 0 }));
   };
 
   return (

src/features/event/components/event-header.tsx

@@ -128,7 +128,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     e.preventDefault();
     e.stopPropagation();
 
-    dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]) }));
+    dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]).toJS() }));
   };
 
   const handleExportClick = () => {

src/features/group/components/group-header.tsx

@@ -63,7 +63,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
       type: 'image',
       url: group.avatar,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar).toJS(), index: 0 }));
   };
 
   const handleAvatarClick: React.MouseEventHandler = (e) => {
@@ -78,7 +78,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
       type: 'image',
       url: group.header,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(header), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(header).toJS(), index: 0 }));
   };
 
   const handleHeaderClick: React.MouseEventHandler = (e) => {

src/features/group/group-gallery.tsx

@@ -43,7 +43,7 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
       const media = (attachment.status as Status).media_attachments;
       const index = media.findIndex((x) => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status }));
     }
   };
 

src/features/status/components/thread.tsx

@@ -179,7 +179,7 @@ const Thread = (props: IThread) => {
       if (media.size === 1 && firstAttachment.type === 'video') {
         dispatch(openModal('VIDEO', { media: firstAttachment, status: status }));
       } else {
-        dispatch(openModal('MEDIA', { media, index: 0, status: status }));
+        dispatch(openModal('MEDIA', { media: media.toJS(), index: 0, status: status.toJS() }));
       }
     }
   };

src/features/ui/components/group-media-panel.tsx

@@ -36,7 +36,7 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
       const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
       const index = media.findIndex(x => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status, account: attachment.account })); // NOTE: why 'account' field is here? it doesn't exist in MediaModal component
     }
   };
 

src/features/ui/components/profile-media-panel.tsx

@@ -34,7 +34,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
       const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
       const index = media.findIndex(x => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status }));
     }
   };