\r\n \r\n {!anchorEl? \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default SmallMenuBar","import { makeStyles, Typography } from '@material-ui/core'\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { slicedWord, firstLetter,prodBaseURL } from '../../../../../../helpers';\r\nimport { TChat } from '../../../../../../typescript/redux/chats/types';\r\n\r\nconst useStyles = makeStyles({\r\n stackItem: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n padding:5,\r\n borderRadius: 5,\r\n cursor:'pointer',\r\n '&:hover': {\r\n background: '#eeeded'\r\n }\r\n },\r\n titleName: {\r\n color: '#575757',\r\n fontSize: 16,\r\n paddingTop:5\r\n }\r\n})\r\n\r\ninterface IRecentItem {\r\n handleListItemClick: (companionId: string) => void,\r\n chat:TChat,\r\n}\r\n\r\nconst RecentItem = ({handleListItemClick,chat}:IRecentItem) => {\r\n const classes = useStyles()\r\n const { name, lastName,color,avatarUrl,companionId } = chat\r\n \r\n \r\n\r\nreturn (\r\n handleListItemClick(companionId)} className={classes.stackItem}>\r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 8, 1)}`} \r\n
\r\n )\r\n}\r\n\r\nexport default RecentItem","import { makeStyles,Typography } from '@material-ui/core'\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\n\r\nimport { TChat } from '../../../../../../typescript/redux/chats/types';\r\nimport { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n listItemInnerText: {\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n flexWrap: 'nowrap',\r\n },\r\n listItem_iconAvatar: {\r\n marginRight:10\r\n },\r\n listItem_iconRight: {\r\n marginRight: 10,\r\n },\r\n listItem_icon_time: {\r\n fontSize: 12,\r\n marginLeft: 5,\r\n paddingBottom:25,\r\n color: '#1b1b1b'\r\n },\r\n})\r\n\r\ninterface IChatItem {\r\n chat: TChat,\r\n handleListItemClick: (companionId: string) => void,\r\n}\r\n\r\nconst ChatItem = ({chat,handleListItemClick}:IChatItem) => {\r\n const classes = useStyles()\r\n const {name,lastName,avatarUrl,color,companionId,lastMessage,lastMessageCreatedAt,createdAt} = chat\r\n\r\n return (\r\n - \r\n {filteredAndSorted.map((chat) =>\r\n
- \r\n {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>\r\n
\r\n \r\n \r\n \r\n handleDownload(`${prodBaseURL}/${message}`, fullType)}\r\n className={classes.folderIcon} fontSize='large' />\r\n \r\n \r\n \r\n
)}\r\n \r\n
:\r\n \r\n {timeStampEU(updatedAt)}\r\n handleDownload(url, fullType)}/>\r\n 
\r\n
\r\n - \r\n {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>\r\n
\r\n \r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n copied('Message')} text={message}>\r\n \r\n \r\n
)}\r\n - \r\n {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>\r\n
\r\n \r\n \r\n \r\n handleDownload(`${prodBaseURL}/${message}`, fullType)}\r\n className={classes.folderIcon} fontSize='large' />\r\n \r\n \r\n \r\n
)}\r\n - \r\n {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>\r\n
\r\n \r\n \r\n \r\n handleDownload(`${prodBaseURL}/${message}`, fullType)}\r\n className={classes.folderIcon} fontSize='large' />\r\n \r\n \r\n
)}\r\n \r\n
\r\n {isActive === 0 && handleIsActive(0)}>\r\n Chats\r\n ___\r\n
\r\n handleIsActive(1)}>\r\n Files\r\n ___\r\n
\r\n handleIsActive(2)}>\r\n Media\r\n ___\r\n
\r\n handleIsActive(3)}>\r\n Text\r\n ___\r\n
\r\n handleIsActive(4)}>\r\n Audio\r\n ___\r\n
\r\n handleIsActive(5)}>\r\n Video\r\n ___\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default DeleteModal","import { makeStyles,Typography } from '@material-ui/core'\r\nimport { useState } from 'react';\r\nimport { styled } from '@mui/material/styles';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';\r\nimport VolumeOffIcon from '@mui/icons-material/VolumeOff';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport Badge from '@mui/material/Badge';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\n\r\nimport { muteChat } from '../../../../../api-data';\r\nimport { TChat } from '../../../../../typescript/redux/chats/types';\r\nimport { firstLetter, slicedWord, timeStampEU,prodBaseURL } from '../../../../../helpers';\r\nimport DeleteModal from './DeleteModal';\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete chat
\r\n{`Are you sure you want to delete the\r\n chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n {modal&&}\r\n handleListItemClick(companionId)}\r\n onContextMenu={(e) => handleContextMenu(e)}\r\n >\r\n \r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n {mute&&
}\r\n secondary={typing ? \r\n typing... :\r\n lastMessage ? slicedWord(lastMessage, 35) :\r\n `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}/>\r\n \r\n {watched&& \r\n {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}\r\n \r\n
\r\n {lastMessage && total > seen ? :\r\n - \r\n {sortedChats.length > 0 ? sortedChats.map((el) =>
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default MenuBar","import { makeStyles } from '@material-ui/core'\r\nimport { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { styled } from '@mui/material/styles';\r\nimport Button from '@mui/material/Button';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport {removeContact } from '../../../../../api-data';\r\nimport { actionIsOpen } from '../../../../../redux/control/action';\r\nimport { TContact } from '../../../../../typescript/redux/contacts/types';\r\nimport { TIsOpen } from '../../../../../typescript/redux/control/types';\r\nimport { firstLetter,slicedWord,timeStampEU,copied,prodBaseURL } from '../../../../../helpers';\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n handleListItemClick(companionId)}\r\n onContextMenu={(e) => handleContextMenu(e)}\r\n >\r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n handleClose('copy')} text={number}>\r\n \r\n \r\n \r\n \r\n {modal&&
\r\n );\r\n}\r\nexport default ContactItem","import { createSelector } from 'reselect';\r\nimport { IState } from '../../../typescript/redux/interfaces'\r\n\r\nconst getTotal = (state: IState) => state.contacts.total;\r\nconst getLimit = (state:IState) => state.contacts.limit;\r\nconst getPage = (state: IState) => state.contacts.page;\r\nconst getContacts = (state: IState) => state.contacts.contacts;\r\nconst getState = (state: IState) => state.contacts;\r\n\r\nconst getContactsMemo = createSelector([getContacts], state => state);\r\n\r\nexport { getTotal,getLimit,getPage,getContacts,getState,getContactsMemo };\r\n","import {\r\n actionGetContactsSuccess,\r\n actionGetContactsReject\r\n} from '../action';\r\nimport { addContact,getContacts} from '../../../api-data';\r\nimport { IContactsState } from '../../../typescript/redux/contacts/interfaces'\r\n\r\nconst asyncGetContacts = () => async (dispatch:any) => {\r\n try {\r\n const data = await getContacts\r\n
}\r\n \r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete contact
\r\n{`Are you sure you want to delete contact\r\n ${`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n \r\n Add new contact\r\n \r\n ADD\r\n }\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddContact;","import { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { styled } from '@mui/material/styles';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport LogoutIcon from '@mui/icons-material/Logout';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\n\r\nimport { asyncLogout } from '../../../../../../redux/authorization/operations';\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default DeleteModal","import { makeStyles } from '@material-ui/core'\r\nimport { useSelector } from 'react-redux';\r\nimport { useState } from 'react';\r\nimport { getState } from '../../../../../redux/authorization/selector'\r\nimport { Carousel } from 'react-responsive-carousel';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { firstLetter, slicedWord, timeStampEU,prodBaseURL } from '../../../../../helpers'\r\nimport DeleteModal from './DeleteModal';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n backgroundColor: '#ffffff',\r\n position:'relative',\r\n },\r\n nameTile: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n backgroundColor: 'rgb(0,0,0)',\r\n borderRadius: 10,\r\n padding:8,\r\n fontSize: 18,\r\n zIndex:10,\r\n top: '7%',\r\n left: '50%', \r\n marginLeft: '-45%',\r\n opacity: 0.7,\r\n transition: 'opacity .35s ease-in-out'\r\n },\r\n timeTile: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n backgroundColor: 'rgb(0,0,0)',\r\n borderRadius: 10,\r\n padding:4,\r\n fontSize: 15,\r\n top: '1%',\r\n left: '50%', \r\n marginLeft: '-45%',\r\n opacity: 0.7,\r\n transition: 'opacity .35s ease-in-out'\r\n },\r\n iconDeleteWrapper: {\r\n position: 'absolute',\r\n top: '1%',\r\n right: '9%',\r\n },\r\n iconDelete: {\r\n '&:hover': {\r\n opacity: 1,\r\n color: '#fa0000',\r\n animation: `$shake 0.5s`,\r\n }\r\n },\r\n '@keyframes shake': {\r\n '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},\r\n '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},\r\n '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},\r\n '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},\r\n '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},\r\n '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},\r\n '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},\r\n '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},\r\n '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},\r\n '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},\r\n '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},\r\n} \r\n})\r\n\r\nconst SettingsPicture = () => {\r\n const classes = useStyles()\r\n const { name, lastName, avatarsArr, online } = useSelector(getState)\r\n const [modal, setModal] = useState\r\n
\r\n \r\n
\r\n Delete image
\r\n{`Are you sure you want to delete the Image?`}
\r\n \r\n \r\n\r\n {modal &&\r\n }\r\n setIndex(i)} selectedItem={index}>\r\n {avatarsArr.map(({ avatarUrl, updatedAt }) =>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n {online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}\r\n {avatarsArr.length > 1 &&\r\n
\r\n )\r\n}\r\n\r\nexport default SettingsPicture","import { useSelector } from 'react-redux';\r\nimport Paper from '@mui/material/Paper';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport PhoneIcon from '@mui/icons-material/Phone';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nimport { getNumber } from '../../../../../redux/authorization/selector'\r\nimport { copied} from '../../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n backgroundColor: '#ffffff', \r\n },\r\n})\r\n\r\n\r\nconst SettingsMenu = () => {\r\n const classes = useStyles()\r\n const number = useSelector(getNumber)\r\n\r\n return (\r\n \r\n 
\r\n
)}\r\n {timeStampEU(updatedAt)}
\r\n\r\n \r\n \r\n
}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default SettingsBar","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport { makeStyles, Typography } from '@material-ui/core'\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n paddingLeft: 10,\r\n height:'7vh',\r\n width: '100%',\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n backgroundColor: '#ffffff',\r\n },\r\n iconArrow: {\r\n '&:hover': {\r\n transform: 'rotate(360deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n },\r\n})\r\n\r\ninterface IToolBar {\r\n setSelectedIndex: React.Dispatch \r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nexport default EditList;","import { makeStyles} from '@material-ui/core'\r\nimport Avatar from '@mui/material/Avatar';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n position: 'absolute',\r\n content: '',\r\n top: '92vh',\r\n right:20,\r\n },\r\n avatarArrow: {\r\n cursor: 'pointer',\r\n '&:hover': {\r\n backgroundColor: 'rgb(62, 149, 231)'\r\n }\r\n },\r\n})\r\n\r\nconst SubmitBtn = ({handleSubmit}:{handleSubmit:() => void}) => {\r\n const classes = useStyles() \r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nexport default SubmitBtn;","import { makeStyles } from '@material-ui/core'\r\nimport { useState,useEffect } from 'react';\r\nimport { useSelector,useDispatch } from 'react-redux';\r\nimport ToolBar from './ToolBar'\r\nimport EditList from './EditList'\r\nimport SubmitBtn from './SubmitBtn';\r\nimport { getState } from '../../../../redux/authorization/selector'\r\nimport { asyncCurrentUser } from '../../../../redux/authorization/operations';\r\nimport { updateCredentials,updateUserAvatar } from '../../../../api-data';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n height: '100%',\r\n backgroundColor: '#f3f2f2',\r\n position:'relative'\r\n }\r\n})\r\n\r\ninterface IEditBar {\r\n setSelectedIndex: React.Dispatch\r\n {openBtn&&}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default EditBar","import { useState, useRef, useEffect } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { createPortal } from 'react-dom';\r\n\r\nimport Grid from '@mui/material/Grid'\r\nimport SmallMenuBar from './SmallMenuBar'\r\nimport SearchLists from './SearchLists';\r\nimport SearchBar from './SearchBar'\r\nimport ChatsList from './ChatsList'\r\nimport MenuBar from './MenuBar'\r\nimport ContactsList from './ContactsList'\r\nimport AddContact from './AddContact'\r\nimport SettingsBar from './SettingsBar';\r\nimport EditBar from './EditBar';\r\nimport { getState } from '../../../redux/authorization/selector'\r\n\r\nconst LeftBar = () => {\r\n const { sort,nightMode } = useSelector(getState)\r\n const [isSearch, setIsSearch] = useState\r\n
\r\n )\r\n}\r\n\r\nexport default DeleteModal","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport SearchIcon from '@mui/icons-material/Search';\r\nimport { makeStyles } from '@material-ui/core'\r\nimport { useDispatch } from 'react-redux';\r\nimport { useState } from 'react';\r\n\r\nimport MenuList from './MenuList'\r\nimport DeleteModal from './DeleteModal';\r\nimport { actionIsOpen } from '../../../../../redux/control/action'\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n marginLeft: 20,\r\n }, \r\n})\r\n\r\nconst Buttons = () => {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n const [modal,setModal] = useState\r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete chat
\r\n{`Are you sure you want to delete the\r\n chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default ArrowBack","import { makeStyles } from '@material-ui/core'\r\nimport React from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { useEffect } from 'react';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n position:'relative',\r\n },\r\n dropZone: {\r\n width: '100%',\r\n display: 'flex',\r\n position:'relative',\r\n height: 20,\r\n zIndex:10\r\n },\r\n})\r\n\r\ninterface IUploadFile {\r\n children:React.ReactNode,\r\n setFile: any,\r\n setValue: any,\r\n accept: string\r\n}\r\n \r\nconst UploadFile = ({children,setFile,setValue,accept}:IUploadFile) => {\r\n const classes = useStyles()\r\n const { getRootProps, getInputProps, acceptedFiles } = useDropzone({\r\n noDrag: true,\r\n accept\r\n });\r\n useEffect(() => {\r\n if (acceptedFiles.slice(-1)[0]) {\r\n setValue('')\r\n setFile(acceptedFiles.slice(-1)[0])\r\n }\r\n }, [setFile,setValue, acceptedFiles])\r\n \r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nexport default UploadFile","import MenuList from '@mui/material/MenuList';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport { makeStyles } from '@material-ui/core'\r\nimport UploadFile from './UploadFile'\r\n\r\nconst useStyles = makeStyles({\r\n list: {\r\n background: '#fdfdfd',\r\n },\r\n listIcon: {\r\n position: 'absolute',\r\n left:0\r\n },\r\n listText: {\r\n position: 'absolute',\r\n left:40\r\n }, \r\n})\r\n\r\ninterface IFilesMenu {\r\n setIsOpenMenu: any,\r\n setFile: any,\r\n setValue: any,\r\n setType: any\r\n}\r\nconst FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {\r\n const classes = useStyles()\r\n const handleClose = (type:string) => {\r\n setType(type)\r\n setIsOpenMenu(false)\r\n }\r\n \r\n return (\r\n \r\n \r\n
\r\n \r\n {isArrow&&} \r\n
\r\n )\r\n}\r\n\r\nexport default SendMessage","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { firstLetter,slicedWord,timeStampMessage,copied } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n)}; \r\n\r\nexport default MessageLeftText\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':undefined,\r\n border:selected?'#babdbc':undefined}}>\r\n copied('Message')} text={message}>\r\n \r\n \r\n handleClose('copy')} text={message}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
:\r\n \r\n {timeStampEU(createdAt)}\r\n handleDownload(url, fullType)}/>\r\n \r\n
\r\n \r\n
\r\n)};\r\n\r\nexport default MessagesLeftImage\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport AudioFileIcon from '@mui/icons-material/AudioFile';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport ReactAudioPlayer from 'react-audio-player';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\n\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n 
\r\n handleDownload(url, fullType)} className={classes.bntDownload} >\r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageLeftAudio\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport VideoFileIcon from '@mui/icons-material/VideoFile';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'\r\nconst { Player } = require('video-react')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n handleDownload(url, fullType)} className={classes.bntDownload} >\r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageLeftVideo\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,copied } from '../../../../../../helpers'\r\n\r\nconst FileViewer = require('react-file-viewer')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n \r\n handleDownload(url, fullType)} className={classes.bntDownload} >\r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n {read&&
\r\n)};\r\n\r\nexport default MessageLeftFile\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { firstLetter, slicedWord, timeStampMessage, copied } from '../../../../../../helpers'\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
}\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n \r\n \r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightText\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':undefined,\r\n border:selected?'#ced8d7':undefined}}>\r\n copied('Message')} text={message}>\r\n \r\n \r\n handleClose('copy')} text={message}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
:\r\n \r\n {timeStampEU(createdAt)}\r\n handleDownload(url, fullType)}/>\r\n \r\n
\r\n \r\n
\r\n)};\r\n\r\nexport default MessageRightImage\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport AudioFileIcon from '@mui/icons-material/AudioFile';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport ReactAudioPlayer from 'react-audio-player';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n handleDownload(url, fullType)} className={classes.bntDownload}>\r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightAudio\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport VideoFileIcon from '@mui/icons-material/VideoFile';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'\r\n\r\nconst { Player } = require('video-react')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n handleDownload(url, fullType)} className={classes.bntDownload}>\r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightVideo\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport FileDownloadIcon from '@mui/icons-material/FileDownload';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,copied } from '../../../../../../helpers'\r\n\r\nconst FileViewer = require('react-file-viewer')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n \r\n handleDownload(url, fullType)} className={classes.bntDownload}>\r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n {read&&
\r\n)};\r\n\r\nexport default MessageRightFile\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n marginBottom:15\r\n },\r\n wrapper: {\r\n textAlign: 'center',\r\n padding: '1px 10px 3px 10px',\r\n backgroundColor: 'rgba(104, 105, 104, 0.8)',\r\n color:'#ffffff',\r\n borderRadius: 7,\r\n fontSize: \".85em\",\r\n fontWeight:600,\r\n },\r\n});\r\n\r\ninterface IMessageTime {\r\n message:string,\r\n}\r\n\r\nconst MessageTime = ({ message }:IMessageTime) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
}\r\n handleContextMenu(e)}\r\n className={selected? classes.wrapperActive:classes.wrapper}>\r\n \r\n \r\n \r\n \r\n handleClose('copy')} text={url}>\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n {timeStampMessage(createdAt)}
\r\n \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n {message}\r\n
\r\n)};\r\n\r\nexport default MessageTime\r\n","import { createSelector } from 'reselect';\r\nimport { IState } from '../../../typescript/redux/interfaces'\r\n\r\nconst getMessages = (state: IState) => state.messages.messages;\r\nconst getState = (state: IState) => state.messages;\r\nconst getMessagesMemo = createSelector([getMessages], messages => messages);\r\n\r\nexport { getMessages,getState,getMessagesMemo };\r\n\r\n","import {\r\n actionGetMessagesSuccess,\r\n actionGetMessagesReject\r\n} from '../action';\r\nimport { getMessagesById } from '../../../api-data';\r\nimport { IMessagesState } from '../../../typescript/redux/messages/interfaces'\r\n\r\n\r\nconst asyncGetMessagesById= (id:string,cb:any) => async (dispatch:any) => {\r\n try {\r\n const data = await getMessagesById\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ChatBar","import { DatePicker } from \"@material-ui/pickers\";\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\ninterface IStaticDatePicker {\r\n disabled:boolean,\r\n date: Date,\r\n changeDate: React.Dispatch 0 ? classes.messagesScroll : classes.messagesEmpty}>\r\n
\r\n \r\n {messages.length > 0 ? messages.map(({ message, name, lastName, color,\r\n createdAt,number, type,fullType,_id }) => {\r\n let isTime\r\n if (!time) {\r\n isTime = true\r\n time = createdAt\r\n } else if (timeStampFilter(time) !== timeStampFilter(createdAt)) {\r\n time = createdAt\r\n isTime = true\r\n }\r\n const url = `${prodBaseURL}/${message}`\r\n if (number !== userNumber) {\r\n if (type === 'text') return (
\r\n \r\n {isTime&&}\r\n
)\r\n if (type === 'image') return (\r\n {isTime&&}\r\n
)\r\n if (type === 'audio') return (\r\n {isTime&&}\r\n
)\r\n if (type === 'video') return (\r\n {isTime&&}\r\n
)\r\n if (type) return (\r\n {isTime&&}\r\n
) \r\n } else {\r\n if (type === 'text') return (\r\n {isTime&&}\r\n
)\r\n if (type === 'image') return (\r\n {isTime&&}\r\n
)\r\n if (type === 'audio') return (\r\n {isTime&&}\r\n
)\r\n if (type === 'video') return (\r\n {isTime&&}\r\n
)\r\n if (type) return (\r\n {isTime&&}\r\n
) \r\n }\r\n }) : \r\n
\r\n )\r\n}\r\n\r\nexport default SearchList","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport { makeStyles, Typography } from '@material-ui/core'\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useState,useEffect } from 'react';\r\nimport { actionIsOpen } from '../../../../../../redux/control/action'\r\nimport { getContactsMemo } from '../../../../../../redux/contacts/selector'\r\nimport { getChat } from '../../../../../../redux/chat/selector'\r\nimport { asyncGetContacts,asyncAddContact } from '../../../../../../redux/contacts/operations';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n height:'7vh'\r\n },\r\n iconClose: {\r\n '&:hover': {\r\n transform: 'rotate(180deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n }, \r\n})\r\n\r\nconst ToolBar = () => {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n const contactsMemo = useSelector(getContactsMemo)\r\n const { number } = useSelector(getChat)\r\n const [isContact, setIsContact] = useState 0 ?classes.list:undefined}>\r\n {messages.length > 0 ? arr.length > 0 ?\r\n
\r\n - \r\n {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) =>\r\n
\r\n \r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n {message}\r\n \r\n {timeStampEU(createdAt)}\r\n }\r\n />\r\n \r\n \r\n
)}\r\n \r\n \r\n {avatarsArr.map(({avatarUrl,updatedAt}) => \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n {online === 'true'?'online':`last seen ${timeStampEU(online)}`}\r\n
\r\n )\r\n}\r\n\r\nexport default ProfilePicture","import { useSelector,useDispatch } from 'react-redux';\r\nimport Paper from '@mui/material/Paper';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport PhoneIcon from '@mui/icons-material/Phone';\r\nimport NotificationsIcon from '@mui/icons-material/Notifications';\r\nimport SortIcon from '@mui/icons-material/Sort';\r\nimport Switch from '@mui/material/Switch';\r\nimport Divider from '@mui/material/Divider';\r\nimport AlternateEmailIcon from '@mui/icons-material/AlternateEmail';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nimport { getChat } from '../../../../../../redux/chat/selector'\r\nimport { asyncGetChatById } from '../../../../../../redux/chat/operations';\r\nimport { muteChat,sortChat } from '../../../../../../api-data'\r\nimport { copied,firstLetter,slicedWord } from '../../../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n listIcon: {\r\n marginRight: 15,\r\n },\r\n})\r\n\r\nconst label = { inputProps: { 'aria-label': 'Switch demo' } };\r\n\r\nconst ProfileMenu = () => {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n const { number, mute,sort,companionId,originalName,originalLastName } = useSelector(getChat)\r\n const handleMute = () => muteChat(companionId)\r\n const handleSort = () => {\r\n sortChat(companionId)\r\n dispatch(asyncGetChatById(companionId))\r\n }\r\n const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}\r\n ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`\r\n return (\r\n \r\n \r\n
)}\r\n {timeStampEU(updatedAt)}
\r\n- \r\n {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>\r\n
\r\n \r\n \r\n \r\n handleDownload(`${prodBaseURL}/${message}`, fullType)}\r\n className={classes.folderIcon} fontSize='large' />\r\n \r\n \r\n \r\n
)}\r\n \r\n
:\r\n \r\n {timeStampEU(updatedAt)}\r\n handleDownload(url, fullType)}/>\r\n \r\n
\r\n - \r\n {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>\r\n
\r\n \r\n \r\n \r\n handleDownload(`${prodBaseURL}/${message}`, fullType)}\r\n className={classes.folderIcon} fontSize='large' />\r\n \r\n \r\n \r\n
)}\r\n - \r\n {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>\r\n
\r\n \r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n copied('Message')} text={message}>\r\n \r\n \r\n
)}\r\n - \r\n {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>\r\n
\r\n \r\n \r\n \r\n handleDownload(`${prodBaseURL}/${message}`, fullType)}\r\n className={classes.folderIcon} fontSize='large' />\r\n \r\n \r\n \r\n
)}\r\n \r\n
\r\n {isActive === 0 && handleIsActive(0)}>\r\n Files\r\n ___\r\n
\r\n handleIsActive(1)}>\r\n Media\r\n ___\r\n
\r\n handleIsActive(2)}>\r\n Text\r\n ___\r\n
\r\n handleIsActive(3)}>\r\n Audio\r\n ___\r\n
\r\n handleIsActive(4)}>\r\n Video\r\n ___\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default CredentialsList","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport { makeStyles, Typography } from '@material-ui/core'\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport { actionIsOpen } from '../../../../../../redux/control/action'\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n height:'7vh',\r\n width: '100%',\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n backgroundColor: '#ffffff',\r\n },\r\n iconArrow: {\r\n '&:hover': {\r\n transform: 'rotate(360deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n },\r\n})\r\n\r\nconst ToolBar = () => {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n {`${firstLetter(originalName)}${slicedWord(originalName, 15, 1)} \r\n ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`}\r\n \r\n original name \r\n
\r\n )\r\n};\r\n\r\nexport default EditList;","import { makeStyles } from '@material-ui/core'\r\nimport Button from '@mui/material/Button';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { actionIsOpen } from '../../../../../../redux/control/action'\r\nimport { removeContact } from '../../../../../../api-data';\r\nimport { TContact } from '../../../../../../typescript/redux/contacts/types';\r\nimport { slicedWord,firstLetter,prodBaseURL } from '../../../../../../helpers';\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n padding: '20px 10px 20px 10px',\r\n backgroundColor: '#ffffff',\r\n },\r\n modalDelete: {\r\n background: '#ffffff',\r\n position: 'absolute',\r\n content:'',\r\n width: '20%',\r\n height:'auto',\r\n left: '40%',\r\n bottom: '48.5%',\r\n borderRadius: 10,\r\n padding: 10,\r\n display: 'flex',\r\n flexDirection:'column'\r\n }, \r\n overlay: {\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n width: '100vw',\r\n height: '100vh',\r\n zIndex: 100,\r\n backgroundColor: 'rgba(104, 105, 104, 0.6)',\r\n overflowY: 'hidden',\r\n },\r\n titleWrapper: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n alignContent: 'center',\r\n alignItems:'center'\r\n },\r\n})\r\nconst Delete = ({isContact}:{isContact:TContact}) => {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n const {_id,avatarUrl,color,name,lastName} = isContact\r\n const [modal,setModal] = useState\r\n
\r\n - \r\n \r\n
\r\n
}\r\n \r\n );\r\n}\r\n\r\nexport default Delete","import { makeStyles} from '@material-ui/core'\r\nimport Avatar from '@mui/material/Avatar';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n position: 'absolute',\r\n top: '92vh',\r\n left: 20,\r\n }, \r\n avatarArrow: {\r\n cursor: 'pointer',\r\n '&:hover': {\r\n backgroundColor: 'rgb(62, 149, 231)'\r\n }\r\n }\r\n})\r\n\r\nconst SubmitBtn = ({handleSubmit}:{handleSubmit:() => void}) => {\r\n const classes = useStyles() \r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete contact
\r\n{`Are you sure you want to delete contact\r\n ${`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nexport default SubmitBtn;","import { makeStyles } from '@material-ui/core'\r\nimport { useState,useEffect } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport ToolBar from './ToolBar'\r\nimport EditList from './EditList'\r\nimport Delete from './Delete'\r\nimport SubmitBtn from './SubmitBtn';\r\nimport { getContactsMemo } from '../../../../../redux/contacts/selector'\r\nimport { getChat } from '../../../../../redux/chat/selector'\r\nimport { muteChat,updateContact } from '../../../../../api-data';\r\n\r\nconst useStyles = makeStyles({\r\n editBar: {\r\n backgroundColor: '#f3f2f2',\r\n height: '100%',\r\n position:'relative'\r\n }\r\n})\r\n\r\nconst EditBar= () => {\r\n const classes = useStyles()\r\n const contactsMemo = useSelector(getContactsMemo)\r\n const chat = useSelector(getChat)\r\n const [isContact, setIsContact] = useState\r\n {openBtn&&}\r\n
\r\n )\r\n}\r\n\r\nexport default EditBar","import { useSelector } from 'react-redux'\r\nimport SearchList from './SearchList'\r\nimport CredentialsList from './CredentialsList'\r\nimport EditBar from './EditBar'\r\nimport { getIsOpen } from '../../../../redux/control/selector'\r\n\r\n\r\nconst RightListsAndBars = () => {\r\n const isOpen = useSelector(getIsOpen)\r\n return (\r\n <>\r\n {isOpen === 'credentials' &&