| Línea 1... |
Línea 1... |
| 1 |
import React, { useState } from 'react'
|
1 |
import React, { useState } from 'react'
|
| Línea 2... |
Línea 2... |
| 2 |
|
2 |
|
| Línea 3... |
Línea 3... |
| 3 |
export default ({ conversations = [], click, selectedConversation, searchActive, showConversation, handleShowConversation }) => {
|
3 |
export default ({ conversations = [], click, selectedConversation, showConversation, handleShowConversation }) => {
|
| 4 |
|
4 |
|
| 5 |
const [conversationSearch, setConversationSearch] = useState('');
|
5 |
const [conversationSearch, setConversationSearch] = useState('');
|
| 6 |
const filtredConversations = conversations.filter((conversation) => conversation.name.includes(conversationSearch))
|
6 |
const filtredConversations = conversations.filter((conversation) => conversation.name.includes(conversationSearch))
|
| 7 |
|
7 |
|
| 8 |
const handleConversation = (element) => {
|
8 |
const handleConversation = (element) => {
|
| 9 |
handleShowConversation(true);
|
9 |
handleShowConversation(true);
|
| 10 |
click(element)
|
10 |
click(element)
|
| - |
|
11 |
}
|
| - |
|
12 |
|
| - |
|
13 |
const getLastMessage = () => {
|
| - |
|
14 |
|
| - |
|
15 |
const nullTimeOptions = filtredConversations.filter(option => !option.time)
|
| - |
|
16 |
const numberTimeOptions = filtredConversations.filter(option => option.time.split(' ').length > 1)
|
| - |
|
17 |
|
| - |
|
18 |
const nowTimeOptions = filtredConversations.filter(option => option.time === 'Ahora')
|
| - |
|
19 |
|
| - |
|
20 |
const secondsTimeOptions = numberTimeOptions.filter(option => option.time.split(' ')[1].includes('segundo')).sort((a, b) => a.time.split(' ')[0] - b.time.split(' ')[0])
|
| - |
|
21 |
const minutesTimeOptions = numberTimeOptions.filter(option => option.time.split(' ')[1].includes('minuto')).sort((a, b) => a.time.split(' ')[0] - b.time.split(' ')[0])
|
| - |
|
22 |
const dayTimeOptions = numberTimeOptions.filter(option => option.time.split(' ')[1].includes('dia')).sort((a, b) => a.time.split(' ')[0] - b.time.split(' ')[0])
|
| - |
|
23 |
const weekTimeOptions = numberTimeOptions.filter(option => option.time.split(' ')[1].includes('semana')).sort((a, b) => a.time.split(' ')[0] - b.time.split(' ')[0])
|
| - |
|
24 |
const monthTimeOptions = numberTimeOptions.filter(option => option.time.split(' ')[1].includes('mes')).sort((a, b) => a.time.split(' ')[0] - b.time.split(' ')[0])
|
| - |
|
25 |
const yearTimeOptions = numberTimeOptions.filter(option => option.time.split(' ')[1].includes('año')).sort((a, b) => a.time.split(' ')[0] - b.time.split(' ')[0])
|
| - |
|
26 |
|
| - |
|
27 |
return [
|
| - |
|
28 |
...nowTimeOptions,
|
| - |
|
29 |
...secondsTimeOptions,
|
| - |
|
30 |
...minutesTimeOptions,
|
| - |
|
31 |
...dayTimeOptions,
|
| - |
|
32 |
...weekTimeOptions,
|
| - |
|
33 |
...monthTimeOptions,
|
| - |
|
34 |
...yearTimeOptions,
|
| - |
|
35 |
...nullTimeOptions
|
| - |
|
36 |
]
|
| 11 |
}
|
37 |
}
|
| 12 |
|
38 |
|
| 13 |
return (
|
39 |
return (
|
| 14 |
<div className="">
|
40 |
<div className="">
|
| 15 |
{/* messages-list */}
|
41 |
{/* messages-list */}
|
| 16 |
{/* <div className={`messages_conversation-search ${!searchActive && 'hide'}`}>
|
42 |
{/* <div className={`messages_conversation-search ${!searchActive && 'hide'}`}>
|
| 17 |
<input
|
43 |
<input
|
| Línea 23... |
Línea 49... |
| 23 |
</div> */}
|
49 |
</div> */}
|
| 24 |
<ul className={`${showConversation && 'msgs-hide'}`}>
|
50 |
<ul className={`${showConversation && 'msgs-hide'}`}>
|
| 25 |
{
|
51 |
{
|
| 26 |
(conversations)
|
52 |
(conversations)
|
| 27 |
?
|
53 |
?
|
| 28 |
filtredConversations.map((element, i) => {
|
54 |
getLastMessage().map((element, i) => {
|
| 29 |
return (
|
55 |
return (
|
| 30 |
<li
|
56 |
<li
|
| 31 |
id={i}
|
57 |
id={i}
|
| 32 |
className={(selectedConversation === element ? "active" : '') + 'd-flex align-items-center'}
|
58 |
className={(selectedConversation === element ? "active" : '') + 'd-flex align-items-center'}
|
| 33 |
style={{
|
59 |
style={{
|