Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from "react";

export default ({
  conversations = [],
  click,
  selectedConversation,
  searchActive,
  showConversation,
  handleShowConversation,
}) => {
  const [conversationSearch, setConversationSearch] = useState("");
  const filtredConversations = conversations.filter((conversation) =>
    conversation.name.includes(conversationSearch)
  );

  const handleConversation = (element) => {
    handleShowConversation(true);
    click(element);
  };

  return (
    <div className="">
      <ul className={`${showConversation && "msgs-hide"}`}>
        {conversations ? (
          filtredConversations.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">
                  <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>
                </div>
              </li>
            );
          })
        ) : (
          <li className="active">
            <div className="usr-msg-details">
              <div className="usr-mg-info">
                <h3>Sin conversaciones</h3>
              </div>
            </div>
          </li>
        )}
      </ul>
    </div>
  );
};