123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- import Stack from '@mui/material/Stack';
- import IconButton from '@mui/material/IconButton';
- import ArrowBackIcon from '@mui/icons-material/ArrowBack';
- import CloseIcon from '@mui/icons-material/Close';
- import { makeStyles, Typography } from '@material-ui/core'
- import { useDispatch, useSelector } from 'react-redux';
- import { useState,useEffect } from 'react';
- import { actionIsOpen } from '../../../../../../../redux/control/action'
- import { getContacts } from '../../../../../../../redux/contacts/selector'
- import { getChat } from '../../../../../../../redux/chat/selector'
- import { asyncGetContacts,asyncAddContact } from '../../../../../../../redux/contacts/operations';
- const useStyles = makeStyles({
- container: {
- borderLeft: 'solid 0.5px #9c9c9c',
- paddingLeft: 10,
- paddingBottom: 3,
- width: 482,
- display: 'flex',
- alignContent: 'center',
- alignItems: 'center',
- },
- iconArrow: {
- '&:hover': {
- transform: 'rotate(360deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- })
- const ToolBar = () => {
- const dispatch = useDispatch()
- const classes = useStyles()
- const contacts = useSelector(getContacts)
- const { number } = useSelector(getChat)
- const [isContact, setIsContact] = useState<boolean>(false)
- useEffect(() => {
- dispatch(asyncGetContacts())
- }, [dispatch])
- useEffect(() => {
- const isExist = contacts.some((el) => el.number === number)
- isExist&&setIsContact(true)
- }, [contacts,number])
- return (
- <Stack className={classes.container} direction="row" spacing={21}>
- <IconButton onClick={() => dispatch(actionIsOpen('credentials'))} aria-label="delete" size="medium">
- <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
- </IconButton>
- <Typography variant="h6" color="initial" style={{marginLeft:20}}>Edit</Typography>
- </Stack>
- )
- }
- export default ToolBar
|