start call and add deleted

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

@@ -5,6 +5,7 @@ import { useSelector,useDispatch } from "react-redux";
 import ArrowBack from "./ArrowBack";
 import SendMessage from "./SendMessage";
 import UnpinBar from "./UnpinBar";
+import MessageLeftDeleted from "./Messages/MessageLeftDeleted";
 import MessageLeftText from './Messages/MessageLeftText'
 import MessageLeftReply from "./Messages/MessageLeftReply";
 import MessageLeftForward from "./Messages/MessageLeftForward";
@@ -12,6 +13,7 @@ import MessageLeftImage from './Messages/MessageLeftImage'
 import MessageLeftAudio from './Messages/MessageLeftAudio'
 import MessageLeftVideo from './Messages/MessageLeftVideo'
 import MessageLeftFile from "./Messages/MessageLeftFile";
+import MessageRightDeleted from "./Messages/MessageRightDeleted";
 import MessageRightText from './Messages/MessageRightText'
 import MessageRightReply from "./Messages/MessageRightReply";
 import MessageRightForward from "./Messages/MessageRightForward";
@@ -179,7 +181,15 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     dispatch(actionOpenPinned(false))
     dispatch(asyncStartChatById(companionIdForwardToAndFrom))
     setTimeout(() => handleScrollToTheMessage(oldId), 2000)
-  }    
+  }
+  
+  const handleOpenTheChat = (companionIdForwardToAndFrom: string | null) => {
+    if (companionIdForwardToAndFrom&&companionId !== companionIdForwardToAndFrom) {
+      dispatch(actionRightIsOpen(''))
+      dispatch(actionOpenPinned(false))
+      dispatch(asyncStartChatById(companionIdForwardToAndFrom))
+    }
+  }
   
   useEffect(() => {
     if (scrollChat) {
@@ -230,7 +240,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         <div className={classes.messagesBody}>
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
           createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
-          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited},i) => {
+          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited,deleted},i) => {
           const watched = seenCompanion - (i + 1) < 0 ? false : true
           let isUnread
           let isTime
@@ -282,7 +292,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
           const urlForward = `${prodAwsS3}/${forwardMessage}`
           const urlReply = `${prodAwsS3}/${replyMessage}`
           if (number !== userNumber) {
-            if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
+            if (type === 'text' && !oldId && !companionIdForwardToAndFrom && !deleted) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
               {isUnread&&<MessageDivider message='Unread Messages'/>}
               <MessageLeftText
@@ -307,6 +317,36 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                handleReply={handleReply}
                handleForward={handleForward} 
                /></div>)
+            if (type === 'text' && deleted) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
+               <MessageLeftDeleted
+                tongue={isTongue}
+                watched={watched}
+                edited={edited}
+                companionIdForwardToAndFrom={companionIdForwardToAndFrom}
+                avatarUrl={avatarUrl}
+                color={color}
+                name={name}
+                lastName={lastName}
+                forwardReplyName={companionIdForwardToAndFrom?forwardName:replyName}
+                forwardReplyLastName={companionIdForwardToAndFrom?forwardLastName:replyLastName}
+                message={message}
+                createdAt={createdAt}
+                caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
+                pinned={pinned}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
+                _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
+                handleForward={handleForward}
+                handleEdit={handleEdit}
+                handleOpenTheChat={handleOpenTheChat}
+                 /></div>)                 
             if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
               {isUnread&&<MessageDivider message='Unread Messages'/>}
@@ -479,7 +519,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)             
           } else {
-            if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
+            if (type === 'text' && !oldId && !companionIdForwardToAndFrom && !deleted) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
               {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageRightText   
@@ -505,6 +545,36 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                 handleEdit={handleEdit}
                 /></div>)
+            if (type === 'text' && deleted) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
+              <MessageRightDeleted
+                tongue={isTongue}
+                watched={watched}
+                edited={edited}
+                companionIdForwardToAndFrom={companionIdForwardToAndFrom}
+                avatarUrl={avatarUrl}
+                color={color}
+                name={name}
+                lastName={lastName}
+                forwardReplyName={companionIdForwardToAndFrom?forwardName:replyName}
+                forwardReplyLastName={companionIdForwardToAndFrom?forwardLastName:replyLastName}
+                message={message}
+                createdAt={createdAt}
+                caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
+                pinned={pinned}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
+                _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
+                handleForward={handleForward}
+                handleEdit={handleEdit}
+                handleOpenTheChat={handleOpenTheChat}
+                  /></div>)                 
             if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
               {isUnread&&<MessageDivider message='Unread Messages'/>}

src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

@@ -25,32 +25,64 @@ const useStyles = makeStyles({
     width: '100vw',
     height: '100vh',
     zIndex: 100,
-    backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
   },  
   modalCall: {
-    background: 'rgb(5, 5, 5)',
+    background: 'rgb(36, 36, 36)',
     position: 'absolute',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center',
+    justifyContent: 'start',
     alignItems: 'center',
     justifyItems:"center",
-    width: '36vw',
-    height:'50vh',
-    left: '32vw',
-    bottom: '25vh',
+    width: '34vw',
+    // height:'50vh',
+    left: '33vw',
+    top: 0,
+    // bottom: '25vh',
     borderRadius: 7,
-    padding: 7,
   },
   rightIcons: {
     display: 'flex',
     justifyContent: 'end',
     alignContent: 'center',
     alignItems: 'center',
-    marginBottom: 50,
+    marginBottom: 40,
     width:'100%'
-  }
+  },
+  rightIconWrapper: {
+    color: '#ffffff',
+    cursor: 'pointer',
+    padding:'3px 10px 3px 10px',
+    '&:hover': {
+      backgroundColor:'rgb(54, 54, 54)'
+    }
+  },
+  rightIconWrapperClose: {
+    color: '#ffffff',
+    cursor: 'pointer',
+    padding:'3px 10px 3px 10px',
+    borderTopRightRadius:7,
+    '&:hover': {
+      backgroundColor:'#f02a2a'
+    }
+  },
+  statusCall: {
+    color: "#dfdfdf",
+    animation: 'ripple 4s infinite ease-in-out',
+  },
+  animatedDots: {
+    fontWeight: 'bold',
+    display:'inline-block',
+    fontFamily: 'monospace',
+    clipPath: 'inset(0 3ch 0 0)',
+    animation: `$run 2s steps(5) infinite`,   
+  },
+  '@keyframes run': {
+    to: {
+       clipPath: 'inset(0 -1ch 0 0)'
+    },
+  },  
 })
 
 const CallModal = ({setModalCall}:{setModalCall:any}) => {
@@ -69,11 +101,17 @@ const CallModal = ({setModalCall}:{setModalCall:any}) => {
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalCall}>
         <div className={classes.rightIcons}>
-          <MinimizeIcon style={{ color: '#ffffff',cursor:'pointer'}} fontSize='small' />
-          <CropLandscapeIcon style={{ color: '#ffffff',marginLeft:12,cursor:'pointer' }} fontSize='small' />
-          <CloseIcon style={{ color:'#ffffff',marginLeft:12,cursor:'pointer'}} fontSize='small' />
+          <div className={classes.rightIconWrapper}>
+            <MinimizeIcon fontSize='small' />
+          </div>
+          <div className={classes.rightIconWrapper}>
+            <CropLandscapeIcon fontSize='small' />
+          </div>
+          <div className={classes.rightIconWrapperClose}>
+            <CloseIcon fontSize='small' />
+          </div>
         </div>
-        <ListItemAvatar>
+        <ListItemAvatar style={{marginBottom:15}}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
              {`${firstLetter(name)}${firstLetter(lastName)}`}
@@ -81,8 +119,11 @@ const CallModal = ({setModalCall}:{setModalCall:any}) => {
         </ListItemAvatar>
         <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-          primaryTypographyProps={{ color: '#ffffff', fontSize: 22, fontWeight: 500 }}
-          secondary='ringing ...' secondaryTypographyProps={{color: '#ffffff',fontSize:17,marginBottom:20}}/>       
+          primaryTypographyProps={{ color: '#ffffff', fontSize: 20, fontWeight: 500 }} />
+        <ListItemText secondary={<span className={classes.statusCall}>
+            ringing<span className={classes.animatedDots}>
+              ...</span>
+          </span>}/>      
       </div>
     </div>      
    )

src/typescript/redux/allMessages/types.ts

@@ -24,6 +24,7 @@ export type TMessage = {
   emojiCompanion: string,
   pinned: boolean,
   edited: boolean,
+  deleted: boolean,
   idTime: string,
   oldId: string,
   owner: any,

src/typescript/redux/messages/types.ts

@@ -21,6 +21,7 @@ export type TMessage = {
   emojiCompanion: string,
   pinned: boolean,
   edited: boolean,
+  deleted: boolean,
   idTime: string,
   oldId: string,
   companionId: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -21,6 +21,7 @@ export type TPinnedMessage = {
   emojiCompanion: string,
   pinned: boolean,
   edited: boolean,
+  deleted: boolean,
   idTime: string,
   oldId: string,
   companionId: string,