finished edit user

src/components/HomePage/LeftBar/ChatsList/ChatItem/DeleteModal/index.tsx

@@ -0,0 +1,78 @@
+import Button from '@mui/material/Button';
+import Avatar from '@mui/material/Avatar';
+import { makeStyles } from '@material-ui/core'
+
+import { removeChatForBoth } from '../../../../../../api-data';
+import { firstLetter, slicedWord } from '../../../../../../helpers';
+import { TChat } from '../../../../../../typescript/redux/chats/types';
+
+const useStyles = makeStyles({
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    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',
+  },
+  titleWrapper: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignContent: 'center',
+    alignItems:'center'
+  },
+})
+
+interface IDeleteModal {
+  setModal: (a: boolean) => void,
+  chat:TChat
+}
+const DeleteModal = ({setModal,chat}:IDeleteModal) => {
+  const classes = useStyles()
+  const {name,lastName,avatarUrl,color,companionId} = chat
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel')  return setModal(false)
+    removeChatForBoth(companionId)
+  }  
+  return (
+    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+      <div className={classes.modalDelete}>
+        <div className={classes.titleWrapper}>
+          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+            sx={{ background: color, width: 38, height: 38,marginRight:2}}>
+            {`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+          <h3 style={{color: '#2c2c2c'}}>Delete chat</h3>
+         </div>
+         <p style={{color: '#050505'}}>{`Are you sure you want to delete the
+          chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
+          <Button  variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE CHAT
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>
+      </div>      
+   )
+}
+
+export default DeleteModal

src/components/HomePage/LeftBar/ChatsList/ChatItem/index.tsx

@@ -12,11 +12,11 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Badge from '@mui/material/Badge';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
-import PushPinIcon from '@mui/icons-material/PushPin';
 
-import { muteChat,removeChatForBoth } from '../../../../../api-data';
+import { muteChat } from '../../../../../api-data';
 import { TChat } from '../../../../../typescript/redux/chats/types';
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../helpers';
+import { firstLetter, slicedWord, timeStampEU } from '../../../../../helpers';
+import DeleteModal from './DeleteModal';
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -196,13 +196,14 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs}:IChatItem) => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [modal, setModal] = useState<boolean>(false);
   const open = Boolean(anchorEl);
   const { name, lastName, avatarUrl, color, companionId, mute, seen, total, watched,
     typing, online, lastMessage, lastMessageCreatedAt, createdAt } = chat
 
   const handleClose = (type: string | undefined): void => {
     if (type === 'mute') muteChat(companionId)
-    if (type === 'delete') removeChatForBoth(companionId)
+    if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
   }
@@ -214,6 +215,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs}:IChatItem) => {
 
   return (
     <div>
+      {modal&&<DeleteModal setModal={setModal} chat={chat}/>}
       <ListItemButton
         selected={selected}
         onClick={() => handleListItemClick(companionId)}
@@ -254,11 +256,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs}:IChatItem) => {
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
-      >
-        <MenuItem onClick={() => handleClose('pin')}>
-            <PushPinIcon /> 
-            Pin to top
-         </MenuItem>  
+      > 
         <MenuItem onClick={() => handleClose('mute')}>
           {mute ? <NotificationsNoneIcon /> : <VolumeOffIcon />}
           {mute ? 'Unmute chat':'Mute chat'}

src/components/HomePage/LeftBar/EditBar/EditList/index.tsx

@@ -2,7 +2,7 @@ import { makeStyles, TextField } from '@material-ui/core'
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import { useState,useEffect} from 'react';
+import { useEffect} from 'react';
 import { useDropzone } from 'react-dropzone';
 import { format,firstLetter } from '../../../../../helpers'
 import { IAuthorizationState } from '../../../../../typescript/redux/authorization/interfaces'
@@ -61,18 +61,20 @@ interface IEditList {
   lastName: string,
   setLastName: any,
   openBtn: boolean,
-  setOpenBtn: any,  
+  setOpenBtn: any,
+  file:any,
+  setFile: (file:any) => void
 }
 
 const EditList = (props: IEditList) => {
   const classes = useStyles()
-  const {user,name,setName,lastName,setLastName,openBtn,setOpenBtn} = props
+  const { user, name, setName, lastName, setLastName,
+    openBtn, setOpenBtn,setFile } = props
   const { avatarUrl, color } = user
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
         noDrag: true,
         accept:'image/*'
     });
-  const [file,setFile] = useState<any>(null)
 
   const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
   !openBtn&&setOpenBtn(true)
@@ -91,8 +93,11 @@ const EditList = (props: IEditList) => {
   }
 
   useEffect(() => {
-    if (acceptedFiles.slice(-1)[0]) setFile(acceptedFiles.slice(-1)[0])
-  }, [setFile, acceptedFiles])
+    if (acceptedFiles.slice(-1)[0]) {
+      setFile(acceptedFiles.slice(-1)[0])
+      setOpenBtn(true)
+    }
+  }, [setFile,setOpenBtn,acceptedFiles])
 
   return (
     <div className={classes.container} >     

src/components/HomePage/LeftBar/EditBar/ToolBar/index.tsx

@@ -20,12 +20,16 @@ const useStyles = makeStyles({
   },
 })
 
-const ToolBar = () => {
+interface IToolBar {
+  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
+}
+
+const ToolBar = ({setSelectedIndex}:IToolBar) => {
   const classes = useStyles()
 
   return (
     <Stack className={classes.container} direction="row" spacing={21}>
-      <IconButton aria-label="delete" size="medium">
+      <IconButton onClick={() => setSelectedIndex(2)} aria-label="delete" size="medium">
         <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
       </IconButton>
       <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit profile</Typography>

src/components/HomePage/LeftBar/EditBar/index.tsx

@@ -1,10 +1,12 @@
 import { makeStyles } from '@material-ui/core'
 import { useState,useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector,useDispatch } from 'react-redux';
 import ToolBar from './ToolBar'
 import EditList from './EditList'
 import SubmitBtn from './SubmitBtn';
 import { getState } from '../../../../redux/authorization/selector'
+import { asyncCurrentUser } from '../../../../redux/authorization/operations';
+import { updateCredentials,updateUserAvatar } from '../../../../api-data';
 
 const useStyles = makeStyles({
     containerAbsolute: {
@@ -18,19 +20,33 @@ const useStyles = makeStyles({
     }
 })
 
-const EditBar= () => {
+interface IEditBar {
+  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
+}
+
+const EditBar= ({setSelectedIndex}:IEditBar) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const user = useSelector(getState)
   const [name, setName] = useState<string>('')
   const [lastName, setLastName] = useState<string>('')
   const [openBtn, setOpenBtn] = useState<boolean>(false)
+  const [file,setFile] = useState<any>(null)
   const {name:Name,lastName:LastName} = user
 
-  const handleSubmit = () => {
-   
-    openBtn&&setOpenBtn(false)
+  const handleSubmit = async () => {
+    if (name !== Name || lastName !== LastName){
+      await updateCredentials({ name, lastName, originalName: name, originalLastName: lastName })
+    }
+    if (file) {
+      const formData: any = new FormData()
+      formData.append("avatar", file);
+      await updateUserAvatar(formData)
+    }
+    file && setFile(null)
+    openBtn && setOpenBtn(false)
+    dispatch(asyncCurrentUser())
   }
-
   
   useEffect(() => {
     Name&&setName(Name)
@@ -39,11 +55,12 @@ const EditBar= () => {
 
     return (
     <div>
-      <ToolBar />
+      <ToolBar setSelectedIndex={setSelectedIndex}/>
       <div className={classes.containerAbsolute}>
           <EditList user={user} name={name} setName={setName}
             lastName={lastName} setLastName={setLastName} 
-            openBtn={openBtn} setOpenBtn={setOpenBtn} />
+            openBtn={openBtn} setOpenBtn={setOpenBtn}
+            file={file} setFile={setFile}/>
           {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
       </div>
    </div>

src/components/HomePage/LeftBar/SettingsBar/ToolBar/index.tsx

@@ -23,19 +23,20 @@ const useStyles = makeStyles({
 })
 
 interface IToolBar {
-  setSelectedIndex:(selectedIndex:number | null) => void
+  setSelectedIndex: (selectedIndex: number | null) => void,
+  handleClick:() => void
 }
 
-const ToolBar = ({setSelectedIndex}:IToolBar) => {
+const ToolBar = ({setSelectedIndex,handleClick}:IToolBar) => {
   const classes = useStyles()
-  const handelEdit = () => setSelectedIndex(4)
+
   return (
     <Stack className={classes.container} direction="row" spacing={21}>
-      <IconButton  aria-label="delete" size="medium">
+      <IconButton onClick={handleClick}  aria-label="delete" size="medium">
         <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
       </IconButton>
       <Typography style={{ marginLeft: 20, color: '#474747' }} variant="h6" color="initial">Settings</Typography>
-      <IconButton onClick={handelEdit} style={{ marginLeft: 'auto' }}  aria-label="delete" size="medium">
+      <IconButton onClick={() => setSelectedIndex(4)} style={{ marginLeft: 'auto' }}  aria-label="delete" size="medium">
         <EditIcon  fontSize='medium' /> 
       </IconButton>
       <MenuList/>   

src/components/HomePage/LeftBar/SettingsBar/index.tsx

@@ -3,13 +3,14 @@ import SettingsPicture from "./SettingsPicture"
 import SettingsMenu from "./SettingsMenu"
 
 interface ISettingsBar {
-  setSelectedIndex:(selectedIndex:number | null) => void
+  setSelectedIndex: (selectedIndex: number | null) => void,
+  handleClick:() => void
 }
 
-const SettingsBar = ({setSelectedIndex}:ISettingsBar) => {
+const SettingsBar = ({setSelectedIndex,handleClick}:ISettingsBar) => {
   return (
     <div style={{backgroundColor: '#f3f2f2',height:'100%'}}>
-      <ToolBar setSelectedIndex={setSelectedIndex}/>
+      <ToolBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>
       <SettingsPicture />
       <SettingsMenu/>
     </div>

src/components/HomePage/LeftBar/index.tsx

@@ -78,9 +78,9 @@ const LeftBar = () => {
         {isMenu && modalRoot.current &&
           createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} nightMode={nightMode}/>, modalRoot.current)}
         {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value} sort={sort}/>}
-        {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex}/>}
+        {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
         {selectedIndex === 3 && <AddContact setSelectedIndex={setSelectedIndex} />}
-        {selectedIndex === 4 && <EditBar/>}
+        {selectedIndex === 4 && <EditBar setSelectedIndex={setSelectedIndex}/>}
     </Grid>
     )
 }

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

@@ -61,10 +61,10 @@ const DeleteModal = ({setModal}:{setModal:any}) => {
          <p style={{color: '#050505'}}>{`Are you sure you want to delete the
           chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} 
             ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
-          <Button  variant="text" color="error" style={{fontWeight:500,fontSize:18}}>
-            DELETE CHAT FOR BOTH
+          <Button  variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE CHAT
           </Button>         
-          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:18}}>
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
              CANCEL
           </Button>
         </div>

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

@@ -6,7 +6,6 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
 import VolumeOffIcon from '@mui/icons-material/VolumeOff';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
@@ -61,9 +60,9 @@ const MenuList = ({setModal}:{setModal:any}) => {
     setAnchorEl(e.currentTarget)
   }
 
-  const handleClose = (i:number|undefined):void => {
-    if (i === 0) muteChat(companionId)
-    if (i === 2) setModal(true)
+  const handleClose = (type:string|undefined):void => {
+    if (type === 'mute') muteChat(companionId)
+    if (type === 'deleteModal') setModal(true)
     dispatch(actionIsOpen(''))
     setAnchorEl(null)
   }
@@ -80,15 +79,11 @@ const MenuList = ({setModal}:{setModal:any}) => {
         open={open}
         onClose={handleClose}
       >
-        <MenuItem onClick={() => handleClose(0)}>
+        <MenuItem onClick={() => handleClose('mute')}>
           {mute ? <NotificationsNoneIcon /> : <VolumeOffIcon />}
           {mute ? 'Unmute':'Mute'}
         </MenuItem>
-        <MenuItem onClick={() =>  handleClose(1)}>
-            <CheckBoxIcon/>
-            Select messages
-        </MenuItem>
-        <MenuItem style={{color:'#f02a2a'}} onClick={() =>  handleClose(2)}>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('deleteModal')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete chat
         </MenuItem>        

src/components/reusableComponents/NotDoneList/arr.tsx

@@ -215,5 +215,4 @@ export  const arr = [
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },    
-]
-
+]