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 { useState,useRef } from 'react'

import LeftBar from './LeftBar'
import CentralBar from './CentralBar'
import RightBar from './RightBar'
import CallBar from './CallBar';
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'

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

const HomePage = () => {
  const classes = useStyles()
  const rightIsOpen = useSelector(getRightIsOpen)
  const nightMode = useSelector(getNightMode)
  const { companionId } = useSelector(getChatMemo)
  const chatDivRef = useRef<any>(null)
  const [callStatus,setCallStatus] = useState<string>('')
  const backgroundImage =  `url(${nightMode ? wallpaperNight : wallpaper})`
  const handleStartCall = () => setCallStatus('requesting...')
  
return (
    <Grid className={classes.container} container spacing={0} >
      <CallBar callStatus={callStatus} setCallStatus={setCallStatus}/>
      <LeftBar chatDivRef={chatDivRef} />
      {companionId ?
      <Grid item lg={9} className={classes.centralAndRight}>
        <CentralBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef}
          companionId={companionId} backgroundImage={backgroundImage}
          handleStartCall={handleStartCall}/>
        <RightBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef} />
      </Grid> :
      <Grid item lg={9} style={{backgroundImage}}/>}
    </Grid>
    )
}

export default HomePage