add likes

src/api-data/index.ts

@@ -260,6 +260,16 @@ const removeMessageById = async <T>(id:string): Promise<T | undefined> => {
   }
 };
 
+const updateMessageById = async <T>(id:string,emoji:string): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.patch(`/messages/${id}`,{emoji});
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const sentMessageById = async <T>(id:string,message:string,caption:string): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.post('/messages', { id, message,caption });
@@ -356,6 +366,7 @@ export {
   typingChat,
   getChats,
   removeMessageById,
+  updateMessageById,
   sentMessageById,
   sentImgMessageById,
   sentAudioMessageById,

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

@@ -10,10 +10,11 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -177,21 +178,60 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },    
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },
 });
 
 interface IMessageLeftAudio {
   url:string,
   createdAt: string,
   fullType: string,
-  caption :string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,
   _id:string
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,caption,_id }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,_id }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);     
   const handleClose = (type: string | undefined): void => {
@@ -213,8 +253,18 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,_id }:IMessageLeftAud
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }    
-
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }
 
   return (
     <div className={classes.container}>
@@ -229,15 +279,22 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,_id }:IMessageLeftAud
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>  
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Audio link
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>           
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -9,9 +9,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -194,22 +195,61 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },    
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageLeftFile {
   url:string,
   createdAt: string,
   type: string,
-  caption :string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,
   _id:string
 }
 
-const MessageLeftFile = ({ url,createdAt,type,caption,_id }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);   
   const handleOpenRead = () => !read&&setRead(true)
@@ -233,7 +273,18 @@ const MessageLeftFile = ({ url,createdAt,type,caption,_id }:IMessageLeftFile) =>
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }   
+  }
+ 
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }  
 
   return (
     <div className={classes.container}>
@@ -255,9 +306,16 @@ const MessageLeftFile = ({ url,createdAt,type,caption,_id }:IMessageLeftFile) =>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -10,9 +10,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -225,7 +226,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },   
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessagesLeftImage {
@@ -235,15 +272,18 @@ interface IMessagesLeftImage {
   message: string,
   messages: any,
   fullType: string,
-  caption :string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,  
   _id:string
 }
 
-const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,caption,_id}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,caption,emoji,emojiCompanion,_id}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);    
   const handleOpenWatch = () => !watch&&setWatch(true)
@@ -267,7 +307,19 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,captio
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }   
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }
+  
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
       <div className={classes.wrapperOverlayImg}>
@@ -287,9 +339,16 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,captio
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>       
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -7,9 +7,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { firstLetter,slicedWord,timeStampMessage,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -170,7 +171,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },    
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 
@@ -179,14 +216,17 @@ interface IMessageLeftText {
   name:string,
   lastName:string,
   createdAt: string,
-  caption :string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,
   _id:string
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,caption,_id}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,_id}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -211,6 +251,17 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,_id}:IMessageL
     setSelected(true)
   }     
 
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  } 
+  
   return (
   <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
@@ -226,9 +277,16 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,_id}:IMessageL
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -9,9 +9,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
 const StyledMenu = styled((props:any) => (
@@ -181,21 +182,60 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },    
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageLeftVideo {
   url:string,
   createdAt: string,
   fullType: string,
-  caption :string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,  
   _id:string
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,caption,_id }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,_id }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -220,6 +260,16 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,_id }:IMessageLeftVid
     setSelected(true)
   }    
    
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }
 
   return (
     <div className={classes.container}>
@@ -231,9 +281,16 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,_id }:IMessageLeftVid
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -8,11 +8,12 @@ import ReactAudioPlayer from 'react-audio-player';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Divider from '@mui/material/Divider';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -153,7 +154,7 @@ const useStyles = makeStyles({
       color: '#000000',
       padding: 3,
       borderRadius: 5,
-  },  
+  }, 
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -176,7 +177,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },    
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageRightAudio {
@@ -184,13 +221,16 @@ interface IMessageRightAudio {
   createdAt: string,
   fullType: string,
   caption: string,
+  emoji: string,
+  emojiCompanion: string,  
   _id:string
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,caption,_id }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);     
   const handleClose = (type: string | undefined): void => {
@@ -212,6 +252,17 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id }:IMessageRightA
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
+  }
+
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
   }  
 
   return (
@@ -227,9 +278,16 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id }:IMessageRightA
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -9,9 +9,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -194,7 +195,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
   },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageRightFile {
@@ -202,14 +239,17 @@ interface IMessageRightFile {
   createdAt: string,
   type: string,
   caption: string,
+  emoji: string,
+  emojiCompanion: string,  
   _id:string
 }
 
-const MessageRightFile = ({ url,createdAt,type,caption,_id }:IMessageRightFile) => {
+const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);    
   const handleOpenRead = () => !read&&setRead(true)
@@ -238,6 +278,17 @@ const MessageRightFile = ({ url,createdAt,type,caption,_id }:IMessageRightFile)
     setSelected(true)
   }    
 
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }
+
   return (
     <div className={classes.container}>
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
@@ -258,9 +309,16 @@ const MessageRightFile = ({ url,createdAt,type,caption,_id }:IMessageRightFile)
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -10,9 +10,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -225,7 +226,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },      
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageRightImage {
@@ -236,14 +273,17 @@ interface IMessageRightImage {
   messages: any,
   fullType: string,
   caption: string,
+  emoji: string,
+  emojiCompanion: string,  
   _id:string
 }
 
-const MessageRightImage = ({url,createdAt,color,message,messages,fullType,caption,_id}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,message,messages,fullType,caption,emoji,emojiCompanion,_id}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);  
   const handleOpenWatch = () => !watch&&setWatch(true)
@@ -267,7 +307,19 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,captio
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }   
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }
+
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
       <div className={classes.wrapperOverlayImg}>
@@ -287,9 +339,16 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,captio
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -7,9 +7,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { firstLetter, slicedWord, timeStampMessage, copied } from '../../../../../../helpers'
-import { removeMessageById } from "../../../../../../api-data";
+import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -170,7 +171,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
   },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageRightText {
@@ -179,13 +216,16 @@ interface IMessageRightText {
   lastName:string,
   createdAt: string,
   caption: string,
+  emoji: string,
+  emojiCompanion: string, 
   _id:string
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,caption,_id}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,_id}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -208,7 +248,18 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,_id}:IMessage
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }   
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }  
 
   return (
   <div className={classes.container}>
@@ -225,9 +276,16 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,_id}:IMessage
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -9,9 +9,10 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
 
@@ -182,7 +183,43 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },    
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: 0,
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+   },  
 });
 
 interface IMessageRightVideo {
@@ -190,13 +227,16 @@ interface IMessageRightVideo {
   createdAt: string,
   fullType: string,
   caption: string,
+  emoji: string,
+  emojiCompanion: string,   
   _id:string
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,caption,_id }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,_id }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -219,7 +259,18 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,_id }:IMessageRightV
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }    
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {
+        updateMessageById(_id,'')
+        setEmojiIndex(null)
+    } else {
+      updateMessageById(_id,idEmoji)
+      setEmojiIndex(idEmoji)
+    }
+  }  
  
   return (
     <div className={classes.container}>
@@ -231,9 +282,16 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,_id }:IMessageRightV
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
-        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider/>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -136,7 +136,7 @@ const ChatBar = () => {
         className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messages.length > 0 ? messages.map(({ message, name, lastName, color,
-           createdAt,number, type,fullType,caption,_id }) => {
+           createdAt,number, type,fullType,caption,emoji,emojiCompanion,_id }) => {
           let isTime
           if (!time) {
             isTime = true
@@ -155,6 +155,8 @@ const ChatBar = () => {
                name={name}
                lastName={lastName}
                caption={caption}
+               emoji={emoji}
+               emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
             if (type === 'image') return (<div key={createdAt}>
@@ -167,6 +169,8 @@ const ChatBar = () => {
                 messages={messages}
                 fullType={fullType}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
@@ -176,6 +180,8 @@ const ChatBar = () => {
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
@@ -185,6 +191,8 @@ const ChatBar = () => {
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
             if (type) return (<div key={createdAt}>
@@ -194,6 +202,8 @@ const ChatBar = () => {
                 createdAt={createdAt}
                 type={type}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)             
           } else {
@@ -205,6 +215,8 @@ const ChatBar = () => {
                 name={name}
                 lastName={lastName}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
             if (type === 'image') return (<div key={createdAt}>
@@ -217,6 +229,8 @@ const ChatBar = () => {
                 messages={messages}
                 fullType={fullType}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
@@ -226,6 +240,8 @@ const ChatBar = () => {
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
@@ -235,6 +251,8 @@ const ChatBar = () => {
                  createdAt={createdAt}
                  fullType={fullType}
                  caption={caption}
+                 emoji={emoji}
+                 emojiCompanion={emojiCompanion}
                  _id={_id}
                    /></div>)
             if (type) return (<div key={createdAt}>
@@ -244,6 +262,8 @@ const ChatBar = () => {
                  createdAt={createdAt}
                  type={type}
                  caption={caption}
+                 emoji={emoji}
+                 emojiCompanion={emojiCompanion}
                  _id={_id}
                    /></div>)            
           }

src/helpers/index.ts

@@ -151,6 +151,8 @@ const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter
   }
 })
 
+const emojisArr = ['💘','😀','😍','😲','😡']            
+
 const prodBaseURL = 'http://localhost:3000'
 
 const prodAwsS3 = 'https://my-telegram-bucket.s3.eu-west-1.amazonaws.com'
@@ -174,6 +176,7 @@ export {
   handleSort,
   sortByRecent,
   filteredMessages,
+  emojisArr,
   prodBaseURL,
   prodAwsS3,
   refreshAppTime,

src/typescript/redux/allMessages/types.ts

@@ -10,7 +10,9 @@ export type TMessage = {
   fullType:string,
   companionId: string,
   companionIdFlow: string,
-  caption:string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,
   idTime: string,
   owner: any,
   createdAt: string,

src/typescript/redux/messages/types.ts

@@ -9,6 +9,8 @@ export type TMessage = {
   type: string,
   fullType: string,
   caption: string,
+  emoji: string,
+  emojiCompanion: string,
   idTime: string,
   companionId: string,
   companionIdFlow: string,