Proyectos de Subversion LeadersLinked - Backend

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
13044 nelberth 1 
import React, { useState } from 'react'
2 
 
3 
export default ({ conversations = [], click, selectedConversation, searchActive, showConversation, handleShowConversation }) => {
4 
 
5 
    const [conversationSearch, setConversationSearch] = useState('');
6 
    const filtredConversations = conversations.filter((conversation) => conversation.name.includes(conversationSearch))
7 
 
8 
    const handleConversation = (element) => {
9 
        handleShowConversation(true);
10 
        click(element)
11 
    }
12 
 
13 
    return (
14 
        <div className="">
15 
            {/*  messages-list */}
16 
            {/* <div className={`messages_conversation-search ${!searchActive && 'hide'}`}>
17 
                <input
18 
                    type="search"
19 
                    className='form-control'
20 
                    placeholder='Buscar conversación'
21 
                    onChange={(e) => setConversationSearch(e.target.value)}
22 
                />
23 
            </div> */}
24 
            <ul className={`${showConversation && 'msgs-hide'}`}>
25 
                {
26 
                    (conversations)
27 
                        ?
28 
                        filtredConversations.map((element, i) => {
29 
                            return (
30 
                                <li
31 
                                    id={i}
32 
                                    className={(selectedConversation === element ? "active" : '') + 'd-flex align-items-center'}
33 
                                    style={{
34 
                                        padding: '.7rem'
35 
                                    }}
36 
                                    onClick={() => {
37 
                                        handleConversation(element);
38 
                                    }}
39 
                                >
40 
                                    <div className="usr-msg-details d-flex justify-content-start align-items-center">
41 
                                        <div className="usr-ms-img">
42 
                                            <img src={element.image} alt={element.name} />
43 
                                        </div>
44 
                                        <div className="usr-mg-info">
45 
                                            <h3>{element.name}</h3>
46 
                                            {
47 
                                                !!element.count_unread && parseInt(element.count_unread) > 0 && (
48 
                                                    <p className="text-gray"> {element.count_unread} mensajes nuevos | <span> {element.last_message} </span></p>
49 
                                                )
50 
                                            }
51 
                                        </div>
52 
                                        {/* {
53 
                                            !!element.count_unread && parseInt(element.count_unread) > 0 && (
54 
                                                <span className="msg-notifc">
55 
                                                    {element.count_unread}
56 
                                                </span>
57 
                                            )
58 
                                        } */}
59 
                                    </div>
60 
                                </li>
61 
                            )
62 
                        })
63 
                        :
64 
                        <li className="active">
65 
                            <div className="usr-msg-details">
66 
                                <div className="usr-mg-info">
67 
                                    <h3>Sin conversaciones</h3>
68 
                                </div>
69 
                            </div>
70 
                        </li>
71 
 
72 
                }
73 
            </ul>
74 
        </div>
75 
    )
76 
}