finished delete file

src/api-data/index.ts

@@ -229,6 +229,16 @@ const getChats = async <T>(): Promise<T | undefined> => {
   }
 };
 
+const removeMessageById = async <T>(id:string): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.delete(`/messages/${id}`);
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const sentMessageById = async <T>(id:string,message:any): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.post('/messages', { id, message });
@@ -322,6 +332,7 @@ export {
   seenChat,
   typingChat,
   getChats,
+  removeMessageById,
   sentMessageById,
   sentImgMessageById,
   sentAudioMessageById,

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -12,6 +12,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -172,10 +173,11 @@ const useStyles = makeStyles({
 interface IMessageLeftAudio {
   url:string,
   updatedAt: string,
-  fullType:string
+  fullType: string,
+  _id:string
 }
 
-const MessageLeftAudio = ({ url,updatedAt,fullType }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,updatedAt,fullType,_id }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -192,6 +194,7 @@ const MessageLeftAudio = ({ url,updatedAt,fullType }:IMessageLeftAudio) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftFile/index.tsx

@@ -10,6 +10,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
@@ -189,10 +190,11 @@ const useStyles = makeStyles({
 interface IMessageLeftFile {
   url:string,
   updatedAt: string,
-  type:string,
+  type: string,
+  _id:string
 }
 
-const MessageLeftFile = ({ url,updatedAt,type }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,updatedAt,type,_id }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -212,6 +214,7 @@ const MessageLeftFile = ({ url,updatedAt,type }:IMessageLeftFile) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftImage/index.tsx

@@ -11,6 +11,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -197,10 +198,11 @@ interface IMessagesLeftImage {
   color: string,
   message: string,
   messages: any,
-  fullType:string
+  fullType: string,
+  _id:string
 }
 
-const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType,_id}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -220,6 +222,7 @@ const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMess
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -8,6 +8,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById } from "../../../../../../api-data";
 import { firstLetter,slicedWord,timeStampMessage,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -166,10 +167,11 @@ interface IMessageLeftText {
   message:string,
   name:string,
   lastName:string,
-  updatedAt:string,
+  updatedAt: string,
+  _id:string
 }
 
-const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,updatedAt,_id}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -187,6 +189,7 @@ const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) =>
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftVideo/index.tsx

@@ -10,6 +10,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
@@ -176,10 +177,11 @@ const useStyles = makeStyles({
 interface IMessageLeftVideo {
   url:string,
   updatedAt: string,
-  fullType:string
+  fullType: string,
+  _id:string
 }
 
-const MessageLeftVideo = ({ url,updatedAt,fullType }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,updatedAt,fullType,_id }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -197,6 +199,7 @@ const MessageLeftVideo = ({ url,updatedAt,fullType }:IMessageLeftVideo) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -11,7 +11,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -172,10 +172,11 @@ const useStyles = makeStyles({
 interface IMessageRightAudio {
   url:string,
   updatedAt: string,
-  fullType:string
+  fullType: string,
+  _id:string
 }
 
-const MessageRightAudio = ({ url,updatedAt,fullType }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,updatedAt,fullType,_id }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -192,6 +193,7 @@ const MessageRightAudio = ({ url,updatedAt,fullType }:IMessageRightAudio) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -10,6 +10,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
@@ -190,9 +191,10 @@ interface IMessageRightFile {
   url:string,
   updatedAt: string,
   type: string,
+  _id:string
 }
 
-const MessageRightFile = ({ url,updatedAt,type }:IMessageRightFile) => {
+const MessageRightFile = ({ url,updatedAt,type,_id }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -212,6 +214,7 @@ const MessageRightFile = ({ url,updatedAt,type }:IMessageRightFile) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightImage/index.tsx

@@ -11,6 +11,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
@@ -197,10 +198,11 @@ interface IMessageRightImage {
   color: string,
   message: string,
   messages: any,
-  fullType:string
+  fullType: string,
+  _id:string
 }
 
-const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMessageRightImage) => {
+const MessageRightImage = ({url,updatedAt,color,message,messages,fullType,_id}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -220,6 +222,7 @@ const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMess
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -8,7 +8,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { firstLetter, slicedWord, timeStampMessage,copied } from '../../../../../../helpers'
+import { firstLetter, slicedWord, timeStampMessage, copied } from '../../../../../../helpers'
+import { removeMessageById } from "../../../../../../api-data";
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -165,10 +166,11 @@ interface IMessageRightText {
   message:string,
   name:string,
   lastName:string,
-  updatedAt:string,
+  updatedAt: string,
+  _id:string
 }
 
-const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,updatedAt,_id}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -178,14 +180,15 @@ const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) =
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Message')
     if (type === 'delete') setModal(true)
-    setAnchorEl(null)
-    setSelected(false)
+      setAnchorEl(null)
+      setSelected(false)
   }
 
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightVideo/index.tsx

@@ -10,7 +10,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-
+import { removeMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
@@ -178,10 +178,11 @@ const useStyles = makeStyles({
 interface IMessageRightVideo {
   url:string,
   updatedAt: string,
-  fullType:string
+  fullType: string,
+  _id:string
 }
 
-const MessageRightVideo = ({ url,updatedAt,fullType }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,updatedAt,fullType,_id }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -199,6 +200,7 @@ const MessageRightVideo = ({ url,updatedAt,fullType }:IMessageRightVideo) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
+      removeMessageById(_id)
       setModal(false)
     }
   }  

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

@@ -174,9 +174,8 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
             audio.responseType = 'blob';
             audio.onload = () => {
             if (audio.status === 200) {
-                const name = `audioMessage${new Date().getTime()}.mp3`
                 const blob = audio.response
-                const file = new File([blob], name, {
+                const file = new File([blob], 'audio.mp3', {
                   type: 'audio/mpeg'
                 })
                 const formData: any = new FormData()
@@ -193,9 +192,8 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
             video.responseType = 'blob';
             video.onload = () => {
             if (video.status === 200) {
-                const name = `videoMessage${new Date().getTime()}.mp4`
                 const blob = video.response
-                const file = new File([blob], name, {
+                const file = new File([blob], 'video.mp4', {
                     type: 'video/mp4'
                 })
                 const formData: any = new FormData()

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

@@ -115,7 +115,7 @@ const ChatBar = () => {
         className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messages.length > 0 ? messages.map(({ message, name, lastName, color,
-          updatedAt, createdAt,number, type,fullType }) => {
+          updatedAt, createdAt,number, type,fullType,_id }) => {
           let isTime
           if (!time) {
             isTime = true
@@ -133,6 +133,7 @@ const ChatBar = () => {
                updatedAt={updatedAt}
                name={name}
                lastName={lastName}
+               _id={_id}
                  /></div>)
             if (type === 'image') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -143,6 +144,7 @@ const ChatBar = () => {
                 message={message}
                 messages={messages}
                 fullType={fullType}
+                _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -150,6 +152,7 @@ const ChatBar = () => {
                 url={url}
                 updatedAt={updatedAt}
                 fullType={fullType}
+                _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -157,6 +160,7 @@ const ChatBar = () => {
                 url={url}
                 updatedAt={updatedAt}
                 fullType={fullType}
+                _id={_id}
                   /></div>)
             if (type) return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -164,6 +168,7 @@ const ChatBar = () => {
                 url={url}
                 updatedAt={updatedAt}
                 type={type}
+                _id={_id}
                   /></div>)             
           } else {
             if (type === 'text') return (<div key={createdAt}>
@@ -172,7 +177,8 @@ const ChatBar = () => {
                 message={message}
                 updatedAt={updatedAt}
                 name={name}
-                lastName={lastName} 
+                lastName={lastName}
+                _id={_id}
                   /></div>)
             if (type === 'image') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -183,6 +189,7 @@ const ChatBar = () => {
                 message={message}
                 messages={messages}
                 fullType={fullType}
+                _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -190,6 +197,7 @@ const ChatBar = () => {
                 url={url}
                 updatedAt={updatedAt}
                 fullType={fullType}
+                _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -197,6 +205,7 @@ const ChatBar = () => {
                  url={url}
                  updatedAt={updatedAt}
                  fullType={fullType}
+                 _id={_id}
                    /></div>)
             if (type) return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -204,6 +213,7 @@ const ChatBar = () => {
                  url={url}
                  updatedAt={updatedAt}
                  type={type}
+                 _id={_id}
                    /></div>)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}

src/redux/authorization/reducer/index.ts

@@ -15,6 +15,7 @@ const initialState:IAuthorizationState = {
   originalName: "",
   originalLastName: "",
   avatarUrl: "",
+  avatarsArr: [],
   color: "",
   code: "",
   _id: "",

src/redux/chat/reducer/index.ts

@@ -13,7 +13,8 @@ const initialState: TChat = {
      lastName: '',
      originalName: '',
      originalLastName: '',
-     avatarUrl:'',
+     avatarUrl: '',
+     avatarsArr: [],
      color: '',
      online: '',
      lastMessage: '',

src/typescript/redux/allMessages/types.ts

@@ -9,6 +9,7 @@ export type TMessage = {
   type: string,
   fullType:string,
   companionId: string,
+  idTime: string,
   owner: any,
   createdAt: string,
   updatedAt: string,

src/typescript/redux/authorization/interfaces.ts

@@ -4,7 +4,8 @@ export interface IAuthorizationState  {
   lastName: string,
   originalName: string,
   originalLastName: string,
-  avatarUrl: string ,
+  avatarUrl: string,
+  avatarsArr: string[] | [],
   color: string,
   code: string,
   _id: string ,

src/typescript/redux/chat/types.ts

@@ -3,7 +3,8 @@ export type TChat = {
   lastName: string,
   originalName: string,
   originalLastName: string,
-  avatarUrl:string,
+  avatarUrl: string,
+  avatarsArr: string[] | [],
   color: string,
   online: string,
   lastMessage: string,

src/typescript/redux/chats/types.ts

@@ -3,7 +3,8 @@ export type TChat = {
   lastName: string,
   originalName: string,
   originalLastName: string,
-  avatarUrl:string,
+  avatarUrl: string,
+  avatarsArr: string[],
   color: string,
   online: string,
   lastMessage: string,

src/typescript/redux/messages/types.ts

@@ -7,7 +7,8 @@ export type TMessage = {
   number:string,
   _id: string,
   type: string,
-  fullType:string,
+  fullType: string,
+  idTime: string,
   companionId: string,
   owner: any,
   createdAt: string,