Desktop Chat Page Done

main
Pedram Keshavarzi 2 years ago
parent d2ceb5007e
commit 194955625f
  1. 196
      src/view/chatPage/index.js
  2. 12
      src/view/messages/Messages.js

@ -4,6 +4,15 @@ import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jp
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,
@ -11,7 +20,83 @@ const ChatPage = ({
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'})
@ -21,7 +106,7 @@ const ChatPage = ({
let scHeight = e.target.scrollHeight;
e.target.style.height = `${scHeight}px`;
}
return(isMobile &&
return(isMobile ?
<div className="w-full flex flex-col items-center py-20">
<div className="bg-gray-100 w-11/12 text-right p-3 text-blue3A text-sm">
{contact.name}
@ -69,7 +154,114 @@ const ChatPage = ({
className=" bg-transparent"
/>
</div>
</div>
</div> :
(
<div className="Messages w-[93.5%] h-[91.5%] absolute top-[8.5%] z-0 left-0 bg-color5 flex border-t border-color7">
<div className="Messages-main-box w-3/4 h-full relative">
<div className="Messages-main-box-header w-full h-[8%] bg-white flex items-center justify-between px-6 flex-row-reverse">
<div className="Messages-main-box-header-name">امیر ناظمی</div>
</div>
<div className="Messages-main-box-chat-box w-full h-[84%] flex items-ceter flex-col overflow-hidden overflow-scroll overflow-x-hidden justify-between px-4">
{
messages.map((message) => (
<div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}>
{message.userId == contact.id && <img src={message.userId == contact.id ? contact.avatar : user.avatar} className={`w-12 h-12 rounded-full ${message.userId == user.id ? 'ml-2' : 'mr-2'}`}/>}
<div className={`${message.userId == user.id ? 'bg-blue-200 text-gray-500 text-sm rounded-tr-none' : 'bg-blue-400 text-gray-100 text-sm rounded-tl-none'} p-3 rounded-xl text-right flex flex-col `}>
<p>{message.value}</p>
<div className={` mt-2 w-full flex items-center ${message.userId == user.id ?'justify-end' : 'justify-start'} text-xs`}>
{
message.userId == user.id &&
<BsCheck2All
className="text-lg "
style={
{ color: "#979797" }
}
/>
}
<p>{message.sendTime}</p>
</div>
</div>
</div>
))
}
<div ref={messagesEndRef} />
</div>
<div className="Messages-main-box-footer w-full py-2 bg-white flex items-center justify-between flex-row-reverse absolute bottom-0 ">
<textarea
name="Messages-main-box-footer-textarea"
id="Messages-main-box-footer-textarea"
className="Messages-main-box-footer-textarea w-[93%] h-12 max-h-72 pr-4 outline-0 pt-2"
style={{ resize: "none", direction: "rtl" }}
placeholder="پیام..."
onKeyUp={(e) => textareaHanler(e)}
></textarea>
<img
src={sendIcon}
alt="sendIcon"
className="absolute w-8 bottom-[25%] left-24"
/>
</div>
</div>
{/* ----contacts------------- */}
<div className="Messages-contacts w-1/4 h-full bg-white px-2 max-h-full overflow-y-auto">
{contacts.map((item, index) => (
<div
onClick={() => 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"
>
<div className="Messages-contacts-item-img-container w-14 h-14 rounded-full overflow-hidden flex items-ceter justify-center">
<img src={item.img} alt="avatar" className="w-full" />
</div>
<div className="Messages-contacts-item-info w-[68%]">
<div className="Messages-contacts-item-info-name w-full text-right">
{item.firstName} {item.lastName}
</div>
<div
className="Messages-contacts-item-info-last-message w-full text-right text-xs overflow-hidden text-ellipsis whitespace-nowrap mt-2"
style={{ color: "#8D8D8D", direction: "rtl" }}
>
{item.lastMessage}
</div>
</div>
<div className="Messages-contacts-item-details w-[9%] min-h-[57px] ">
<div
className="Messages-contacts-item-details-time w-full text-sm text-left mb-4"
style={{ color: "#A5A5A5" }}
>
{item.time}
</div>
{item.newMessages !== 0 && (
<div className="Messages-contacts-item-details-newMessages text-sm w-[70%] aspect-square flex items-center justify-center rounded-full bg-color2 text-white ">
{item.newMessages}
</div>
)}
{item.messageSituation !== 0 && (
<div className="Messages-contacts-item-details-messageSituation">
<BsCheck2All
className="text-lg "
style={
item.messageSituation === 1
? { color: "#979797" }
: item.messageSituation === 2
? { color: "#267DE9" }
: null
}
/>
</div>
)}
</div>
</div>
))}
</div>
</div>
)
)
}
ChatPage.defaultProps = {

@ -8,10 +8,11 @@ import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jp
import sendIcon from "../../assets/img/vuesax-linear-direct-left.svg";
import { connect } from "react-redux";
import { BsCheck2All, BsTelephone, } from "react-icons/bs";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
const Messages=({isMobile})=>{
const navigate = useNavigate();
const [contacts] = useState([
{
id: 1,
@ -150,9 +151,9 @@ const Messages=({isMobile})=>{
:
<div className="Messages w-[93.5%] h-[91.5%] absolute top-[8.5%] z-0 left-0 bg-color5 flex border-t border-color7">
<div className="Messages-main-box w-3/4 h-full relative">
<div className="Messages-main-box-header w-full h-[8%] bg-white flex items-center justify-between px-6 flex-row-reverse">
{/* <div className="Messages-main-box-header w-full h-[8%] bg-white flex items-center justify-between px-6 flex-row-reverse">
<div className="Messages-main-box-header-name">امیر ناظمی</div>
{/* <BsTelephone className="text-2xl" /> */}
</div>
<div className="Messages-main-box-chat-box w-full h-[84%] flex items-ceter justify-between px-4"></div>
<div className="Messages-main-box-footer w-full py-2 bg-white flex items-center justify-between flex-row-reverse absolute bottom-0 ">
@ -169,14 +170,15 @@ const Messages=({isMobile})=>{
alt="sendIcon"
className="absolute w-8 bottom-[25%] left-24"
/>
</div>
</div> */}
</div>
{/* ----contacts------------- */}
<div className="Messages-contacts w-1/4 h-full bg-white px-2 max-h-full overflow-y-auto">
{contacts.map((item, index) => (
<div
onClick={() => navigate('/messages/' + item.id)}
key={index}
className="Messages-contacts-item w-full py-4 border-b border-color7 flex items-center justify-between flex-row-reverse"
className="Messages-contacts-item w-full cursor-pointer py-4 border-b border-color7 flex items-center justify-between flex-row-reverse"
>
<div className="Messages-contacts-item-img-container w-14 h-14 rounded-full overflow-hidden flex items-ceter justify-center">
<img src={item.img} alt="avatar" className="w-full" />

Loading…
Cancel
Save