import React, { useEffect, useRef } from "react"; import sendIcon from "../../assets/img/vuesax-linear-direct-left.svg"; import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jpg"; import avatar5 from "../../assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg"; import { BsCheck2All, BsTelephone, } from "react-icons/bs"; import { connect } from "react-redux"; import { useState } from "react"; import avatar1 from "../../assets/img/avatar/alexander-hipp-iEEBWgY_6lA-unsplash.jpg"; import avatar2 from "../../assets/img/avatar/julian-wan-WNoLnJo7tS8-unsplash.jpg"; import avatar3 from "../../assets/img/avatar/alex-suprun-bYODySpLIhE-unsplash.jpg"; import avatar4 from "../../assets/img/avatar/alex-suprun-ZHvM3XIOHoE-unsplash.jpg"; import { Link, useNavigate } from "react-router-dom"; const ChatPage = ({ messages, user, contact, isMobile }) => { const navigate = useNavigate(); const messagesEndRef = useRef(null) const [contacts] = useState([ { id: 1, firstName: "فرشید", lastName: "وکیلی", lastMessage: "سلام فرشید جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 2, messageSituation: 0, img: avatar1, time: "11:11", }, { id: 2, firstName: "امیر", lastName: "ناظمی", lastMessage: "سلام امیر جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 1, messageSituation: 0, img: avatar2, time: "12:11", }, { id: 3, firstName: "آراد", lastName: "طاهری", lastMessage: "سلام آراد جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 0, messageSituation: 1, img: avatar3, time: "13:11", }, { id: 4, firstName: "آرتا", lastName: "الماسی", lastMessage: "سلام آرتا جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 0, messageSituation: 2, img: avatar4, time: "10:11", }, { id: 5, firstName: "آروین", lastName: "اشرفی", lastMessage: "سلام آرمین جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 0, messageSituation: 0, img: avatar5, time: "16:11", }, { id: 6, firstName: "پارسا", lastName: "کاظمی", lastMessage: "سلام پارسا جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 0, messageSituation: 1, img: avatar1, time: "17:11", }, { id: 7, firstName: "سارا", lastName: "منتظری", lastMessage: "سلام سارا جان لطفا با من تماس بگیر کار خیلی واجبی دارم", newMessages: 2, messageSituation: 0, img: avatar6, time: "18:11", }, ]); //textareaHanler-------------------- useEffect(() => { messagesEndRef.current.scrollIntoView({behavior: 'smooth'}) }, []) const textareaHanler=(e)=>{ e.target.style.height = `3rem`; let scHeight = e.target.scrollHeight; e.target.style.height = `${scHeight}px`; } return(isMobile ?
{contact.name}
{ messages.map((message) => (
{message.userId == contact.id && }

{message.value}

{ message.userId == user.id && }

{message.sendTime}

)) }
sendIcon
: (
امیر ناظمی
{ messages.map((message) => (
{message.userId == contact.id && }

{message.value}

{ message.userId == user.id && }

{message.sendTime}

)) }
sendIcon
{/* ----contacts------------- */}
{contacts.map((item, index) => (
navigate('/messages/' + item.id)} key={index} className="Messages-contacts-item w-full cursor-pointer py-4 border-b border-color7 flex items-center justify-between flex-row-reverse" >
avatar
{item.firstName} {item.lastName}
{item.lastMessage}
{item.time}
{item.newMessages !== 0 && (
{item.newMessages}
)} {item.messageSituation !== 0 && (
)}
))}
) ) } ChatPage.defaultProps = { contact: { name: 'امیر محمد محمدی اصل مطلق فرد شیرازی', avatar: avatar5, id: 1 }, user: { name: '', avatar: avatar6, id: 2, }, messages: [ { value: 'وقتی ثروت‌ های بزرگ به دست برخی مردم می‌افتد در پرتو آن نیرومند می‌شوند و در سایهٔ نیرومندی و ثروت خیالکنند که می‌توانند در خارج از وطن خود زندگی نمایند و خوشبخت و سرافراز باشند ولی به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد و بس', status: 1, sendTime: '13:41', userId: 2, }, { value: 'وقتی ثروت‌ های بزرگ به دست برخی مردم می‌افتد در پرتو آن نیرومند می‌شوند و در سایهٔ نیرومندی و ثروت خیال می‌ کنند که می‌توانند ', status: null, sendTime: '13:42', userId: 1, }, { value: 'سلام', status: 1, sendTime: '13:41', userId: 2, }, { value: 'به به سلام', status: null, sendTime: '13:42', userId: 1, }, { value: 'خوبی؟', status: 1, sendTime: '13:41', userId: 2, }, { value: 'خوبم تو چطوری؟', status: null, sendTime: '13:42', userId: 1, }, { value: 'چیکارا میکنی؟', status: 1, sendTime: '13:41', userId: 2, }, { value: 'شدم بازیچه ی فرانت کاری که میخواد از صفحه چتی که زده تست بگیره', status: null, sendTime: '13:42', userId: 1, }, { value: 'عالیه', status: 1, sendTime: '13:41', userId: 2, }, ] } const mapStateToProps = (state) => ({ isMobile: state.publicApi.isMobile, cart: state.userProduct.list }); const mapDispatchToProps = { }; export default connect(mapStateToProps, mapDispatchToProps)(ChatPage);