FINAL-PROJECT-FRONT/src/components/HomePage/index.tsx

import Grid from '@mui/material/Grid'
import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux'
import { useRef,useEffect } from 'react'
import io from 'socket.io-client';

import LeftBar from './LeftBar'
import CentralBar from './CentralBar'
import RightBar from './RightBar'
import { getRightIsOpen } from '../../redux/control/selector'
import { getChatMemo } from '../../redux/chat/selector'
import { getNightMode } from '../../redux/authorization/selector'
import wallpaper from '../../img/wallpaper.jpg'
import wallpaperNight from '../../img/wallpaperNight.jpg'
import { prodSocketURL } from '../../helpers';
import { socketIdChat } from '../../api-data';

const socket = io(prodSocketURL)

const useStyles = makeStyles({
  container: {
    minHeight: '100vh',
    maxHeight: '100vh',
  },
  centralAndRight: {
    display:'flex'
  },
})

const HomePage = () => {
  const classes = useStyles()
  const rightIsOpen = useSelector(getRightIsOpen)
  const chatDivRef = useRef<any | null>(null)
  const nightMode = useSelector(getNightMode)
  const { companionId } = useSelector(getChatMemo)
  const backgroundImage =  `url(${nightMode ? wallpaperNight : wallpaper})`
  
  useEffect(() => {
    socket.on("connect", () => {
      const socketId = socket.id
      socketIdChat(socketId)
    });
    socket.on('disconnect', () => {
      socketIdChat('')
    });
    return () => {
      socket.off('connect');
      socket.off('disconnect');
    };
  }, [])

return (
    <Grid className={classes.container} container spacing={0} >
      <LeftBar chatDivRef={chatDivRef} />
      {companionId ?
      <Grid item lg={9} className={classes.centralAndRight}>
        <CentralBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef}
          companionId={companionId} backgroundImage={backgroundImage}
          socket={socket}/>
        <RightBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef} />
      </Grid> :
      <Grid item lg={9} style={{backgroundImage}}/>}
    </Grid>
    )
}

export default HomePage