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: {
        minHeight: '100vh',
        maxHeight: '100vh',
    },
})

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} >
      <LeftBar/>
      <RightBar/>
    </Grid>
    )
}

export default HomePage