add forwarded message and main dropZone

src/actions/actionGetMessageForChat.jsx

@@ -42,10 +42,12 @@ export const actionGetMessageForChat = (_id, fromChatItem) =>
 					forwarded{
 						_id
 						text
+						createdAt
 						owner {
 							nick
 						  }
 						  media {
+							originalFileName 
 							url
 							_id
 							type

src/actions/actionsMessages.jsx

@@ -28,6 +28,7 @@ const actionGetOneMessage = (_id) =>
 			replyTo{
 				_id
 				text 
+				createdAt
 				media {
 					url
 					_id
@@ -46,10 +47,12 @@ const actionGetOneMessage = (_id) =>
 			forwarded{
 				_id
 				text
+				createdAt
 				owner {
 					nick
 				  }
 				  media {
+					originalFileName
 					url
 					_id
 					type

src/components/ChatListItem/ChatListItem.jsx

@@ -32,7 +32,7 @@ const ChatListItem = ({chat, handleSetId, isActive, currUserId}) => {
                             {chat.lastMessage ?
                                 <ChatListLastMessage isActive={isActive}>
                                     <span>{(currUserId == chat.lastMessage?.owner._id) ? 'You' : chat.lastMessage?.owner.nick}:</span>
-                                    {chat.lastMessage?.text.replace(/ /g, "\u00a0")}
+                                    {chat.lastMessage?.text?.replace(/ /g, "\u00a0") || ''}
                                 </ChatListLastMessage> 
                             : <div></div>}
                             {/* <div>2</div> */}

src/components/ChatPageData/ChatPageData.jsx

@@ -24,7 +24,9 @@ const ChatPageData = ({match: {params: {_id}}, getData}) => {
 			<ChatPageHeader chatId={_id}/>
 			
 			<ChatPageMain>
-				<MessagesArea chatId={_id}/>
+				
+					<MessagesArea chatId={_id}/>
+				
 				<InputArea chatId={_id}/>
 			</ChatPageMain>
 			

src/components/ForwardedMessage/ForwardedMessage.jsx

@@ -1,13 +0,0 @@
-import { ForwardedMessageHeader, ForwardedMessageWrap } from "./ForwardedMessage.style"
-
-export const ForwardedMessage = ({message}) => {
-
-    return (
-        <ForwardedMessageWrap>
-            <ForwardedMessageHeader>
-                Forwareded FROm {message?.owner?.nick}
-            </ForwardedMessageHeader>
-
-        </ForwardedMessageWrap>
-    )
-}

src/components/ForwardedMessage/ForwardedMessage.style.js

@@ -1,9 +0,0 @@
-import styled from "styled-components";
-
-export const ForwardedMessageWrap = styled.div`
-
-`;
-
-export const ForwardedMessageHeader = styled.div`
-
-`;

src/components/InputArea/InputArea.jsx

@@ -7,25 +7,23 @@ import MessageDropZone from "../DropZone/MessageDropZone/MessageDropZone";
 import { actionAddDraftMessage, actionDeleteDraftMessageId, actionDeleteReplyMessageId, actionSetInputMessageValue } from "../../reducers/chatReducer";
 
 import SendRoundedIcon from '@mui/icons-material/SendRounded';
-import ReplyMessage from "../MessageDraft/ReplyMessageDraft";
-import { MessageDraftBox } from "../MessageDraft/MessageDraftBox";
 import InputAreaMessageEditor from "./InputAreaMessageEditor";
+import MessageReplyForwarded from "../MessageDraft/MessageReplyForwarded";
 
 
 const InputArea = ({sendMessage, deleteDraftMessage, chatId, chats, setInputValue, modal: {content, isOpen}}) => {
     const message = chats[chatId]?.draft?.mainInputValue?.message;
     const inputValue = chats[chatId]?.draft?.mainInputValue?.value || '';
-    let replyMessageId = (message && typeof message !== 'object') ? message : null;
-    let forwardedMessageId = (message && typeof message === 'object') ? message._id : null;
-    console.log(forwardedMessageId)
+    const  replyMessageId =  message && message.hasOwnProperty('reply') ? message.reply?._id : null;
+    const forwardedMessageId = message && message.hasOwnProperty('forwarded') ? message.forwarded?._id : null;
 
 	return (chats[chatId]?.draft?.messageEditor && !chats[chatId]?.draft?.messageEditor?.message?.media) ? 
         <InputAreaMessageEditor chatId={chatId}/> 
         :
 		<InputAreaWrapper>
-            <MessageDraftBox chat={chats[chatId]}>
+            <MessageReplyForwarded chat={chats[chatId]}>
                 
-            </MessageDraftBox>
+            </MessageReplyForwarded>
             
             <div style={{display: 'flex', alignItems: 'center', padding: '10px 0'}}>
                 <MessageDropZone chatId={chatId}/>
@@ -33,18 +31,18 @@ const InputArea = ({sendMessage, deleteDraftMessage, chatId, chats, setInputValu
                     value={content === 'messageMediaModal' && isOpen ? '' : inputValue}         
                     onChange={e=>{setInputValue(chatId, e.target.value, 'mainInputValue')}}
                     maxRows={8}
+                    disabled={forwardedMessageId ? true : false}
                     placeholder="Write a message..." 
                 />
-                {inputValue ? 
+                {inputValue || forwardedMessageId ? 
                 <SendRoundedIcon
                     style={{margin: '0 16px', cursor: "pointer"}}
                     color="primary"
-                    // src={Plane} 
                     onClick={
                         async() => {
-                            let val = await sendMessage(null, chatId, inputValue.replace(/^\s+|\s+$/g, ''), null, replyMessageId, forwardedMessageId);
+                            let val = await sendMessage(null, chatId, forwardedMessageId ? 'forwarded message' : inputValue?.replace(/^\s+|\s+$/g, ''), null, replyMessageId, forwardedMessageId);
                             (val?.replyTo?._id || val?.forwarded?._id) && deleteDraftMessage(chatId, null)
-                            val && setInputValue(chatId, "", 'mainInputValue')
+                            val && !val?.forwarded?._id && setInputValue(chatId, "", 'mainInputValue')
                         }
                     }
                 /> : <div></div>}

src/components/InputArea/InputAreaMessageEditor.jsx

@@ -5,10 +5,7 @@ import { InputAreaWrapper, TextArea} from "./InputArea.style";
 import Plane from "./icons8-plane.png";
 import MessageDropZone from "../DropZone/MessageDropZone/MessageDropZone";
 import { actionDeleteDraftMessageId, actionDeleteReplyMessageId, actionSetInputMessageValue, actionSetMessageEditor } from "../../reducers/chatReducer";
-
 import SendRoundedIcon from '@mui/icons-material/SendRounded';
-
-import { MessageDraftBox } from "../MessageDraft/MessageDraftBox";
 import {MessageEditor} from "../MessageDraft/MessageEditor";
 
 const InputAreaMessageEditor = ({chats, chatId, deleteMessageEditor, sendMessage, setInputValue}) => {

src/components/Message/Message.jsx

@@ -4,10 +4,9 @@ import { backendURL } from "../../helpers/gql";
 import MessageOptions from "../MessageOptions/MessageOptions";
 import { ReplyMessage } from "../ReplyMessage/ReplyMessage";
 import { convert } from "../Time/Time";
-import { MessageContainer, MessageFooter, MessageOwner, MessageText, MessageWrapper, TimeMessage } from "./Message.style";
+import { ForwardedMessageHeader, MessageContainer, MessageFooter, MessageOwner, MessageText, MessageWrapper, TimeMessage } from "./Message.style";
 import { saveAs } from "file-saver";
 import { MemoMessageMediaContainer, MessageMediaContainer } from "../MessageMediaContainer/MessageMediaContainer";
-import { ForwardedMessage } from "../ForwardedMessage/ForwardedMessage";
 
 
 
@@ -15,6 +14,7 @@ import { ForwardedMessage } from "../ForwardedMessage/ForwardedMessage";
 export const Message = ({mes, chatId}) => {
 
 	const owner = true;
+	const checkedMessage = mes.forwarded ? mes.forwarded : mes; //check message (it has forwarded message or not, if it has return forwarded mes)
   
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -25,32 +25,24 @@ export const Message = ({mes, chatId}) => {
       setAnchorEl(null)
     };
 
-
-	return (mes.forwarded ? 
-		<div>
-			<MessageWrapper onClick={(e) => {handleClick(e)}}>
-				<MessageContainer>
-					<ForwardedMessage messsage={mes.forwarded}/> 
-				</MessageContainer>
-			</MessageWrapper>
-			<MessageOptions message={mes} chatId={chatId} handleClose={handleClose} open={open} anchorEl={anchorEl}/>
-		</div>
 	
-		: 
+	return (
         <div>
-        <MessageWrapper onClick={(e) => {handleClick(e)}}>
-				<MessageContainer>
-					{mes?.replyTo && <ReplyMessage owner={owner} message={mes.replyTo}/>}
-					{mes?.media && mes?.media?.length !==0 && <MemoMessageMediaContainer media={mes.media}/>}
-					<MessageText>{mes.text.replace(/ /g, "\u00a0")}</MessageText>
-					<MessageFooter>
-						<MessageOwner>{mes.owner.nick || 'nick'}</MessageOwner>
-						<TimeMessage owner={owner}>{convert(mes.createdAt).getTime()}</TimeMessage>
-					</MessageFooter>
-				</MessageContainer>
-        </MessageWrapper>
-            <MessageOptions message={mes} chatId={chatId} handleClose={handleClose} open={open} anchorEl={anchorEl}/>
+			<MessageWrapper >
+					<MessageContainer onClick={(e) => {handleClick(e)}}>
+						{mes.forwarded && <ForwardedMessageHeader>{`Forwarded from ${checkedMessage?.owner?.nick || ''}`}</ForwardedMessageHeader>}
+						{checkedMessage?.replyTo && <ReplyMessage owner={owner} message={checkedMessage.replyTo}/>}
+						{checkedMessage?.media && checkedMessage?.media?.length !==0 && <MemoMessageMediaContainer media={checkedMessage.media}/>}
+						<MessageText>{checkedMessage?.text?.replace(/ /g, "\u00a0") || ''}</MessageText>
+						<MessageFooter>
+							<MessageOwner>{checkedMessage.owner.nick || 'nick'}</MessageOwner>
+							<TimeMessage owner={owner}>{convert(checkedMessage.createdAt).getTime()}</TimeMessage>
+						</MessageFooter>
+					</MessageContainer>
+			</MessageWrapper>
+            <MessageOptions message={checkedMessage} chatId={chatId} handleClose={handleClose} open={open} anchorEl={anchorEl}/>
          </div>)
 			
+			
 	
 }

src/components/Message/Message.style.js

@@ -50,3 +50,6 @@ export const MessageOwner = styled.div`
     margin-right: 30px;
 `;
 
+export const ForwardedMessageHeader = styled.div`
+    
+`;

src/components/MessageDraft/MessageDraftBox.jsx

@@ -1,16 +0,0 @@
-import { useEffect, useState } from "react";
-import { MessageDraftBoxWrapper } from "./MessageDraft.style";
-import ReplyMessage from "./ReplyMessageDraft";
-
-export const MessageDraftBox = ({chat}) => {
-    const message = chat?.draft?.mainInputValue?.message || null;
-    
-    return (message)? 
-        <MessageDraftBoxWrapper>
-             <ReplyMessage chat={chat} mes={message} /> 
-        </MessageDraftBoxWrapper>
-    :
-    <div></div>
-   
-    
-}

src/components/MessageDraft/ReplyMessageDraft.jsx

@@ -7,25 +7,27 @@ import { MessageDraftContainer, MessageDraftInfo, MessageDraftText, MessageDraft
 import { checkTypeFileForReply } from '../ReplyMessageMediaIcon/ReplyMessageMediaIcon';
 import { useEffect, useRef, useState } from 'react';
 
-const ReplyMessage = ({chat, deleteDraftMessage, mes}) => {
-    const message = typeof mes !== 'object' ?  chat?.messages?.[mes] : mes;
-    return (
+const MessageReplyForwarded = ({chat, deleteDraftMessage}) => {
+    const message = chat?.draft?.mainInputValue?.message || null;
+    // const message = typeof mes !== 'object' ?  chat?.messages?.[mes] : mes;
+    const typeMessage = message && Object.keys(message)
+    return (message) ? 
         <MessageDraftWrapper>
-            {typeof mes !== 'object' ? <ReplyIcon color="primary"/> : <ForwardRoundedIcon color="primary"/>}
+            {message.hasOwnProperty('reply') ? <ReplyIcon color="primary"/> : <ForwardRoundedIcon color="primary"/>}
             <MessageDraftContainer>
-                {message?.media && checkTypeFileForReply(message.media?.[0]?.type, false, message.media?.[0]?.url)}
+                {message?.[typeMessage]?.media && checkTypeFileForReply(message?.[typeMessage]?.media?.[0]?.type, false, message?.[typeMessage]?.media?.[0]?.url)}
                 <MessageDraftInfo>
                     <MessageOwnerDraftName>
-                        {message?.owner?.nick || ''}
+                        {message?.[typeMessage]?.owner?.nick || ''}
                     </MessageOwnerDraftName>
                     <MessageDraftText>
-                        {message?.text.replace(/ /g, "\u00a0") || ''}
+                        {message?.[typeMessage]?.text.replace(/ /g, "\u00a0") || ''}
                     </MessageDraftText>
                 </MessageDraftInfo>
             </MessageDraftContainer>
             <CloseRoundedIcon style={{cursor: 'pointer'}} color="primary" onClick={() => {deleteDraftMessage(chat._id, null)}}/>
         </MessageDraftWrapper>
-    ) 
+    : <div></div>
 }
 
-export default connect(null, {deleteDraftMessage: actionAddDraftMessage})(ReplyMessage);
+export default connect(null, {deleteDraftMessage: actionAddDraftMessage})(MessageReplyForwarded);

src/components/MessageMediaContainer/MessageMediaContainer.jsx

@@ -3,7 +3,6 @@ import { MessageMediaItem } from "../MessageMediaItem/MessageMediaItem"
 import { MessageMediaContainerWrap, MessageMediaList } from "./MessageMediaContainer.style"
 
 const MessageMediaContainer = ({media}) => {
-    console.log(media)
     return (
         <MessageMediaContainerWrap>
             <MessageMediaList>

src/components/MessageMediaModal/MessageMediaModal.jsx

@@ -16,8 +16,8 @@ const MessageMediaModal = ({chatId, handleClose, deleteMedia, deleteDraftMessage
     const media = chats[chatId].draft?.media || [];
     const inputValue = chats[chatId].draft?.mainInputValue?.value || '';
     const message = chats[chatId]?.draft?.mainInputValue?.message;
-    let replyMessageId = (message && typeof message !== 'object') ? message : null;
-    let forwardedMessageId = (message && typeof message === 'object') ? message._id : null;
+    const replyMessageId =  message && message.hasOwnProperty('reply') ? message.reply?._id : null;
+    // const forwardedMessageId = message && message.hasOwnProperty('forwarded') ? message.forwarded?._id : null;
     //remove media array
     useEffect(() => {
         open || deleteMedia(chatId);
@@ -72,8 +72,8 @@ const MessageMediaModal = ({chatId, handleClose, deleteMedia, deleteDraftMessage
                         variant="text" 
                         onClick={
                             async () => {
-                                let val = await sendMessage(null, chatId, inputValue.replace(/^\s+|\s+$/g, ''), media, replyMessageId, forwardedMessageId);
-                                (val?.replyTo?._id || val?.forwarded?._id) && deleteDraftMessage(chatId, null)
+                                let val = await sendMessage(null, chatId, inputValue.replace(/^\s+|\s+$/g, ''), media, replyMessageId, null);
+                                val?.replyTo?._id  && deleteDraftMessage(chatId, null)
                                 val && setInputValue(chatId, "", 'mainInputValue'); handleClose();
                             }
                         }

src/components/MessageOptions/MessageOptions.jsx

@@ -33,7 +33,7 @@ const MessageOptions = ({userId, addDraftMessageEditor, handleClose, addMessageI
                     horizontal: 'center',
                 }}
             >
-                <MenuItem onClick={() => {handleClose(); addDraftMessage(chatId, message._id)}} disableRipple>
+                <MenuItem onClick={() => {handleClose(); addDraftMessage(chatId, {reply: message})}} disableRipple>
                     <ImgIcon src={ReplyIcon} />
                     Reply
                 </MenuItem>

src/components/MessagesArea/MessagesArea.jsx

@@ -1,10 +1,14 @@
 import { connect } from "react-redux"
 import { Message } from "../Message/Message"
-import { MessagesAreaWrapper, SimpleBarWrapper } from "./MessagesArea.style"
+import { DropContainer, MessageAreaDrop, MessagesAreaWrapper, SimpleBarWrapper } from "./MessagesArea.style"
 import 'simplebar/dist/simplebar.min.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { actionGetMessageForChat } from "../../actions/actionGetMessageForChat";
+import { useDropzone } from "react-dropzone";
+import { actionOpenModal } from "../../reducers/modalReducer";
+import { actionSetDropMedia } from "../../reducers/chatReducer";
+import { addUploadDate } from "../utils/addUploadDate";
 // import { ClassNames } from "@emotion/react";
 
 // const Test = ({messagesByChat}) => {
@@ -22,7 +26,9 @@ import { actionGetMessageForChat } from "../../actions/actionGetMessageForChat";
 // 	)
 // }
 
-const MessagesArea = ({chats, chatId, getMessages}) => {
+
+
+const MessagesArea = ({chats, chatId, getMessages, openModal, onLoad}) => {
 	
 	// console.log(chats[chatId].messages)
 	const messagesByChat = Object.values(chats[chatId]?.messages || []);
@@ -53,17 +59,37 @@ const MessagesArea = ({chats, chatId, getMessages}) => {
 			console.log("unMount from parent")
 		};
 	  }, [chatId]);
-	
-	
+
+	  const {
+		getRootProps,
+		getInputProps,
+		isFocused,
+		isDragAccept,
+		isDragReject, 
+		acceptedFiles
+	  } = useDropzone({
+		  noClick: true,
+		  multiple: true
+	  });
+
+	  useEffect(()=>{
+        acceptedFiles[0] && openModal('messageMediaModal');
+        let files = addUploadDate(acceptedFiles)
+        acceptedFiles[0] && onLoad(chatId, files)
+    }, [acceptedFiles])
 	
 	return (
-		
-			<MessagesAreaWrapper >
-					 <SimpleBarWrapper  ref={ref}> 
-						{messagesByChat.map((item) => <Message key={item._id} chatId={chatId} mes={item}/>)}
-					 </SimpleBarWrapper> 
-			</MessagesAreaWrapper>
+			<DropContainer {...getRootProps({ isDragAccept, isFocused})}>
+				<div className="drop">drop files here</div>
+        		<input {...getInputProps()} />
+				<MessagesAreaWrapper >
+					<SimpleBarWrapper  ref={ref}> 
+					{messagesByChat.map((item) => <Message key={item._id} chatId={chatId} mes={item}/>)}
+					</SimpleBarWrapper>
+				</MessagesAreaWrapper>
+				
+      		</DropContainer>
 	)
 }
 
-export default connect(state=>({chats: state.chats || {}}), {getMessages : actionGetMessageForChat})(MessagesArea)
+export default connect(state=>({chats: state.chats || {}}), {getMessages : actionGetMessageForChat, openModal: actionOpenModal, onLoad: actionSetDropMedia})(MessagesArea)

src/components/MessagesArea/MessagesArea.style.js

@@ -3,9 +3,10 @@ import 'simplebar/dist/simplebar.min.css';
 import SimpleBar from 'simplebar-react';
 
 export const MessagesAreaWrapper = styled.div`
+    height: 100%;
     width: 100%;
     overflow: hidden;
-    
+    position: relative;
 `;
 
 export const SimpleBarWrapper = styled(SimpleBar)`
@@ -16,5 +17,40 @@ export const SimpleBarWrapper = styled(SimpleBar)`
         flex-direction: column-reverse;
         
     }
-    
+`;
+
+const getColor = (props) => {
+    if (props.isDragAccept) {
+        return '#00e676';
+    }
+    if (props.isDragReject) {
+        return '#ff1744';
+    }
+    if (props.isFocused) {
+        return '#2196f3';
+    }
+    return '#eeeeee';
+  }
+
+export const DropContainer = styled.div`
+    height: 100%;
+    overflow: hidden; 
+    width: 100%;
+    position: relative;
+    div.drop{
+        display: ${props => props.isDragAccept ? 'flex': 'none'};
+        justify-content: center;
+        font-size: 30px;
+        align-items: center;
+        position: absolute;
+        color: rgba(0,0,0,.4);
+        z-index: 100;
+        width: 100%;
+        height: 100%;
+        border: 3px dashed grey;
+        background: rgba(0,0,0,.3);
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 `;

src/components/SearchChatListItem/SearchChatListItem.jsx

@@ -5,7 +5,7 @@ import { SearchChatItemLink, SearchChatItemName, SearchChatItemWrapper } from ".
 
 export const SearchChatListItem = ({chat, addForwardedMessageToChat, forwardedMessage, handleClose}) => {
     return (
-        <SearchChatItemWrapper onClick={() => {handleClose(); addForwardedMessageToChat(chat?._id, forwardedMessage)}}>
+        <SearchChatItemWrapper onClick={() => {handleClose(); addForwardedMessageToChat(chat?._id, {forwarded: forwardedMessage})}}>
             <SearchChatItemLink to={`/main/${chat._id}`}>
                 <Avatar
                 alt={chat.title}