make fix with navigation

build/asset-manifest.json

@@ -1,36 +1,36 @@
 {
   "files": {
-    "static/js/0.e99bf1e5.chunk.js": "/static/js/0.e99bf1e5.chunk.js",
-    "static/js/0.e99bf1e5.chunk.js.map": "/static/js/0.e99bf1e5.chunk.js.map",
-    "AuthPage.js": "/static/js/AuthPage.75753e35.chunk.js",
-    "AuthPage.js.map": "/static/js/AuthPage.75753e35.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.64718e77.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.64718e77.chunk.js.map",
-    "main.css": "/static/css/main.9a5b6280.chunk.css",
-    "main.js": "/static/js/main.b34fa139.chunk.js",
-    "main.js.map": "/static/js/main.b34fa139.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.439d1abb.js",
-    "runtime-main.js.map": "/static/js/runtime-main.439d1abb.js.map",
-    "static/js/5.1a886b73.chunk.js": "/static/js/5.1a886b73.chunk.js",
-    "static/js/5.1a886b73.chunk.js.map": "/static/js/5.1a886b73.chunk.js.map",
+    "static/js/0.2ef87944.chunk.js": "/static/js/0.2ef87944.chunk.js",
+    "static/js/0.2ef87944.chunk.js.map": "/static/js/0.2ef87944.chunk.js.map",
+    "AuthPage.js": "/static/js/AuthPage.aae9fd54.chunk.js",
+    "AuthPage.js.map": "/static/js/AuthPage.aae9fd54.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.104a6c7f.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.104a6c7f.chunk.js.map",
+    "main.css": "/static/css/main.648af75f.chunk.css",
+    "main.js": "/static/js/main.f75d4bb2.chunk.js",
+    "main.js.map": "/static/js/main.f75d4bb2.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.771647db.js",
+    "runtime-main.js.map": "/static/js/runtime-main.771647db.js.map",
+    "static/js/5.6f16f02c.chunk.js": "/static/js/5.6f16f02c.chunk.js",
+    "static/js/5.6f16f02c.chunk.js.map": "/static/js/5.6f16f02c.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
-    "static/js/6.50810af4.chunk.js": "/static/js/6.50810af4.chunk.js",
-    "static/js/6.50810af4.chunk.js.map": "/static/js/6.50810af4.chunk.js.map",
+    "static/js/6.ff33a85a.chunk.js": "/static/js/6.ff33a85a.chunk.js",
+    "static/js/6.ff33a85a.chunk.js.map": "/static/js/6.ff33a85a.chunk.js.map",
     "index.html": "/index.html",
     "static/css/6.c7cc29b3.chunk.css.map": "/static/css/6.c7cc29b3.chunk.css.map",
-    "static/css/main.9a5b6280.chunk.css.map": "/static/css/main.9a5b6280.chunk.css.map",
-    "static/js/0.e99bf1e5.chunk.js.LICENSE.txt": "/static/js/0.e99bf1e5.chunk.js.LICENSE.txt",
-    "static/js/5.1a886b73.chunk.js.LICENSE.txt": "/static/js/5.1a886b73.chunk.js.LICENSE.txt",
-    "static/js/6.50810af4.chunk.js.LICENSE.txt": "/static/js/6.50810af4.chunk.js.LICENSE.txt",
+    "static/css/main.648af75f.chunk.css.map": "/static/css/main.648af75f.chunk.css.map",
+    "static/js/0.2ef87944.chunk.js.LICENSE.txt": "/static/js/0.2ef87944.chunk.js.LICENSE.txt",
+    "static/js/5.6f16f02c.chunk.js.LICENSE.txt": "/static/js/5.6f16f02c.chunk.js.LICENSE.txt",
+    "static/js/6.ff33a85a.chunk.js.LICENSE.txt": "/static/js/6.ff33a85a.chunk.js.LICENSE.txt",
     "static/media/icons8-telegram-app.be023370.svg": "/static/media/icons8-telegram-app.be023370.svg",
     "static/media/monkey.ded8ac2a.png": "/static/media/monkey.ded8ac2a.png",
     "static/media/qrCode_telegram.bb0caf3c.png": "/static/media/qrCode_telegram.bb0caf3c.png"
   },
   "entrypoints": [
-    "static/js/runtime-main.439d1abb.js",
+    "static/js/runtime-main.771647db.js",
     "static/css/6.c7cc29b3.chunk.css",
-    "static/js/6.50810af4.chunk.js",
-    "static/css/main.9a5b6280.chunk.css",
-    "static/js/main.b34fa139.chunk.js"
+    "static/js/6.ff33a85a.chunk.js",
+    "static/css/main.648af75f.chunk.css",
+    "static/js/main.f75d4bb2.chunk.js"
   ]
 }

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

@@ -386,7 +386,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
-                   <div className={classes.emoji} style={{left: rightIsOpen&&rightIsOpen !== 'menu'?'32.5vw':'45vw'}}>
+                   <div className={classes.emoji} style={{left: rightIsOpen?'32.5vw':'45vw'}}>
                       <Picker onEmojiClick={onEmojiClick} />
                    </div>  
                 </div>
@@ -401,7 +401,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                   pointerEvents: value || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",'&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>
-                    <div className={classes.filesMenu} style={{left: rightIsOpen&&rightIsOpen !== 'menu'?'52.5vw':'65vw'}}>
+                    <div className={classes.filesMenu} style={{left: rightIsOpen?'52.5vw':'65vw'}}>
                       <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                     </div>
                 </div>         

src/components/HomePage/RightBar/HeaderBar/Buttons/DeleteModal/index.tsx

@@ -1,9 +1,11 @@
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import { makeStyles } from '@material-ui/core'
-import { useSelector } from 'react-redux';
+import { useSelector,useDispatch } from 'react-redux';
 
 import { getChat } from '../../../../../../redux/chat/selector';
+import { actionRemoveChat } from '../../../../../../redux/chat/action';
+import { actionRightIsOpen } from '../../../../../../redux/control/action'
 import { removeChatForBoth } from '../../../../../../api-data';
 import { firstLetter,slicedWord,prodBaseURL } from '../../../../../../helpers';
 
@@ -41,6 +43,7 @@ const useStyles = makeStyles({
 
 const DeleteModal = ({setModal}:{setModal:any}) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)
 
   const handleDeleteModal = (e: any) => {
@@ -49,6 +52,8 @@ const DeleteModal = ({setModal}:{setModal:any}) => {
     if (id === 'delete') {
       removeChatForBoth(companionId)
       setModal(false)
+      dispatch(actionRemoveChat())
+      dispatch(actionRightIsOpen(''))
     }
   }
 

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useDispatch,useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
@@ -9,7 +9,6 @@ import VolumeOffIcon from '@mui/icons-material/VolumeOff';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
-import { actionRightIsOpen } from '../../../../../../redux/control/action'
 import { getChat } from '../../../../../../redux/chat/selector'
 import { muteChat } from '../../../../../../api-data'
 
@@ -51,20 +50,17 @@ const StyledMenu = styled((props:any) => (
 
 
 const MenuList = ({setModal}:{setModal:any}) => {
-  const dispatch = useDispatch()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const open = Boolean(anchorEl);
   const { companionId, mute } = useSelector(getChat)
   
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
-    dispatch(actionRightIsOpen('menu'))
     setAnchorEl(e.currentTarget)
   }
 
   const handleClose = (type:string|undefined):void => {
     if (type === 'mute') muteChat(companionId)
     if (type === 'deleteModal') setModal(true)
-    dispatch(actionRightIsOpen(''))
     setAnchorEl(null)
   }
 

src/components/HomePage/CentralBar/index.tsx

@@ -0,0 +1,29 @@
+import Grid from '@mui/material/Grid'
+import { makeStyles } from '@material-ui/core'
+
+import HeaderBar from './HeaderBar'
+import ChatBar from './ChatBar'
+import { TRightIsOpen } from '../../../typescript/redux/control/types'
+
+const useStyles = makeStyles({
+  chatBar: {
+    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
+  },
+})
+
+const CentralBar = ({rightIsOpen}:{rightIsOpen:TRightIsOpen}) => {
+  const classes = useStyles()
+
+    return ( 
+     <Grid item lg={rightIsOpen?8:12}>
+        <Grid item lg={12} >
+          <HeaderBar/>
+        </Grid>          
+        <Grid item lg={12} className={classes.chatBar}>
+          <ChatBar />
+        </Grid>
+      </Grid>
+    )   
+}
+
+export default CentralBar

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

@@ -1,5 +1,5 @@
 import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
-import React, { useState,useEffect } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { asyncAddContact } from '../../../../redux/contacts/operations'
 import { actionLeftIsOpen } from '../../../../redux/control/action';
@@ -31,11 +31,10 @@ const useStyles = makeStyles({
 })
 
 interface IAddContact {
-  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>,
   handleClick: () => void
 }
 
-const AddContact = ({setSelectedIndex,handleClick}:IAddContact) => {
+const AddContact = ({handleClick}:IAddContact) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [number, setNumber] = useState<string>('')
@@ -46,8 +45,7 @@ const AddContact = ({setSelectedIndex,handleClick}:IAddContact) => {
   }
   const handleAddContact = async () => {
     dispatch(asyncAddContact(number))
-    setNumber('')
-    setSelectedIndex(1)  
+    dispatch(actionLeftIsOpen('contacts'))
   }
 
   const isValidNumber = () => {
@@ -58,11 +56,7 @@ const AddContact = ({setSelectedIndex,handleClick}:IAddContact) => {
 
   const handlePressEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if(e.code === 'Enter' && isValidNumber()) handleAddContact()
-  }
-
-  useEffect(() => {
-    dispatch(actionLeftIsOpen(''))
-  }, [dispatch])   
+  } 
 
  
   return (

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

@@ -1,8 +1,11 @@
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import { makeStyles } from '@material-ui/core'
+import { useDispatch } from 'react-redux';
 
 import { removeChatForBoth } from '../../../../../../api-data';
+import { actionRightIsOpen } from '../../../../../../redux/control/action';
+import { actionRemoveChat } from '../../../../../../redux/chat/action';
 import { firstLetter, slicedWord,prodBaseURL } from '../../../../../../helpers';
 import { TChat } from '../../../../../../typescript/redux/chats/types';
 
@@ -44,6 +47,7 @@ interface IDeleteModal {
 }
 const DeleteModal = ({setModal,chat}:IDeleteModal) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const {name,lastName,avatarUrl,color,companionId} = chat
 
   const handleDeleteModal = (e: any) => {
@@ -52,6 +56,8 @@ const DeleteModal = ({setModal,chat}:IDeleteModal) => {
     if (id === 'delete') {
       removeChatForBoth(companionId)
       setModal(false)
+      dispatch(actionRemoveChat())
+      dispatch(actionRightIsOpen(''))
     }
   }
   

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

@@ -10,9 +10,7 @@ import { getStateMemo } from '../../../../redux/chats/selector'
 import { getChatMemo } from '../../../../redux/chat/selector'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { asyncGetChats } from '../../../../redux/chats/operations';
-import { actionRemoveChat } from '../../../../redux/chat/action'
-import { actionLeftIsOpen,actionRightIsOpen,actionScrollChat } from '../../../../redux/control/action'
-import { getState } from '../../../../redux/control/selector';
+import { actionRightIsOpen,actionScrollChat } from '../../../../redux/control/action'
 import { TChats } from '../../../../typescript/redux/chats/types';
 import { prodBaseURL,refreshAppTime } from '../../../../helpers';
 
@@ -51,17 +49,16 @@ const ChatsList = ({sort}:IChatsList) => {
   const chatsRef = useRef<any>(null)
   const { total, chats } = useSelector(getStateMemo)
   const chat = useSelector(getChatMemo)
-  const { leftIsOpen, rightIsOpen } = useSelector(getState)
   
   const handleListItemClick = (companionId: string) => {
-    rightIsOpen&&dispatch(actionRightIsOpen(''))
+    dispatch(actionRightIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
   const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {
     e.stopPropagation()
     dispatch(actionScrollChat(true))
-    rightIsOpen&&dispatch(actionRightIsOpen(''))
+    dispatch(actionRightIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
@@ -73,18 +70,13 @@ const ChatsList = ({sort}:IChatsList) => {
   const sortedChats: TChats = sortByRecent(chats, sort)
   
   useEffect(() => {
-    dispatch(actionLeftIsOpen('chats'))
-  }, [dispatch])
-  
-  useEffect(() => {
-    const handleReset = () => leftIsOpen === 'chats' && dispatch(asyncGetChats())
+    const handleReset = () => dispatch(asyncGetChats())
     handleReset()
     const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
-  }, [leftIsOpen,dispatch]);  
+  }, [dispatch]);  
 
   useEffect(() => {
-    if (chat.companionId&&!sortedChats.find((el) => el.companionId === chat.companionId)) dispatch(actionRemoveChat())
     if (chatsRef.current) {
       chatsRef.current.forEach(({total,seen}: any,i:number) => {
         const oldDifferent = total - seen

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

@@ -8,7 +8,7 @@ import ContactItem from './ContactItem';
 import { getState } from '../../../../redux/contacts/selector'
 import { asyncGetContacts } from '../../../../redux/contacts/operations';
 import { asyncStartChatById } from '../../../../redux/chat/operations'
-import * as controlSelector from '../../../../redux/control/selector'
+import { getRightIsOpen } from '../../../../redux/control/selector'
 import { actionLeftIsOpen, actionRightIsOpen } from '../../../../redux/control/action';
 import { handleSort,timeStampFilter,refreshAppTime } from '../../../../helpers';
 import { TContacts,TContact } from '../../../../typescript/redux/contacts/types';
@@ -49,7 +49,7 @@ const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList)
   const classes = useStyles()
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
-  const { leftIsOpen,rightIsOpen } = useSelector(controlSelector.getState)
+  const rightIsOpen = useSelector(getRightIsOpen)
 
   const filteredContacts = ():TContacts => handleSort('name', contacts, sort).filter((el:TContact) => {
     const credentials = el.name + ' ' + el.lastName
@@ -61,9 +61,9 @@ const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList)
     }
   })
 
-  const handleListItemClick = (companionId:string) => {
+  const handleListItemClick = (companionId: string) => {
     handleClick()
-    rightIsOpen&&dispatch(actionRightIsOpen(''))
+    dispatch(actionRightIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
@@ -78,11 +78,11 @@ const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList)
   }, [total, setDisabled])
   
   useEffect(() => {
-    const handleReset = () => leftIsOpen === 'contacts' && dispatch(asyncGetContacts())
+    const handleReset = () => dispatch(asyncGetContacts())
     handleReset()
     const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
-  }, [leftIsOpen,dispatch]);   
+  }, [dispatch]);   
   
   return total !== '0' ? (
     <List

src/components/HomePage/LeftBar/EditBar/ToolBar/index.tsx

@@ -2,6 +2,8 @@ import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { makeStyles, Typography } from '@material-ui/core'
+import { useDispatch } from 'react-redux';
+import { actionLeftIsOpen } from '../../../../../redux/control/action';
 
 const useStyles = makeStyles({
   container: {
@@ -21,16 +23,14 @@ const useStyles = makeStyles({
   },
 })
 
-interface IToolBar {
-  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
-}
 
-const ToolBar = ({setSelectedIndex}:IToolBar) => {
+const ToolBar = () => {
   const classes = useStyles()
+  const dispatch = useDispatch()
 
   return (
     <Stack className={classes.container} direction="row" spacing={21}>
-      <IconButton onClick={() => setSelectedIndex(2)} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionLeftIsOpen('settings'))} aria-label="delete" size="medium">
         <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
       </IconButton>
       <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit profile</Typography>

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

@@ -18,11 +18,9 @@ const useStyles = makeStyles({
   }
 })
 
-interface IEditBar {
-  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
-}
 
-const EditBar= ({setSelectedIndex}:IEditBar) => {
+
+const EditBar= () => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const user = useSelector(getAuthorizationState)
@@ -60,7 +58,7 @@ const EditBar= ({setSelectedIndex}:IEditBar) => {
     return (
     <div className={classes.container}>
       {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
-      <ToolBar setSelectedIndex={setSelectedIndex}/>
+      <ToolBar />
       <EditList user={user} name={name} setName={setName}
         lastName={lastName} setLastName={setLastName} 
         openBtn={openBtn} setOpenBtn={setOpenBtn}

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

@@ -16,6 +16,7 @@ import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { updateUser } from '../../../../api-data';
 import { asyncCurrentUser } from '../../../../redux/authorization/operations';
+import { actionLeftIsOpen } from '../../../../redux/control/action';
 import { refreshAppTime } from '../../../../helpers';
 
 const useStyles = makeStyles({
@@ -54,11 +55,10 @@ const useStyles = makeStyles({
 const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 interface IContactsList {
-  handleSelectedMenu: (i: number) => void,
   nightMode: boolean,
 }
 
-const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
+const MenuBar = ({nightMode}:IContactsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const handleNightMode = () => updateUser({ nightMode: !nightMode })
@@ -74,19 +74,19 @@ const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
     <div className={classes.overlay} id='overlay'>
       <Paper className={classes.container}>
        <MenuList className={classes.list}>
-        <MenuItem  onClick={() => handleSelectedMenu(3)}>
+          <MenuItem onClick={() => dispatch(actionLeftIsOpen('contact'))}>
           <ListItemIcon className={classes.listIcon}>
             <PersonAddAltIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>New Contact</ListItemText>
           </MenuItem>          
-        <MenuItem  onClick={() => handleSelectedMenu(1)}>
+          <MenuItem onClick={() => dispatch(actionLeftIsOpen('contacts'))}>
           <ListItemIcon className={classes.listIcon}>
             <PermContactCalendarIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Contacts</ListItemText>
         </MenuItem>
-        <MenuItem onClick={() =>  handleSelectedMenu(2)}>
+          <MenuItem onClick={() => dispatch(actionLeftIsOpen('settings'))}>
           <ListItemIcon className={classes.listIcon}>
             <SettingsIcon fontSize="medium" />
           </ListItemIcon>

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

@@ -9,6 +9,7 @@ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { updateUser } from '../../../../api-data';
+import { TLeftIsOpen } from '../../../../typescript/redux/control/types';
 import StaticDatePicker from "./StaticDatePicker";
 
 
@@ -71,7 +72,7 @@ interface ISearchBar {
   handleClick:() => void,
   handleOpenIsSearch:() => void,
   handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
-  isSearch: boolean,
+  leftIsOpen: TLeftIsOpen,
   value: string,
   sort: boolean,
   setDate: React.Dispatch<any>,
@@ -79,7 +80,7 @@ interface ISearchBar {
   disabled: boolean
 }
 
-const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, isSearch,
+const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
   value, sort,setDate,date,disabled }: ISearchBar) => {
   const handleSort = () => updateUser({ sort: !sort })
   const handleOnOpen = () => setDate('')  
@@ -88,7 +89,7 @@ const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, isSearch,
     return (
       <Toolbar className={classes.toolBar}>
         <IconButton  onClick={handleClick}>
-                {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
+                {leftIsOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
         </IconButton>
         <div onFocus={handleOpenIsSearch} style={{display:'flex',width:'100%'}}>
           <Search className={value?classes.activeSearch:undefined}>

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

@@ -93,9 +93,9 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
   
     useEffect(() => {
       if (isActive === 0) {
-          dispatch(actionLeftIsOpen('chats'))
+          dispatch(actionLeftIsOpen('searchChats'))
       } else {
-        dispatch(actionLeftIsOpen('allMessages'))
+        dispatch(actionLeftIsOpen('searchAllMessages'))
         }
     }, [isActive,dispatch])  
   
@@ -105,9 +105,9 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
   
     useEffect(() => {
       const handleReset = () => {
-        if (leftIsOpen === 'chats') {
+        if (leftIsOpen === 'searchChats') {
           dispatch(asyncGetChats())
-        } else if (leftIsOpen === 'allMessages') {
+        } else if (leftIsOpen === 'searchAllMessages') {
           dispatch(asyncGetAllMessages())
         }
       }

src/components/HomePage/LeftBar/SettingsBar/ToolBar/index.tsx

@@ -2,8 +2,10 @@ import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import EditIcon from '@mui/icons-material/Edit';
-import MenuList from './MenuList';
 import { makeStyles, Typography } from '@material-ui/core'
+import { useDispatch } from 'react-redux';
+import MenuList from './MenuList';
+import { actionLeftIsOpen } from '../../../../../redux/control/action';
 
 const useStyles = makeStyles({
   container: {
@@ -24,12 +26,12 @@ const useStyles = makeStyles({
 })
 
 interface IToolBar {
-  setSelectedIndex: (selectedIndex: number | null) => void,
   handleClick:() => void
 }
 
-const ToolBar = ({setSelectedIndex,handleClick}:IToolBar) => {
+const ToolBar = ({handleClick}:IToolBar) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
 
   return (
     <Stack className={classes.container} direction="row" spacing={21}>
@@ -37,7 +39,7 @@ const ToolBar = ({setSelectedIndex,handleClick}:IToolBar) => {
         <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
       </IconButton>
       <Typography style={{ marginLeft: 20, color: '#474747' }} variant="h6" color="initial">Settings</Typography>
-      <IconButton onClick={() => setSelectedIndex(4)} style={{ marginLeft: 'auto' }}  aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionLeftIsOpen('edit'))} style={{ marginLeft: 'auto' }} aria-label="delete" size="medium">
         <EditIcon  fontSize='medium' /> 
       </IconButton>
       <MenuList/>   

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

@@ -7,11 +7,10 @@ import { asyncCurrentUser } from '../../../../redux/authorization/operations'
 import { refreshAppTime } from '../../../../helpers'
 
 interface ISettingsBar {
-  setSelectedIndex: (selectedIndex: number | null) => void,
   handleClick:() => void
 }
 
-const SettingsBar = ({ setSelectedIndex, handleClick }: ISettingsBar) => {
+const SettingsBar = ({ handleClick }: ISettingsBar) => {
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -23,7 +22,7 @@ const SettingsBar = ({ setSelectedIndex, handleClick }: ISettingsBar) => {
   
   return (
     <div style={{backgroundColor: '#f3f2f2',height:'100%',width:'100%'}}>
-      <ToolBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>
+      <ToolBar handleClick={handleClick}/>
       <SettingsPicture />
       <SettingsMenu/>
     </div>

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

@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/core'
 import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { styled } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Menu from '@mui/material/Menu';
@@ -8,6 +9,7 @@ import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
+import { actionLeftIsOpen } from '../../../../redux/control/action';
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -57,17 +59,17 @@ const useStyles = makeStyles({
 })
 
 interface ISmallMenuBar {
-  handleSelectedMenu:(i:number) => void,
-  setIsMenuSm:React.Dispatch<React.SetStateAction<boolean>>,
+  setPopup:React.Dispatch<React.SetStateAction<boolean>>,
 }
-const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
+const  SmallMenuBar = ({setPopup}:ISmallMenuBar) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const open = Boolean(anchorEl);
   const handleClick = (e: React.MouseEvent<HTMLDivElement>):void => setAnchorEl(e.currentTarget)
 
   const handleClose = ():void => {
-    setIsMenuSm(false)
+    setPopup(false)
     setAnchorEl(null)
   }
 
@@ -87,14 +89,14 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
       >
         <MenuItem  onClick={() => {
           handleClose();
-          handleSelectedMenu(3)
+          dispatch(actionLeftIsOpen('contact'))
         }}>
             <PersonAddAltIcon/>
             New Contact
         </MenuItem>          
         <MenuItem  onClick={() => {
           handleClose();
-          handleSelectedMenu(1)
+          dispatch(actionLeftIsOpen('contacts'))
         }}>
             <PermContactCalendarIcon/>
             Contacts

src/components/HomePage/LeftBar/index.tsx

@@ -13,57 +13,52 @@ import AddContact from './AddContact'
 import SettingsBar from './SettingsBar';
 import EditBar from './EditBar';
 import { getAuthorizationState } from '../../../redux/authorization/selector';
+import { getLeftIsOpen } from '../../../redux/control/selector';
 import { actionLeftIsOpen } from '../../../redux/control/action';
 
 const LeftBar = () => {
   const dispatch = useDispatch()
-  const { sort,nightMode } = useSelector(getAuthorizationState)
-  const [isSearch, setIsSearch] = useState<boolean>(false)
-  const [isMenu, setIsMenu] = useState<boolean>(false)
-  const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
+  const { sort, nightMode } = useSelector(getAuthorizationState)
+  const leftIsOpen = useSelector(getLeftIsOpen)
+  const [modal, setModal] = useState<boolean>(false)
+  const [popup, setPopup] = useState<boolean>(false);
   const [disabled, setDisabled] = useState<boolean>(false)
   const [value, setValue] = useState<string>('')
   const [date, setDate] = useState<any>('');
-  const modalRoot = useRef<HTMLDivElement|null>(null);
-  const handleOpenIsSearch = () => !isSearch&&setIsSearch(true)
-  const handleClick = (): void => {
+  const modalRoot = useRef<HTMLDivElement | null>(null);
+  
+  const handleOpenIsSearch = () => leftIsOpen===''&&dispatch(actionLeftIsOpen('searchChats'))
+  
+  const handleClick = () => {
     dispatch(actionLeftIsOpen(''))
-    setValue('')
-    setDate('')
-    setDisabled(false)
-    if (selectedIndex) setSelectedIndex(null)
-    if(!isSearch) return setIsMenu(!isMenu)
-    setIsSearch(false)
+    setModal(true)
   }
+  
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
-  const handleEnterOpenMenuSm = (): void => {
-    if(!isMenuSm) setIsMenuSm(true)
-  }
-  const handleLeaveCloseMenuSm = (): void => {
-    if(isMenuSm) setIsMenuSm(false)
-  }
-  const handleSelectedMenu = (i: number) => {
-    setIsSearch(true)
-    setIsMenu(false)
-    setIsMenuSm(false)
+  const handleEnterOpenMenuSm = () => !popup&&setPopup(true)
+  
+  const handleLeaveCloseMenuSm = () => popup&&setPopup(false)
+  
+
+  useEffect(() => {
     setValue('')
-    setDate('')
-    setSelectedIndex(i)
-  }
+    setDate('')    
+    setModal(false)
+    setPopup(false)
+  },[leftIsOpen])
   
   useEffect(() => {
     const handleCloseModal = (e:any) => {
       if (e.target.id === 'overlay') {
-        setIsMenu(false)
-        setIsMenuSm(false)
+        setModal(false)
+        setPopup(false)
       }
     }
     if (!modalRoot.current) {
-    const modal = document.getElementById('modal-root') as HTMLDivElement | null
-      if (modal) {
-      modal.addEventListener('click',handleCloseModal)
-      modalRoot.current = modal
+    const modalHtml = document.getElementById('modal-root') as HTMLDivElement | null
+      if (modalHtml) {
+        modalHtml.addEventListener('click',handleCloseModal)
+        modalRoot.current = modalHtml
        }     
     }
     return () => {
@@ -77,22 +72,22 @@ const LeftBar = () => {
     return (
       <Grid item lg={3} style={{ position: 'relative', backgroundColor:'#ffffff'}}
         onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
-        {selectedIndex !== 2 && selectedIndex !== 3 && selectedIndex !== 4 &&
-          <SearchBar handleClick={handleClick} handleOpenIsSearch={handleOpenIsSearch} sort={sort} 
-            handleSearch={handleSearch} isSearch={isSearch} value={value} setDate={setDate}
-            date={date} disabled={disabled} />}
-        {!selectedIndex && isSearch && <SearchLists value={value} setValue={setValue}
-          sort={sort} date={date} setDate={setDate} setDisabled={setDisabled}/>}
-        {!selectedIndex&&!isSearch &&<ChatsList sort={sort}/>}
-        {!selectedIndex && isMenuSm && !isSearch && <SmallMenuBar
-          handleSelectedMenu={handleSelectedMenu} setIsMenuSm={setIsMenuSm} />}
-        {isMenu && modalRoot.current &&
-          createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} nightMode={nightMode} />, modalRoot.current)}
-        {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value}
+        {leftIsOpen === '' || leftIsOpen === 'contacts'
+          || leftIsOpen === 'searchChats' || leftIsOpen === 'searchAllMessages' ?
+        <SearchBar handleClick={handleClick} handleOpenIsSearch={handleOpenIsSearch} sort={sort} 
+            handleSearch={handleSearch} leftIsOpen={leftIsOpen} value={value} setDate={setDate}
+            date={date} disabled={disabled}/>:null}
+        {leftIsOpen === 'searchChats' || leftIsOpen === 'searchAllMessages' ?<SearchLists value={value} setValue={setValue}
+          sort={sort} date={date} setDate={setDate} setDisabled={setDisabled}/>:null}
+        {leftIsOpen === ''&&<ChatsList sort={sort}/>}
+        {leftIsOpen === '' && popup && <SmallMenuBar setPopup={setPopup} />}
+        {modal && modalRoot.current &&
+          createPortal(<MenuBar nightMode={nightMode} />, modalRoot.current)}
+        {leftIsOpen === 'contacts' && <ContactsList handleClick={handleClick} value={value}
           sort={sort} date={date} setDisabled={setDisabled} />}
-        {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
-        {selectedIndex === 3 && <AddContact setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
-        {selectedIndex === 4 && <EditBar setSelectedIndex={setSelectedIndex}/>}
+        {leftIsOpen === 'contact' && <AddContact  handleClick={handleClick}/>}
+        {leftIsOpen === 'settings' && <SettingsBar handleClick={handleClick}/>}
+        {leftIsOpen === 'edit' && <EditBar/>}
     </Grid>
     )
 }

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

@@ -6,9 +6,9 @@ import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
-import { TMessages } from '../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../helpers'
+import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
     folderIcon: {

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

@@ -6,9 +6,9 @@ import FolderIcon from '@mui/icons-material/Folder';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
-import { TMessages } from '../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../helpers'
+import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
     folderIcon: {

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

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../../../helpers'
+import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {

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

@@ -1,8 +1,8 @@
 import ImageList from '@mui/material/ImageList';
 import MediaListItem from './MediaListItem';
 
-import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { TMessages } from '../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../reusableComponents/AlertInfo';
+import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const MediaList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
   

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

@@ -8,9 +8,9 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../../../helpers'
-import { TMessages } from '../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../../helpers'
+import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
   listItem: {

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

@@ -6,9 +6,9 @@ import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
-import { TMessages } from '../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../helpers'
+import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
     folderIcon: {

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

@@ -7,10 +7,10 @@ import MediaList from './MediaList';
 import FilesList from './FilesList';
 import TextList from './TextList';
 import VideoList from './VideoList'
-import { getMessagesMemo } from '../../../../../../redux/messages/selector'
-import { handleSort } from '../../../../../../helpers';
-import { getChat } from '../../../../../../redux/chat/selector'
-import { TMessages } from '../../../../../../typescript/redux/messages/types'
+import { getMessagesMemo } from '../../../../../redux/messages/selector'
+import { handleSort } from '../../../../../helpers';
+import { getChat } from '../../../../../redux/chat/selector'
+import { TMessages } from '../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
 container: {

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

@@ -13,9 +13,9 @@ import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
-import { getChat } from '../../../../../../redux/chat/selector'
-import { muteChat,sortChat } from '../../../../../../api-data'
-import { copied,firstLetter,slicedWord } from '../../../../../../helpers';
+import { getChat } from '../../../../../redux/chat/selector'
+import { muteChat,sortChat } from '../../../../../api-data'
+import { copied,firstLetter,slicedWord } from '../../../../../helpers';
 
 const useStyles = makeStyles({
     listIcon: {

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

@@ -1,8 +1,8 @@
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux';
 import { Carousel } from 'react-responsive-carousel';
-import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers'
-import { getChat } from '../../../../../../redux/chat/selector'
+import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../helpers'
+import { getChat } from '../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {

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

@@ -6,10 +6,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import { makeStyles, Typography } from '@material-ui/core'
 import { useDispatch, useSelector } from 'react-redux';
 import { useState,useEffect } from 'react';
-import { actionRightIsOpen } from '../../../../../../redux/control/action'
-import { getContactsMemo } from '../../../../../../redux/contacts/selector'
-import { getChat } from '../../../../../../redux/chat/selector'
-import { asyncAddContact } from '../../../../../../redux/contacts/operations';
+import { actionRightIsOpen } from '../../../../../redux/control/action'
+import { getContactsMemo } from '../../../../../redux/contacts/selector'
+import { getChat } from '../../../../../redux/chat/selector'
+import { asyncAddContact } from '../../../../../redux/contacts/operations';
 
 const useStyles = makeStyles({
   container: {

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

@@ -5,9 +5,9 @@ import ToolBar from './ToolBar'
 import ProfilePicture from './ProfilePicture'
 import ProfileMenu from './ProfileMenu'
 import ProfileLists from './ProfileLists'
-import { asyncGetContacts } from '../../../../../redux/contacts/operations'
-import { getState } from '../../../../../redux/control/selector'
-import { refreshAppTime } from '../../../../../helpers'
+import { asyncGetContacts } from '../../../../redux/contacts/operations'
+import { getState } from '../../../../redux/control/selector'
+import { refreshAppTime } from '../../../../helpers'
 
 const useStyles = makeStyles({
   container: {

src/components/HomePage/RightBar/RightListsAndBars/EditBar/Delete/index.tsx

@@ -5,10 +5,10 @@ import MenuItem from '@mui/material/MenuItem';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { actionRightIsOpen } from '../../../../../../redux/control/action'
-import { removeContact } from '../../../../../../api-data';
-import { TContact } from '../../../../../../typescript/redux/contacts/types';
-import { slicedWord,firstLetter,prodBaseURL } from '../../../../../../helpers';
+import { actionRightIsOpen } from '../../../../../redux/control/action'
+import { removeContact } from '../../../../../api-data';
+import { TContact } from '../../../../../typescript/redux/contacts/types';
+import { slicedWord,firstLetter,prodBaseURL } from '../../../../../helpers';
 const useStyles = makeStyles({
   container: {
     width: '100%',

src/components/HomePage/RightBar/RightListsAndBars/EditBar/EditList/index.tsx

@@ -3,8 +3,8 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Checkbox from '@mui/material/Checkbox';
 import ListItemText from '@mui/material/ListItemText';
-import { format,firstLetter,slicedWord,prodBaseURL } from '../../../../../../helpers'
-import { TChat } from '../../../../../../typescript/redux/chat/types'
+import { format,firstLetter,slicedWord,prodBaseURL } from '../../../../../helpers'
+import { TChat } from '../../../../../typescript/redux/chat/types'
 
 const useStyles = makeStyles({
   container: {

src/components/HomePage/RightBar/RightListsAndBars/EditBar/ToolBar/index.tsx

@@ -4,7 +4,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { makeStyles, Typography } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
 
-import { actionRightIsOpen } from '../../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {

src/components/HomePage/RightBar/RightListsAndBars/EditBar/index.tsx

@@ -5,9 +5,9 @@ import ToolBar from './ToolBar'
 import EditList from './EditList'
 import Delete from './Delete'
 import SubmitBtn from './SubmitBtn';
-import { getContactsMemo } from '../../../../../redux/contacts/selector'
-import { getChat } from '../../../../../redux/chat/selector'
-import { muteChat, updateContact } from '../../../../../api-data';
+import { getContactsMemo } from '../../../../redux/contacts/selector'
+import { getChat } from '../../../../redux/chat/selector'
+import { muteChat, updateContact } from '../../../../api-data';
 
 
 const useStyles = makeStyles({

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

@@ -1,19 +0,0 @@
-import { useSelector } from 'react-redux'
-import SearchList from './SearchList'
-import CredentialsList from './CredentialsList'
-import EditBar from './EditBar'
-import { getRightIsOpen } from '../../../../redux/control/selector'
-
-
-const RightListsAndBars = () => {
-  const rightIsOpen = useSelector(getRightIsOpen)
-  return (
-    <>
-      {rightIsOpen === 'credentials' && <CredentialsList />}
-      {rightIsOpen === 'search' && <SearchList />}
-      {rightIsOpen === 'edit' && <EditBar/>}
-    </>
-   )
-}
-
-export default RightListsAndBars

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

@@ -9,10 +9,10 @@ import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch, useSelector } from "react-redux";
 
-import { actionRightIsOpen } from '../../../../../../redux/control/action'
-import { getMessages } from '../../../../../../redux/messages/selector'
-import { getChat } from '../../../../../../redux/chat/selector'
-import { sortChat } from '../../../../../../api-data';
+import { actionRightIsOpen } from '../../../../../redux/control/action'
+import { getMessages } from '../../../../../redux/messages/selector'
+import { getChat } from '../../../../../redux/chat/selector'
+import { sortChat } from '../../../../../api-data';
 import StaticDatePicker from "./StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({

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

@@ -9,11 +9,11 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import Search from './Search'
-import AlertInfo from "../../../../reusableComponents/AlertInfo";
-import { getMessages } from '../../../../../redux/messages/selector'
-import { getChat } from '../../../../../redux/chat/selector'
-import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort,prodBaseURL } from '../../../../../helpers'
-import { TMessages } from '../../../../../typescript/redux/messages/types';
+import AlertInfo from "../../../reusableComponents/AlertInfo";
+import { getMessages } from '../../../../redux/messages/selector'
+import { getChat } from '../../../../redux/chat/selector'
+import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort,prodBaseURL } from '../../../../helpers'
+import { TMessages } from '../../../../typescript/redux/messages/types';
 
 const useStyles = makeStyles({
   container: {

src/components/HomePage/RightBar/index.tsx

@@ -1,41 +1,17 @@
 import Grid from '@mui/material/Grid'
-import { makeStyles } from '@material-ui/core'
-import { useSelector } from 'react-redux'
-import { getRightIsOpen } from '../../../redux/control/selector'
-import { getChatMemo } from '../../../redux/chat/selector'
+import SearchList from './SearchList'
+import CredentialsList from './CredentialsList'
+import EditBar from './EditBar'
+import { TRightIsOpen } from '../../../typescript/redux/control/types'
 
-import HeaderBar from './HeaderBar'
-import ChatBar from './ChatBar'
-import RightListsAndBars from './RightListsAndBars'
-
-
-const useStyles = makeStyles({
-  chatBar: {
-    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-  },
-})
-
-const RightBar = () => {
-  const classes = useStyles()
-  const rightIsOpen = useSelector(getRightIsOpen)
-  const { _id } = useSelector(getChatMemo)
-  const handleRightIsOpen = rightIsOpen&&rightIsOpen !== 'menu'
-
-    return _id?
-      <Grid item lg={9} style={{display:'flex'}}>
-        <Grid item lg={handleRightIsOpen?8:12}>
-          <Grid item lg={12} >
-            <HeaderBar/>
-          </Grid>          
-          <Grid item lg={12} className={classes.chatBar}>
-            <ChatBar />
-          </Grid>
-        </Grid>
-        <Grid item lg={handleRightIsOpen?4:0}>
-          <RightListsAndBars/>
-        </Grid>          
-      </Grid>
-     : <Grid item lg={9} className={classes.chatBar}/>
+const RightBar = ({rightIsOpen}:{rightIsOpen:TRightIsOpen}) => {
+  return (
+    <Grid item lg={rightIsOpen?4:0}>
+      {rightIsOpen === 'credentials' && <CredentialsList />}
+      {rightIsOpen === 'search' && <SearchList />}
+      {rightIsOpen === 'edit' && <EditBar/>}
+    </Grid>
+   )
 }
 
 export default RightBar

src/components/HomePage/index.tsx

@@ -1,22 +1,40 @@
 import Grid from '@mui/material/Grid'
+import { makeStyles } from '@material-ui/core'
+import { useSelector } from 'react-redux'
 import LeftBar from './LeftBar'
+import CentralBar from './CentralBar'
 import RightBar from './RightBar'
-import { makeStyles } from '@material-ui/core'
+import { getRightIsOpen } from '../../redux/control/selector'
+import { getChatMemo } from '../../redux/chat/selector'
+
 
 const useStyles = makeStyles({
-    container: {
-        minHeight: '100vh',
-        maxHeight: '100vh',
-    },
+  container: {
+    minHeight: '100vh',
+    maxHeight: '100vh',
+  },
+  centralAndRight: {
+    display:'flex'
+  },
+  centralBar: {
+    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
+  },  
 })
 
 const HomePage = () => {
   const classes = useStyles()
+  const rightIsOpen = useSelector(getRightIsOpen)
+  const { companionId } = useSelector(getChatMemo)
  
 return (
     <Grid className={classes.container} container spacing={0} >
-      <LeftBar/>
-      <RightBar/>
+      <LeftBar />
+      {companionId ?
+      <Grid item lg={9} className={classes.centralAndRight}>
+        <CentralBar rightIsOpen={rightIsOpen}/>
+        <RightBar rightIsOpen={rightIsOpen}/>
+      </Grid> :
+      <Grid item lg={9} className={classes.centralBar}/>}
     </Grid>
     )
 }

src/redux/control/reducer/index.ts

@@ -1,3 +1,4 @@
+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'
@@ -9,14 +10,17 @@ const initialState: IControlState = {
 }
 
 const reducerControl = createReducer(initialState, {
-  [actionLeftIsOpen.type]: (state, { payload:leftIsOpen }:IPayloadLeftIsOpen) => {
-    return {...state,leftIsOpen}
+  [actionLeftIsOpen.type]: (state, { payload: leftIsOpen }: IPayloadLeftIsOpen) => {
+    if (isEqual(state.leftIsOpen, leftIsOpen) === false) return {...state,leftIsOpen}
+    return state;    
   },  
-  [actionRightIsOpen.type]: (state, { payload:rightIsOpen }:IPayloadRightIsOpen) => {
-    return {...state,rightIsOpen}
+  [actionRightIsOpen.type]: (state, { payload: rightIsOpen }: IPayloadRightIsOpen) => {
+      if (isEqual(state.rightIsOpen, rightIsOpen) === false) return {...state,rightIsOpen}
+    return state;  
   },
-  [actionScrollChat.type]: (state, { payload:scroll }:IPayloadScrollChat) => {
-    return {...state,scroll}
+  [actionScrollChat.type]: (state, { payload: scrollChat }: IPayloadScrollChat) => {
+    if (isEqual(state.scrollChat, scrollChat) === false) return {...state,scrollChat}
+    return state;    
   },  
 });
 

src/typescript/redux/control/types.ts

@@ -1,5 +1,5 @@
-export type TLeftIsOpen = ('' | 'chats' | 'contacts'| 'allMessages')
+export type TLeftIsOpen = (''  | 'contacts'| 'contact' | 'searchChats' | 'searchAllMessages' | 'settings' | 'edit')
 
-export type TRightIsOpen = ('' | 'credentials' | 'search' | 'menu' | 'edit')
+export type TRightIsOpen = ('' | 'credentials' | 'search' | 'edit')
 
 export type TScrollChat = boolean