work on forward

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

@@ -1,10 +1,13 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { useDispatch } from "react-redux";
 import CloseIcon from '@mui/icons-material/Close';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 
 import { firstLetter,slicedWord } from "../../../../../../helpers";
 import { TMessage } from "../../../../../../typescript/redux/messages/types";
+import { asyncGetChatById } from '../../../../../../redux/chat/operations'
+import { actionRightIsOpen, actionScrollChat, actionOpenPinned } from '../../../../../../redux/control/action'
 
 const useStyles = makeStyles({   
   replyTop : {
@@ -44,20 +47,32 @@ const useStyles = makeStyles({
 });
 
 interface IForwardBar {
+  companionId: string,
   isForward:TMessage,
   handleCloseForward: () => void,
-  handleScrollToTheMessage:(_id:string) => void
+  handleScrollToTheMessage: (_id: string) => void,
+  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
 }
 
-const ForwardBar = ({ isForward, handleCloseForward,handleScrollToTheMessage }: IForwardBar) => {
+const ForwardBar = ({ companionId,isForward, handleCloseForward,handleScrollToTheMessage,setIsForward }: IForwardBar) => {
   const classes = useStyles();
+  const dispatch = useDispatch()
+  
+  const handleScrollHereOrBack = () => {
+    if (companionId === isForward.companionId) return handleScrollToTheMessage(isForward._id)
+    setIsForward(undefined)
+    dispatch(actionRightIsOpen(''))
+    dispatch(actionOpenPinned(false))
+    dispatch(asyncGetChatById(isForward.companionId))
+    setTimeout(() => handleScrollToTheMessage(isForward._id), 2000)
+  }
   
   return (
     <div className={classes.replyTop}>
       <CloseIcon onClick={handleCloseForward} className={classes.replyIconClose} />
       <div className={classes.replyColumn}></div>
         <ul className={classes.replyListWrapper}>
-          <MenuItem onClick={() => handleScrollToTheMessage(isForward._id)}>
+          <MenuItem onClick={handleScrollHereOrBack}>
             <ListItemText
               primary={`${firstLetter(isForward.name)}${slicedWord(isForward.name, 15, 1)} 
               ${firstLetter(isForward.lastName)}${slicedWord(isForward.lastName, 15, 1)}`}

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

@@ -1,20 +1,18 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
 import { useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
 import ForwardItem from './ForwardItem'
 import { getChatMemo } from '../../../../../../../redux/chat/selector'
-import { asyncGetChatById } from '../../../../../../../redux/chat/operations'
-import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../../../redux/control/action'
 import { TChats } from '../../../../../../../typescript/redux/chats/types';
 
 
 const useStyles = makeStyles({
   list: {
     width: '100%',
-    maxHeight: '53vh',
+    maxHeight: '63vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -39,20 +37,15 @@ const useStyles = makeStyles({
 interface IForwardList {
   value: string,
   chats:TChats,
-  total: string
+  total: string,
+  handleListItemClick: (companionId: string) => void,
 }
 
-const ForwardList = ({ value, chats, total }: IForwardList) => {
+const ForwardList = ({ value, chats, total,handleListItemClick }: IForwardList) => {
   const classes = useStyles()
-  const dispatch = useDispatch()
   const chat = useSelector(getChatMemo)
   
-  const handleListItemClick = (companionId: string) => {
-    dispatch(actionRightIsOpen(''))
-    dispatch(actionOpenPinned(false))
-    dispatch(asyncGetChatById(companionId))
-    if (chat.companionId !== companionId) setTimeout(() => dispatch(actionScrollChat(true)), 500)
-  }
+
 
   const filteredChatsMemo = useMemo((): TChats => {
     return chats.filter((el) => {

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

@@ -11,7 +11,7 @@ const SearchBar = styled('div')(() => ({
   borderRadius: '20px',
   backgroundColor: '#f1f0f0', 
   width: '100%',
-  margin:'0 5% 0 5%'
+  marginLeft: 5,
 }));
 
 const SearchIconWrapper = styled('div')(({ theme }) => ({
@@ -40,7 +40,7 @@ const useStyles = makeStyles({
   toolBar: {
     color: '#b1aeae',
     height: '7vh',
-    width:'100%'
+    width: '100%',
   },
   searchBarActive: {
     outline: '2px solid  #2184f7',
@@ -68,7 +68,7 @@ const ForwardSearch = ({handleSearch,value,total}:IForwardSearch) => {
   return (
     <Toolbar className={classes.toolBar} >
       <IconButton aria-label="delete" size="medium">
-        <CloseIcon className={classes.iconClose} fontSize='medium'/>
+        <CloseIcon id='cancel' className={classes.iconClose} fontSize='medium'/>
       </IconButton>
       <SearchBar className={!value||disabled?undefined:classes.searchBarActive}>
           <SearchIconWrapper>

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

@@ -1,36 +1,76 @@
 import { makeStyles } from '@material-ui/core'
 import { useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector,useDispatch } from 'react-redux'
 
 import ForwardSearch from './ForwardSearch'
 import ForwardList from './ForwardList'
+import { asyncGetChatById } from '../../../../../../redux/chat/operations'
+import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../../redux/control/action'
 import { getStateMemo } from '../../../../../../redux/chats/selector'
+import { TMessage } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },  
   container: {
     backgroundColor: 'white',
     width: '22vw',
     position: 'absolute',
-    top: '10vh',
-    height:'80vh',
+    top: '15vh',
+    height:'70vh',
     left: '39vw',
     display: 'flex',
     flexWrap: 'wrap',
-    padding:10,
+    alignItems: 'start',
+    alignContent:'start',
     borderRadius:10,
   }
 })
 
-const ForwardSearchList = () => {
+interface IForwardSearchList {
+  setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
+  companionId: string,
+}
+const ForwardSearchList = ({setModalForward,setIsForward,companionId}:IForwardSearchList) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const { total,chats } = useSelector(getStateMemo)
   const [value, setValue] = useState<string>('')
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
+  const handleCloseForwardModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') {
+      setModalForward(false)
+      setIsForward(undefined)
+    }
+  }
+  const handleListItemClick = (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)
+    }
+  }
 
   return (
-    <div className={classes.container}>
-      <ForwardSearch handleSearch={handleSearch} value={value} total={total}/>
-      <ForwardList value={value} chats={chats} total={total}/>
+    <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}/>
+      </div>
     </div>
   )
 }

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

@@ -276,10 +276,12 @@ interface ISendMessage{
   setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
   isForward: TMessage | undefined,
   setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
-  handleScrollToTheMessage: (_id:string) => void
+  modalForward: boolean,
+  setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
+  handleScrollToTheMessage: (_id: string) => void,
 }
 
-const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,handleScrollToTheMessage }:ISendMessage) => {
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,modalForward,setModalForward,handleScrollToTheMessage }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const rightIsOpen = useSelector(getRightIsOpen)
@@ -333,12 +335,12 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
 
     const sentMessage = async () => {
         if (value && !isReply && !isForward) sentMessageById(companionId, value, caption.trim())
-        if (value && isReply) {
+        if (value && isReply && !isForward) {
            sentMessageReplyById(isReply._id, value, caption.trim())
            setIsReply(undefined)
         }
-        if (value && isForward) {
-           console.log('Sent forwarded')
+        if (value && !isReply && isForward) {
+           console.log('Sent forwarded message to me')
            setIsForward(undefined)
         }      
         if (mediaBlobUrl && type === 'recording') {
@@ -492,25 +494,18 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
 
   useEffect(() => {
     defaultState()
-  }, [isReply])
-
-  useEffect(() => {
-    defaultState()
-  }, [isForward])  
-  
-  useEffect(() => {
-    defaultState()
-  },[companionId])
+  }, [isReply,isForward,companionId])
   
     return (
         <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
           {isArrow && <div className={classes.borderTop}></div>}
-          {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply} handleScrollToTheMessage={handleScrollToTheMessage} />}
-          {isForward &&
-            <div className={classes.overlay} id='overlay'>
-              <ForwardSearchList/>
-            </div>}
-          {/* {isForward && <ForwardBar isForward={isForward} handleCloseForward={handleCloseForward} handleScrollToTheMessage={handleScrollToTheMessage}/>} */}
+          {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
+            handleScrollToTheMessage={handleScrollToTheMessage} />}
+          {isForward && modalForward && <ForwardSearchList setModalForward={setModalForward}
+            setIsForward={setIsForward} companionId={companionId}/>}
+          {isForward && !modalForward && <ForwardBar companionId={companionId} 
+            isForward={isForward} handleCloseForward={handleCloseForward}
+            handleScrollToTheMessage={handleScrollToTheMessage} setIsForward={setIsForward}/>}
             {isFilming && _status !== 'stopped' &&                
              <>
                 <div className={classes.pauseLeft}>
@@ -542,13 +537,13 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                     || (_status === 'stopped'&&type) ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                     sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
-                    style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply ? 'none' : 'block' }} />                           
+                    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' }}/>                
                 <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 ? 'block' : 'none'}}/>
+                    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",
@@ -566,11 +561,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                 <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                   style={{ display: isOpenCaption ? 'block' : 'none' }}>
                    {isOpenCaptionEmoji && <div className={classes.emoji}
-                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply?'23vh':'16vh' }}>
+                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply || isForward?'23vh':'16vh' }}>
                       <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'caption')} />
                    </div>}          
                    <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
-                    style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply?'78.5vh':'85vh' }}
+                    style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply || isForward?'78.5vh':'85vh' }}
                     placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'
                     InputProps={{
                       startAdornment: (<InputAdornment position="start">
@@ -589,11 +584,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                 <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='medium'
                  sx={{color: isOpenCamera || type === 'base64' ? 'rgb(62, 149, 231)' : '#6b6b6b', marginRight: 1, cursor: 'pointer',
                    pointerEvents: type === 'content' || type === 'application' || value || status !== null
-                   || _status !== null || isReply ? 'none' : "auto",
+                   || _status !== null || isReply || isForward ? 'none' : "auto",
                   '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                   fontSize='medium' sx={{color: isOpenMenu || type === 'content' || type === 'application' ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply ? 'none' : "auto", '&:hover':
+                    pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply || isForward? 'none' : "auto", '&:hover':
                     { color: 'rgb(41, 139, 231)'}}}/>
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>

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

@@ -92,9 +92,11 @@ interface IChatBar {
   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}:IChatBar) => {
+const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll,isReply,setIsReply,isForward,setIsForward,modalForward,setModalForward}:IChatBar) => {
   const classes = useStyles();
   const dispatch = useDispatch()
   const messagesMemo = useSelector(getMessagesMemo)
@@ -102,7 +104,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const { companionId,total,seen,mute } = useSelector(getChat)
   const scrollChat = useSelector(getScrollChat)
   const [isArrow, setIsArrow] = useState<boolean>(false)
-  const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
+  const [isNew, setIsNew] = useState<{ new: number, mute: boolean }>({ new: 0, mute: false })
   let time: any
   const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)  
   const handleSelected = (_id: string) => {
@@ -118,8 +120,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   }
   
   const handleForward = (_id: string) => {
-    openPinned&& dispatch(actionOpenPinned(false))
-    setIsForward(renderArr.find((el) => el._id ===_id))
+    openPinned && dispatch(actionOpenPinned(false))
+    isReply&&setIsReply(undefined)
+    setIsForward(renderArr.find((el) => el._id === _id))
+    setModalForward(true)
   }    
 
   const handleScrollTo = useCallback(() => {
@@ -457,7 +461,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         </div>
       </div>
       {!openPinned && !isSomeSelected && <SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply}
-       isForward={isForward} setIsForward={setIsForward} handleScrollToTheMessage={handleScrollToTheMessage} />}
+        isForward={isForward} setIsForward={setIsForward}
+        modalForward={modalForward} setModalForward={setModalForward}
+        handleScrollToTheMessage={handleScrollToTheMessage}/>}
       {openPinned&&!isSomeSelected&&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );

src/components/HomePage/CentralBar/index.tsx

@@ -1,5 +1,5 @@
 import Grid from '@mui/material/Grid'
-import { useState,useEffect } from 'react'
+import { useState,useEffect,useRef } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import isEqual from 'lodash.isequal';
 
@@ -30,7 +30,8 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
   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)
@@ -40,6 +41,10 @@ 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))
@@ -60,7 +65,20 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
         setIsReply(reply)
       }
     }
-  },[messagesMemo,isReply])   
+  }, [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])   
 
     return ( 
      <Grid item lg={rightIsOpen?8:12}>
@@ -74,7 +92,8 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
             isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}
             openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo}
             handleUnpinAll={handleUnpinAll} isReply={isReply} setIsReply={setIsReply}
-            isForward={isForward} setIsForward={setIsForward}/>
+            isForward={isForward} setIsForward={setIsForward}
+            modalForward={modalForward} setModalForward={setModalForward}/>
         </Grid>
       </Grid>
     )