pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Desktop Chat Page Done

Browse Source
main
Pedram Keshavarzi 3 years ago
parent d2ceb5007e
commit 194955625f
2 changed files with 201 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 196
      src/view/chatPage/index.js
  2. 12
      src/view/messages/Messages.js

196
src/view/chatPage/index.js
Unescape View File

@ -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 avatar5 from "../../assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
import { BsCheck2All, BsTelephone, } from "react-icons/bs"; import { BsCheck2All, BsTelephone, } from "react-icons/bs";
import { connect } from "react-redux"; 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 = ({ const ChatPage = ({
messages, messages,
@ -11,7 +20,83 @@ const ChatPage = ({
contact, contact,
isMobile isMobile
}) => { }) => {
const navigate = useNavigate();
const messagesEndRef = useRef(null) 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(() => { useEffect(() => {
messagesEndRef.current.scrollIntoView({behavior: 'smooth'}) messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
@ -21,7 +106,7 @@ const ChatPage = ({
let scHeight = e.target.scrollHeight; let scHeight = e.target.scrollHeight;
e.target.style.height = `${scHeight}px`; e.target.style.height = `${scHeight}px`;
} }
return(isMobile && return(isMobile ?
<div className="w-full flex flex-col items-center py-20"> <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"> <div className="bg-gray-100 w-11/12 text-right p-3 text-blue3A text-sm">
{contact.name} {contact.name}
@ -69,7 +154,114 @@ const ChatPage = ({
className=" bg-transparent" className=" bg-transparent"
/> />
</div> </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 = { ChatPage.defaultProps = {

12
src/view/messages/Messages.js
Unescape View File

@ -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 sendIcon from "../../assets/img/vuesax-linear-direct-left.svg";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { BsCheck2All, BsTelephone, } from "react-icons/bs"; import { BsCheck2All, BsTelephone, } from "react-icons/bs";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
const Messages=({isMobile})=>{ const Messages=({isMobile})=>{
const navigate = useNavigate();
const [contacts] = useState([ const [contacts] = useState([
{ {
id: 1, 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 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 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> <div className="Messages-main-box-header-name">امیر ناظمی</div>
{/* <BsTelephone className="text-2xl" /> */}
</div> </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-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 "> <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" alt="sendIcon"
className="absolute w-8 bottom-[25%] left-24" className="absolute w-8 bottom-[25%] left-24"
/> />
</div> </div> */}
</div> </div>
{/* ----contacts------------- */} {/* ----contacts------------- */}
<div className="Messages-contacts w-1/4 h-full bg-white px-2 max-h-full overflow-y-auto"> <div className="Messages-contacts w-1/4 h-full bg-white px-2 max-h-full overflow-y-auto">
{contacts.map((item, index) => ( {contacts.map((item, index) => (
<div <div
onClick={() => navigate('/messages/' + item.id)}
key={index} 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"> <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" /> <img src={item.img} alt="avatar" className="w-full" />

Write Preview
Loading…
Cancel
Save