index.tsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import Grid from '@mui/material/Grid'
  2. import { useState,useEffect } from 'react'
  3. import { useSelector, useDispatch } from 'react-redux'
  4. import HeaderBar from './HeaderBar'
  5. import ChatBar from './ChatBar'
  6. import { getPinnedMessagesMemo } from '../../../redux/pinnedMessages/selector'
  7. import { TRightIsOpen } from '../../../typescript/redux/control/types'
  8. import { getOpenPinned } from '../../../redux/control/selector'
  9. import { actionOpenPinned } from '../../../redux/control/action'
  10. import { unpinAllMessagesById } from '../../../api-data'
  11. interface ICentralBar {
  12. rightIsOpen: TRightIsOpen,
  13. chatDivRef: any | null,
  14. companionId: string,
  15. backgroundImage: string,
  16. handleStartCall: () => void,
  17. }
  18. const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage,handleStartCall}:ICentralBar) => {
  19. const dispatch = useDispatch()
  20. const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
  21. const openPinned = useSelector(getOpenPinned)
  22. const [selectedArr, setSelectedArr] = useState<string[] | []>([])
  23. const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
  24. const handleClearSelect = () => {
  25. selectedArr.length > 0 && setSelectedArr([])
  26. isSomeSelected && setIsSomeSelected(false)
  27. }
  28. const handleUnpinAll = () => {
  29. openPinned && dispatch(actionOpenPinned(false))
  30. unpinAllMessagesById(pinnedMessagesMemo.map(({_id}) => _id))
  31. }
  32. useEffect(() => {
  33. if(pinnedMessagesMemo.length === 0 && openPinned) dispatch(actionOpenPinned(false))
  34. }, [openPinned,pinnedMessagesMemo,dispatch])
  35. useEffect(() => {
  36. setIsSomeSelected(false)
  37. setSelectedArr([])
  38. }, [companionId])
  39. return (
  40. <Grid item lg={rightIsOpen?8:12}>
  41. <Grid item lg={12} >
  42. <HeaderBar chatDivRef={chatDivRef} selectedArr={selectedArr} isSomeSelected={isSomeSelected}
  43. handleClearSelect={handleClearSelect} setIsSomeSelected={setIsSomeSelected}
  44. openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo} handleStartCall={handleStartCall}/>
  45. </Grid>
  46. <Grid item lg={12} style={{backgroundImage}}>
  47. <ChatBar chatDivRef={chatDivRef} selectedArr={selectedArr} setSelectedArr={setSelectedArr}
  48. isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}
  49. openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll}/>
  50. </Grid>
  51. </Grid>
  52. )
  53. }
  54. export default CentralBar