|
@@ -3,26 +3,21 @@ import { styled } from '@mui/material/styles';
|
|
import { useState } from "react";
|
|
import { useState } from "react";
|
|
import Typography from '@mui/material/Typography';
|
|
import Typography from '@mui/material/Typography';
|
|
import Button from '@mui/material/Button';
|
|
import Button from '@mui/material/Button';
|
|
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
|
|
|
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
|
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
|
import Menu from '@mui/material/Menu';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Divider from '@mui/material/Divider';
|
|
import Divider from '@mui/material/Divider';
|
|
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
|
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
-import PushPinIcon from '@mui/icons-material/PushPin';
|
|
|
|
-import CloseIcon from '@mui/icons-material/Close';
|
|
|
|
import ReplyIcon from '@mui/icons-material/Reply';
|
|
import ReplyIcon from '@mui/icons-material/Reply';
|
|
import DoneAllIcon from '@mui/icons-material/DoneAll';
|
|
import DoneAllIcon from '@mui/icons-material/DoneAll';
|
|
import DoneIcon from '@mui/icons-material/Done';
|
|
import DoneIcon from '@mui/icons-material/Done';
|
|
-import EditIcon from '@mui/icons-material/Edit';
|
|
|
|
import SouthWestIcon from '@mui/icons-material/SouthWest';
|
|
import SouthWestIcon from '@mui/icons-material/SouthWest';
|
|
import NorthEastIcon from '@mui/icons-material/NorthEast';
|
|
import NorthEastIcon from '@mui/icons-material/NorthEast';
|
|
import PhoneIcon from '@mui/icons-material/Phone';
|
|
import PhoneIcon from '@mui/icons-material/Phone';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Avatar from '@mui/material/Avatar';
|
|
-import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
|
|
-import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3,getTimeBySeconds } from '../../../../../../helpers'
|
|
|
|
-import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
|
|
|
|
|
|
+import { firstLetter, slicedWord, timeStampMessage,emojisArr,prodAwsS3,getTimeBySeconds } from '../../../../../../helpers'
|
|
|
|
+import { removeMessageById,updateMessageById } from "../../../../../../api-data";
|
|
|
|
|
|
const StyledMenu = styled((props:any) => (
|
|
const StyledMenu = styled((props:any) => (
|
|
<Menu
|
|
<Menu
|
|
@@ -211,27 +206,22 @@ interface IMessageRightCall {
|
|
duration: number,
|
|
duration: number,
|
|
tongue: boolean,
|
|
tongue: boolean,
|
|
watched: boolean,
|
|
watched: boolean,
|
|
- edited: boolean,
|
|
|
|
avatarUrl: string,
|
|
avatarUrl: string,
|
|
color: string,
|
|
color: string,
|
|
name:string,
|
|
name:string,
|
|
lastName:string,
|
|
lastName:string,
|
|
createdAt: string,
|
|
createdAt: string,
|
|
- caption: string,
|
|
|
|
emoji: string,
|
|
emoji: string,
|
|
emojiCompanion: string,
|
|
emojiCompanion: string,
|
|
- pinned: boolean,
|
|
|
|
isSomeSelected: boolean,
|
|
isSomeSelected: boolean,
|
|
isSelected:(_id:string) => boolean,
|
|
isSelected:(_id:string) => boolean,
|
|
handleSelected: (_id:string) => void,
|
|
handleSelected: (_id:string) => void,
|
|
_id: string,
|
|
_id: string,
|
|
nightMode: boolean,
|
|
nightMode: boolean,
|
|
handleReply: (_id: string) => void,
|
|
handleReply: (_id: string) => void,
|
|
- handleForward: (_id: string) => void,
|
|
|
|
- handleEdit:(_id: string) => void,
|
|
|
|
}
|
|
}
|
|
|
|
|
|
-const MessageRightCall = ({message,initiator,duration,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit}:IMessageRightCall) => {
|
|
|
|
|
|
+const MessageRightCall = ({message,initiator,duration,tongue,watched,avatarUrl,color,name,lastName,createdAt,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply}:IMessageRightCall) => {
|
|
const classes = useStyles();
|
|
const classes = useStyles();
|
|
const [anchorEl, setAnchorEl] = useState<any>(null);
|
|
const [anchorEl, setAnchorEl] = useState<any>(null);
|
|
const [selected, setSelected] = useState<boolean>(false);
|
|
const [selected, setSelected] = useState<boolean>(false);
|
|
@@ -239,7 +229,6 @@ const MessageRightCall = ({message,initiator,duration,tongue,watched,edited,avat
|
|
const open = Boolean(anchorEl);
|
|
const open = Boolean(anchorEl);
|
|
const checked = isSelected(_id)
|
|
const checked = isSelected(_id)
|
|
const handleClose = (type: string | undefined): void => {
|
|
const handleClose = (type: string | undefined): void => {
|
|
- if (type === 'copy') copied('Text')
|
|
|
|
if (type === 'delete') setModal(true)
|
|
if (type === 'delete') setModal(true)
|
|
setAnchorEl(null)
|
|
setAnchorEl(null)
|
|
setSelected(false)
|
|
setSelected(false)
|
|
@@ -261,8 +250,8 @@ const MessageRightCall = ({message,initiator,duration,tongue,watched,edited,avat
|
|
|
|
|
|
const handleEmojiMenu = ({ target }: any): void => {
|
|
const handleEmojiMenu = ({ target }: any): void => {
|
|
const idEmoji = target.id
|
|
const idEmoji = target.id
|
|
- if (idEmoji === emoji) {updateMessageById(_id,'')
|
|
|
|
- } else updateMessageById(_id,idEmoji)
|
|
|
|
|
|
+ if (idEmoji === emoji) updateMessageById(_id,'')
|
|
|
|
+ else updateMessageById(_id,idEmoji)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -274,7 +263,7 @@ const MessageRightCall = ({message,initiator,duration,tongue,watched,edited,avat
|
|
${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
|
|
${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
|
|
</Typography>
|
|
</Typography>
|
|
<div className={classes.wrapperInner}>
|
|
<div className={classes.wrapperInner}>
|
|
- <Typography style={{color: "#00b333"}} variant="h6" align="right">
|
|
|
|
|
|
+ <Typography style={{color: "#363636"}} variant="h6" align="right">
|
|
{message}
|
|
{message}
|
|
</Typography>
|
|
</Typography>
|
|
<PhoneIcon style={{color:'#18bd03'}} fontSize='large' />
|
|
<PhoneIcon style={{color:'#18bd03'}} fontSize='large' />
|
|
@@ -312,36 +301,7 @@ const MessageRightCall = ({message,initiator,duration,tongue,watched,edited,avat
|
|
}}>
|
|
}}>
|
|
<ReplyIcon />
|
|
<ReplyIcon />
|
|
Reply
|
|
Reply
|
|
- </MenuItem>
|
|
|
|
- <MenuItem onClick={() => {
|
|
|
|
- handleForward(_id)
|
|
|
|
- handleClose(undefined)
|
|
|
|
- }}>
|
|
|
|
- <ReplyIcon style={{transform :'rotateY(180deg)'}} />
|
|
|
|
- Forward
|
|
|
|
- </MenuItem>
|
|
|
|
- <MenuItem onClick={() => {
|
|
|
|
- handleEdit(_id)
|
|
|
|
- handleClose(undefined)
|
|
|
|
- }}>
|
|
|
|
- <EditIcon/>
|
|
|
|
- Edit
|
|
|
|
- </MenuItem>
|
|
|
|
- <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
|
|
|
|
- <MenuItem>
|
|
|
|
- <ContentCopyIcon />
|
|
|
|
- Copy Text
|
|
|
|
- </MenuItem>
|
|
|
|
- </CopyToClipboard>
|
|
|
|
- <MenuItem onClick={() => {
|
|
|
|
- pinMessageById(_id, !pinned)
|
|
|
|
- handleClose(undefined)
|
|
|
|
- }}>
|
|
|
|
- {pinned ?
|
|
|
|
- <CloseIcon className={classes.iconClose} /> :
|
|
|
|
- <PushPinIcon />}
|
|
|
|
- {pinned?'Unpin':'Pin'}
|
|
|
|
- </MenuItem>
|
|
|
|
|
|
+ </MenuItem>
|
|
<MenuItem onClick={() => {
|
|
<MenuItem onClick={() => {
|
|
handleSelected(_id)
|
|
handleSelected(_id)
|
|
handleClose(undefined)
|
|
handleClose(undefined)
|