index.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import Stack from '@mui/material/Stack';
  2. import IconButton from '@mui/material/IconButton';
  3. import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
  4. import EditIcon from '@mui/icons-material/Edit';
  5. import CloseIcon from '@mui/icons-material/Close';
  6. import { makeStyles, Typography } from '@material-ui/core'
  7. import { useDispatch, useSelector } from 'react-redux';
  8. import { useState,useEffect } from 'react';
  9. import { actionIsOpen } from '../../../../../../../redux/control/action'
  10. import { getContacts } from '../../../../../../../redux/contacts/selector'
  11. import { getChat } from '../../../../../../../redux/chat/selector'
  12. import { asyncGetContacts,asyncAddContact } from '../../../../../../../redux/contacts/operations';
  13. const useStyles = makeStyles({
  14. container: {
  15. borderLeft: 'solid 0.5px #9c9c9c',
  16. paddingLeft: 10,
  17. paddingBottom: 3,
  18. width: 482,
  19. display: 'flex',
  20. alignContent: 'center',
  21. alignItems: 'center',
  22. },
  23. })
  24. const ToolBar = () => {
  25. const dispatch = useDispatch()
  26. const classes = useStyles()
  27. const contacts = useSelector(getContacts)
  28. const { number } = useSelector(getChat)
  29. const [isContact, setIsContact] = useState<boolean>(false)
  30. useEffect(() => {
  31. dispatch(asyncGetContacts())
  32. }, [dispatch])
  33. useEffect(() => {
  34. const isExist = contacts.some((el) => el.number === number)
  35. isExist&&setIsContact(true)
  36. }, [contacts,number])
  37. return (
  38. <Stack className={classes.container} direction="row" spacing={40}>
  39. <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
  40. <CloseIcon fontSize='medium'/>
  41. </IconButton>
  42. <Typography variant="h6" color="initial" style={{marginLeft:20}}>Profile</Typography>
  43. <IconButton aria-label="delete" size="medium">
  44. {isContact ? <EditIcon onClick={() => dispatch(actionIsOpen('edit'))} fontSize='medium' /> :
  45. <PersonAddAltIcon onClick={() => dispatch(asyncAddContact(number))} fontSize='medium' />}
  46. </IconButton>
  47. </Stack>
  48. )
  49. }
  50. export default ToolBar