fix selected and start pin message

src/api-data/index.ts

@@ -260,6 +260,16 @@ const removeMessageById = async <T>(id:string): Promise<T | undefined> => {
   }
 };
 
+const removeSelectedMessagesById = async <T>(companionId:string,selectedArr:string[]): Promise<T | undefined> => {
+  try {
+    const { data } = await axios.patch('/messages/selected',{companionId,selectedArr});
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const updateMessageById = async <T>(id:string,emoji:string): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.patch(`/messages/${id}`,{emoji});
@@ -270,6 +280,16 @@ const updateMessageById = async <T>(id:string,emoji:string): Promise<T | undefin
   }
 };
 
+const pinMessageById = async <T>(id:string,pinned:boolean): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.patch(`/messages/pin/${id}`,{pinned});
+    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 });
@@ -366,7 +386,9 @@ export {
   typingChat,
   getChats,
   removeMessageById,
+  removeSelectedMessagesById,
   updateMessageById,
+  pinMessageById,
   sentMessageById,
   sentImgMessageById,
   sentAudioMessageById,

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

@@ -13,9 +13,10 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -255,13 +256,14 @@ interface IMessageLeftAudio {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -325,7 +327,13 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
              Copy Audio link
           </MenuItem>
         </CopyToClipboard>
-          CheckBoxIcon
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem> 
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)

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

@@ -12,8 +12,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
@@ -272,13 +273,14 @@ interface IMessageLeftFile {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -353,6 +355,13 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSom
              Copy File link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>       
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)

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

@@ -13,8 +13,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -304,13 +305,14 @@ interface IMessagesLeftImage {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -384,6 +386,13 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
              Copy Image link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>         
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)

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

@@ -10,8 +10,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -249,13 +250,14 @@ interface IMessageLeftText {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,
   _id:string
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -322,6 +324,13 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
              Copy message
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>          
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)

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

@@ -12,8 +12,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
@@ -259,13 +260,14 @@ interface IMessageLeftVideo {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -327,6 +329,13 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
              Copy Video link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>          
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)

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

@@ -13,8 +13,9 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -254,13 +255,14 @@ interface IMessageRightAudio {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected, }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected, }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -296,7 +298,6 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
 
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -325,6 +326,13 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
              Copy Audio link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
@@ -351,6 +359,7 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
         </div>  
       </div>}          
       </div>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
     </div>    
 )};
 

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

@@ -12,8 +12,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
@@ -272,13 +273,14 @@ interface IMessageRightFile {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightFile) => {
+const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -320,7 +322,6 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSo
 
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
@@ -356,6 +357,13 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSo
              Copy File link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
@@ -381,7 +389,8 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSo
           </Button>
         </div>  
       </div>}         
-      </div>
+     </div>
+     {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}      
     </div>    
 )};
 

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

@@ -13,8 +13,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -304,13 +305,14 @@ interface IMessageRightImage {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -357,7 +359,6 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
        </div>
     </div>  :
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -384,6 +385,13 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
              Copy Image link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
@@ -410,6 +418,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         </div>  
       </div>}         
       </div>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
     </div>   
 )};
 

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

@@ -10,9 +10,10 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr } from '../../../../../../helpers'
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -249,13 +250,14 @@ interface IMessageRightText {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -291,7 +293,6 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
 
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':undefined,
         border:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -321,6 +322,13 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
              Copy message
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
@@ -346,7 +354,8 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
           </Button>
         </div>  
       </div>}        
-     </div>
+      </div>
+{isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}      
    </div>    
 )};
 

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

@@ -12,8 +12,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { removeMessageById,updateMessageById } from "../../../../../../api-data";
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
@@ -260,13 +261,14 @@ interface IMessageRightVideo {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -302,7 +304,6 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
  
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -328,6 +329,13 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
              Copy Video link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            <PushPinIcon />
+             {!pinned?'Pin message' : 'Unpin message'}
+        </MenuItem>            
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
@@ -354,6 +362,7 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
         </div>  
       </div>}          
       </div>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
     </div>    
 )};
 

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

@@ -137,10 +137,14 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
   }, [total,seen,mute]); 
 
   useEffect(() => {
-    if (divRef.current) {
-      const { scrollHeight, clientHeight } = divRef.current
-      if(total !== seen&&scrollHeight === clientHeight) seenChat(companionId)
+    const handleReset = () => {
+      if (divRef.current) {
+         const { scrollHeight, clientHeight } = divRef.current
+         if (total !== seen && scrollHeight === clientHeight) seenChat(companionId)
+       }
     }
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
   }, [total, seen, companionId]);
 
   return (
@@ -149,7 +153,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
       <div ref={divRef} onScroll={debouncedHandleScroll}
         className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
-        {messages.length > 0 ? messages.map(({ message, name, lastName, color,
+        {messages.length > 0 ? messages.map(({ message, name, lastName, color,pinned,
            createdAt,number, type,fullType,caption,emoji,emojiCompanion,_id }) => {
           let isTime
           if (!time) {
@@ -171,6 +175,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
+               pinned={pinned}
                isSomeSelected={isSomeSelected}
                isSelected={isSelected}
                handleSelected={handleSelected}
@@ -186,6 +191,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}                
@@ -200,6 +206,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}                
@@ -214,6 +221,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}              
@@ -228,6 +236,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}              
@@ -244,6 +253,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}                
@@ -259,6 +269,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}
@@ -273,6 +284,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                pinned={pinned}
                 isSomeSelected={isSomeSelected}
                 isSelected={isSelected}
                 handleSelected={handleSelected}
@@ -287,6 +299,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                  caption={caption}
                  emoji={emoji}
                  emojiCompanion={emojiCompanion}
+                 pinned={pinned}
                  isSomeSelected={isSomeSelected}
                  isSelected={isSelected}
                  handleSelected={handleSelected}
@@ -301,6 +314,7 @@ const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:I
                  caption={caption}
                  emoji={emoji}
                  emojiCompanion={emojiCompanion}
+                 pinned={pinned}
                  isSomeSelected={isSomeSelected}
                  isSelected={isSelected}
                  handleSelected={handleSelected}

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

@@ -12,6 +12,9 @@ import { actionRightIsOpen } from '../../../../../redux/control/action'
 const useStyles = makeStyles({
   container: {
     marginLeft: 20,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems:'center'
   }, 
 })
 

src/components/HomePage/CentralBar/HeaderBar/PinnedBar/index.tsx

@@ -0,0 +1,76 @@
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import CloseIcon from '@mui/icons-material/Close';
+import { makeStyles } from '@material-ui/core'
+import { useDispatch,useSelector } from 'react-redux';
+import { useState,useEffect} from 'react';
+
+import { TMessages,TMessage } from '../../../../../typescript/redux/messages/types';
+import { getMessagesMemo } from '../../../../../redux/messages/selector';
+import { firstLetter,slicedWord,handleSort } from '../../../../../helpers';
+
+const useStyles = makeStyles({
+  container: {
+    marginLeft: 20,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems:'center'
+  },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  listWrapper: {
+    background: '#fdfdfd',
+    width: 400,
+    padding:0
+  },  
+})
+
+const PinnedBar = () => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const messagesMemo = useSelector(getMessagesMemo)
+  const [pinnedArr, setPinnedArr] = useState<TMessages>([])
+  const [openedPin, setOpenedPin] = useState<TMessage | null>(null)
+  const [openIndex, setOpenIndex] = useState<number>(0)
+  const handleActivePin = () => setOpenIndex(openIndex => openIndex + 1)
+  
+  useEffect(() => {
+    const messages = messagesMemo.filter((el) => el.pinned === true)
+    setPinnedArr(handleSort('updatedAt', messages, true))
+  }, [messagesMemo])
+
+  useEffect(() => {
+    const pinnedObj = pinnedArr[openIndex]
+    if (pinnedObj) setOpenedPin(pinnedObj)
+    else setOpenIndex(0)
+  }, [openIndex,pinnedArr])   
+
+  return openedPin ?
+    <Stack className={classes.container} direction="row">
+      <ul className={classes.listWrapper}>
+        <MenuItem onClick={handleActivePin}>
+          <ListItemText primary={`${firstLetter(openedPin.name)}${slicedWord(openedPin.name, 15, 1)} 
+            ${firstLetter(openedPin.lastName)}${slicedWord(openedPin.lastName, 15, 1)}`}
+            primaryTypographyProps={{fontSize:16 }}
+            secondary={slicedWord(openedPin.message, 40, 1)}
+            secondaryTypographyProps={{fontSize: 12 }} />
+          <ListItemText primary={`Pinned Message #${openIndex+1}`}
+            primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
+            secondary={`Type : ${openedPin.type}`}
+            secondaryTypographyProps={{ fontSize:16 }}/>          
+        </MenuItem>
+      </ul>      
+      <IconButton  aria-label="delete" size="medium">
+        <CloseIcon className={classes.iconClose} fontSize='medium'/>
+      </IconButton>          
+    </Stack> :
+    null
+}
+
+export default PinnedBar

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

@@ -3,9 +3,13 @@ import AppBar from '@mui/material/AppBar';
 import { makeStyles } from '@material-ui/core'
 import Button from '@mui/material/Button';
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import Credentials from './Credentials'
 import Buttons from './Buttons'
+import PinnedBar from './PinnedBar';
+import { removeSelectedMessagesById } from '../../../../api-data';
+import { getChatMemo } from '../../../../redux/chat/selector';
 
 const useStyles = makeStyles({
   toolBar: {
@@ -15,6 +19,9 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff',
     height:'7vh'
   },
+  toolBarRight: {
+    display: 'flex',
+  },
   buttonDelete: {
     color: '#f8f8f8',
     backgroundColor:'#1d74c5',
@@ -53,6 +60,7 @@ interface IHeaderBar {
 
 const HeaderBar = ({selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect}:IHeaderBar) => {
   const classes = useStyles()
+  const { companionId } = useSelector(getChatMemo)
   const [modal, setModal] = useState<boolean>(false)
   const handleOpenModal = (): void => setModal(true)
   const handleDeleteModal = (e: any) => {
@@ -63,7 +71,7 @@ const HeaderBar = ({selectedArr,isSomeSelected,setIsSomeSelected,handleClearSele
       setModal(false)
     }
     if (id === 'delete') {
-      // fetch on server
+      removeSelectedMessagesById(companionId,selectedArr)
       handleClearSelect()
       setModal(false)
     }
@@ -73,7 +81,10 @@ const HeaderBar = ({selectedArr,isSomeSelected,setIsSomeSelected,handleClearSele
       <AppBar position="static">
         <Toolbar className={classes.toolBar}>
           <Credentials/>
-          <Buttons setIsSomeSelected={setIsSomeSelected}/>
+          <div className={classes.toolBarRight}>
+            <PinnedBar/>
+            <Buttons setIsSomeSelected={setIsSomeSelected}/>
+          </div>
         </Toolbar>
       </AppBar> :
       <AppBar position="static">

src/typescript/redux/allMessages/types.ts

@@ -13,6 +13,7 @@ export type TMessage = {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   idTime: string,
   owner: any,
   createdAt: string,

src/typescript/redux/messages/types.ts

@@ -11,6 +11,7 @@ export type TMessage = {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  pinned: boolean,
   idTime: string,
   companionId: string,
   companionIdFlow: string,