123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698 |
- import { makeStyles } from "@material-ui/core/styles";
- import { useState, useEffect, useCallback, useMemo } from "react";
- import { useSelector,useDispatch } from "react-redux";
- import ArrowBack from "./ArrowBack";
- import SendMessage from "./SendMessage";
- import UnpinBar from "./UnpinBar";
- import MessageLeftText from './Messages/MessageLeftText'
- import MessageLeftReply from "./Messages/MessageLeftReply";
- import MessageLeftForward from "./Messages/MessageLeftForward";
- import MessageLeftImage from './Messages/MessageLeftImage'
- import MessageLeftAudio from './Messages/MessageLeftAudio'
- import MessageLeftVideo from './Messages/MessageLeftVideo'
- import MessageLeftFile from "./Messages/MessageLeftFile";
- import MessageRightText from './Messages/MessageRightText'
- import MessageRightReply from "./Messages/MessageRightReply";
- import MessageRightForward from "./Messages/MessageRightForward";
- import MessageRightImage from './Messages/MessageRightImage'
- import MessageRightAudio from './Messages/MessageRightAudio'
- import MessageRightVideo from './Messages/MessageRightVideo'
- import MessageRightFile from "./Messages/MessageRightFile";
- import MessageDivider from "./Messages/MessageDivider";
- import AlertInfo from "../../../reusableComponents/AlertInfo";
- import ForwardSearchList from "./ForwardSearchList";
- import { getMessagesMemo } from '../../../../redux/messages/selector'
- import { getAuthorizationState } from '../../../../redux/authorization/selector'
- import { getChat } from '../../../../redux/chat/selector'
- import { getScrollChat } from '../../../../redux/control/selector'
- import { actionScrollChat,actionOpenPinned,actionRightIsOpen } from '../../../../redux/control/action'
- import { asyncGetMessagesById } from '../../../../redux/messages/operations'
- import { asyncGetChatById,asyncStartChatById } from "../../../../redux/chat/operations";
- import { seenChat } from "../../../../api-data";
- import { TPinnedMessages } from "../../../../typescript/redux/pinnedMessages/types";
- import { TMessage } from "../../../../typescript/redux/allMessages/types";
- import { timeStampFilter,prodAwsS3,refreshAppTime } from "../../../../helpers";
- const debounce = require('lodash.debounce');
- const useStyles = makeStyles({
- container: {
- height: '93vh',
- width: "100%",
- display: "flex",
- alignItems: "center",
- alignContent:"center",
- flexDirection: "column",
- position: "relative",
- },
- messagesScroll: {
- paddingTop: 30,
- overflowY: "scroll",
- maxHeight: '83vh',
- width: "100%",
- display: "flex",
- justifyContent: 'center',
- '&::-webkit-scrollbar': {
- width: '0.4em'
- },
- '&::-webkit-scrollbar-track': {
- boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
- webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
- backgroundColor: '#eceeec',
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: '#ccc8c8',
- },
- "&::-webkit-scrollbar-thumb:focus": {
- backgroundColor: "#959595",
- },
- "&::-webkit-scrollbar-thumb:active": {
- backgroundColor: "#959595",
- },
- },
- messagesEmpty: {
- overflowY: "hidden",
- width: "100%",
- display: "flex",
- justifyContent: 'center',
- paddingTop: 30,
- },
- messagesBody: {
- width: "60%",
- },
- });
- interface IChatBar {
- chatDivRef: any | null,
- selectedArr: string[] | [],
- setSelectedArr: React.Dispatch<React.SetStateAction<string[] | []>>,
- isSomeSelected: boolean,
- setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
- openPinned: boolean,
- pinnedMessagesMemo: TPinnedMessages,
- handleUnpinAll: () => void,
- }
- const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll}:IChatBar) => {
- const classes = useStyles();
- const dispatch = useDispatch()
- const messagesMemo = useSelector(getMessagesMemo)
- const { number:userNumber,nightMode,silentMode} = useSelector(getAuthorizationState)
- const { companionId,total,seen,mute,seenCompanion,number:chatNumber } = useSelector(getChat)
- const scrollChat = useSelector(getScrollChat)
- const [isArrow, setIsArrow] = useState<boolean>(false)
- const [isNew, setIsNew] = useState<{ new: number, mute: boolean }>({ new: 0, mute: false })
- const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
- const [isForward, setIsForward] = useState<TMessage | undefined>(undefined)
- const [isEdit, setIsEdit] = useState<TMessage | undefined>(undefined)
- const [modalForward, setModalForward] = useState<boolean>(false)
- let time: any
- let tongue: any
- let unread: any
- const getSeconds = (createdAt:string) => Math.round(new Date(createdAt).getTime()/ 1000)
- const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)
- const handleSelected = (_id: string) => {
- !isSomeSelected&&setIsSomeSelected(true)
- if (selectedArr.some((el: string) => el === _id))
- setSelectedArr(selectedArr.filter((el:string) => el !== _id))
- else setSelectedArr([...selectedArr,_id])
- }
- const handleReply = (_id: string) => {
- openPinned && dispatch(actionOpenPinned(false))
- isEdit&&setIsEdit(undefined)
- setIsReply(renderArr.find((el) => el._id ===_id))
- }
-
- const handleForward = (_id: string) => {
- openPinned && dispatch(actionOpenPinned(false))
- isReply && setIsReply(undefined)
- isEdit&&setIsEdit(undefined)
- setIsForward(renderArr.find((el) => el._id === _id))
- setModalForward(true)
- }
- const handleEdit = (_id: string) => {
- openPinned && dispatch(actionOpenPinned(false))
- isReply && setIsReply(undefined)
- setIsEdit(renderArr.find((el) => el._id ===_id))
- }
-
- const handleScrollTo = useCallback(() => {
- chatDivRef.current&&chatDivRef.current.scrollTo({
- top: chatDivRef.current.scrollHeight,
- behavior: 'smooth'
- })
- },[chatDivRef])
- const handleScroll = useCallback(({ target:{scrollHeight,scrollTop,clientHeight}}: any) => {
- const different = scrollHeight - Math.floor(scrollTop)
- const reached = different - clientHeight
- if (total !== seen&&reached < 10 && !openPinned) seenChat(companionId)
- setIsArrow(different === clientHeight ? false : true)
- }, [total,seen, companionId,openPinned])
-
- const debouncedHandleScroll = debounce(handleScroll, 300)
- const renderArr = useMemo(() => {
- return !openPinned ? messagesMemo : pinnedMessagesMemo
- }, [messagesMemo, pinnedMessagesMemo, openPinned])
-
- const handleScrollToTheMessage = (_id:string) => {
- const childNodes = chatDivRef.current.childNodes[0].childNodes
- let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
- if (toScrollNode) {
- toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
- toScrollNode.style.backgroundColor = 'rgba(70, 70, 70, 0.4)'
- toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
- toScrollNode.scrollIntoView({ behavior: 'smooth' })
- setTimeout(() => {
- toScrollNode.style.backgroundColor = 'unset'
- toScrollNode.style.boxShadow = 'unset'
- }, 2000)
- }
- }
- const handleScrollToTheChat = (companionIdForwardToAndFrom:string,oldId:string) => {
- if (companionId === companionIdForwardToAndFrom) return handleScrollToTheMessage(oldId)
- dispatch(actionRightIsOpen(''))
- dispatch(actionOpenPinned(false))
- dispatch(asyncStartChatById(companionIdForwardToAndFrom))
- setTimeout(() => handleScrollToTheMessage(oldId), 2000)
- }
-
- useEffect(() => {
- if (scrollChat) {
- dispatch(asyncGetMessagesById(companionId, handleScrollTo))
- dispatch(actionScrollChat(false))
- }
- }, [dispatch,handleScrollTo, scrollChat, companionId])
-
- useEffect(() => {
- const handleReset = () => {
- dispatch(asyncGetChatById(companionId))
- dispatch(asyncGetMessagesById(companionId, null))
- }
- handleReset()
- const idInterval = setInterval(handleReset, refreshAppTime);
- return () => clearInterval(idInterval);
- }, [dispatch, companionId]);
-
- useEffect(() => {
- setIsNew({ new:total-seen,mute})
- }, [total, seen, mute]);
-
- useEffect(() => {
- if (chatDivRef.current&&openPinned) {
- const { scrollHeight, clientHeight } = chatDivRef.current
- if (scrollHeight === clientHeight && isArrow) setIsArrow(false)
- }
- }, [chatDivRef,openPinned,pinnedMessagesMemo.length, isArrow]);
- useEffect(() => {
- const handleReset = () => {
- if (chatDivRef.current&&!openPinned) {
- const { scrollHeight, clientHeight } = chatDivRef.current
- if (total !== seen && scrollHeight === clientHeight) seenChat(companionId)
- }
- }
- const idInterval = setInterval(handleReset, refreshAppTime);
- return () => clearInterval(idInterval);
- }, [total, seen, chatDivRef, companionId, openPinned]);
-
- return (
- <div className={classes.container} >
- <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo} openPinned={openPinned}/>
- {isForward && modalForward && <ForwardSearchList setModalForward={setModalForward}
- setIsForward={setIsForward} companionId={companionId}/>}
- <div id={companionId} ref={chatDivRef} onScroll={debouncedHandleScroll}
- className={messagesMemo.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
- <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},i) => {
- const watched = seenCompanion - (i + 1) < 0 ? false : true
- let isUnread
- let isTime
- let isTongue = false
- const nextTongue = renderArr[i + 1]
- if (!unread && chatNumber === number&& seen - (i + 1) < 0) {
- isUnread = true
- unread = true
- }
- if (!time) {
- isTime = true
- time = createdAt
- } else if (timeStampFilter(time) !== timeStampFilter(createdAt)) {
- time = createdAt
- isTime = true
- }
- if (!tongue&&nextTongue&&nextTongue.number === number) {
- if (getSeconds(nextTongue.createdAt) - getSeconds(createdAt) < 600) {
- isTongue = false
- } else {
- isTongue = true
- }
- tongue = number
- } else if (!tongue&&nextTongue&&nextTongue.number !== number) {
- isTongue = true
- tongue = null
- } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number === number) {
- if (getSeconds(nextTongue.createdAt) - getSeconds(createdAt) < 600) {
- isTongue = false
- } else {
- isTongue = true
- }
- tongue = number
- } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number !== number) {
- isTongue = true
- tongue = null
- } else if (tongue&&!nextTongue&&tongue === number) {
- isTongue = true
- tongue = null
- } else if (tongue&&!nextTongue&&tongue !== number) {
- isTongue = false
- tongue = number
- }
- if(renderArr.length-1 === i) isTongue = true
- if (nextTongue && timeStampFilter(nextTongue.createdAt) !== timeStampFilter(createdAt)) {
- isTongue = true
- }
- const url = `${prodAwsS3}/${message}`
- const urlForward = `${prodAwsS3}/${forwardMessage}`
- const urlReply = `${prodAwsS3}/${replyMessage}`
- if (number !== userNumber) {
- if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftText
- message={message}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- createdAt={createdAt}
- name={name}
- lastName={lastName}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- /></div>)
- if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftForward
- url={urlForward}
- companionIdForwardToAndFrom={companionIdForwardToAndFrom}
- oldId={oldId}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- forwardName={forwardName}
- forwardLastName={forwardLastName}
- forwardMessage={forwardMessage}
- forwardCaption={forwardCaption}
- message={message}
- createdAt={createdAt}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- fullType={fullType}
- handleScrollToTheChat={handleScrollToTheChat}
- /></div>)
- if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftReply
- url={urlReply}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- replyMessage={replyMessage}
- message={message}
- createdAt={createdAt}
- name={name}
- lastName={lastName}
- replyName={replyName}
- replyLastName={replyLastName}
- replyCaption={replyCaption}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- fullType={fullType}
- handleScrollToTheMessage={handleScrollToTheMessage}
- oldId={oldId}
- /></div>)
- if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftImage
- url={url}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- createdAt={createdAt}
- fullType={fullType}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- name={name}
- lastName={lastName}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- /></div>)
- if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftAudio
- url={url}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- createdAt={createdAt}
- fullType={fullType}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- /></div>)
- if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftVideo
- url={url}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- createdAt={createdAt}
- fullType={fullType}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- /></div>)
- if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageLeftFile
- url={url}
- tongue={isTongue}
- watched={!unread}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- createdAt={createdAt}
- type={type}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- /></div>)
- } else {
- if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightText
- message={message}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- createdAt={createdAt}
- name={name}
- lastName={lastName}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- /></div>)
- if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightForward
- url={urlForward}
- oldId={oldId}
- companionIdForwardToAndFrom={companionIdForwardToAndFrom}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- forwardName={forwardName}
- forwardLastName={forwardLastName}
- forwardMessage={forwardMessage}
- forwardCaption={forwardCaption}
- message={message}
- createdAt={createdAt}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- fullType={fullType}
- handleScrollToTheChat={handleScrollToTheChat}
- /></div>)
- if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightReply
- url={urlReply}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- replyMessage={replyMessage}
- message={message}
- createdAt={createdAt}
- name={name}
- lastName={lastName}
- replyName={replyName}
- replyLastName={replyLastName}
- replyCaption={replyCaption}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- fullType={fullType}
- handleScrollToTheMessage={handleScrollToTheMessage}
- oldId={oldId}
- /></div>)
- if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightImage
- url={url}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- createdAt={createdAt}
- fullType={fullType}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- name={name}
- lastName={lastName}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- /></div>)
- if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightAudio
- url={url}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- createdAt={createdAt}
- fullType={fullType}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- /></div>)
- if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightVideo
- url={url}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- createdAt={createdAt}
- fullType={fullType}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- /></div>)
- if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
- {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
- {isUnread&&<MessageDivider message='Unread Messages'/>}
- <MessageRightFile
- url={url}
- tongue={isTongue}
- watched={watched}
- edited={edited}
- avatarUrl={avatarUrl}
- color={color}
- name={name}
- lastName={lastName}
- createdAt={createdAt}
- type={type}
- caption={caption}
- emoji={emoji}
- emojiCompanion={emojiCompanion}
- pinned={pinned}
- isSomeSelected={isSomeSelected}
- isSelected={isSelected}
- handleSelected={handleSelected}
- _id={_id}
- nightMode={nightMode}
- handleReply={handleReply}
- handleForward={handleForward}
- handleEdit={handleEdit}
- /></div>)
- }
- }) : <AlertInfo name='You do not have messages yet!' />}
- </div>
- </div>
- {!openPinned && !isSomeSelected && <SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply}
- isForward={isForward} setIsForward={setIsForward}
- isEdit={isEdit} setIsEdit={setIsEdit}
- modalForward={modalForward} handleScrollToTheMessage={handleScrollToTheMessage}/>}
- {openPinned&&!isSomeSelected&&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
- </div>
- );
- }
- export default ChatBar
|