From 194955625f3b7c9ade98b3eac9ef4433a973094b Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Wed, 6 Apr 2022 15:17:44 +0430 Subject: [PATCH] Desktop Chat Page Done --- src/view/chatPage/index.js | 196 +++++++++++++++++++++++++++++++++- src/view/messages/Messages.js | 12 ++- 2 files changed, 201 insertions(+), 7 deletions(-) diff --git a/src/view/chatPage/index.js b/src/view/chatPage/index.js index d98919d..908022c 100644 --- a/src/view/chatPage/index.js +++ b/src/view/chatPage/index.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 ?
{contact.name} @@ -69,7 +154,114 @@ const ChatPage = ({ className=" bg-transparent" />
-
+ : + ( +
+
+
+
امیر ناظمی
+ +
+
+ { + 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 = { diff --git a/src/view/messages/Messages.js b/src/view/messages/Messages.js index 7fbd5c3..8a59894 100644 --- a/src/view/messages/Messages.js +++ b/src/view/messages/Messages.js @@ -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})=>{ :
-
+ {/*
امیر ناظمی
- {/* */} +
@@ -169,14 +170,15 @@ const Messages=({isMobile})=>{ alt="sendIcon" className="absolute w-8 bottom-[25%] left-24" /> -
+
*/}
{/* ----contacts------------- */}
{contacts.map((item, index) => (
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" >
avatar