almost done edite bar

src/api-data/index.ts

@@ -119,6 +119,16 @@ const addContact = async <T>(number:string): Promise<T | undefined> => {
   }
 };
 
+const updateContact = async <T>(id:string,_id:string,name:string,lastName:string): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.patch('/contacts', { id, _id, name, lastName });
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const getContacts = async <T>(): Promise<T | undefined> => {
   try {
     const { data : {data} } = await axios.get('/contacts');
@@ -261,6 +271,7 @@ export {
   updateUserAvatar,
   currentUser,
   addContact,
+  updateContact,
   getContacts,
   startChat,
   getChat,

src/components/AuthPage/Registration/index.tsx

@@ -63,11 +63,8 @@ const Registration = () => {
     }
   }
 
-  const handleUpdateUser = async() => 
-    dispatch(asyncCreateUser(name,lastName,upload))
+  const handleUpdateUser = async() => dispatch(asyncCreateUser(name,lastName,upload))
 
-  
- 
   return (
     <div className={classes.container} >
       <Typography

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -326,7 +326,7 @@ const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
                    <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
                        sx={{backgroundColor: '#ffffff', width: 56, height: 56,color: '#6b6b6b'}}>
                      <ArrowDownwardIcon fontSize="medium" />  
-                  </Avatar>                    
+                   </Avatar>                    
                 </div>
             </div>  
             {value || file || status === 'stopped'  || _status === 'stopped' ?

src/components/HomePage/RightBar/HeaderBar/Buttons/MenuList/index.tsx

@@ -88,8 +88,8 @@ const MenuList = () => {
             <CheckBoxIcon/>
             Select messages
         </MenuItem>
-        <MenuItem onClick={() =>  handleClose(2)}>
-            <DeleteOutlineIcon/>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() =>  handleClose(2)}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete chat
         </MenuItem>        
       </StyledMenu>

src/components/HomePage/RightBar/HeaderBar/RightLists/EditList/index.tsx

@@ -1,32 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import ToolBar from './ToolBar'
-
-
-const useStyles = makeStyles({
-    containerAbsolute: {
-        position: 'absolute',
-        top: 58,
-        width: 506,
-        borderLeft: 'solid 0.5px #9c9c9c',
-        maxHeight: '905px',
-        minHeight: '905px',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        backgroundColor:'#ffffff'
-    }
-})
-
-const EditList= () => {
-  const classes = useStyles()
-
-    return (
-    <div>
-      <ToolBar />
-      <div className={classes.containerAbsolute}>
-        Edit
-      </div>
-   </div>
-  )
-}
-
-export default EditList

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/MediaList/MediaListItem/index.tsx

@@ -14,7 +14,6 @@ const useStyles = makeStyles({
     height: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflowY: 'hidden',
     boxSizing: 'border-box',
     display: 'flex',

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfilePicture/index.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles({
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center',
-    fontSize:200
+    fontSize:200,
   },
   nameTile: {
     position:'absolute',

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ToolBar/index.tsx

@@ -13,7 +13,6 @@ import { asyncGetContacts,asyncAddContact } from '../../../../../../../redux/con
 
 const useStyles = makeStyles({
   container: {
-    borderLeft: 'solid 0.5px #9c9c9c',
     paddingLeft: 10,
     paddingBottom: 3,
     width: 482,
@@ -21,6 +20,12 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',    
   },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },  
 })
 
 const ToolBar = () => {
@@ -42,9 +47,9 @@ const ToolBar = () => {
   return (
     <Stack className={classes.container} direction="row" spacing={40}>
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
-        <CloseIcon fontSize='medium'/>
+        <CloseIcon className={classes.iconClose} fontSize='medium'/>
       </IconButton>
-      <Typography variant="h6" color="initial" style={{marginLeft:20}}>Profile</Typography>
+      <Typography variant="h6" color="initial" style={{marginLeft:20,color: '#474747'}}>Profile</Typography>
       <IconButton  aria-label="delete" size="medium">
         {isContact ? <EditIcon onClick={() => dispatch(actionIsOpen('edit'))} fontSize='medium' /> :
           <PersonAddAltIcon onClick={() => dispatch(asyncAddContact(number))} fontSize='medium' />}

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/index.tsx

@@ -10,7 +10,6 @@ const useStyles = makeStyles({
         position: 'absolute',
         top: 58,
         width: 506,
-        borderLeft: 'solid 0.5px #9c9c9c',
         maxHeight: '905px',
         minHeight: '905px',
         overflowY: 'scroll',

src/components/HomePage/RightBar/HeaderBar/RightListsAndBars/EditBar/Delete/index.tsx

@@ -0,0 +1,78 @@
+import { makeStyles } from '@material-ui/core'
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { actionIsOpen } from '../../../../../../../redux/control/action'
+
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    padding: '20px 10px 20px 10px',
+    backgroundColor:'#ffffff'
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'17%',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },  
+})
+const Delete = ({id}:{id:string}) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const [modal,setModal] = useState<boolean>(false)
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') {
+      return setModal(false)
+    }
+    if (id === 'delete') {
+      dispatch(actionIsOpen('credentials'))
+      //here make delete fetch
+    }
+  }
+  const handleOpenModal = () => setModal(true)
+  return (
+    <>
+      <ul className={classes.container}>
+        <MenuItem onClick={handleOpenModal} style={{fontSize:19,color:'#f02a2a'}} >
+          <DeleteOutlineIcon fontSize='medium' style={{marginRight:27}}/>
+           Delete contact
+        </MenuItem>        
+        </ul>
+        {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+          <div className={classes.modalDelete}>
+            <p style={{color:'#020202'}}>Are you sure you want to delete this contact?</p>
+            <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:18}}>
+              DELETE CONTACT
+            </Button>          
+            <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:18}}>
+              CANCEL
+            </Button>
+          </div>
+        </div>}
+    </>
+  );
+}
+
+export default Delete

src/components/HomePage/RightBar/HeaderBar/RightListsAndBars/EditBar/EditList/index.tsx

@@ -0,0 +1,139 @@
+import { makeStyles, TextField, Typography } from '@material-ui/core'
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import DoneIcon from '@mui/icons-material/Done';
+import { useState,useEffect } from 'react';
+import { format,firstLetter,slicedWord } from '../../../../../../../helpers'
+import { muteChat, updateContact } from '../../../../../../../api-data';
+import { TChat } from '../../../../../../../typescript/redux/chat/types'
+import { TContact } from '../../../../../../../typescript/redux/contacts/types'
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent:'center',
+    flexDirection: 'column',
+    width: '100%',
+    margin: '0 auto',
+    padding: 20,
+    marginBottom:15,
+    position: 'relative',
+    backgroundColor:'#ffffff'
+  },
+  textField: {
+    marginBottom:20
+  },
+  notifications: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignContent: 'start',
+    alignItems: 'start',
+    marginBottom:'auto'
+  },
+  avatarArrow: {
+    cursor: 'pointer',
+    alignSelf: 'flex-end',
+    '&:hover': {
+      backgroundColor: 'rgb(62, 149, 231)'
+    }
+  }
+})
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
+const EditList = ({chat,isContact}:{chat:TChat,isContact:TContact}) => {
+  const classes = useStyles()  
+  const [name, setName] = useState<string>('')
+  const [lastName, setLastName] = useState<string>('')
+  const [mute, setMute] = useState<boolean>(true)
+  const [openBtn, setOpenBtn] = useState<boolean>(false)
+  const { avatarUrl,color,mute:Mute,name:Name,lastName:LastName,companionId,_id } = chat
+  const handleNotifications = () => {
+    setMute(!mute)
+    !openBtn&&setOpenBtn(true)
+  }
+  const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
+  !openBtn&&setOpenBtn(true)
+  const value = format(e.target.value)
+  const name = e.target.name
+    switch (name) {
+      case 'name':
+        setName(value)
+        break;
+      case 'lastName':
+        setLastName(value)
+        break;
+      default:
+        break;
+    }
+  }
+  
+  const handleSubmit = () => {
+    if (mute !== !Mute) {
+      muteChat(companionId)
+    }
+    if (name !== Name || lastName !== LastName) {
+      updateContact(isContact._id,_id,name,lastName)
+    }    
+    openBtn&&setOpenBtn(false)
+  }  
+    
+  useEffect(() => {
+    Name&&setName(Name)
+    LastName && setLastName(LastName)
+    setMute(!Mute)
+  }, [Name, LastName, Mute])
+ 
+  return (
+    <div className={classes.container} >     
+      <ListItemAvatar style={{marginBottom:10}}>
+         <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+           sx={{ background: color, width: 120, height: 120,marginRight:2}}>
+           {`${firstLetter(name)}${firstLetter(lastName)}`}
+         </Avatar>
+      </ListItemAvatar>          
+      <Typography style={{color: '#080808',fontSize:22,fontWeight:500}}>
+        {`${firstLetter(Name)}${slicedWord(Name, 15, 1)} 
+        ${firstLetter(LastName)}${slicedWord(LastName, 15, 1)}`}
+      </Typography>
+      <Typography style={{fontSize:17,marginBottom:20}}>original name</Typography>          
+      <TextField
+        id="name"
+        name='name'
+        label="Name"
+        value={name}
+        fullWidth
+        variant='outlined'
+        onChange={handleTextField}
+        className={classes.textField}
+        required
+        />
+      <TextField
+        id="lastName"
+        name='lastName'
+        label="LastName"
+        value={lastName}
+        fullWidth
+        variant='outlined'
+        onChange={handleTextField}
+        className={classes.textField}
+        required
+      />
+      <div className={classes.notifications}>
+        <Checkbox onChange={handleNotifications} {...label} checked={mute} style={{marginRight:20}} />
+        <ListItemText primary="Notifications" primaryTypographyProps={{ color: "#0e0d0d" }}
+          secondary={!mute ? 'Disabled':'Enabled'} />
+      </div>
+      {openBtn&&<Avatar onClick={handleSubmit} className={classes.avatarArrow}
+        sx={{width: 56, height: 56,backgroundColor: 'rgb(41, 139, 231)',color: '#ffffff'}}>
+        <DoneIcon fontSize="medium" />  
+      </Avatar>}        
+    </div>
+  )
+};
+
+export default EditList;

src/components/HomePage/RightBar/HeaderBar/RightLists/EditList/ToolBar/index.tsx

@@ -1,18 +1,13 @@
 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 { useDispatch } from 'react-redux';
+
 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,
@@ -31,25 +26,13 @@ const useStyles = makeStyles({
 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>
+      <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit</Typography>
     </Stack>
     )
 }

src/components/HomePage/RightBar/HeaderBar/RightListsAndBars/EditBar/index.tsx

@@ -0,0 +1,45 @@
+import { makeStyles } from '@material-ui/core'
+import { useState,useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import ToolBar from './ToolBar'
+import EditList from './EditList'
+import Delete from './Delete'
+import { getContacts } from '../../../../../../redux/contacts/selector'
+import { getChat } from '../../../../../../redux/chat/selector'
+
+
+const useStyles = makeStyles({
+    containerAbsolute: {
+        position: 'absolute',
+        top: 58,
+        width: 506,
+        maxHeight: '905px',
+        minHeight: '905px',
+        overflow: 'hidden',
+        backgroundColor:'#f3f2f2'
+    }
+})
+
+const EditBar= () => {
+  const classes = useStyles()
+  const contacts = useSelector(getContacts)
+  const chat = useSelector(getChat)
+  const [isContact, setIsContact] = useState<any>(false)
+  
+  useEffect(() => {
+    const contact = contacts.find((el) => el.number === chat.number)
+    contact && setIsContact(contact)
+  }, [contacts, chat.number])  
+
+    return (
+    <div>
+      <ToolBar />
+      <div className={classes.containerAbsolute}>
+        <EditList chat={chat} isContact={isContact}/>
+        <Delete id={chat._id}/>
+      </div>
+   </div>
+  )
+}
+
+export default EditBar

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/Search/index.tsx

@@ -55,7 +55,6 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 
 const useStyles = makeStyles({
   container: {
-    borderLeft: 'solid 0.5px #9c9c9c',
     paddingLeft: 10,
     paddingBottom:3
   },

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/index.tsx

@@ -19,7 +19,6 @@ const useStyles = makeStyles({
     position: 'absolute',
     top: 58,
     width: 506,
-    borderLeft: 'solid 0.5px #9c9c9c',
     maxHeight: '905px',
     minHeight: '905px',
     overflowY: 'scroll',

src/components/HomePage/RightBar/HeaderBar/RightLists/index.tsx

@@ -1,19 +1,19 @@
 import { useSelector } from 'react-redux'
 import SearchList from './SearchList'
 import CredentialsList from './CredentialsList'
-import EditList from './EditList'
+import EditBar from './EditBar'
 import { getIsOpen } from '../../../../../redux/control/selector'
 
 
-const RightLists = () => {
+const RightListsAndBars = () => {
   const isOpen = useSelector(getIsOpen)
   return (
-    <div>
+    <>
       {isOpen === 'credentials' && <CredentialsList />}
       {isOpen === 'search' && <SearchList />}
-      {isOpen === 'edit' && <EditList/>}
-  </div>
+      {isOpen === 'edit' && <EditBar/>}
+    </>
    )
 }
 
-export default RightLists
+export default RightListsAndBars

src/components/HomePage/RightBar/HeaderBar/index.tsx

@@ -2,7 +2,7 @@ import Toolbar from '@mui/material/Toolbar'
 import AppBar from '@mui/material/AppBar';
 import { makeStyles } from '@material-ui/core'
 
-import RightLists from './RightLists'
+import RightListsAndBars from './RightListsAndBars'
 import Credentials from './Credentials'
 import Buttons from './Buttons'
 
@@ -22,7 +22,7 @@ const HeaderBar = () => {
         <Toolbar  className={classes.toolBar}>
           <Credentials/>
           <Buttons/>
-          <RightLists/>
+          <RightListsAndBars/>
         </Toolbar>
       </AppBar>        
     )