File size: 1,358 Bytes
bf65a6c
8189f3d
 
f1b8b13
88b9eae
bf65a6c
f1b8b13
bf65a6c
f1b8b13
d1f9048
bf65a6c
 
ee1fc35
e4ce9c9
bf65a6c
 
 
e4ce9c9
 
ee1fc35
e4ce9c9
c13f601
 
 
bf65a6c
 
e4ce9c9
 
bf65a6c
 
ee1fc35
 
bf65a6c
 
 
 
 
 
 
d1f9048
88b9eae
8189f3d
 
 
 
 
 
 
bf65a6c
 
8189f3d
88b9eae
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { useContext, useEffect, useRef } from 'react'
import "./ChatFooter.css";
import { PaperAirplaneIcon, PhotoIcon, PaperClipIcon, FaceSmileIcon } from "@heroicons/react/24/solid";
import { SocketContext } from '../../contexts/SocketProvider';

function ChatFooter({
  currentChatId,
}) {
  // console.log(currentChatId)
  const socket = useContext(SocketContext);
  const messageRef = useRef();




  const sendMessage = (message) => {

    if (message.trim() === "") return;


    const message_bundle = {
      content:message,
      receiver_id: currentChatId,
      type:"text",
    }

    if (socket) {
      socket.emit("send_message", message_bundle);
    }

    messageRef.current.value = "";

  }

  const handleEnter = (e) => {
    if (e.key == "Enter") {
      sendMessage(messageRef.current.value);
    }
  }

  return (
    <footer className='chat_footer'>
      <div className='send_options'>

        <FaceSmileIcon className='send_options_btn' />
        <PhotoIcon className='send_options_btn' />
        <PaperClipIcon className='send_options_btn' />
      </div>
      <input className="text_box" type="text" placeholder='Message' onKeyUp={handleEnter} ref={messageRef} />
      <PaperAirplaneIcon onClick={() => { sendMessage(messageRef.current.value) }} className='send_icon' />
    </footer>
  )
}

export default ChatFooter