make some fix with overload server

build/asset-manifest.json

@@ -1,36 +1,36 @@
 {
   "files": {
-    "static/js/0.8f049984.chunk.js": "/static/js/0.8f049984.chunk.js",
-    "static/js/0.8f049984.chunk.js.map": "/static/js/0.8f049984.chunk.js.map",
-    "AuthPage.js": "/static/js/AuthPage.0491d828.chunk.js",
-    "AuthPage.js.map": "/static/js/AuthPage.0491d828.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.4693f42f.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.4693f42f.chunk.js.map",
+    "static/js/0.ea4551fb.chunk.js": "/static/js/0.ea4551fb.chunk.js",
+    "static/js/0.ea4551fb.chunk.js.map": "/static/js/0.ea4551fb.chunk.js.map",
+    "AuthPage.js": "/static/js/AuthPage.c5e50f23.chunk.js",
+    "AuthPage.js.map": "/static/js/AuthPage.c5e50f23.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.0720b43f.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.0720b43f.chunk.js.map",
     "main.css": "/static/css/main.9a5b6280.chunk.css",
-    "main.js": "/static/js/main.c324ac23.chunk.js",
-    "main.js.map": "/static/js/main.c324ac23.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.5381f899.js",
-    "runtime-main.js.map": "/static/js/runtime-main.5381f899.js.map",
-    "static/js/5.3feb04b4.chunk.js": "/static/js/5.3feb04b4.chunk.js",
-    "static/js/5.3feb04b4.chunk.js.map": "/static/js/5.3feb04b4.chunk.js.map",
+    "main.js": "/static/js/main.b2e3f4d2.chunk.js",
+    "main.js.map": "/static/js/main.b2e3f4d2.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.d1b93a2f.js",
+    "runtime-main.js.map": "/static/js/runtime-main.d1b93a2f.js.map",
+    "static/js/5.1a90b71b.chunk.js": "/static/js/5.1a90b71b.chunk.js",
+    "static/js/5.1a90b71b.chunk.js.map": "/static/js/5.1a90b71b.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js": "/static/js/6.6b4232f4.chunk.js",
     "static/js/6.6b4232f4.chunk.js.map": "/static/js/6.6b4232f4.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.8f049984.chunk.js.LICENSE.txt": "/static/js/0.8f049984.chunk.js.LICENSE.txt",
-    "static/js/5.3feb04b4.chunk.js.LICENSE.txt": "/static/js/5.3feb04b4.chunk.js.LICENSE.txt",
+    "static/js/0.ea4551fb.chunk.js.LICENSE.txt": "/static/js/0.ea4551fb.chunk.js.LICENSE.txt",
+    "static/js/5.1a90b71b.chunk.js.LICENSE.txt": "/static/js/5.1a90b71b.chunk.js.LICENSE.txt",
     "static/js/6.6b4232f4.chunk.js.LICENSE.txt": "/static/js/6.6b4232f4.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.5381f899.js",
+    "static/js/runtime-main.d1b93a2f.js",
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js",
     "static/css/main.9a5b6280.chunk.css",
-    "static/js/main.c324ac23.chunk.js"
+    "static/js/main.b2e3f4d2.chunk.js"
   ]
 }

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

@@ -1,7 +1,8 @@
 import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
-import React, { useState } from 'react';
+import React, { useState,useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { asyncAddContact } from '../../../../redux/contacts/operations'
+import { actionLeftIsOpen } from '../../../../redux/control/action';
 import ToolBar from './ToolBar';
 
 const useStyles = makeStyles({
@@ -59,6 +60,10 @@ const AddContact = ({setSelectedIndex,handleClick}:IAddContact) => {
     if(e.code === 'Enter' && isValidNumber()) handleAddContact()
   }
 
+  useEffect(() => {
+    dispatch(actionLeftIsOpen(''))
+  }, [dispatch])   
+
  
   return (
     <>

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

@@ -1,6 +1,6 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
-import { useState,useEffect,useRef,useCallback } from 'react';
+import { useEffect,useRef,useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import AlertInfo from '../../../reusableComponents/AlertInfo'
@@ -9,11 +9,12 @@ import { notification,playNotificationWithoutPermission,sortByRecent } from '../
 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 { actionScroll, actionIsOpen } from '../../../../redux/control/action'
-import { getIsOpen } from '../../../../redux/control/selector';
-import { TChats,TChat } from '../../../../typescript/redux/chats/types';
-import { timeStampFilter,prodBaseURL } from '../../../../helpers';
+import { actionLeftIsOpen,actionRightIsOpen,actionScrollChat } from '../../../../redux/control/action'
+import { getState } from '../../../../redux/control/selector';
+import { TChats } from '../../../../typescript/redux/chats/types';
+import { prodBaseURL,refreshAppTime } from '../../../../helpers';
 
 const useStyles = makeStyles({
   list: {
@@ -48,28 +49,40 @@ const ChatsList = ({sort}:IChatsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const chatsRef = useRef<any>(null)
-  const [sortedChats, setSortedChats] = useState<TChats>([]);
   const { total, chats } = useSelector(getStateMemo)
   const chat = useSelector(getChatMemo)
-  const isOpen = useSelector(getIsOpen)
+  const { leftIsOpen,rightIsOpen} = useSelector(getState)
   const handleListItemClick = (companionId: string) => {
-    isOpen&&dispatch(actionIsOpen(''))
+    rightIsOpen&&dispatch(actionRightIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
   const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {
     e.stopPropagation()
-    dispatch(actionScroll(true))
-    isOpen&&dispatch(actionIsOpen(''))
+    dispatch(actionScrollChat(true))
+    rightIsOpen&&dispatch(actionRightIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
+  const handleNotification= useCallback((companionId: string) => {
+    dispatch(asyncStartChatById(companionId))
+    dispatch(actionScrollChat(true))
+  }, [dispatch])
+
+  const sortedChats: TChats = sortByRecent(chats, sort)
+  
+  useEffect(() => {
+    dispatch(actionLeftIsOpen('chats'))
+  }, [dispatch])
+  
+  useEffect(() => {
+    const handleReset = () => leftIsOpen === 'chats' && dispatch(asyncGetChats())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [leftIsOpen,dispatch]);  
+
   useEffect(() => {
-    const handleNotification= (companionId: string) => {
-      dispatch(asyncStartChatById(companionId))
-      dispatch(actionScroll(true))
-    }
-    setSortedChats(sortByRecent(chats, sort))
     if (chat.companionId&&!sortedChats.find((el) => el.companionId === chat.companionId)) dispatch(actionRemoveChat())
     if (chatsRef.current) {
       chatsRef.current.forEach(({total,seen}: any,i:number) => {
@@ -83,8 +96,8 @@ const ChatsList = ({sort}:IChatsList) => {
         } 
       })
     }
-      chatsRef.current = sortedChats
-  }, [chats, chat,sort,sortedChats, dispatch])
+    chatsRef.current = sortedChats
+  }, [chat,sortedChats,handleNotification,dispatch])
 
   return total !== '0' ? (
     <List className={classes.list} component="nav"

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

@@ -13,9 +13,9 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import {removeContact } from '../../../../../api-data';
-import { actionIsOpen } from '../../../../../redux/control/action';
+import { actionRightIsOpen } from '../../../../../redux/control/action';
 import { TContact } from '../../../../../typescript/redux/contacts/types';
-import { TIsOpen } from '../../../../../typescript/redux/control/types';
+import { TRightIsOpen } from '../../../../../typescript/redux/control/types';
 import { firstLetter,slicedWord,timeStampEU,copied,prodBaseURL } from '../../../../../helpers';
 
 const StyledMenu = styled((props:any) => (
@@ -91,9 +91,9 @@ const useStyles = makeStyles({
 interface IContactItem {
   contact: TContact,
   handleListItemClick: (companionId: string) => void,
-  isOpen: TIsOpen,
+  rightIsOpen: TRightIsOpen,
 }
-const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
+const  ContactItem = ({contact,handleListItemClick,rightIsOpen}:IContactItem) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -113,7 +113,7 @@ const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
-      isOpen === 'edit'&&dispatch(actionIsOpen('credentials'))
+      rightIsOpen === 'edit'&&dispatch(actionRightIsOpen('credentials'))
       removeContact(_id)
       setModal(false)
     }

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

@@ -6,10 +6,11 @@ import { useEffect } from 'react';
 import AlertInfo from '../../../reusableComponents/AlertInfo'
 import ContactItem from './ContactItem';
 import { getState } from '../../../../redux/contacts/selector'
+import { asyncGetContacts } from '../../../../redux/contacts/operations';
 import { asyncStartChatById } from '../../../../redux/chat/operations'
-import { getIsOpen } from '../../../../redux/control/selector'
-import { actionIsOpen } from '../../../../redux/control/action';
-import { handleSort,timeStampFilter } from '../../../../helpers';
+import * as controlSelector 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';
 
 const useStyles = makeStyles({
@@ -48,7 +49,7 @@ const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList)
   const classes = useStyles()
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
-  const isOpen = useSelector(getIsOpen)
+  const { leftIsOpen,rightIsOpen } = useSelector(controlSelector.getState)
 
   const filteredContacts = ():TContacts => handleSort('name', contacts, sort).filter((el:TContact) => {
     const credentials = el.name + ' ' + el.lastName
@@ -62,22 +63,33 @@ const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList)
 
   const handleListItemClick = (companionId:string) => {
     handleClick()
-    isOpen&&dispatch(actionIsOpen(''))
+    rightIsOpen&&dispatch(actionRightIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
   const arr = filteredContacts()
 
+  useEffect(() => {
+    dispatch(actionLeftIsOpen('contacts'))
+  }, [dispatch])    
+
   useEffect(() => {
     setDisabled(total === '0'?true:false)
-  },[total,setDisabled])
+  }, [total, setDisabled])
+  
+  useEffect(() => {
+    const handleReset = () => leftIsOpen === 'contacts' && dispatch(asyncGetContacts())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [leftIsOpen,dispatch]);   
   
   return total !== '0' ? (
     <List
       className={classes.list} component="nav"
       aria-label="main mailbox folders">
       {arr.length > 0 ? arr.map((contact) => <ContactItem key={contact.number}
-        contact={contact} handleListItemClick={handleListItemClick} isOpen={isOpen}/>) :
+        contact={contact} handleListItemClick={handleListItemClick} rightIsOpen={rightIsOpen}/>) :
         <AlertInfo name={`Can not find Contact by request : ${value}`} />}
       </List>
   ):<AlertInfo name='You do not have Contact yet!' />;

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

@@ -1,11 +1,13 @@
 import { makeStyles } from '@material-ui/core'
 import { useState,useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector,useDispatch } from 'react-redux';
 import ToolBar from './ToolBar'
 import EditList from './EditList'
 import SubmitBtn from './SubmitBtn';
 import { getState } from '../../../../redux/authorization/selector'
-import { updateCredentials,updateUserAvatar } from '../../../../api-data';
+import { asyncCurrentUser } from '../../../../redux/authorization/operations';
+import { updateCredentials, updateUserAvatar } from '../../../../api-data';
+import { refreshAppTime } from '../../../../helpers';
 
 const useStyles = makeStyles({
   container: {
@@ -22,6 +24,7 @@ interface IEditBar {
 
 const EditBar= ({setSelectedIndex}:IEditBar) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const user = useSelector(getState)
   const [name, setName] = useState<string>('')
   const [lastName, setLastName] = useState<string>('')
@@ -41,11 +44,18 @@ const EditBar= ({setSelectedIndex}:IEditBar) => {
     file && setFile(null)
     openBtn && setOpenBtn(false)
   }
+
+  useEffect(() => {
+    const handleReset = () => !openBtn && dispatch(asyncCurrentUser())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [openBtn,dispatch]);  
   
   useEffect(() => {
     Name&&setName(Name)
     LastName && setLastName(LastName)
-  }, [Name, LastName])  
+  }, [Name, LastName])
 
     return (
     <div className={classes.container}>

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

@@ -12,7 +12,11 @@ import BugReportIcon from '@mui/icons-material/BugReport';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { updateUser } from '../../../../api-data';
+import { asyncCurrentUser } from '../../../../redux/authorization/operations';
+import { refreshAppTime } from '../../../../helpers';
 
 const useStyles = makeStyles({
     overlay: {
@@ -51,13 +55,21 @@ const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 interface IContactsList {
   handleSelectedMenu: (i: number) => void,
-  nightMode: boolean
+  nightMode: boolean,
 }
 
 const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const handleNightMode = () => updateUser({ nightMode: !nightMode })
 
+  useEffect(() => {
+    const handleReset = () => dispatch(asyncCurrentUser())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [dispatch]);  
+
   return (
     <div className={classes.overlay} id='overlay'>
       <Paper className={classes.container}>
@@ -74,8 +86,7 @@ const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
           </ListItemIcon>
           <ListItemText>Contacts</ListItemText>
         </MenuItem>
- 
-        <MenuItem onClick={() => handleSelectedMenu(2)}>
+        <MenuItem onClick={() =>  handleSelectedMenu(2)}>
           <ListItemIcon className={classes.listIcon}>
             <SettingsIcon fontSize="medium" />
           </ListItemIcon>

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

@@ -9,12 +9,13 @@ import TextList from './TextList';
 import AudioList from './AudioList'
 import VideoList from './VideoList';
 import { asyncGetAllMessages } from '../../../../redux/allMessages/operations';
+import { asyncGetChats } from '../../../../redux/chats/operations';
 import { getStateMemo } from '../../../../redux/chats/selector';
 import { getAllMessagesMemo } from '../../../../redux/allMessages/selector';
-import { getIsOpen } from '../../../../redux/control/selector';
-import { sortByRecent,timeStampFilter } from '../../../../helpers';
+import { getState } from '../../../../redux/control/selector';
+import { sortByRecent,timeStampFilter,refreshAppTime } from '../../../../helpers';
 import { asyncStartChatById } from '../../../../redux/chat/operations';
-import { actionIsOpen } from '../../../../redux/control/action';
+import { actionLeftIsOpen,actionRightIsOpen } from '../../../../redux/control/action';
 import { TChats } from '../../../../typescript/redux/chats/types';
 
 
@@ -64,7 +65,7 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
     const dispatch = useDispatch()
     const { chats,total } = useSelector(getStateMemo)
     const messagesMemo = useSelector(getAllMessagesMemo)
-    const isOpen = useSelector(getIsOpen)
+    const {leftIsOpen,rightIsOpen} = useSelector(getState)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => {
       setIsActive(newValue)
@@ -73,7 +74,7 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
     } 
 
     const handleListItemClick = (companionId: string) => {
-      isOpen&&dispatch(actionIsOpen(''))
+      rightIsOpen&&dispatch(actionRightIsOpen(''))
       dispatch(asyncStartChatById(companionId))
     }
     const filteredChats = (arr: TChats) => arr.filter((el) => {
@@ -91,16 +92,30 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
        setDate('')
     }, [setDate])
   
+    useEffect(() => {
+      if (isActive === 0) {
+          dispatch(actionLeftIsOpen('chats'))
+      } else {
+        dispatch(actionLeftIsOpen('allMessages'))
+        }
+    }, [isActive,dispatch])  
+  
     useEffect(() => {
         if (isActive === 0) setDisabled(total === '0'?true:false)
     }, [isActive,total,setDisabled])
   
     useEffect(() => {
-      dispatch(asyncGetAllMessages())
-      const handleReset = () =>  dispatch(asyncGetAllMessages())
-      const idInterval = setInterval(handleReset, 5000);
+      const handleReset = () => {
+        if (leftIsOpen === 'chats') {
+          dispatch(asyncGetChats())
+        } else if (leftIsOpen === 'allMessages') {
+          dispatch(asyncGetAllMessages())
+        }
+      }
+      handleReset()
+      const idInterval = setInterval(handleReset, refreshAppTime);
       return () => clearInterval(idInterval);
-    }, [dispatch]);
+    }, [leftIsOpen,dispatch]);
     
   
     const filteredAndSorted = filteredChats(sortByRecent(chats,sort))

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

@@ -1,13 +1,26 @@
+import { useEffect } from "react"
+import { useDispatch } from "react-redux"
 import ToolBar from "./ToolBar"
 import SettingsPicture from "./SettingsPicture"
 import SettingsMenu from "./SettingsMenu"
+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 = ({ setSelectedIndex, handleClick }: ISettingsBar) => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const handleReset = () => dispatch(asyncCurrentUser())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [dispatch]);
+  
   return (
     <div style={{backgroundColor: '#f3f2f2',height:'100%',width:'100%'}}>
       <ToolBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>

src/components/HomePage/LeftBar/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector,useDispatch } from 'react-redux';
 import { createPortal } from 'react-dom';
 
 import Grid from '@mui/material/Grid'
@@ -12,9 +12,11 @@ import ContactsList from './ContactsList'
 import AddContact from './AddContact'
 import SettingsBar from './SettingsBar';
 import EditBar from './EditBar';
-import { getState } from '../../../redux/authorization/selector'
+import { getState } from '../../../redux/authorization/selector';
+import { actionLeftIsOpen } from '../../../redux/control/action';
 
 const LeftBar = () => {
+  const dispatch = useDispatch()
   const { sort,nightMode } = useSelector(getState)
   const [isSearch, setIsSearch] = useState<boolean>(false)
   const [isMenu, setIsMenu] = useState<boolean>(false)
@@ -26,6 +28,7 @@ const LeftBar = () => {
   const modalRoot = useRef<HTMLDivElement|null>(null);
   const handleOpenIsSearch = () => !isSearch&&setIsSearch(true)
   const handleClick = (): void => {
+    dispatch(actionLeftIsOpen(''))
     setValue('')
     setDate('')
     if (selectedIndex) setSelectedIndex(null)
@@ -84,7 +87,7 @@ const LeftBar = () => {
         {!selectedIndex && isMenuSm && !isSearch && <SmallMenuBar
           handleSelectedMenu={handleSelectedMenu} setIsMenuSm={setIsMenuSm} />}
         {isMenu && modalRoot.current &&
-          createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} nightMode={nightMode}/>, modalRoot.current)}
+          createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} nightMode={nightMode} />, modalRoot.current)}
         {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value}
           sort={sort} date={date} setDisabled={setDisabled} />}
         {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}

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

@@ -8,7 +8,6 @@ import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt
 import CloseIcon from '@mui/icons-material/Close';
 import Avatar from '@mui/material/Avatar';
 import Picker from 'emoji-picker-react';
-import LinearProgress from '@mui/material/LinearProgress';
 
 import { useReactMediaRecorder } from "react-media-recorder";
 import { useState } from "react";
@@ -20,7 +19,7 @@ import {
     sentVideoMessageById,sentFileMessageById
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
-import { getIsOpen } from '../../../../../redux/control/selector'
+import { getRightIsOpen } from '../../../../../redux/control/selector'
 import { playNotification,prodBaseURL } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
 
@@ -38,8 +37,23 @@ const useStyles = makeStyles({
         alignContent: 'start',
         alignItems: 'start',
         color: '#6b6b6b',
+        border:'solid 2px #ffffff',
         backgroundColor: '#ffffff',        
     },
+    containerActive: {
+        width: '35vw',
+        height:'6vh',
+        position: 'fixed',
+        bottom: '2vh',
+        borderRadius: 8,
+        padding: 10,
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignContent: 'start',
+        alignItems: 'start',
+        border:'solid 2px rgb(41, 139, 231)',
+        backgroundColor: '#ffffff',        
+    },    
     textarea: {
         width: '100%',
         height: '100%',
@@ -51,8 +65,9 @@ const useStyles = makeStyles({
         overflowY:'auto',
         resize: 'none',
         '&::placeholder': {
-            color: 'rgb(82, 82, 82)',
-            fontWeight: 600
+            color: 'inherit',
+            fontWeight: 600,
+            fontSize:20
         }
     },    
     attachIcon: {
@@ -66,13 +81,6 @@ const useStyles = makeStyles({
         height: 1,
         background:'#ffffff',
     },
-    visualizerTop: {
-        position: 'absolute',
-        left: 0,
-        top: '-2vh',
-        width: '100%',
-        color:'rgb(41, 139, 231)'
-    },
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
@@ -221,7 +229,7 @@ interface ISendMessage{
 const SendMessage = ({isArrow }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
-    const isOpen = useSelector(getIsOpen)
+    const rightIsOpen = useSelector(getRightIsOpen)
     const [value, setValue] = useState<string>('')
     const [file, setFile] = useState<any>(false)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
@@ -332,7 +340,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
     }
 
     return (
-        <div className={classes.container}>
+        <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
             {isArrow && <div className={classes.borderTop}></div>}
             {isFilming && _status !== 'stopped' &&                
              <>
@@ -360,10 +368,6 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                   <div className={classes.circle}></div>         
                 </div>
                 </>}
-                <div className={classes.visualizerTop}
-                  style={{display: value || file || status === 'stopped'  || _status === 'stopped' ? 'block':'none' }}>
-                  <LinearProgress color="inherit" variant="determinate" value={100}/>
-                </div>
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? 'inline-block' : 'none'}} />
@@ -382,21 +386,22 @@ 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: isOpen&&isOpen !== 'menu'?'32.5vw':'45vw'}}>
+                   <div className={classes.emoji} style={{left: rightIsOpen&&rightIsOpen !== 'menu'?'32.5vw':'45vw'}}>
                       <Picker onEmojiClick={onEmojiClick} />
                    </div>  
                 </div>
                 <textarea disabled={file || status !== 'idle' || _status !== 'idle' ? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
                     placeholder={file ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? 'Message ' :
-                    `${status === 'stopped' || _status === 'stopped' ?'Recorded':'Recording in progress'}`} rows={1}>
+                    `${status === 'stopped' || _status === 'stopped' ? 'Recorded' : 'Recording in progress'}`} rows={1}
+                    style={{color:value || file || status !== 'idle' || _status !== 'idle' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
                </textarea>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                   fontSize='medium' sx={{color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                   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: isOpen&&isOpen !== 'menu'?'52.5vw':'65vw'}}>
+                    <div className={classes.filesMenu} style={{left: rightIsOpen&&rightIsOpen !== 'menu'?'52.5vw':'65vw'}}>
                       <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                     </div>
                 </div>         

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

@@ -19,12 +19,12 @@ import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getNumber } from '../../../../redux/authorization/selector'
 import { getChat } from '../../../../redux/chat/selector'
-import { getScroll } from '../../../../redux/control/selector'
-import { actionScroll } from '../../../../redux/control/action'
+import { getScrollChat } from '../../../../redux/control/selector'
+import { actionScrollChat } from '../../../../redux/control/action'
 import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 import { asyncGetChatById } from "../../../../redux/chat/operations";
 import { seenChat } from "../../../../api-data";
-import { timeStampFilter,prodBaseURL } from "../../../../helpers";
+import { timeStampFilter,prodBaseURL,refreshAppTime } from "../../../../helpers";
 const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
@@ -80,7 +80,7 @@ const ChatBar = () => {
   const messages = useSelector(getMessagesMemo)
   const userNumber = useSelector(getNumber)
   const { companionId,total,seen,mute } = useSelector(getChat)
-  const scroll = useSelector(getScroll)
+  const scrollChat = useSelector(getScrollChat)
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   const divRef = useRef<any | null>(null)
@@ -102,19 +102,19 @@ const ChatBar = () => {
   const debouncedHandleScroll = debounce(handleScroll, 300)
   
   useEffect(() => {
-    if (scroll) {
+    if (scrollChat) {
       dispatch(asyncGetMessagesById(companionId, handleScrollTo))
-      dispatch(actionScroll(false))
+      dispatch(actionScrollChat(false))
     }
-  }, [dispatch, scroll, companionId])
+  }, [dispatch, scrollChat, companionId])
   
   useEffect(() => {
-    dispatch(asyncGetMessagesById(companionId, handleScrollTo))
     const handleReset = () => {
       dispatch(asyncGetChatById(companionId))
       dispatch(asyncGetMessagesById(companionId, null))
     }
-    const idInterval = setInterval(handleReset, 5000);
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
   

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

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

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

@@ -7,7 +7,7 @@ import { useState } from 'react';
 
 import MenuList from './MenuList'
 import DeleteModal from './DeleteModal';
-import { actionIsOpen } from '../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {
@@ -22,7 +22,7 @@ const Buttons = () => {
 
   return (
     <Stack className={classes.container} direction="row">
-      <IconButton onClick={() => dispatch(actionIsOpen('search'))} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionRightIsOpen('search'))} aria-label="delete" size="medium">
         <SearchIcon fontSize='medium'/>
       </IconButton>
       <MenuList setModal={setModal}/>

src/components/HomePage/RightBar/HeaderBar/Credentials/index.tsx

@@ -4,7 +4,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { actionIsOpen } from '../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../redux/control/action'
 import { getChat } from '../../../../../redux/chat/selector'
 import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../helpers'
 
@@ -13,7 +13,7 @@ const Credentials = () => {
   const { name, lastName, avatarUrl, color, online } = useSelector(getChat)
   
   return (
-    <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
+    <ListItemButton onClick={() => dispatch(actionRightIsOpen('credentials'))}>
       <ListItemIcon >
         <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
               sx={{ background: color, width: 44, height: 44 }}>

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

@@ -51,6 +51,7 @@ const ProfileLists = ({setDisabled}:{setDisabled: React.Dispatch<boolean>,}) =>
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => setIsActive(newValue)
     const filterBy = ['text', 'image', 'text', 'audio', 'video']
+  
     const sorted: TMessages = handleSort('createdAt', messagesMemo, sort)
     const filteredAndSorted = sorted.filter((el) => {
       if (isActive !== 0) {
@@ -59,9 +60,11 @@ const ProfileLists = ({setDisabled}:{setDisabled: React.Dispatch<boolean>,}) =>
         if(el.type !== filterBy[isActive]) return el
       }
     })
+  
     useEffect(() => {
       setDisabled(filteredAndSorted.length > 0?false:true)
-    },[filteredAndSorted,setDisabled])
+    }, [filteredAndSorted, setDisabled])
+  
     return (
     <>
         <div className={classes.container}>

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

@@ -33,6 +33,7 @@ const ProfileMenu = ({disabled}:{disabled:boolean}) => {
     
   const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}
         ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`
+  
   return (
     <Paper>
       <MenuList>

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

@@ -6,7 +6,7 @@ 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 { actionIsOpen } from '../../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../../redux/control/action'
 import { getContactsMemo } from '../../../../../../redux/contacts/selector'
 import { getChat } from '../../../../../../redux/chat/selector'
 import { asyncAddContact } from '../../../../../../redux/contacts/operations';
@@ -44,12 +44,12 @@ const ToolBar = () => {
   
   return (
     <Stack className={classes.container} direction="row">
-      <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionRightIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon className={classes.iconClose} fontSize='medium'/>
       </IconButton>
       <Typography variant="h6" color="initial" style={{marginLeft:20,color: '#474747'}}>Profile</Typography>
       <IconButton  style={{marginLeft:'auto',marginRight:'3%'}}  aria-label="delete" size="medium">
-        {isContact ? <EditIcon onClick={() => dispatch(actionIsOpen('edit'))} fontSize='medium' /> :
+        {isContact ? <EditIcon onClick={() => dispatch(actionRightIsOpen('edit'))} fontSize='medium' /> :
           <PersonAddAltIcon onClick={() => dispatch(asyncAddContact(number))} fontSize='medium' />}
       </IconButton>
     </Stack>

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

@@ -1,9 +1,13 @@
 import { makeStyles } from '@material-ui/core'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 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'
 
 const useStyles = makeStyles({
   container: {
@@ -38,7 +42,17 @@ const useStyles = makeStyles({
 
 const CredentialsList = () => {
   const classes = useStyles()
+  const dispatch = useDispatch()
+  const { leftIsOpen } = useSelector(getState)
   const [disabled, setDisabled] = useState<boolean>(false)
+
+  useEffect(() => {
+    const handleReset = () => leftIsOpen !== 'contacts'&&dispatch(asyncGetContacts())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [leftIsOpen, dispatch]);
+  
     return (
     <div className={classes.container}>
       <ToolBar />

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

@@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { actionIsOpen } from '../../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../../redux/control/action'
 import { removeContact } from '../../../../../../api-data';
 import { TContact } from '../../../../../../typescript/redux/contacts/types';
 import { slicedWord,firstLetter,prodBaseURL } from '../../../../../../helpers';
@@ -55,7 +55,7 @@ const Delete = ({ isContact }:{ isContact:TContact}) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
-      dispatch(actionIsOpen('credentials'))
+      dispatch(actionRightIsOpen('credentials'))
       removeContact(_id)
       setModal(false)
     }

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 { actionIsOpen } from '../../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {
@@ -29,7 +29,7 @@ const ToolBar = () => {
 
   return (
     <Stack className={classes.container} direction="row" spacing={21}>
-      <IconButton onClick={() => dispatch(actionIsOpen('credentials'))} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionRightIsOpen('credentials'))} aria-label="delete" size="medium">
         <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
       </IconButton>
       <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit chat</Typography>

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

@@ -1,13 +1,16 @@
 import { makeStyles } from '@material-ui/core'
 import { useState,useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector,useDispatch } from 'react-redux';
 import ToolBar from './ToolBar'
 import EditList from './EditList'
 import Delete from './Delete'
 import SubmitBtn from './SubmitBtn';
 import { getContactsMemo } from '../../../../../redux/contacts/selector'
+import { getState } from '../../../../../redux/control/selector'
+import { asyncGetContacts } from '../../../../../redux/contacts/operations'
 import { getChat } from '../../../../../redux/chat/selector'
-import { muteChat,updateContact } from '../../../../../api-data';
+import { muteChat, updateContact } from '../../../../../api-data';
+import { refreshAppTime } from '../../../../../helpers';
 
 const useStyles = makeStyles({
   editBar: {
@@ -19,6 +22,8 @@ const useStyles = makeStyles({
 
 const EditBar= () => {
   const classes = useStyles()
+  const dispatch = useDispatch()
+  const { leftIsOpen } = useSelector(getState)
   const contactsMemo = useSelector(getContactsMemo)
   const chat = useSelector(getChat)
   const [isContact, setIsContact] = useState<any>(false)
@@ -38,6 +43,13 @@ const EditBar= () => {
     openBtn&&setOpenBtn(false)
   }
 
+  useEffect(() => {
+    const handleReset = () => leftIsOpen !== 'contacts'&&dispatch(asyncGetContacts())
+    handleReset()
+    const idInterval = setInterval(handleReset, refreshAppTime);
+    return () => clearInterval(idInterval);
+  }, [leftIsOpen, dispatch]);  
+
   useEffect(() => {
     const contact = contactsMemo.find((el) => el.number === chat.number)
     contact && setIsContact(contact)    

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

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch, useSelector } from "react-redux";
 
-import { actionIsOpen } from '../../../../../../redux/control/action'
+import { actionRightIsOpen } from '../../../../../../redux/control/action'
 import { getMessages } from '../../../../../../redux/messages/selector'
 import { getChat } from '../../../../../../redux/chat/selector'
 import { sortChat } from '../../../../../../api-data';
@@ -76,7 +76,7 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
 
   return (
     <Toolbar className={classes.toolBar} >
-      <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionRightIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
       <SearchBar className={!value||disabled?undefined:classes.searchBarActive}>

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

@@ -64,7 +64,9 @@ const SearchList= () => {
         return el
       }
     })
-  const arr:TMessages =  filteredMessages(handleSort('createdAt',messages,sort))
+  
+  const arr: TMessages = filteredMessages(handleSort('createdAt', messages, sort))
+  
 return (
    <div className={classes.container}>
     <Search handleSearch={handleSearch} value={value}

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

@@ -2,16 +2,16 @@ import { useSelector } from 'react-redux'
 import SearchList from './SearchList'
 import CredentialsList from './CredentialsList'
 import EditBar from './EditBar'
-import { getIsOpen } from '../../../../redux/control/selector'
+import { getRightIsOpen } from '../../../../redux/control/selector'
 
 
 const RightListsAndBars = () => {
-  const isOpen = useSelector(getIsOpen)
+  const rightIsOpen = useSelector(getRightIsOpen)
   return (
     <>
-      {isOpen === 'credentials' && <CredentialsList />}
-      {isOpen === 'search' && <SearchList />}
-      {isOpen === 'edit' && <EditBar/>}
+      {rightIsOpen === 'credentials' && <CredentialsList />}
+      {rightIsOpen === 'search' && <SearchList />}
+      {rightIsOpen === 'edit' && <EditBar/>}
     </>
    )
 }

src/components/HomePage/RightBar/index.tsx

@@ -1,7 +1,7 @@
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux'
-import { getIsOpen } from '../../../redux/control/selector'
+import { getRightIsOpen } from '../../../redux/control/selector'
 import { getChatMemo } from '../../../redux/chat/selector'
 
 import HeaderBar from './HeaderBar'
@@ -17,13 +17,13 @@ const useStyles = makeStyles({
 
 const RightBar = () => {
   const classes = useStyles()
-  const isOpen = useSelector(getIsOpen)
+  const rightIsOpen = useSelector(getRightIsOpen)
   const { _id } = useSelector(getChatMemo)
-  const handleIsOpen = isOpen&&isOpen !== 'menu'
+  const handleRightIsOpen = rightIsOpen&&rightIsOpen !== 'menu'
 
     return _id?
       <Grid item lg={9} style={{display:'flex'}}>
-        <Grid item lg={handleIsOpen?8:12}>
+        <Grid item lg={handleRightIsOpen?8:12}>
           <Grid item lg={12} >
             <HeaderBar/>
           </Grid>          
@@ -31,7 +31,7 @@ const RightBar = () => {
             <ChatBar />
           </Grid>
         </Grid>
-        <Grid item lg={handleIsOpen?4:0}>
+        <Grid item lg={handleRightIsOpen?4:0}>
           <RightListsAndBars/>
         </Grid>          
       </Grid>

src/components/HomePage/index.tsx

@@ -2,11 +2,6 @@ import Grid from '@mui/material/Grid'
 import LeftBar from './LeftBar'
 import RightBar from './RightBar'
 import { makeStyles } from '@material-ui/core'
-import { useDispatch } from 'react-redux'
-import { useEffect } from 'react'
-import { asyncGetContacts } from '../../redux/contacts/operations'
-import { asyncGetChats } from '../../redux/chats/operations'
-import { asyncCurrentUser } from '../../redux/authorization/operations'
 
 const useStyles = makeStyles({
     container: {
@@ -17,20 +12,6 @@ const useStyles = makeStyles({
 
 const HomePage = () => {
   const classes = useStyles()
-  const dispatch = useDispatch()
-
-  useEffect(() => {
-    dispatch(asyncGetChats())
-    dispatch(asyncGetContacts())
-    dispatch(asyncCurrentUser())
-    const handleReset = () => {
-      dispatch(asyncGetChats())
-      dispatch(asyncGetContacts())
-      dispatch(asyncCurrentUser())
-    }
-    const idInterval = setInterval(handleReset, 5000);
-    return () => clearInterval(idInterval);
-  }, [dispatch]);
  
 return (
     <Grid className={classes.container} container spacing={0} >

src/helpers/index.ts

@@ -153,6 +153,8 @@ const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter
 
 const prodBaseURL = 'http://localhost:3000'
 
+const refreshAppTime = 3000
+
 export {
   format,
   firstLetter,
@@ -171,4 +173,5 @@ export {
   sortByRecent,
   filteredMessages,
   prodBaseURL,
+  refreshAppTime,
 }

src/redux/control/action/index.ts

@@ -1,13 +1,17 @@
 import { createAction } from '@reduxjs/toolkit';
-import { TIsOpen,TScroll } from '../../../typescript/redux/control/types'
+import { TLeftIsOpen,TRightIsOpen,TScrollChat } from '../../../typescript/redux/control/types'
 
-const actionIsOpen= createAction('control/isOpen', (value:TIsOpen) => ({
+const actionLeftIsOpen= createAction('control/LeftIsOpen', (value:TLeftIsOpen) => ({
   payload: value,
 }));
 
-const actionScroll= createAction('control/scroll', (value:TScroll) => ({
+const actionRightIsOpen= createAction('control/RightIsOpen', (value:TRightIsOpen) => ({
+  payload: value,
+}));
+
+const actionScrollChat = createAction('control/scrollChat', (value:TScrollChat) => ({
   payload: value,
 }));
 
 
-export { actionIsOpen,actionScroll };
+export { actionLeftIsOpen,actionRightIsOpen,actionScrollChat };

src/redux/control/reducer/index.ts

@@ -1,17 +1,21 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { actionIsOpen,actionScroll } from '../action';
-import { IControlState,IPayloadIsOpen,IPayloadScroll } from '../../../typescript/redux/control/interfaces'
+import { actionLeftIsOpen,actionRightIsOpen,actionScrollChat } from '../action';
+import { IControlState,IPayloadLeftIsOpen,IPayloadRightIsOpen,IPayloadScrollChat } from '../../../typescript/redux/control/interfaces'
 
-const initialState:IControlState = {
-  isOpen: '',
-  scroll: false,
+const initialState: IControlState = {
+  leftIsOpen: '',
+  rightIsOpen: '',
+  scrollChat: false,
 }
 
 const reducerControl = createReducer(initialState, {
-  [actionIsOpen.type]: (state, { payload:isOpen }:IPayloadIsOpen) => {
-    return {...state,isOpen}
+  [actionLeftIsOpen.type]: (state, { payload:leftIsOpen }:IPayloadLeftIsOpen) => {
+    return {...state,leftIsOpen}
+  },  
+  [actionRightIsOpen.type]: (state, { payload:rightIsOpen }:IPayloadRightIsOpen) => {
+    return {...state,rightIsOpen}
   },
-  [actionScroll.type]: (state, { payload:scroll }:IPayloadScroll) => {
+  [actionScrollChat.type]: (state, { payload:scroll }:IPayloadScrollChat) => {
     return {...state,scroll}
   },  
 });

src/redux/control/selector/index.ts

@@ -1,7 +1,8 @@
 import { IState } from '../../../typescript/redux/interfaces'
 
-const getIsOpen = (state: IState) => state.control.isOpen;
-const getScroll = (state: IState) => state.control.scroll;
+const getLeftIsOpen = (state: IState) => state.control.leftIsOpen;
+const getRightIsOpen = (state: IState) => state.control.rightIsOpen;
+const getScrollChat = (state: IState) => state.control.scrollChat;
 const getState = (state:IState) => state.control;
 
-export { getIsOpen,getScroll,getState };
+export { getLeftIsOpen,getRightIsOpen,getScrollChat,getState };

src/typescript/redux/control/interfaces.ts

@@ -1,16 +1,21 @@
-import { TIsOpen,TScroll } from './types'
+import { TLeftIsOpen,TRightIsOpen,TScrollChat } from './types'
 
 export interface IControlState {
-  isOpen: TIsOpen,
-  scroll: TScroll
+  leftIsOpen: TLeftIsOpen,
+  rightIsOpen: TRightIsOpen,
+  scrollChat: TScrollChat
 }
 
-export interface IPayloadIsOpen {
-  payload:TIsOpen
+export interface IPayloadLeftIsOpen {
+  payload:TLeftIsOpen
 }
 
-export interface IPayloadScroll {
-  payload:TScroll
+export interface IPayloadRightIsOpen {
+  payload:TRightIsOpen
+}
+
+export interface IPayloadScrollChat {
+  payload:TScrollChat
 }
 
 

src/typescript/redux/control/types.ts

@@ -1,3 +1,5 @@
-export type TIsOpen = ('' | 'credentials' | 'search' | 'menu' | 'edit')
+export type TLeftIsOpen = ('' | 'chats' | 'contacts'| 'allMessages')
 
-export type TScroll = boolean
+export type TRightIsOpen = ('' | 'credentials' | 'search' | 'menu' | 'edit')
+
+export type TScrollChat = boolean