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 = () => {


        let nullTimeOptions = []
        let nowTimeOptions = []
        let secondsTimeOptions = [].sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])
        let minutesTimeOptions = [].sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])
        let dayTimeOptions = [].sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])
        let weekTimeOptions = [].sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])
        let monthTimeOptions = [].sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])
        let yearTimeOptions = [].sort((a, b) => a.last_message.split(' ')[0] - b.last_message.split(' ')[0])

        filtredConversations.map(option => {
            if (option.count_unread) {
                if (option.last_message === 'Ahora') {
                    return nowTimeOptions.push(option)
                }
                if (option.last_message.split(' ')[1].includes('segundo')) {
                    return secondsTimeOptions.push(option)
                }
                if (option.last_message.split(' ')[1].includes('minuto')) {
                    return minutesTimeOptions.push(option)
                }
                if (option.last_message.split(' ')[1].includes('día')) {
                    return dayTimeOptions.push(option)
                }
                if (option.last_message.split(' ')[1].includes('semana')) {
                    return weekTimeOptions.push(option)
                }
                if (option.last_message.split(' ')[1].includes('mes')) {
                    return monthTimeOptions.push(option)
                }
                if (option.last_message.split(' ')[1].includes('año')) {
                    return yearTimeOptions.push(option)
                }
            }

            return nullTimeOptions.push(option)
        })


        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>
    )
}