make forward

src/api-data/index.ts

@@ -340,6 +340,16 @@ const sentMessageReplyById = async <T>(id:string,message:string,caption:string):
   }
 };
 
+const sentMessageForwardById = async <T>(id:string,companionIdForwardToAndFrom:string): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.post('/messages/forward', { id,companionIdForwardToAndFrom });
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const sentImgMessageById = async <T>(id:string,formData: object,caption:string): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.post(`/messages/image/${id} ${caption}}`, formData);
@@ -434,6 +444,7 @@ export {
   unpinAllMessagesById,
   sentMessageById,
   sentMessageReplyById,
+  sentMessageForwardById,
   sentImgMessageById,
   sentAudioMessageById,
   sentVideoMessageById,

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/ForwardItem/index.tsx

@@ -50,14 +50,14 @@ interface IForwardItem {
   color: string,
   online: string,
   companionId: string,
-  handleListItemClick: (companionId: string) => void,
+  handleForwardTo: (companionId: string) => void,
 }
-const ForwardItem = ({name,lastName,avatarUrl,color,online,companionId,handleListItemClick}:IForwardItem) => {
+const ForwardItem = ({name,lastName,avatarUrl,color,online,companionId,handleForwardTo}:IForwardItem) => {
   const classes = useStyles()
   
   return (
     <div>
-      <ListItemButton onClick={() => handleListItemClick(companionId)}>
+      <ListItemButton onClick={() => handleForwardTo(companionId)}>
         <ListItemIcon className={classes.listItem_iconAvatar}>
           <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/index.tsx

@@ -1,11 +1,9 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
 import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
 import ForwardItem from './ForwardItem'
-import { getChatMemo } from '../../../../../../../redux/chat/selector'
 import { TChats } from '../../../../../../../typescript/redux/chats/types';
 
 
@@ -38,15 +36,12 @@ interface IForwardList {
   value: string,
   chats:TChats,
   total: string,
-  handleListItemClick: (companionId: string) => void,
+  handleForwardTo: (companionId: string) => void,
 }
 
-const ForwardList = ({ value, chats, total,handleListItemClick }: IForwardList) => {
+const ForwardList = ({ value, chats, total,handleForwardTo }: IForwardList) => {
   const classes = useStyles()
-  const chat = useSelector(getChatMemo)
   
-
-
   const filteredChatsMemo = useMemo((): TChats => {
     return chats.filter((el) => {
       const credentials = el.name + ' ' + el.lastName
@@ -62,7 +57,7 @@ const ForwardList = ({ value, chats, total,handleListItemClick }: IForwardList)
         filteredChatsMemo.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>
           <ForwardItem key={number} name={name} lastName={lastName}
             avatarUrl={avatarUrl} color={color} online={online}
-            companionId={companionId} handleListItemClick={handleListItemClick} />) :
+            companionId={companionId} handleForwardTo={handleForwardTo} />) :
         <AlertInfo name={`Can not find Chat by request: ${value}`} />}
     </List>
   </>) : <AlertInfo name='You do not have other Chats yet!' />

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/index.tsx

@@ -53,23 +53,21 @@ const ForwardSearchList = ({setModalForward,setIsForward,companionId}:IForwardSe
       setIsForward(undefined)
     }
   }
-  const handleListItemClick = (newCompanionId: string) => {
+  const handleForwardTo = (newCompanionId: string) => {
     setModalForward(false)
     dispatch(actionRightIsOpen(''))
     dispatch(actionOpenPinned(false))
     dispatch(asyncGetChatById(newCompanionId))
-    if (companionId !== newCompanionId) {
-      setIsForward((prevState) => prevState?{...prevState,companionId:newCompanionId}:prevState
-      )
-      setTimeout(() => dispatch(actionScrollChat(true)), 500)
-    }
+    setIsForward((prevState) => 
+      prevState ? { ...prevState, companionIdForwardToAndFrom: newCompanionId } : prevState)
+    if (companionId !== newCompanionId) setTimeout(() => dispatch(actionScrollChat(true)), 500)
   }
 
   return (
     <div onClick={handleCloseForwardModal} className={classes.overlay} id='overlay'>
       <div className={classes.container}>
         <ForwardSearch handleSearch={handleSearch} value={value} total={total}/>
-        <ForwardList value={value} chats={chats} total={total} handleListItemClick={handleListItemClick}/>
+        <ForwardList value={value} chats={chats} total={total} handleForwardTo={handleForwardTo}/>
       </div>
     </div>
   )

src/components/HomePage/CentralBar/ChatBar/SendMessage/index.tsx

@@ -25,7 +25,7 @@ import ForwardBar from "./ForwardBar";
 import ForwardSearchList from "./ForwardSearchList";
 import {
     sentMessageById, sentImgMessageById, sentAudioMessageById,
-    sentVideoMessageById,sentFileMessageById,sentMessageReplyById
+    sentVideoMessageById,sentFileMessageById,sentMessageReplyById,sentMessageForwardById
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
 import { getRightIsOpen } from '../../../../../redux/control/selector'
@@ -339,8 +339,8 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
            sentMessageReplyById(isReply._id, value, caption.trim())
            setIsReply(undefined)
         }
-        if (value && !isReply && isForward) {
-           console.log('Sent forwarded message to me')
+        if (!isReply && isForward) {
+           sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom)
            setIsForward(undefined)
         }      
         if (mediaBlobUrl && type === 'recording') {
@@ -494,10 +494,19 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
 
   useEffect(() => {
     defaultState()
-  }, [isReply,isForward,companionId])
+  }, [isReply, isForward, companionId])
+  
+  useEffect(() => {
+    setIsReply(undefined)
+  }, [companionId, setIsReply])
+  
+  useEffect(() => {
+    const companionIdForwardToAndFrom = isForward?.companionIdForwardToAndFrom
+    if(companionIdForwardToAndFrom&&companionIdForwardToAndFrom !== companionId) setIsForward(undefined)
+  },[companionId])  
   
     return (
-        <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
+        <div className={value || file || status === 'stopped' || _status === 'stopped' || isForward ?classes.containerActive:classes.container}>
           {isArrow && <div className={classes.borderTop}></div>}
           {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
             handleScrollToTheMessage={handleScrollToTheMessage} />}
@@ -540,13 +549,13 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                     style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward? 'none' : 'block' }} />                           
                 <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                     sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
-                    style={{display: value || file || status === 'stopped'  || _status === 'stopped' ? 'block':'none' }}/>                
+                    style={{display: value || file || status === 'stopped'  || _status === 'stopped' || isForward? 'block':'none' }}/>                
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                     sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
                     style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: file || status || _status ? 'none' : "auto",
+                    pointerEvents: file || status || _status || isForward ? 'none' : "auto",
                         '&:hover': { color: 'rgb(41, 139, 231)' }, marginRight:1}}/>
                 <CommentIcon onClick={handleOpenCaption} 
                     fontSize='medium' sx={{color: isOpenCaption || caption ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
@@ -575,9 +584,9 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                     </InputAdornment>
                   ),}}/>
                 </div>
-                <textarea disabled={file || type === 'recording' || type === 'filming' ? true : false} value={value} onBlur={handleBlurTextarea}
+                <textarea disabled={file || type === 'recording' || type === 'filming' || isForward? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
-                    placeholder={file ? 'The File is ready to send' : status === null && _status === null ? 'Message' :
+                    placeholder={file || isForward ? `${file?'The File is ready to send':'Forward Message is ready to send'}` : status === null && _status === null ? 'Message' :
                     `${status === 'stopped' || _status === 'stopped' ? type === 'recording' || type === 'filming'?'Recorded':'Message':'Recording in progress...'}`} rows={1}
                     style={{color:value || file || type === 'recording' || type === 'filming' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
                 </textarea>

src/components/HomePage/CentralBar/ChatBar/index.tsx

@@ -88,15 +88,9 @@ interface IChatBar {
   openPinned: boolean,
   pinnedMessagesMemo: TPinnedMessages,
   handleUnpinAll: () => void,
-  isReply:TMessage | undefined,
-  setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
-  isForward: TMessage | undefined,
-  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
-  modalForward: boolean,
-  setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
 }
 
-const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll,isReply,setIsReply,isForward,setIsForward,modalForward,setModalForward}:IChatBar) => {
+const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll}:IChatBar) => {
   const classes = useStyles();
   const dispatch = useDispatch()
   const messagesMemo = useSelector(getMessagesMemo)
@@ -105,6 +99,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const scrollChat = useSelector(getScrollChat)
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{ new: number, mute: boolean }>({ new: 0, mute: false })
+  const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
+  const [isForward, setIsForward] = useState<TMessage | undefined>(undefined)
+  const [modalForward, setModalForward] = useState<boolean>(false)
   let time: any
   const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)  
   const handleSelected = (_id: string) => {

src/components/HomePage/CentralBar/index.tsx

@@ -1,18 +1,14 @@
 import Grid from '@mui/material/Grid'
-import { useState,useEffect,useRef } from 'react'
+import { useState,useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import isEqual from 'lodash.isequal';
 
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { getPinnedMessagesMemo } from '../../../redux/pinnedMessages/selector'
-import { getMessagesMemo } from '../../../redux/messages/selector'
 import { TRightIsOpen } from '../../../typescript/redux/control/types'
 import { getOpenPinned } from '../../../redux/control/selector'
 import { actionOpenPinned } from '../../../redux/control/action'
 import { unpinAllMessagesById } from '../../../api-data'
-import { TMessage } from "../../../typescript/redux/messages/types"; 
-
 
 interface ICentralBar {
   rightIsOpen: TRightIsOpen,
@@ -24,14 +20,10 @@ interface ICentralBar {
 const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentralBar) => {
   const dispatch = useDispatch()
   const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
-  const messagesMemo = useSelector(getMessagesMemo)
   const openPinned = useSelector(getOpenPinned)
   const [selectedArr, setSelectedArr] = useState<string[] | []>([])
   const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
-  const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
-  const [isForward, setIsForward] = useState<TMessage | undefined>(undefined)
-  const [modalForward, setModalForward] = useState<boolean>(false)
-  const refCompanionId = useRef<null | string>(null)
+  
   const handleClearSelect = () => {
     selectedArr.length > 0 && setSelectedArr([])
     isSomeSelected && setIsSomeSelected(false)
@@ -41,10 +33,6 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
     openPinned && dispatch(actionOpenPinned(false))
     unpinAllMessagesById(pinnedMessagesMemo.map(({_id}) => _id))
   }
-
-  useEffect(() => {
-    refCompanionId.current = companionId
-  },[companionId])
   
   useEffect(() => {
     if(pinnedMessagesMemo.length === 0 && openPinned) dispatch(actionOpenPinned(false))
@@ -53,32 +41,7 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
   useEffect(() => {
     setIsSomeSelected(false)
     setSelectedArr([])
-    setIsReply(undefined)
-  }, [companionId])
-  
-  useEffect(() => {
-    if (isReply) {
-      const reply = messagesMemo.find((el) => el._id === isReply._id)
-      if (!reply) {
-        setIsReply(undefined)
-      } else if (isEqual(isReply, reply) === false) {
-        setIsReply(reply)
-      }
-    }
-  }, [messagesMemo, isReply])
-  
-  useEffect(() => {
-    if (isForward && isForward.companionId !== companionId) {
-      setIsForward(undefined)
-      // const forward = messagesMemo.find((el) => el._id === isForward._id)
-      // if (!forward) {
-      //   setIsForward(undefined)
-      //   setModalForward(false)
-      // } else if (isEqual(isForward, forward) === false) {
-      //   setIsForward(forward)
-      // }
-    }
-  }, [messagesMemo, companionId, isForward])   
+  }, [companionId])  
 
     return ( 
      <Grid item lg={rightIsOpen?8:12}>
@@ -90,10 +53,7 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
         <Grid item lg={12} style={{backgroundImage}}>
           <ChatBar chatDivRef={chatDivRef} selectedArr={selectedArr} setSelectedArr={setSelectedArr}
             isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}
-            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo}
-            handleUnpinAll={handleUnpinAll} isReply={isReply} setIsReply={setIsReply}
-            isForward={isForward} setIsForward={setIsForward}
-            modalForward={modalForward} setModalForward={setModalForward}/>
+            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll}/>
         </Grid>
       </Grid>
     )   

src/typescript/redux/allMessages/types.ts

@@ -5,6 +5,8 @@ export type TMessage = {
   replyName: string,
   lastName: string,
   replyLastName: string,
+  forwardName: string,
+  forwardLastName: string,
   avatarUrl:string,
   color: string,
   number:string,
@@ -13,6 +15,7 @@ export type TMessage = {
   fullType:string,
   companionId: string,
   companionIdFlow: string,
+  companionIdForwardToAndFrom: string,
   caption: string,
   replyCaption: string,
   emoji: string,

src/typescript/redux/messages/types.ts

@@ -5,6 +5,8 @@ export type TMessage = {
   replyName: string,
   lastName: string,
   replyLastName: string,
+  forwardName: string,
+  forwardLastName: string,
   avatarUrl:string,
   color: string,
   number:string,
@@ -20,6 +22,7 @@ export type TMessage = {
   oldId: string,
   companionId: string,
   companionIdFlow: string,
+  companionIdForwardToAndFrom: string,
   owner: any,
   createdAt: string,
   updatedAt: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -5,6 +5,8 @@ export type TPinnedMessage = {
   replyName: string,
   lastName: string,
   replyLastName: string,
+  forwardName: string,
+  forwardLastName: string,
   avatarUrl:string,
   color: string,
   number:string,
@@ -20,6 +22,7 @@ export type TPinnedMessage = {
   oldId: string,
   companionId: string,
   companionIdFlow: string,
+  companionIdForwardToAndFrom: string,
   owner: any,
   createdAt: string,
   updatedAt: string,