Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11347 nelberth 1 
import React from "react";
2 
 
3 
import styles from "./contacts.module.scss";
4 
 
5 
const Contacts = (props) => {
6 
  // props destructuring
7 
  const {
8 
    unreadEntities,
9 
    chatUsers,
10 
    chatGroups,
11 
    onOpenChat,
12 
    onAddGroup,
13 
  } = props;
14 
  return (
15 
    <div className={styles.chatContainer}>
16 
      {unreadEntities.map((entity) => (
17 
        <div
18 
          className={`${styles.entity} ${styles.entity_unread}`}
19 
          onClick={() => onOpenChat(entity)}
20 
          key={entity.id}
21 
        >
22 
          <img
23 
            src={
24 
              entity.type === "user" ? entity.image : "/images/users-group.png"
25 
            }
26 
            alt={`${entity.name} img`}
27 
          />
28 
          <div className={styles.entityInfo}>
29 
            <div className={styles.nameContainer}>
30 
              {entity.name}
31 
              {entity.type === "user" ? (
32 
                <span className={styles.iconContainer}>
33 
                  <i
34 
                    className={`fa fa-circle ${styles.statusIcon} ${
35 
                      entity.online
36 
                        ? styles.statusIcon_online
37 
                        : styles.statusIcon_offline
38 
                    }`}
39 
                  ></i>
40 
                </span>
41 
              ) : (
42 
                ""
43 
              )}
44 
            </div>
45 
            <span className={styles.newMessage}>Mensaje nuevo</span>
46 
          </div>
47 
          <div></div>
48 
        </div>
49 
      ))}
50 
      {chatUsers.map((chatUser) => (
51 
        <div
52 
          className={styles.entity}
53 
          onClick={() => onOpenChat(chatUser)}
54 
          key={chatUser.id}
55 
        >
56 
          <img src={chatUser.image} alt={`${chatUser.name} img`} />
57 
          <div className={styles.entityInfo}>
58 
            <div className={styles.nameContainer}>
59 
              {chatUser.name}
60 
              <span className={styles.iconContainer}>
61 
                <i
62 
                  className={`fa fa-circle ${styles.statusIcon} ${
63 
                    chatUser.online
64 
                      ? styles.statusIcon_online
65 
                      : styles.statusIcon_offline
66 
                  }`}
67 
                ></i>
68 
              </span>
69 
            </div>
70 
          </div>
71 
          <div></div>
72 
        </div>
73 
      ))}
74 
      {chatGroups.length > 0 && (
75 
        <div>
76 
          <div>Grupos</div>
77 
          {chatGroups.map((chatGroup) => (
78 
            <div
79 
              className={styles.entity}
80 
              onClick={() => onOpenChat(chatGroup)}
81 
              key={chatGroup.id}
82 
            >
83 
              <img
84 
                src="/images/users-group.png"
85 
                alt={`${chatGroup.name} img`}
86 
              />
87 
              <div className={styles.entityInfo}>
88 
                <div className={styles.nameContainer}>{chatGroup.name}</div>
89 
              </div>
90 
              <div></div>
91 
            </div>
92 
          ))}
93 
          <div
94 
            className={`${styles.entity} ${styles.addGroup}`}
95 
            onClick={onAddGroup}
96 
          >
97 
            <i className="icon-plus"></i>
98 
            Agregar grupo
99 
          </div>
100 
        </div>
101 
      )}
102 
    </div>
103 
  );
104 
};
105 
 
106 
export default Contacts;