Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7247 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7248 stevensc 1 
import React, { useState } from 'react'
6911 stevensc 2 
import { useSelector } from 'react-redux'
6960 stevensc 3 
import styled, { css } from 'styled-components'
6956 stevensc 4 
import Avatar from '@mui/material/Avatar'
6911 stevensc 5 
 
6 
import Options from '../UI/Option'
7 
import EmptySection from '../UI/EmptySection'
8 
 
6960 stevensc 9 
const ContactsContainer = styled.div`
10 
  background-color: var(--bg-color);
11 
  border-radius: var(--border-radius);
12 
  border: 1px solid var(--border-primary);
13 
  display: flex;
14 
  flex-direction: column;
15 
  height: 100%;
16 
  gap: 0.5rem;
17 
  padding: 1rem 0.5rem;
18 
  max-height: 80vh;
6978 stevensc 19 
  flex-grow: 1;
6960 stevensc 20 
`
21 
 
22 
const ContactHeader = styled.div`
23 
  position: relative;
24 
 
25 
  h1 {
26 
    font-weight: 600;
27 
    font-size: 1.3rem;
28 
  }
29 
`
30 
 
31 
const ContactList = styled.ul`
32 
  display: flex;
33 
  flex-direction: column;
34 
  overflow: auto;
35 
`
36 
 
37 
const ContactItem = styled.div`
6938 stevensc 38 
  align-items: center;
39 
  display: flex;
40 
  height: auto;
6940 stevensc 41 
  padding: 0.5rem 1rem;
6938 stevensc 42 
  gap: 0.5rem;
6946 stevensc 43 
  cursor: pointer;
6961 stevensc 44 
  border-radius: var(--border-radius);
6960 stevensc 45 
 
46 
  ${(props) =>
47 
    props.current &&
48 
    css`
6961 stevensc 49 
      background-color: #42b72a21;
6960 stevensc 50 
    `}
6938 stevensc 51 
`
6960 stevensc 52 
 
53 
const ContactInfo = styled.div`
6938 stevensc 54 
  display: flex;
55 
  flex-direction: column;
56 
 
57 
  span {
58 
    font-size: 0.9rem;
59 
    font-weight: bold;
60 
    white-space: nowrap;
61 
    overflow: hidden;
62 
    text-overflow: ellipsis;
63 
    max-width: 20ch;
64 
  }
65 
`
66 
 
6956 stevensc 67 
const Contacts = ({ children }) => {
6960 stevensc 68 
  return <ContactsContainer>{children}</ContactsContainer>
6956 stevensc 69 
}
6911 stevensc 70 
 
6978 stevensc 71 
const Header = ({ options = [], children }) => {
6911 stevensc 72 
  return (
6960 stevensc 73 
    <ContactHeader>
6956 stevensc 74 
      {children}
75 
      {!!options.length && <Options options={options} />}
6960 stevensc 76 
    </ContactHeader>
6911 stevensc 77 
  )
78 
}
79 
 
6938 stevensc 80 
const List = ({
81 
  contacts = [],
82 
  onChange = () => null,
83 
  currentConversation,
84 
}) => {
7248 stevensc 85 
  const [isCurrent, setIsCurrent] = useState(false)
6911 stevensc 86 
  const labels = useSelector(({ intl }) => intl.labels)
87 
 
88 
  return (
6960 stevensc 89 
    <ContactList>
90 
      {!contacts.length ? (
91 
        <EmptySection message={labels.datatable_szerorecords} />
92 
      ) : (
7247 stevensc 93 
        contacts.map((contact) => {
7248 stevensc 94 
          if (currentConversation && currentConversation.id === contact.id) {
95 
            setIsCurrent(true)
7247 stevensc 96 
          }
7248 stevensc 97 
          if (
98 
            currentConversation &&
99 
            currentConversation.uuid === contact.uuid
100 
          ) {
101 
            setIsCurrent(true)
102 
          }
7247 stevensc 103 
 
104 
          return (
105 
            <li key={contact.id || contact.uuid}>
106 
              <List.Item
107 
                contact={contact}
108 
                onClick={onChange}
109 
                isCurrent={isCurrent}
110 
              />
111 
            </li>
112 
          )
113 
        })
6960 stevensc 114 
      )}
115 
    </ContactList>
6911 stevensc 116 
  )
117 
}
118 
 
6960 stevensc 119 
const Item = ({ contact, onClick, isCurrent }) => {
6911 stevensc 120 
  const labels = useSelector(({ intl }) => intl.labels)
121 
 
122 
  return (
6960 stevensc 123 
    <ContactItem onClick={() => onClick(contact)} current={isCurrent}>
6938 stevensc 124 
      <Avatar
6911 stevensc 125 
        src={contact.image || '/images/users-group.png'}
126 
        alt="image-image"
6938 stevensc 127 
        sx={{ width: 32, height: 32 }}
6911 stevensc 128 
      />
6960 stevensc 129 
      <ContactInfo>
6944 stevensc 130 
        <span>{contact.name}</span>
6911 stevensc 131 
        {contact.last_message && (
132 
          <p>
6961 stevensc 133 
            {`${
134 
              contact.count_not_seen_messages || contact.count_unread || ''
135 
            } ${labels.new_messages} |
6956 stevensc 136 
              ${contact.last_message}`}
6911 stevensc 137 
          </p>
138 
        )}
6960 stevensc 139 
      </ContactInfo>
140 
    </ContactItem>
6911 stevensc 141 
  )
142 
}
143 
 
144 
List.Item = Item
145 
Contacts.List = List
6956 stevensc 146 
Contacts.Header = Header
6911 stevensc 147 
 
148 
export default Contacts