make some fixes

build/asset-manifest.json

@@ -4,13 +4,13 @@
     "static/js/0.09efaa55.chunk.js.map": "/static/js/0.09efaa55.chunk.js.map",
     "AuthPage.js": "/static/js/AuthPage.3b6fca37.chunk.js",
     "AuthPage.js.map": "/static/js/AuthPage.3b6fca37.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.25b757c8.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.25b757c8.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.40174ba7.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.40174ba7.chunk.js.map",
     "main.css": "/static/css/main.9a5b6280.chunk.css",
     "main.js": "/static/js/main.6c7d07fb.chunk.js",
     "main.js.map": "/static/js/main.6c7d07fb.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.ff97b91c.js",
-    "runtime-main.js.map": "/static/js/runtime-main.ff97b91c.js.map",
+    "runtime-main.js": "/static/js/runtime-main.722cf9d5.js",
+    "runtime-main.js.map": "/static/js/runtime-main.722cf9d5.js.map",
     "static/js/5.f496972f.chunk.js": "/static/js/5.f496972f.chunk.js",
     "static/js/5.f496972f.chunk.js.map": "/static/js/5.f496972f.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
@@ -27,7 +27,7 @@
     "static/media/qrCode_telegram.bb0caf3c.png": "/static/media/qrCode_telegram.bb0caf3c.png"
   },
   "entrypoints": [
-    "static/js/runtime-main.ff97b91c.js",
+    "static/js/runtime-main.722cf9d5.js",
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.fc4304b2.chunk.js",
     "static/css/main.9a5b6280.chunk.css",

src/App.tsx

@@ -32,14 +32,7 @@ function App() {
   const token = useSelector(getToken)
   const { companionId } = useSelector(getChat)
   const dispatch = useDispatch()
-  const handleTypingClose = async () => {
-    companionId&& await typingChat(companionId, false)
-  }
-
-  useEffect(() => {
-    if (!localStorage.isChecked) localStorage.isChecked = 'true'
-    localStorage.removeItem('isNew')
-  }, [])
+  const handleTypingClose = async () => companionId&& await typingChat(companionId, false)
 
    useEffect(() => {
     if (token && localStorage.isChecked === 'true') {

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

@@ -8,7 +8,6 @@ import ChatItem from './ChatItem';
 import { notification,playNotificationWithoutPermission,sortByRecent } from '../../../../helpers'
 import { getStateMemo } from '../../../../redux/chats/selector'
 import { getChatMemo } from '../../../../redux/chat/selector'
-import { asyncGetChats } from '../../../../redux/chats/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { actionRemoveChat } from '../../../../redux/chat/action'
 import { actionScroll, actionIsOpen } from '../../../../redux/control/action'
@@ -50,7 +49,7 @@ interface IChatsList {
 const ChatsList = ({sort,date,value}:IChatsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const ref = useRef<any>(null)
+  const chatsRef = useRef<any>(null)
   const [sortedChats, setSortedChats] = useState<TChats>([]);
   const { total, chats } = useSelector(getStateMemo)
   const chat = useSelector(getChatMemo)
@@ -76,13 +75,6 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
     dispatch(asyncStartChatById(companionId))
   }
 
-  useEffect(() => {
-    dispatch(asyncGetChats())
-    const handleReset = () => dispatch(asyncGetChats())
-    const idInterval = setInterval(handleReset, 3000);
-    return () => clearInterval(idInterval);
-  }, [dispatch]);
-
   useEffect(() => {
     const handleNotification= (companionId: string) => {
       dispatch(asyncStartChatById(companionId))
@@ -90,9 +82,9 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
     }
     const sorted = filteredChats(sortByRecent(chats,sort))
     setSortedChats(sorted)
-    if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId))dispatch(actionRemoveChat())
-    if (ref.current) {
-      ref.current.forEach(({total,seen}: any,i:number) => {
+    if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId)) dispatch(actionRemoveChat())
+    if (chatsRef.current) {
+      chatsRef.current.forEach(({total,seen}: any,i:number) => {
         const oldDifferent = total - seen
         const chat = sorted[i]
         if(chat === undefined) return
@@ -103,7 +95,7 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
         } 
       })
     }
-      ref.current = sorted
+      chatsRef.current = sorted
   }, [chats, chat,sort,filteredChats,dispatch]) 
 
   return total !== '0' ? (

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

@@ -1,12 +1,10 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
-import { useEffect } from 'react';
 import { useSelector,useDispatch } from 'react-redux';
 
 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';
@@ -66,13 +64,6 @@ const  ContactsList = ({value,handleClick,sort,date} : IContactList) => {
     dispatch(asyncStartChatById(companionId))
   }
 
-  useEffect(() => {
-    dispatch(asyncGetContacts())
-    const handleReset = () => isOpen !== 'credentials' &&dispatch(asyncGetContacts())
-    const idInterval = setInterval(handleReset, 3000);
-    return () => clearInterval(idInterval);
-  }, [dispatch,isOpen]);
-
   const arr = filteredContacts()
   
   return total !== '0' ? (

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

@@ -1,11 +1,10 @@
 import { makeStyles } from '@material-ui/core'
 import { useState,useEffect } from 'react';
-import { useSelector,useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import ToolBar from './ToolBar'
 import EditList from './EditList'
 import SubmitBtn from './SubmitBtn';
 import { getState } from '../../../../redux/authorization/selector'
-import { asyncCurrentUser } from '../../../../redux/authorization/operations';
 import { updateCredentials,updateUserAvatar } from '../../../../api-data';
 
 const useStyles = makeStyles({
@@ -23,7 +22,6 @@ 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>('')
@@ -42,7 +40,6 @@ const EditBar= ({setSelectedIndex}:IEditBar) => {
     }
     file && setFile(null)
     openBtn && setOpenBtn(false)
-    dispatch(asyncCurrentUser())
   }
   
   useEffect(() => {

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

@@ -12,8 +12,6 @@ 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 { useDispatch } from 'react-redux';
-import { asyncCurrentUser } from '../../../../redux/authorization/operations';
 import { updateUser } from '../../../../api-data';
 
 const useStyles = makeStyles({
@@ -58,11 +56,8 @@ interface IContactsList {
 
 const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
   const classes = useStyles()
-  const dispatch = useDispatch()
-  const handleNightMode = () => {
-      updateUser({ nightMode: !nightMode })
-      dispatch(asyncCurrentUser())
-  }
+  const handleNightMode = () => updateUser({ nightMode: !nightMode })
+
   return (
     <div className={classes.overlay} id='overlay'>
       <Paper className={classes.container}>

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

@@ -8,9 +8,7 @@ import Switch from '@mui/material/Switch';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
-import { useDispatch } from 'react-redux';
 import { updateUser } from '../../../../api-data';
-import { asyncCurrentUser } from '../../../../redux/authorization/operations';
 import StaticDatePicker from "./StaticDatePicker";
 
 
@@ -82,11 +80,7 @@ interface ISearchBar {
 
 const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch,
   value, sort,setDate,date }: ISearchBar) => {
-  const dispatch = useDispatch()
-  const handleSort = () => {
-    updateUser({ sort: !sort })
-    dispatch(asyncCurrentUser())
-  }
+  const handleSort = () => updateUser({ sort: !sort })
   const handleOnOpen = () => setDate('')  
   
   const classes = useStyles()

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

@@ -108,20 +108,17 @@ const SearchLists = ({ value,setValue,sort,date,setDate }: ISearchLists) => {
      }
     })
   
+    useEffect(() => {
+       setDate('')
+    }, [setDate])
+  
     useEffect(() => {
       dispatch(asyncGetAllMessages())
-      dispatch(asyncGetChats())
-      const handleReset = () => {
-         dispatch(asyncGetAllMessages())
-         dispatch(asyncGetChats())
-      }
-    const idInterval = setInterval(handleReset, 5000);
-    return () => clearInterval(idInterval);
+      const handleReset = () =>  dispatch(asyncGetChats())
+      const idInterval = setInterval(handleReset, 3000);
+      return () => clearInterval(idInterval);
     }, [dispatch]);
     
-    useEffect(() => {
-       setDate('')
-    },[setDate])
   
     const filteredAndSorted = filteredChats(sortByRecent(chats,sort))
     const allMessagesMemo = filteredMessages(handleSort('createdAt',messagesMemo,sort))

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

@@ -1,8 +1,6 @@
 import Button from '@mui/material/Button';
 import { makeStyles } from '@material-ui/core'
-import { useDispatch } from 'react-redux';
 import { removeUserAvatar } from '../../../../../../api-data';
-import { asyncCurrentUser } from '../../../../../../redux/authorization/operations';
 
 const useStyles = makeStyles({
   modalDelete: {
@@ -43,7 +41,6 @@ interface IDeleteModal {
 }
 const DeleteModal = ({setModal,index,setIndex}:IDeleteModal) => {
   const classes = useStyles()
-  const dispatch = useDispatch()
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
@@ -51,7 +48,6 @@ const DeleteModal = ({setModal,index,setIndex}:IDeleteModal) => {
       removeUserAvatar(index)
       setIndex(index-1)
       setModal(false)
-      dispatch(asyncCurrentUser())
     }
   }
   

src/components/HomePage/LeftBar/index.tsx

@@ -25,8 +25,8 @@ const LeftBar = () => {
   const modalRoot = useRef<HTMLDivElement|null>(null);
   const handleFocus = (): void => setIsSearch(true)
   const handleClick = (): void => {
-    value&&setValue('')
-    date&&setDate('')
+    setValue('')
+    setDate('')
     if (selectedIndex) setSelectedIndex(null)
     if(!isSearch) return setIsMenu(!isMenu)
     setIsSearch(false)
@@ -42,8 +42,8 @@ const LeftBar = () => {
     setIsSearch(true)
     setIsMenu(false)
     setIsMenuSm(false)
-    value&&setValue('')
-    date&&setDate('')
+    setValue('')
+    setDate('')
     setSelectedIndex(i)
   }
   

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

@@ -133,10 +133,9 @@ const useStyles = makeStyles({
 
 interface ISendMessage{
     isArrow: boolean,
-    handleScrollTo:() => void
 }
 
-const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
+const SendMessage = ({isArrow }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const isOpen = useSelector(getIsOpen)
@@ -228,7 +227,6 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
         }
         clearMessage()
         playNotification(`${prodBaseURL}/notifications/send.mp3`)
-        setTimeout(handleScrollTo, 4000);
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
     const handleFocusTextarea = async () => await typingChat(companionId,true)

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

@@ -22,6 +22,7 @@ import { getChat } from '../../../../redux/chat/selector'
 import { getScroll } from '../../../../redux/control/selector'
 import { actionScroll } 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";
 const debounce = require('lodash.debounce');
@@ -78,7 +79,7 @@ const ChatBar = () => {
   const dispatch = useDispatch()
   const messages = useSelector(getMessagesMemo)
   const userNumber = useSelector(getNumber)
-  const { companionId,total,seen } = useSelector(getChat)
+  const { companionId,total,seen,mute } = useSelector(getChat)
   const scroll = useSelector(getScroll)
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
@@ -91,9 +92,10 @@ const ChatBar = () => {
      })
   }
 
-  const handleScroll = useCallback(({ target:{scrollHeight,scrollTop,clientHeight} }: any) => {
-    const different = scrollHeight - Math.trunc(scrollTop)
-    if (total !== seen&&clientHeight - different < 50) seenChat(companionId)
+  const handleScroll = useCallback(({ target:{scrollHeight,scrollTop,clientHeight}}: any) => {
+    const different = scrollHeight - Math.floor(scrollTop)
+    const reached = different - clientHeight
+    if (total !== seen&&reached < 10) seenChat(companionId)
     setIsArrow(different === clientHeight ? false : true)
   }, [total,seen, companionId])
   
@@ -104,24 +106,28 @@ const ChatBar = () => {
       dispatch(asyncGetMessagesById(companionId, handleScrollTo))
       dispatch(actionScroll(false))
     }
-  }, [dispatch,scroll, companionId])  
-
+  }, [dispatch, scroll, companionId])
+  
   useEffect(() => {
     dispatch(asyncGetMessagesById(companionId, handleScrollTo))
     const handleReset = () => {
+      dispatch(asyncGetChatById(companionId))
       dispatch(asyncGetMessagesById(companionId, null))
-      const arr: any = localStorage.getItem('isNew')
-      if(arr) setIsNew(JSON.parse(arr))
     }
     const idInterval = setInterval(handleReset, 3000);
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
+  
+  useEffect(() => {
+     setIsNew({ new:total-seen,mute})
+  }, [total,seen,mute]); 
 
   useEffect(() => {
-    const scrollHeight = divRef.current.scrollHeight
-    const clientHeight = divRef.current.clientHeight
-    if(total !== seen&&scrollHeight === clientHeight) seenChat(companionId)
-  }, [total,seen, companionId]);
+    if (divRef.current) {
+      const { scrollHeight, clientHeight } = divRef.current
+      if(total !== seen&&scrollHeight === clientHeight) seenChat(companionId)
+    }
+  }, [total,seen,companionId]);
 
   return (
     <div className={classes.container} >
@@ -234,7 +240,7 @@ const ChatBar = () => {
         }) : <AlertInfo name='You do not have messages yet!' />}
         </div>
       </div>  
-    <SendMessage isArrow={isArrow} handleScrollTo={handleScrollTo}/>   
+    <SendMessage isArrow={isArrow} />   
     </div>
   );
 }

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

@@ -3,29 +3,14 @@ import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect,useRef } from 'react';
 
 import { actionIsOpen } from '../../../../../redux/control/action'
 import { getChat } from '../../../../../redux/chat/selector'
-import { asyncGetChatById } from '../../../../../redux/chat/operations'
 import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../helpers'
 
 const Credentials = () => {
   const dispatch = useDispatch()
-  const { name, lastName, avatarUrl, color, online, companionId,seen,total,mute } = useSelector(getChat)
-  const ref = useRef<any>(null)
-    useEffect(() => {
-    const handleReset = () => companionId&&dispatch(asyncGetChatById(companionId))
-    const idInterval = setInterval(handleReset, 3000);
-    return () => clearInterval(idInterval);
-    }, [dispatch, companionId]);
-  
-  useEffect(() => {
-    if (ref.current) {
-        localStorage.setItem('isNew', JSON.stringify({ new: total - seen, mute }))
-      }
-    ref.current = { seen,total}
-  }, [seen, total, mute]);
+  const { name, lastName, avatarUrl, color, online } = useSelector(getChat)
   
   return (
     <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>

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

@@ -1,4 +1,4 @@
-import { useSelector,useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import Paper from '@mui/material/Paper';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -14,7 +14,6 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import { getChat } from '../../../../../../redux/chat/selector'
-import { asyncGetChatById } from '../../../../../../redux/chat/operations';
 import { muteChat,sortChat } from '../../../../../../api-data'
 import { copied,firstLetter,slicedWord } from '../../../../../../helpers';
 
@@ -28,13 +27,10 @@ const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 const ProfileMenu = () => {
   const classes = useStyles()
-  const dispatch = useDispatch()
   const { number, mute,sort,companionId,originalName,originalLastName } = useSelector(getChat)
   const handleMute = () => muteChat(companionId)
-    const handleSort = () => {
-    sortChat(companionId)
-    dispatch(asyncGetChatById(companionId))
-  }
+  const handleSort = () =>  sortChat(companionId)
+    
   const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}
         ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`
   return (
@@ -54,7 +50,7 @@ const ProfileMenu = () => {
             <NotificationsIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText primary='Notification' />
-          <Switch style={{ cursor:'pointer'}} onClick={handleMute} {...label} defaultChecked={!mute} />
+          <Switch style={{ cursor:'pointer'}} onClick={handleMute} {...label} checked={!mute} />
         </MenuItem>
         <Divider variant="inset" />
         <MenuItem style={{cursor:'default'}}>

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

@@ -9,7 +9,7 @@ import { useState,useEffect } from 'react';
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { getContactsMemo } from '../../../../../../redux/contacts/selector'
 import { getChat } from '../../../../../../redux/chat/selector'
-import { asyncGetContacts,asyncAddContact } from '../../../../../../redux/contacts/operations';
+import { asyncAddContact } from '../../../../../../redux/contacts/operations';
 
 const useStyles = makeStyles({
   container: {
@@ -33,13 +33,6 @@ const ToolBar = () => {
   const { number } = useSelector(getChat)
   const [isContact, setIsContact] = useState<boolean>(false)
 
-  useEffect(() => {
-    dispatch(asyncGetContacts())
-    const handleReset = () => dispatch(asyncGetContacts())
-    const idInterval = setInterval(handleReset, 3000);
-    return () => clearInterval(idInterval);
-  }, [dispatch]);
-
   useEffect(() => {
     const contact = contactsMemo.find((el) => el.number === number)
      if (contact) {

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

@@ -45,7 +45,8 @@ const useStyles = makeStyles({
     alignItems:'center'
   },
 })
-const Delete = ({isContact}:{isContact:TContact}) => {
+
+const Delete = ({ isContact }:{ isContact:TContact}) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const {_id,avatarUrl,color,name,lastName} = isContact

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

@@ -111,7 +111,7 @@ const EditList = (props: IEditList) => {
         className={classes.textField}
       />
       <div className={classes.notifications}>
-        <Checkbox onChange={handleNotifications} {...label} checked={mute} style={{marginRight:20}} />
+        <Checkbox onChange={handleNotifications} {...label} checked={!mute} style={{marginRight:20}} />
         <ListItemText primary="Notifications" primaryTypographyProps={{ color: "#0e0d0d" }}
           secondary={!mute ? 'Disabled':'Enabled'} />
       </div>        

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

@@ -44,8 +44,8 @@ const EditBar= () => {
   }, [contactsMemo, chat.number])
   
   useEffect(() => {
-    Name&&setName(Name)
-    LastName && setLastName(LastName)
+    setName(Name)
+    setLastName(LastName)
     setMute(!Mute)
   }, [Name, LastName, Mute])  
 

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

@@ -12,7 +12,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { getMessages } from '../../../../../../redux/messages/selector'
 import { getChat } from '../../../../../../redux/chat/selector'
-import { asyncGetChatById } from '../../../../../../redux/chat/operations';
 import { sortChat } from '../../../../../../api-data';
 import StaticDatePicker from "./StaticDatePicker";
 
@@ -73,10 +72,7 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
   const messages = useSelector(getMessages)
   const disabled = messages.length > 0 ? false : true
   const handleOnOpen = () => setDate('')
-  const handleSort = () => {
-    sortChat(companionId)
-    dispatch(asyncGetChatById(companionId))
-  }
+  const handleSort = () => sortChat(companionId)
 
   return (
     <Toolbar className={classes.toolBar} >

src/components/HomePage/index.tsx

@@ -2,6 +2,11 @@ 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: {
@@ -11,13 +16,27 @@ const useStyles = makeStyles({
 })
 
 const HomePage = () => {
-    const classes = useStyles()
-    return (
-        <Grid className={classes.container}
-            container spacing={0} >
-          <LeftBar/>
-          <RightBar/>
-       </Grid>
+  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, 3000);
+    return () => clearInterval(idInterval);
+  }, [dispatch]);
+ 
+return (
+    <Grid className={classes.container} container spacing={0} >
+      <LeftBar/>
+      <RightBar/>
+    </Grid>
     )
 }