Proyectos de Subversion LeadersLinked - Backend

import React from "react";

import styles from "./contacts.module.scss";

const Contacts = (props) => {
  // props destructuring
  const {
    unreadEntities,
    chatUsers,
    chatGroups,
    onOpenChat,
    onAddGroup,
  } = props;
  return (
    <div className={styles.chatContainer}>
      {unreadEntities.map((entity) => (
        <div
          className={`${styles.entity} ${styles.entity_unread}`}
          onClick={() => onOpenChat(entity)}
          key={entity.id}
        >
          <img
            src={
              entity.type === "user" ? entity.image : "/images/users-group.png"
            }
            alt={`${entity.name} img`}
          />
          <div className={styles.entityInfo}>
            <div className={styles.nameContainer}>
              {entity.name}
              {entity.type === "user" ? (
                <span className={styles.iconContainer}>
                  <i
                    className={`fa fa-circle ${styles.statusIcon} ${
                      entity.online
                        ? styles.statusIcon_online
                        : styles.statusIcon_offline
                    }`}
                  ></i>
                </span>
              ) : (
                ""
              )}
            </div>
            <span className={styles.newMessage}>Mensaje nuevo</span>
          </div>
          <div></div>
        </div>
      ))}
      {chatUsers.map((chatUser) => (
        <div
          className={styles.entity}
          onClick={() => onOpenChat(chatUser)}
          key={chatUser.id}
        >
          <img src={chatUser.image} alt={`${chatUser.name} img`} />
          <div className={styles.entityInfo}>
            <div className={styles.nameContainer}>
              {chatUser.name}
              <span className={styles.iconContainer}>
                <i
                  className={`fa fa-circle ${styles.statusIcon} ${
                    chatUser.online
                      ? styles.statusIcon_online
                      : styles.statusIcon_offline
                  }`}
                ></i>
              </span>
            </div>
          </div>
          <div></div>
        </div>
      ))}
      {chatGroups.length > 0 && (
        <div>
          <div>Grupos</div>
          {chatGroups.map((chatGroup) => (
            <div
              className={styles.entity}
              onClick={() => onOpenChat(chatGroup)}
              key={chatGroup.id}
            >
              <img
                src="/images/users-group.png"
                alt={`${chatGroup.name} img`}
              />
              <div className={styles.entityInfo}>
                <div className={styles.nameContainer}>{chatGroup.name}</div>
              </div>
              <div></div>
            </div>
          ))}
          <div
            className={`${styles.entity} ${styles.addGroup}`}
            onClick={onAddGroup}
          >
            <i className="icon-plus"></i>
            Agregar grupo
          </div>
        </div>
      )}
    </div>
  );
};

export default Contacts;