FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/index.tsx

import { makeStyles } from '@material-ui/core'
import { useState } from 'react'
import { useSelector } from 'react-redux'

import ForwardSearch from './ForwardSearch'
import ForwardList from './ForwardList'
import { getStateMemo } from '../../../../../../redux/chats/selector'

const useStyles = makeStyles({
  container: {
    backgroundColor: 'white',
    width: '22vw',
    position: 'absolute',
    top: '10vh',
    height:'80vh',
    left: '39vw',
    display: 'flex',
    flexWrap: 'wrap',
    padding:10,
    borderRadius:10,
  }
})

const ForwardSearchList = () => {
  const classes = useStyles()
  const { total,chats } = useSelector(getStateMemo)
  const [value, setValue] = useState<string>('')
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)

  return (
    <div className={classes.container}>
      <ForwardSearch handleSearch={handleSearch} value={value} total={total}/>
      <ForwardList value={value} chats={chats} total={total}/>
    </div>
  )
}

export default ForwardSearchList