File size: 1,688 Bytes
f1b8b13
d1f9048
 
 
f1b8b13
 
3b5dd8c
d1f9048
f1b8b13
3b5dd8c
 
d1f9048
f1b8b13
c13f601
f1b8b13
 
c13f601
f1b8b13
 
d1f9048
 
 
f1b8b13
 
 
3b5dd8c
c13f601
 
 
f1b8b13
 
 
3b5dd8c
 
 
d1f9048
f1b8b13
d1f9048
 
f1b8b13
 
3b5dd8c
 
 
d1f9048
c13f601
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d1f9048
 
 
 
f1b8b13
d1f9048
 
 
 
 
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React, { useContext, useEffect } from 'react'
import Search from '../Search';
import Contacts from '../Contacts';
import "./SideBar.css";
import { SocketContext } from '../../contexts/SocketProvider';
import { ChatContext } from '../../contexts/ChatProvider';


function SideBar() {

    const socket = useContext(SocketContext);

    const {
        contacts,
        setContacts,
        // setLastMessages,
        search,
    } = useContext(ChatContext);

    useEffect(() => {

        const fetchData = async () => {

            if (!socket) return;
            socket.on("contacts", (contacts) => {
                // console.log(contacts);
                var newContacts = contacts;

                newContacts.sort((a, b) => b.last_message.send_at - a.last_message.send_at);

                setContacts(newContacts);  // set Contacts
                // setLastMessages(contacts.map((contact) => contact.last_message)); // set Last messages
            });

            socket.emit("get_contacts");
        }

        fetchData();

        return () => {
            if (!socket) return;
            socket.off("contacts");
        }
    }, [socket]);

    useEffect(() => {

        if (!socket) return;

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

        socket.on("search_results",(contacts)=>{
            setContacts(contacts);
        })
        socket.emit("search_contacts",search);

        const cleanUp = () => {
            socket.off("search_results");
        }
        return cleanUp;
    }, [socket, search])


    return (

        <div className='side_bar'>
            <Search />
            <Contacts />
        </div>
    )
}

export default SideBar