finshed pinned bar

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

@@ -333,7 +333,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         </div>
       </div>  
       {!openPinned ? <SendMessage isArrow={isArrow} /> :
-      <UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll}/>}
+      <UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );
 }

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

@@ -60,10 +60,11 @@ const MenuList = ({setModal,setIsSomeSelected}:IMenuList) => {
   const { companionId, mute } = useSelector(getChat)
   
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    e.stopPropagation()
     setAnchorEl(e.currentTarget)
   }
 
-  const handleClose = (type:string|undefined):void => {
+  const handleClose = (type: string | undefined): void => {
     if (type === 'mute') muteChat(companionId)
     if (type === 'deleteModal') setModal(true)
     setAnchorEl(null)

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

@@ -25,11 +25,15 @@ interface IButtons {
 const Buttons = ({setIsSomeSelected}:IButtons) => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const [modal,setModal] = useState<boolean>(false)
+  const [modal, setModal] = useState<boolean>(false)
+  const handleOpenSearch = (e: any) => {
+    e.stopPropagation()
+    dispatch(actionRightIsOpen('search'))
+  }
 
   return (
     <Stack className={classes.container} direction="row">
-      <IconButton onClick={() => dispatch(actionRightIsOpen('search'))} aria-label="delete" size="medium">
+      <IconButton onClick={handleOpenSearch} aria-label="delete" size="medium">
         <SearchIcon fontSize='medium'/>
       </IconButton>
       <MenuList setModal={setModal} setIsSomeSelected={setIsSomeSelected}/>

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

@@ -18,7 +18,7 @@ import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux';
 import { useState,useEffect} from 'react';
 
-import { TMessages,TMessage } from '../../../../../typescript/redux/messages/types';
+import { TMessage } from '../../../../../typescript/redux/messages/types';
 import { getPinnedMessagesMemo } from '../../../../../redux/pinnedMessages/selector';
 import { firstLetter,slicedWord,prodAwsS3,copied,handleDownload } from '../../../../../helpers';
 import { pinMessageById } from '../../../../../api-data';
@@ -74,10 +74,10 @@ const useStyles = makeStyles({
 
 interface IPinnedBar {
   chatDivRef: any | null,
-  setOpenPinned: React.Dispatch<React.SetStateAction<boolean>>,
+  handleOpenPinned: () => void,
 }
 
-const PinnedBar = ({chatDivRef,setOpenPinned}:IPinnedBar) => {
+const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
   const classes = useStyles()
   const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
   const [openedPin, setOpenedPin] = useState<TMessage | null>(null)
@@ -167,7 +167,7 @@ const PinnedBar = ({chatDivRef,setOpenPinned}:IPinnedBar) => {
       <IconButton onClick={() => setModal(true)} aria-label="delete" size="medium">
         <CloseIcon className={classes.iconClose} fontSize='medium'/>
       </IconButton>
-      <IconButton onClick={() => setOpenPinned(true)} aria-label="delete" size="medium">
+      <IconButton onClick={handleOpenPinned} aria-label="delete" size="medium">
         <MenuOpenIcon fontSize='medium'/>
       </IconButton>
       {modal &&

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

@@ -3,8 +3,7 @@ import AppBar from '@mui/material/AppBar';
 import { makeStyles,Typography } from '@material-ui/core'
 import Button from '@mui/material/Button';
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
-
+import { useSelector,useDispatch } from 'react-redux';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Divider from '@mui/material/Divider';
@@ -13,6 +12,7 @@ import Buttons from './Buttons'
 import PinnedBar from './PinnedBar';
 import { removeSelectedMessagesById } from '../../../../api-data';
 import { getChatMemo } from '../../../../redux/chat/selector';
+import { actionRightIsOpen,actionOpenPinned } from '../../../../redux/control/action';
 import { TPinnedMessages } from '../../../../typescript/redux/pinnedMessages/types'; 
 
 const useStyles = makeStyles({
@@ -26,10 +26,25 @@ const useStyles = makeStyles({
   toolBarPinned: {
     color: '#6e6d6d',
     display: 'flex',
+    alignItems: 'center',
+    alignContent:'center',
     backgroundColor: '#ffffff',
     height: '7vh',
     cursor:'pointer'
-  }, 
+  },
+  pinnedBack: {
+    display: 'flex',
+    width:'100%',
+    alignContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+  },  
+  credentials: {
+    background: '#fdfdfd',
+    width:'100%',
+    height: '100%',
+    margin:'0 auto'
+  },  
   toolBarRight: {
     display: 'flex',
   },   
@@ -65,7 +80,7 @@ const useStyles = makeStyles({
       transform: 'rotate(360deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
 })
 
 interface IHeaderBar {
@@ -75,14 +90,23 @@ interface IHeaderBar {
   setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
   handleClearSelect: () => void,
   openPinned: boolean,
-  setOpenPinned: React.Dispatch<React.SetStateAction<boolean>>,
   pinnedMessagesMemo:TPinnedMessages
 }
 
-const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect,openPinned,setOpenPinned,pinnedMessagesMemo}:IHeaderBar) => {
+const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect,openPinned,pinnedMessagesMemo}:IHeaderBar) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const { companionId } = useSelector(getChatMemo)
   const [modal, setModal] = useState<boolean>(false)
+  const handleClosePinned = (e: any) => {
+    e.stopPropagation()
+    dispatch(actionOpenPinned(false))
+  }
+  const handleOpenPinned = () => dispatch(actionOpenPinned(true))
+  const handleOpenCredentials = (e: any) => {
+    e.stopPropagation()
+    dispatch(actionRightIsOpen('credentials'))
+  }
   const handleOpenModal = (): void => setModal(true)
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
@@ -99,25 +123,28 @@ const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,hand
   }    
 
   return (<>
-    {openPinned &&
+    {openPinned &&pinnedMessagesMemo.length > 0&&
       <AppBar position="static">
         <Toolbar className={classes.toolBarPinned}>
-          <IconButton onClick={() => setOpenPinned(false)}
-             aria-label="delete" size="medium">
-            <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
-          </IconButton>
-          <Typography style={{ marginLeft: 20, color: '#474747' }} variant="h6" color="initial">
-            {`${pinnedMessagesMemo.length} pinned messages`}
-          </Typography>
-        </Toolbar>
-      </AppBar>}
+          <div onClick={handleOpenCredentials}  className={classes.pinnedBack}>
+            <IconButton onClick={handleClosePinned}
+               aria-label="delete" size="medium">
+               <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
+            </IconButton>
+            <Typography style={{ marginLeft:20, color: '#474747'}} variant="h6" color="initial">
+              {`${pinnedMessagesMemo.length} pinned messages`}
+            </Typography>
+          </div>
+          <Buttons setIsSomeSelected={setIsSomeSelected}/>
+       </Toolbar>
+     </AppBar>}
     {openPinned&&isSomeSelected&&<Divider variant="inset"/>}
     {!openPinned && !isSomeSelected &&
       <AppBar position="static">
         <Toolbar className={classes.toolBar}>
           <Credentials/>
           <div className={classes.toolBarRight}>
-            <PinnedBar chatDivRef={chatDivRef} setOpenPinned={setOpenPinned}/>
+            <PinnedBar chatDivRef={chatDivRef} handleOpenPinned={handleOpenPinned}/>
             <Buttons setIsSomeSelected={setIsSomeSelected}/>
           </div>
         </Toolbar>

src/components/HomePage/CentralBar/index.tsx

@@ -1,12 +1,14 @@
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
 import { useState,useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector,useDispatch } from 'react-redux'
 
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { getPinnedMessagesMemo } from '../../../redux/pinnedMessages/selector'
 import { TRightIsOpen } from '../../../typescript/redux/control/types'
+import { getOpenPinned } from '../../../redux/control/selector'
+import { actionOpenPinned } from '../../../redux/control/action'
 import { unpinAllMessagesById } from '../../../api-data'
 
 const useStyles = makeStyles({
@@ -18,27 +20,28 @@ const useStyles = makeStyles({
 interface ICentralBar {
   rightIsOpen: TRightIsOpen,
   chatDivRef: any | null,
-  companionId: string
+  companionId: string,
 }
 
 const CentralBar = ({rightIsOpen,chatDivRef,companionId}:ICentralBar) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
+  const openPinned = useSelector(getOpenPinned)
   const [selectedArr, setSelectedArr] = useState<string[] | []>([])
-  const [openPinned, setOpenPinned] = useState<boolean>(false)
   const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
   const handleClearSelect = () => {
     selectedArr.length > 0 && setSelectedArr([])
     isSomeSelected && setIsSomeSelected(false)
   }
   const handleUnpinAll = () => {
-    openPinned && setOpenPinned(false)
+    openPinned && dispatch(actionOpenPinned(false))
     unpinAllMessagesById(pinnedMessagesMemo.map(({_id}) => _id))
   }
   
   useEffect(() => {
-    if(pinnedMessagesMemo.length === 0 && openPinned) setOpenPinned(false)
-  }, [openPinned, pinnedMessagesMemo])
+    if(pinnedMessagesMemo.length === 0 && openPinned) dispatch(actionOpenPinned(false))
+  }, [openPinned,pinnedMessagesMemo,dispatch])
   
   useEffect(() => {
     setIsSomeSelected(false)
@@ -50,7 +53,7 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId}:ICentralBar) => {
         <Grid item lg={12} >
           <HeaderBar chatDivRef={chatDivRef} selectedArr={selectedArr} isSomeSelected={isSomeSelected}
             handleClearSelect={handleClearSelect} setIsSomeSelected={setIsSomeSelected}
-            openPinned={openPinned} setOpenPinned={setOpenPinned} pinnedMessagesMemo={pinnedMessagesMemo}/>
+            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo}/>
         </Grid>          
         <Grid item lg={12} className={classes.chatBar}>
           <ChatBar chatDivRef={chatDivRef} selectedArr={selectedArr} setSelectedArr={setSelectedArr}

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -10,7 +10,7 @@ import { getStateMemo } from '../../../../redux/chats/selector'
 import { getChatMemo } from '../../../../redux/chat/selector'
 import { asyncGetChatById } from '../../../../redux/chat/operations'
 import { asyncGetChats } from '../../../../redux/chats/operations';
-import { actionRightIsOpen,actionScrollChat } from '../../../../redux/control/action'
+import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../redux/control/action'
 import { TChats } from '../../../../typescript/redux/chats/types';
 import { prodBaseURL,refreshAppTime } from '../../../../helpers';
 
@@ -52,6 +52,7 @@ const ChatsList = ({sort}:IChatsList) => {
   
   const handleListItemClick = (companionId: string) => {
     dispatch(actionRightIsOpen(''))
+    dispatch(actionOpenPinned(false))
     dispatch(asyncGetChatById(companionId))
     if(chat.companionId !== companionId) dispatch(actionScrollChat(true))
   }
@@ -60,6 +61,7 @@ const ChatsList = ({sort}:IChatsList) => {
     e.stopPropagation()
     dispatch(actionScrollChat(true))
     dispatch(actionRightIsOpen(''))
+    dispatch(actionOpenPinned(false))
     dispatch(asyncGetChatById(companionId))
   }
 
@@ -91,7 +93,7 @@ const ChatsList = ({sort}:IChatsList) => {
       })
     }
     chatsRef.current = sortedChats
-  }, [chat,sortedChats,handleNotification,dispatch])
+  }, [chat,sortedChats,handleNotification])
 
   return total !== '0' ? (
     <List className={classes.list} component="nav"

src/components/HomePage/LeftBar/ContactsList/index.tsx

@@ -9,7 +9,7 @@ import { getState } from '../../../../redux/contacts/selector'
 import { asyncGetContacts } from '../../../../redux/contacts/operations';
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { getRightIsOpen } from '../../../../redux/control/selector'
-import { actionLeftIsOpen, actionRightIsOpen } from '../../../../redux/control/action';
+import { actionLeftIsOpen, actionRightIsOpen,actionOpenPinned } from '../../../../redux/control/action';
 import { handleSort,timeStampFilter,refreshAppTime } from '../../../../helpers';
 import { TContacts,TContact } from '../../../../typescript/redux/contacts/types';
 
@@ -64,6 +64,7 @@ const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList)
   const handleListItemClick = (companionId: string) => {
     handleClick()
     dispatch(actionRightIsOpen(''))
+    dispatch(actionOpenPinned(false))
     dispatch(asyncStartChatById(companionId))
   }
 

src/components/HomePage/LeftBar/SearchLists/index.tsx

@@ -15,7 +15,8 @@ import { getAllMessagesMemo } from '../../../../redux/allMessages/selector';
 import { getState } from '../../../../redux/control/selector';
 import { sortByRecent,timeStampFilter,refreshAppTime } from '../../../../helpers';
 import { asyncStartChatById } from '../../../../redux/chat/operations';
-import { actionLeftIsOpen,actionRightIsOpen } from '../../../../redux/control/action';
+import { getPinnedMessagesMemo } from '../../../../redux/pinnedMessages/selector';
+import { actionLeftIsOpen,actionRightIsOpen,actionOpenPinned } from '../../../../redux/control/action';
 import { TChats } from '../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
@@ -65,7 +66,8 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
     const dispatch = useDispatch()
     const { chats, total } = useSelector(getStateMemo)
     const messagesMemo = useSelector(getAllMessagesMemo)
-    const {leftIsOpen,rightIsOpen} = useSelector(getState)
+    const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
+    const {leftIsOpen,rightIsOpen,openPinned} = useSelector(getState)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => {
       setIsActive(newValue)
@@ -74,7 +76,8 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
     } 
 
     const handleListItemClick = (companionId: string) => {
-      rightIsOpen&&dispatch(actionRightIsOpen(''))
+      rightIsOpen && dispatch(actionRightIsOpen(''))
+      openPinned&&dispatch(actionOpenPinned(false))
       dispatch(asyncStartChatById(companionId))
     }
   
@@ -91,7 +94,10 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
       }
     }
   
-    const handleScrollToTheMessage = (_id: string, companionId: string) => {
+  const handleScrollToTheMessage = (_id: string, companionId: string) => {
+      if (openPinned && !pinnedMessagesMemo.some((el) => (el._id === _id && el.companionId === companionId))) {
+        dispatch(actionOpenPinned(false)) 
+      }
       if (chatDivRef.current && chatDivRef.current.id === companionId) {
          scrollTo(chatDivRef,_id)
       } else if (chatDivRef.current && chatDivRef.current.id !== companionId) {

src/components/HomePage/RightBar/CredentialsList/ProfileLists/AudioList/index.tsx

@@ -27,11 +27,12 @@ const useStyles = makeStyles({
 })
 
 interface IAudioList {
+  openPinned: boolean,
   filteredAndSorted: TMessages,
   handleScrollToTheMessage: (_id:string) => void,
 }
 
-const AudioList = ({ filteredAndSorted,handleScrollToTheMessage }: IAudioList) => {
+const AudioList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IAudioList) => {
   const classes = useStyles()
   
     return filteredAndSorted.length > 0 ?(
@@ -53,7 +54,7 @@ const AudioList = ({ filteredAndSorted,handleScrollToTheMessage }: IAudioList) =
             <Divider variant="inset"/>
         </div>)}
     </List>
-   ): <AlertInfo name='You do not have Audio yet!'/>  
+   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Audio yet!`}/>  
 }
 
 export default AudioList

src/components/HomePage/RightBar/CredentialsList/ProfileLists/FilesList/index.tsx

@@ -27,11 +27,12 @@ const useStyles = makeStyles({
 })
 
 interface IFilesList {
+  openPinned: boolean,
   filteredAndSorted: TMessages,
   handleScrollToTheMessage: (_id:string) => void,
 }
 
-const FilesList = ({ filteredAndSorted,handleScrollToTheMessage }: IFilesList) => {
+const FilesList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IFilesList) => {
   const classes = useStyles()
   
     return filteredAndSorted.length > 0 ?(
@@ -53,7 +54,7 @@ const FilesList = ({ filteredAndSorted,handleScrollToTheMessage }: IFilesList) =
             <Divider variant="inset"/>
         </div>)}
     </List>
-   ): <AlertInfo name='You do not have Files yet!'/>  
+   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Files yet!`}/>  
 }
 
 export default FilesList

src/components/HomePage/RightBar/CredentialsList/ProfileLists/MediaList/index.tsx

@@ -5,11 +5,12 @@ import AlertInfo from '../../../../../reusableComponents/AlertInfo';
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 interface IMediaList {
+  openPinned: boolean,
   filteredAndSorted: TMessages,
   handleScrollToTheMessage: (_id:string) => void,
 }
 
-const MediaList = ({ filteredAndSorted,handleScrollToTheMessage }: IMediaList) => {
+const MediaList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IMediaList) => {
   
   return filteredAndSorted.length > 0 ?(
       <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
@@ -17,7 +18,7 @@ const MediaList = ({ filteredAndSorted,handleScrollToTheMessage }: IMediaList) =
           <MediaListItem key={createdAt} message={message} fullType={fullType}
             updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} />)}
       </ImageList>
-   ): <AlertInfo name='You do not have Media yet!'/>  
+   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Media yet!`}/>  
 }
 
 export default MediaList

src/components/HomePage/RightBar/CredentialsList/ProfileLists/TextList/index.tsx

@@ -29,11 +29,12 @@ const useStyles = makeStyles({
 })
 
 interface ITextList {
+  openPinned: boolean,
   filteredAndSorted: TMessages,
   handleScrollToTheMessage: (_id:string) => void,
 }
 
-const TextList = ({ filteredAndSorted,handleScrollToTheMessage }: ITextList) => {
+const TextList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: ITextList) => {
   const classes = useStyles()
   
    return filteredAndSorted.length > 0 ?(
@@ -58,7 +59,7 @@ const TextList = ({ filteredAndSorted,handleScrollToTheMessage }: ITextList) =>
           <Divider variant="inset" />
       </div>)}
     </List>
-   ): <AlertInfo name='You do not have Text yet!'/>  
+   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Text yet!`}/>
 }
 
 export default TextList

src/components/HomePage/RightBar/CredentialsList/ProfileLists/VideoList/index.tsx

@@ -27,11 +27,12 @@ const useStyles = makeStyles({
 })
 
 interface IVideoList {
+  openPinned: boolean,
   filteredAndSorted: TMessages,
   handleScrollToTheMessage: (_id:string) => void,
 }
 
-const VideoList = ({ filteredAndSorted,handleScrollToTheMessage }: IVideoList) => {
+const VideoList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IVideoList) => {
   const classes = useStyles()
 
     return filteredAndSorted.length > 0 ?(
@@ -53,7 +54,7 @@ const VideoList = ({ filteredAndSorted,handleScrollToTheMessage }: IVideoList) =
             <Divider variant="inset"/>
         </div>)}
     </List>
-   ): <AlertInfo name='You do not have Audio yet!'/>  
+   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Video yet!`}/>  
 }
 
 export default VideoList

src/components/HomePage/RightBar/CredentialsList/ProfileLists/index.tsx

@@ -7,6 +7,8 @@ import MediaList from './MediaList';
 import FilesList from './FilesList';
 import TextList from './TextList';
 import VideoList from './VideoList'
+import { getOpenPinned } from '../../../../../redux/control/selector';
+import { getPinnedMessagesMemo } from '../../../../../redux/pinnedMessages/selector'; 
 import { getMessagesMemo } from '../../../../../redux/messages/selector'
 import { handleSort } from '../../../../../helpers';
 import { getChat } from '../../../../../redux/chat/selector'
@@ -44,10 +46,17 @@ underline: {
   },
 })
 
-const ProfileLists = ({setDisabled,chatDivRef}:{setDisabled: React.Dispatch<boolean>,chatDivRef: any | null}) => {
+interface IProfileLists {
+  setDisabled: React.Dispatch<boolean>,
+  chatDivRef: any | null,
+}
+
+const ProfileLists = ({setDisabled,chatDivRef}:IProfileLists) => {
     const classes = useStyles()
     const { sort } = useSelector(getChat)
+    const openPinned = useSelector(getOpenPinned)
     const messagesMemo = useSelector(getMessagesMemo)
+    const pinnedMessages = useSelector(getPinnedMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => setIsActive(newValue)
     const handleScrollToTheMessage = (_id: string) => {
@@ -64,7 +73,7 @@ const ProfileLists = ({setDisabled,chatDivRef}:{setDisabled: React.Dispatch<bool
     }
     const filterBy = ['text', 'image', 'text', 'audio', 'video']
   
-    const sorted: TMessages = handleSort('createdAt', messagesMemo, sort)
+    const sorted: TMessages = handleSort('createdAt', !openPinned?messagesMemo:pinnedMessages, sort)
     const filteredAndSorted = sorted.filter((el) => {
       if (isActive !== 0) {
         if(el.type === filterBy[isActive]) return el
@@ -106,11 +115,11 @@ const ProfileLists = ({setDisabled,chatDivRef}:{setDisabled: React.Dispatch<bool
             <span className={classes.underline}>___</span>
           </div>
       </div>
-            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}            
-            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
-            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
-            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
-            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}            
+            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
     </>      
     )
 }

src/components/HomePage/RightBar/CredentialsList/index.tsx

@@ -40,7 +40,11 @@ const useStyles = makeStyles({
   },
 })
 
-const CredentialsList = ({chatDivRef}:{chatDivRef: any | null}) => {
+interface ICredentialsList {
+  chatDivRef: any | null,
+}
+
+const CredentialsList = ({chatDivRef}:ICredentialsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const leftIsOpen  = useSelector(getLeftIsOpen)

src/components/HomePage/RightBar/SearchList/index.tsx

@@ -11,6 +11,8 @@ import Divider from '@mui/material/Divider';
 import Search from './Search'
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../redux/messages/selector'
+import { getOpenPinned } from '../../../../redux/control/selector';
+import { getPinnedMessagesMemo } from '../../../../redux/pinnedMessages/selector'
 import { getChat } from '../../../../redux/chat/selector'
 import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort,prodAwsS3 } from '../../../../helpers'
 import { TMessages } from '../../../../typescript/redux/messages/types';
@@ -49,10 +51,16 @@ const useStyles = makeStyles({
   },
 })
 
-const SearchList= ({chatDivRef}:{chatDivRef: any | null}) => {
+interface ISearchList {
+  chatDivRef: any | null,
+}
+
+const SearchList= ({chatDivRef}:ISearchList) => {
     const classes = useStyles()
     const { sort } = useSelector(getChat)
+    const openPinned = useSelector(getOpenPinned)
     const messages = useSelector(getMessages)
+    const pinnedMessages = useSelector(getPinnedMessagesMemo)
     const [value, setValue] = useState<string>('')
     const [date, setDate] = useState<any>('');
     const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
@@ -78,7 +86,7 @@ const SearchList= ({chatDivRef}:{chatDivRef: any | null}) => {
       }
     })
   
-  const arr: TMessages = filteredMessages(handleSort('createdAt', messages, sort))
+  const arr: TMessages = filteredMessages(handleSort('createdAt', !openPinned?messages:pinnedMessages, sort))
   
 return (
    <div className={classes.container}>

src/components/HomePage/RightBar/index.tsx

@@ -4,11 +4,16 @@ import CredentialsList from './CredentialsList'
 import EditBar from './EditBar'
 import { TRightIsOpen } from '../../../typescript/redux/control/types'
 
-const RightBar = ({rightIsOpen,chatDivRef}:{rightIsOpen:TRightIsOpen,chatDivRef: any | null}) => {
+interface IRightBar {
+  rightIsOpen: TRightIsOpen,
+  chatDivRef: any | null,
+}
+
+const RightBar = ({rightIsOpen,chatDivRef}:IRightBar) => {
   return (
     <Grid item lg={rightIsOpen?4:0}>
       {rightIsOpen === 'credentials' && <CredentialsList chatDivRef={chatDivRef} />}
-      {rightIsOpen === 'search' && <SearchList chatDivRef={chatDivRef}/>}
+      {rightIsOpen === 'search' && <SearchList chatDivRef={chatDivRef} />}
       {rightIsOpen === 'edit' && <EditBar/>}
     </Grid>
    )

src/components/HomePage/index.tsx

@@ -33,8 +33,9 @@ return (
       <LeftBar chatDivRef={chatDivRef} />
       {companionId ?
       <Grid item lg={9} className={classes.centralAndRight}>
-        <CentralBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef} companionId={companionId}/>
-        <RightBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef}/>
+        <CentralBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef}
+          companionId={companionId} />
+        <RightBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef} />
       </Grid> :
       <Grid item lg={9} className={classes.centralBar}/>}
     </Grid>

src/redux/control/action/index.ts

@@ -13,6 +13,10 @@ const actionScrollChat = createAction('control/scrollChat', (value:TScrollChat)
   payload: value,
 }));
 
+const actionOpenPinned = createAction('control/openPinned', (value:boolean) => ({
+  payload: value,
+}));
+
 
 
-export { actionLeftIsOpen,actionRightIsOpen,actionScrollChat };
+export { actionLeftIsOpen,actionRightIsOpen,actionScrollChat,actionOpenPinned };

src/redux/control/reducer/index.ts

@@ -1,12 +1,13 @@
 import isEqual from 'lodash.isequal';
 import { createReducer } from '@reduxjs/toolkit';
-import { actionLeftIsOpen,actionRightIsOpen,actionScrollChat } from '../action';
-import { IControlState,IPayloadLeftIsOpen,IPayloadRightIsOpen,IPayloadScrollChat } from '../../../typescript/redux/control/interfaces'
+import { actionLeftIsOpen,actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../action';
+import { IControlState,IPayloadLeftIsOpen,IPayloadRightIsOpen,IPayloadScrollChat,IPayloadOpenPinned } from '../../../typescript/redux/control/interfaces'
 
 const initialState: IControlState = {
   leftIsOpen: '',
   rightIsOpen: '',
   scrollChat: false,
+  openPinned: false,
 }
 
 const reducerControl = createReducer(initialState, {
@@ -22,6 +23,10 @@ const reducerControl = createReducer(initialState, {
     if (isEqual(state.scrollChat, scrollChat) === false) return {...state,scrollChat}
     return state;    
   },
+  [actionOpenPinned.type]: (state, { payload: openPinned }: IPayloadOpenPinned) => {
+    if (isEqual(state.openPinned, openPinned) === false) return {...state,openPinned}
+    return state;    
+  },  
 });
 
 export default reducerControl;

src/redux/control/selector/index.ts

@@ -3,6 +3,7 @@ import { IState } from '../../../typescript/redux/interfaces'
 const getLeftIsOpen = (state: IState) => state.control.leftIsOpen;
 const getRightIsOpen = (state: IState) => state.control.rightIsOpen;
 const getScrollChat = (state: IState) => state.control.scrollChat;
+const getOpenPinned = (state: IState) => state.control.openPinned;
 const getState = (state:IState) => state.control;
 
-export { getLeftIsOpen,getRightIsOpen,getScrollChat,getState };
+export { getLeftIsOpen,getRightIsOpen,getScrollChat,getOpenPinned,getState };

src/typescript/redux/control/interfaces.ts

@@ -3,7 +3,8 @@ import { TLeftIsOpen,TRightIsOpen,TScrollChat } from './types'
 export interface IControlState {
   leftIsOpen: TLeftIsOpen,
   rightIsOpen: TRightIsOpen,
-  scrollChat: TScrollChat
+  scrollChat: TScrollChat,
+  openPinned: boolean
 }
 
 export interface IPayloadLeftIsOpen {
@@ -18,5 +19,9 @@ export interface IPayloadScrollChat {
   payload:TScrollChat
 }
 
+export interface IPayloadOpenPinned {
+  payload:boolean
+}
+