finished edit

src/api-data/index.ts

@@ -3,10 +3,10 @@ import { prodBaseURL } from '../helpers';
 const axios = require('axios');
 axios.defaults.baseURL = `${prodBaseURL}/api`;
 
-const error = (message:string) =>
+const error = (message:string,closeTime: false| number) =>
   toast.error(`🔥 ${message}!`, {
     position: 'bottom-left',
-    autoClose: 3000,
+    autoClose: closeTime,
     hideProgressBar: false,
     closeOnClick: true,
     pauseOnHover: true,
@@ -14,10 +14,10 @@ const error = (message:string) =>
     progress: undefined,
   });
 
-const success = (message:string) =>
+const success = (message:string,closeTime: false| number) =>
   toast.success(`⚡ ${message}`, {
     position: 'bottom-left',
-    autoClose: 3000,
+    autoClose: closeTime,
     hideProgressBar: false,
     closeOnClick: true,
     pauseOnHover: true,
@@ -44,7 +44,7 @@ const forbidden = ({ message }: any) => {
 const authorizeUser = async (number:string,country:string):Promise<string | undefined> => {
   try {
     const { data : {data} } = await axios.post('/auth/register', { number,country });
-    success(`code ${data}`);
+    success(`Use this code ${data} to sign in to the app "w-telegram". The real code cannot be sent via SMS to your phone because the Twilio account is not paid.`,20000);
     return data
   } catch (e) {
     return undefined
@@ -330,6 +330,16 @@ const sentMessageById = async <T>(id:string,message:string,caption:string): Prom
   }
 };
 
+const sentMessageEditById = async <T>(id:string,message:string,caption:string): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.post('/messages/edit', { id, message,caption });
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const sentMessageReplyById = async <T>(id:string,message:string,caption:string): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.post('/messages/reply', { id, message,caption });
@@ -443,6 +453,7 @@ export {
   pinMessageById,
   unpinAllMessagesById,
   sentMessageById,
+  sentMessageEditById,
   sentMessageReplyById,
   sentMessageForwardById,
   sentImgMessageById,

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftForward/index.tsx

@@ -360,10 +360,10 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem> 
-        <MenuItem onClick={handleClickIcon}>
+        {fullType&&<MenuItem onClick={handleClickIcon}>
             <DownloadIcon/>
             Download
-        </MenuItem>                   
+        </MenuItem>}                   
         <CopyToClipboard onCopy={() => handleClose('copy')} text={`${forwardMessage&&fullType === null ? forwardMessage : fullType} ${forwardCaption ? forwardCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftReply/index.tsx

@@ -374,10 +374,10 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>
-        <MenuItem onClick={handleClickIcon}>
+        {fullType&&<MenuItem onClick={handleClickIcon}>
             <DownloadIcon/>
             Download
-        </MenuItem>           
+        </MenuItem>}           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={`${replyMessage&&fullType === null ? replyMessage : fullType} ${replyCaption ? replyCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightForward/index.tsx

@@ -362,10 +362,10 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>
-        <MenuItem onClick={handleClickIcon}>
+        {fullType&&<MenuItem onClick={handleClickIcon}>
             <DownloadIcon/>
             Download
-        </MenuItem>                   
+        </MenuItem>}                  
         <MenuItem onClick={() => {
             handleEdit(_id)
             handleClose(undefined)

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightReply/index.tsx

@@ -361,10 +361,10 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>
-        <MenuItem onClick={handleClickIcon}>
+        {fullType&&<MenuItem onClick={handleClickIcon}>
             <DownloadIcon/>
             Download
-        </MenuItem>                    
+        </MenuItem>}                    
         <MenuItem onClick={() => {
             handleEdit(_id)
             handleClose(undefined)

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

@@ -25,7 +25,8 @@ import ForwardBar from "./ForwardBar";
 import EditBar from "./EditBar";
 import {
     sentMessageById, sentImgMessageById, sentAudioMessageById,
-    sentVideoMessageById,sentFileMessageById,sentMessageReplyById,sentMessageForwardById
+  sentVideoMessageById, sentFileMessageById, sentMessageEditById,
+  sentMessageReplyById, sentMessageForwardById
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
 import { getRightIsOpen } from '../../../../../redux/control/selector'
@@ -346,8 +347,8 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
            sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom,value,caption.trim())
            setIsForward(undefined)
         }    
-        if (value&&isEdit && !isForward && !isReply) {
-           //sent edited messages
+        if (isEdit && !isForward && !isReply) {
+           sentMessageEditById(isEdit._id, value, caption.trim())
            setIsEdit(undefined)
         }           
         if (mediaBlobUrl && type === 'recording') {
@@ -523,10 +524,10 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
   useEffect(() => {
     const companionIdForwardToAndFrom = isForward?.companionIdForwardToAndFrom
     if(companionIdForwardToAndFrom&&companionIdForwardToAndFrom !== companionId) setIsForward(undefined)
-  },[companionId])  
+  }, [companionId])
   
     return (
-        <div className={(isEdit&&value&&(isEdit.message !== value)) || (isEdit&&caption&&(isEdit.caption !== caption)) || (value&&!isEdit) || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
+        <div className={(value&&isEdit&&isEdit.type === 'text') || (isEdit&&isEdit.type !== 'text') || (value&&!isEdit) || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
           {isArrow && <div className={classes.borderTop}></div>}
           {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
             handleScrollToTheMessage={handleScrollToTheMessage} />}
@@ -569,7 +570,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                     style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward || isEdit? 'none' : 'block' }} />                           
                 <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                     sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
-                    style={{display: (isEdit&&value&&(isEdit.message !== value)) || (isEdit&&caption&&(isEdit.caption !== caption)) || (value&&!isEdit) || file || status === 'stopped'  || _status === 'stopped'? 'block':'none' }}/>
+                    style={{display: (value&&isEdit&&isEdit.type === 'text') || (isEdit&&isEdit.type !== 'text') || (value&&!isEdit) || file || status === 'stopped'  || _status === 'stopped'? 'block':'none' }}/>
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                     sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
                     style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward && !isEdit ? 'block' : 'none'}}/>

src/components/HomePage/CentralBar/ChatBar/index.tsx

@@ -230,14 +230,12 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         <div className={classes.messagesBody}>
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
           createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
-          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited:editedr},i) => {
+          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited},i) => {
           const watched = seenCompanion - (i + 1) < 0 ? false : true
-          const edited = !editedr
           let isUnread
           let isTime
           let isTongue = false
           const nextTongue = renderArr[i + 1]
-          const prevTongue = renderArr[i - 1]
           if (!unread && chatNumber === number&& seen - (i + 1) < 0) {
             isUnread = true
             unread = true

src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

@@ -0,0 +1,91 @@
+import { makeStyles } from '@material-ui/core'
+import { useSelector } from 'react-redux';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
+import CloseIcon from '@mui/icons-material/Close';
+import ScreenShareIcon from '@mui/icons-material/ScreenShare';
+import StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
+import VideocamIcon from '@mui/icons-material/Videocam';
+import VideocamOffIcon from '@mui/icons-material/VideocamOff';
+import MicIcon from '@mui/icons-material/Mic';
+import MicOffIcon from '@mui/icons-material/MicOff';
+import CallEndIcon from '@mui/icons-material/CallEnd';
+
+import { getChat } from '../../../../../../redux/chat/selector';
+import { prodAwsS3,firstLetter,slicedWord } from '../../../../../../helpers'
+
+const useStyles = makeStyles({
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },  
+  modalCall: {
+    background: 'rgb(5, 5, 5)',
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    justifyItems:"center",
+    width: '36vw',
+    height:'50vh',
+    left: '32vw',
+    bottom: '25vh',
+    borderRadius: 7,
+    padding: 7,
+  },
+  rightIcons: {
+    display: 'flex',
+    justifyContent: 'end',
+    alignContent: 'center',
+    alignItems: 'center',
+    marginBottom: 50,
+    width:'100%'
+  }
+})
+
+const CallModal = ({setModalCall}:{setModalCall:any}) => {
+  const classes = useStyles()
+  const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)
+
+  const handleDeleteModal = (e: any) => {
+    // const id = e.target.id
+    // if (id === 'overlay' || id === 'cancel')  return setModalCall(false)
+    // if (id === 'delete') {
+    //   setModalCall(false)
+    // }
+  }
+
+  return (
+    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+      <div className={classes.modalCall}>
+        <div className={classes.rightIcons}>
+          <MinimizeIcon style={{ color: '#ffffff',cursor:'pointer'}} fontSize='small' />
+          <CropLandscapeIcon style={{ color: '#ffffff',marginLeft:12,cursor:'pointer' }} fontSize='small' />
+          <CloseIcon style={{ color:'#ffffff',marginLeft:12,cursor:'pointer'}} fontSize='small' />
+        </div>
+        <ListItemAvatar>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+            sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
+             {`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+          primaryTypographyProps={{ color: '#ffffff', fontSize: 22, fontWeight: 500 }}
+          secondary='ringing ...' secondaryTypographyProps={{color: '#ffffff',fontSize:17,marginBottom:20}}/>       
+      </div>
+    </div>      
+   )
+}
+
+export default CallModal

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

@@ -41,17 +41,17 @@ const useStyles = makeStyles({
   },
 })
 
-const DeleteModal = ({setModal}:{setModal:any}) => {
+const DeleteModal = ({setModalDelete}:{setModalDelete:any}) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)
 
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
-    if (id === 'overlay' || id === 'cancel')  return setModal(false)
+    if (id === 'overlay' || id === 'cancel')  return setModalDelete(false)
     if (id === 'delete') {
       removeChatForBoth(companionId)
-      setModal(false)
+      setModalDelete(false)
       dispatch(actionRemoveChat())
       dispatch(actionRightIsOpen(''))
     }

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

@@ -50,11 +50,11 @@ const StyledMenu = styled((props:any) => (
 }));
 
 interface IMenuList {
-  setModal:any,
+  setModalDelete:any,
   setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
 }
 
-const MenuList = ({setModal,setIsSomeSelected}:IMenuList) => {
+const MenuList = ({setModalDelete,setIsSomeSelected}:IMenuList) => {
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const open = Boolean(anchorEl);
   const { companionId, mute } = useSelector(getChat)
@@ -66,7 +66,7 @@ const MenuList = ({setModal,setIsSomeSelected}:IMenuList) => {
 
   const handleClose = (type: string | undefined): void => {
     if (type === 'mute') muteChat(companionId)
-    if (type === 'deleteModal') setModal(true)
+    if (type === 'deleteModal') setModalDelete(true)
     setAnchorEl(null)
   }
 

src/components/HomePage/CentralBar/HeaderBar/Buttons/index.tsx

@@ -1,12 +1,14 @@
 import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
+import PhoneIcon from '@mui/icons-material/Phone';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
 import { useState } from 'react';
 
 import MenuList from './MenuList'
 import DeleteModal from './DeleteModal';
+import CallModal from './CallModal';
 import { actionRightIsOpen } from '../../../../../redux/control/action'
 
 const useStyles = makeStyles({
@@ -25,19 +27,28 @@ interface IButtons {
 const Buttons = ({setIsSomeSelected}:IButtons) => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const [modal, setModal] = useState<boolean>(false)
+  const [modalDelete, setModalDelete] = useState<boolean>(false)
+  const [modalCall, setModalCall] = useState<boolean>(true)
   const handleOpenSearch = (e: any) => {
     e.stopPropagation()
     dispatch(actionRightIsOpen('search'))
   }
+  const handleStartCall = (e: any) => {
+    e.stopPropagation()
+    setModalCall(true)
+  }
 
   return (
     <Stack className={classes.container} direction="row">
       <IconButton onClick={handleOpenSearch} aria-label="delete" size="medium">
         <SearchIcon fontSize='medium'/>
       </IconButton>
-      <MenuList setModal={setModal} setIsSomeSelected={setIsSomeSelected}/>
-       {modal&&<DeleteModal setModal={setModal}/>}      
+      <IconButton onClick={handleStartCall} aria-label="delete" size="medium">
+        <PhoneIcon fontSize='medium'/>
+      </IconButton>      
+      <MenuList setModalDelete={setModalDelete} setIsSomeSelected={setIsSomeSelected}/>
+      {modalDelete && <DeleteModal setModalDelete={setModalDelete} />}
+      {modalCall && <CallModal setModalCall={setModalCall} />}
     </Stack>
   );
 }

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

@@ -6,7 +6,6 @@ import { useState } from 'react';
 import { useSelector,useDispatch } from 'react-redux';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import Divider from '@mui/material/Divider';
 import Credentials from './Credentials'
 import Buttons from './Buttons'
 import PinnedBar from './PinnedBar';

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

@@ -31,7 +31,7 @@ const SettingsMenu = () => {
               <ListItemIcon style={{marginRight:15}}>
                 <PhoneIcon fontSize="medium" />
               </ListItemIcon>
-              <ListItemText primary={number} secondary='Phone' />
+              <ListItemText primary={number} secondary='Copy number' />
             </MenuItem>
           </CopyToClipboard>   
       </MenuList>

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

@@ -119,7 +119,7 @@ const SettingsPicture = () => {
           [
             <div>
               <img alt='transparentPic' src={transparentPic}
-                style={{ backgroundColor: color }} />
+                style={{ background: `linear-gradient(to bottom, ${color}, ${color} 80%, #5d5d5d 100%)` }} />
               <p className="legend">{timeStampEU(createdAt)}</p>         
             </div>
           ]

src/components/HomePage/RightBar/CredentialsList/ProfileMenu/index.tsx

@@ -42,7 +42,7 @@ const ProfileMenu = ({disabled}:{disabled:boolean}) => {
               <ListItemIcon className={classes.listIcon}>
                 <PhoneIcon fontSize="medium" />
               </ListItemIcon>
-              <ListItemText primary={number} secondary='Phone' />
+              <ListItemText primary={number} secondary='Copy number' />
             </MenuItem>
           </CopyToClipboard>
         <Divider variant="inset" />

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

@@ -80,7 +80,7 @@ const ProfilePicture = () => {
             [
             <div>
               <img alt='transparentPic' src={transparentPic}
-                style={{ backgroundColor: color }} />
+                style={{ background: `linear-gradient(to bottom, ${color}, ${color} 80%, #5d5d5d 100%)` }} />
               <p className="legend">{timeStampEU(createdAt)}</p>
             </div>
           ]}

src/typescript/redux/allMessages/types.ts

@@ -23,7 +23,6 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
-  deleted: boolean,
   edited: boolean,
   idTime: string,
   oldId: string,

src/typescript/redux/messages/types.ts

@@ -20,7 +20,6 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
-  deleted: boolean,
   edited: boolean,
   idTime: string,
   oldId: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -20,7 +20,6 @@ export type TPinnedMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
-  deleted: boolean,
   edited: boolean,
   idTime: string,
   oldId: string,