Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

export default ({ conversations = [], click, selectedConversation, showConversation, handleShowConversation }) => {

    const [conversationSearch, setConversationSearch] = useState('');

    const filtredConversations = conversations.filter((conversation) => conversation.name.includes(conversationSearch))

    const handleConversation = (element) => {

        handleShowConversation(true);

        click(element)

    }

    const getLastMessage = () => {

        const nullTimeOptions = filtredConversations.filter(option => !option.last_message)

        const numberTimeOptions = filtredConversations.filter(option => option.last_message.split(' ').length > 1)

        const nowTimeOptions = filtredConversations.filter(option => option.last_message === 'Ahora')

        const secondsTimeOptions = numberTimeOptions.filter(option => option.last_message.split(' ')[1].includes('segundo')).sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        const minutesTimeOptions = numberTimeOptions.filter(option => option.last_message.split(' ')[1].includes('minuto')).sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        const dayTimeOptions = numberTimeOptions.filter(option => option.last_message.split(' ')[1].includes('dia')).sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        const weekTimeOptions = numberTimeOptions.filter(option => option.last_message.split(' ')[1].includes('semana')).sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        const monthTimeOptions = numberTimeOptions.filter(option => option.last_message.split(' ')[1].includes('mes')).sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        const yearTimeOptions = numberTimeOptions.filter(option => option.last_message.split(' ')[1].includes('año')).sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        return [

            ...nowTimeOptions,

            ...secondsTimeOptions,

            ...minutesTimeOptions,

            ...dayTimeOptions,

            ...weekTimeOptions,

            ...monthTimeOptions,

            ...yearTimeOptions,

            ...nullTimeOptions

        ]

    }

    return (

        <div className="">

            {/*  messages-list */}

            {/* <div className={`messages_conversation-search ${!searchActive && 'hide'}`}>

                <input

                    type="search"

                    className='form-control'

                    placeholder='Buscar conversación'

                    onChange={(e) => setConversationSearch(e.target.value)}

                />

            </div> */}

            <ul className={`${showConversation && 'msgs-hide'}`}>

                {

                    (conversations)

                        ?

                        getLastMessage().map((element, i) => {

                            return (

                                <li

                                    id={i}

                                    className={(selectedConversation === element ? "active" : '') + 'd-flex align-items-center'}

                                    style={{

                                        padding: '.7rem'

                                    }}

                                    onClick={() => {

                                        handleConversation(element);

                                    }}

                                >

                                    <div className="usr-msg-details d-flex justify-content-start align-items-center">

                                        <div className="usr-ms-img">

                                            <img src={element.image} alt={element.name} />

                                        </div>

                                        <div className="usr-mg-info">

                                            <h3>{element.name}</h3>

                                            {

                                                !!element.count_unread && parseInt(element.count_unread) > 0 && (

                                                    <p className="text-gray"> {element.count_unread} mensajes nuevos | <span> {element.last_message} </span></p>

                                                )

                                            }

                                        </div>

                                        {/* {

                                            !!element.count_unread && parseInt(element.count_unread) > 0 && (

                                                <span className="msg-notifc">

                                                    {element.count_unread}

                                                </span>

                                            )

                                        } */}

                                    </div>

                                </li>

                            )

                        })

                        :

                        <li className="active">

                            <div className="usr-msg-details">

                                <div className="usr-mg-info">

                                    <h3>Sin conversaciones</h3>

                                </div>

                            </div>

                        </li>

                }

            </ul>

        </div>

    )

}