import { Avatar} from "@mui/material"; import { memo, useEffect } from "react"; import { connect } from "react-redux"; import { actionSetInputMessageValue } from "../../actions/actionsForChats"; import { backendURL } from "../../helpers/gql"; import { TimeLastMessage } from "../Time/Time"; import { ChatListItemLink, ChatListItemContent, ChatListItemTitle, ChatListItemWrapper, ChatListLastMessage, ChatListItemHeader, ChatListItemFooter, MessageDraftChatListItem } from "./ChatListItem.style"; import OwnerStar from "./icons8_star.png"; import OnwerStarActive from "./icons8_star_white.png"; const ChatListItem = ({chat, handleSetId, isActive, currUserId, setDraftValue, clearInput}) => { const inputValue = chat?.draft?.mainInputValue?.value || ''; const draftValue = chat?.draft?.draftValue?.value; let timer; function showDraftMessage(){ timer = setTimeout(() => { setDraftValue(chat._id, inputValue, 'draftValue') }, [10000]) } useEffect(() => { showDraftMessage() return (() => { clearTimeout(timer); }) },[inputValue]) return ( {handleSetId(chat._id); clearInput()}}> {chat.title} {currUserId === chat?.owner?._id && ownerStar} {!draftValue ?
{chat.lastMessage ? {(currUserId == chat.lastMessage?.owner._id) ? 'You' : chat.lastMessage?.owner.nick}: {chat.lastMessage?.text?.replace(/ /g, "\u00a0") || ''} :
}
: Draft:{draftValue?.replace(/ /g, "\u00a0") || ''}}
) } export default connect(state => ({currUserId: state.auth?.payload?.sub?.id}), { setDraftValue: actionSetInputMessageValue})(memo(ChatListItem));