chat page Sending Message And Scroll bar done

main
Pedram Keshavarzi 2 years ago
parent ddff6172a9
commit 736d0d4dbf
  1. 3
      src/App.css
  2. 67
      src/view/chatPage/index.js

@ -12,6 +12,9 @@ input::-webkit-inner-spin-button {
.rtl{ .rtl{
direction: rtl; direction: rtl;
} }
.ltr{
direction: ltr;
}
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;

@ -22,6 +22,8 @@ const ChatPage = ({
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const messagesEndRef = useRef(null) const messagesEndRef = useRef(null)
const [thisMessages, setMessages] = useState(messages);
const [inputVal, setInpuVal] = useState('')
const [contacts] = useState([ const [contacts] = useState([
{ {
id: 1, id: 1,
@ -101,10 +103,14 @@ const ChatPage = ({
useEffect(() => { useEffect(() => {
messagesEndRef.current.scrollIntoView({behavior: 'smooth'}) messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
}, []) }, [])
useEffect(() => {
messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
}, [thisMessages])
const textareaHanler=(e)=>{ const textareaHanler=(e)=>{
e.target.style.height = `3rem`; e.target.style.height = `3rem`;
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">
@ -113,7 +119,7 @@ const ChatPage = ({
</div> </div>
{ {
messages.map((message) => ( thisMessages.map((message) => (
<div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}> <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'}`}/>} {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 `}> <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 `}>
@ -146,12 +152,31 @@ const ChatPage = ({
className="Messages-main-box-footer-textarea w-full bg-transparent h-12 max-h-72 pr-6 outline-0 pt-3" className="Messages-main-box-footer-textarea w-full bg-transparent h-12 max-h-72 pr-6 outline-0 pt-3"
style={{ resize: "none", direction: "rtl" }} style={{ resize: "none", direction: "rtl" }}
placeholder="پیام..." placeholder="پیام..."
onKeyUp={(e) => textareaHanler(e)} // onKeyUp={(e) => textareaHanler(e)}
onKeyDown={(e) => {
if(e.key === 'Enter'){
setMessages([...messages, {
value: 'عالیه',
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)}
}}
></textarea> ></textarea>
<img <img
src={sendIcon} src={sendIcon}
alt="sendIcon" alt="sendIcon"
className=" bg-transparent" className=" bg-transparent"
onClick={() => {setMessages([...messages, {
value: 'عالیه',
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)}
}
/> />
</div> </div>
</div> : </div> :
@ -162,10 +187,10 @@ const ChatPage = ({
<div className="Messages-main-box-header-name">امیر ناظمی</div> <div className="Messages-main-box-header-name">امیر ناظمی</div>
</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"> <div className="Messages-main-box-chat-box w-full h-[84%] rtl flex items-ceter flex-col overflow-hidden overflow-scroll overflow-x-hidden justify-between px-4">
{ {
messages.map((message) => ( thisMessages.map((message) => (
<div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}> <div className={`w-full p-5 flex ${message.userId !== user.id && 'ltr'}`}>
{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'}`}/>} {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 `} style={{maxWidth: '50%'}}> <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 `} style={{maxWidth: '50%'}}>
<p>{message.value}</p> <p>{message.value}</p>
@ -199,12 +224,40 @@ const ChatPage = ({
className="Messages-main-box-footer-textarea w-[93%] h-12 max-h-72 pr-4 outline-0 pt-2" className="Messages-main-box-footer-textarea w-[93%] h-12 max-h-72 pr-4 outline-0 pt-2"
style={{ resize: "none", direction: "rtl" }} style={{ resize: "none", direction: "rtl" }}
placeholder="پیام..." placeholder="پیام..."
onKeyUp={(e) => textareaHanler(e)} // onKeyUp={(e) => textareaHanler(e)}
onKeyUp={(e) => {
if(e.key === 'Enter' && e.ctrlKey){
setMessages([...thisMessages, {
value: e.target.value,
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)
setInpuVal('')
}
}
}
value={inputVal}
onChange={(e) => setInpuVal(e.target.value)}
></textarea> ></textarea>
<img <img
src={sendIcon} src={sendIcon}
alt="sendIcon" alt="sendIcon"
className="absolute w-8 bottom-[25%] left-24" className="absolute w-8 cursor-pointer bottom-[25%] left-24"
onClick={() => {setMessages([...thisMessages, {
value: document.getElementById("Messages-main-box-footer-textarea").value,
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)
setInpuVal('')
}
}
/> />
</div> </div>
</div> </div>

Loading…
Cancel
Save