Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
6956 stevensc 1 
import React from 'react'
6911 stevensc 2 
import { useSelector } from 'react-redux'
6938 stevensc 3 
import styled 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 
 
6938 stevensc 9 
const StyledContact = styled.div`
10 
  align-items: center;
11 
  display: flex;
12 
  height: auto;
6940 stevensc 13 
  padding: 0.5rem 1rem;
6938 stevensc 14 
  gap: 0.5rem;
6946 stevensc 15 
  cursor: pointer;
6938 stevensc 16 
`
17 
const StyledContactInfo = styled.div`
18 
  display: flex;
19 
  flex-direction: column;
20 
 
21 
  span {
22 
    font-size: 0.9rem;
23 
    font-weight: bold;
24 
    white-space: nowrap;
25 
    overflow: hidden;
26 
    text-overflow: ellipsis;
27 
    max-width: 20ch;
28 
  }
29 
`
30 
 
6956 stevensc 31 
const Contacts = ({ children }) => {
32 
  return <aside className="chat_contacts">{children}</aside>
33 
}
6911 stevensc 34 
 
6956 stevensc 35 
const Header = ({ options = {}, children }) => {
6911 stevensc 36 
  return (
6956 stevensc 37 
    <div className="position-relative">
38 
      {children}
39 
      {!!options.length && <Options options={options} />}
40 
    </div>
6911 stevensc 41 
  )
42 
}
43 
 
6938 stevensc 44 
const List = ({
45 
  contacts = [],
46 
  onChange = () => null,
47 
  currentConversation,
48 
}) => {
6911 stevensc 49 
  const labels = useSelector(({ intl }) => intl.labels)
50 
 
51 
  return (
52 
    <div className="contacts-list">
53 
      <ul>
54 
        {!contacts.length ? (
55 
          <EmptySection message={labels.datatable_szerorecords} />
56 
        ) : (
57 
          contacts.map((contact) => (
58 
            <li key={contact.id}>
6939 stevensc 59 
              <List.Item contact={contact} onClick={onChange} />
6911 stevensc 60 
            </li>
61 
          ))
62 
        )}
63 
      </ul>
64 
    </div>
65 
  )
66 
}
67 
 
68 
const Item = ({ contact, onClick }) => {
69 
  const labels = useSelector(({ intl }) => intl.labels)
70 
 
71 
  return (
6944 stevensc 72 
    <StyledContact onClick={() => onClick(contact)}>
6938 stevensc 73 
      <Avatar
6911 stevensc 74 
        src={contact.image || '/images/users-group.png'}
75 
        alt="image-image"
6938 stevensc 76 
        sx={{ width: 32, height: 32 }}
6911 stevensc 77 
      />
6938 stevensc 78 
      <StyledContactInfo>
6944 stevensc 79 
        <span>{contact.name}</span>
6911 stevensc 80 
        {contact.last_message && (
81 
          <p>
82 
            {`${contact.count_not_seen_messages} ${labels.new_messages} |
6956 stevensc 83 
              ${contact.last_message}`}
6911 stevensc 84 
          </p>
85 
        )}
6938 stevensc 86 
      </StyledContactInfo>
87 
    </StyledContact>
6911 stevensc 88 
  )
89 
}
90 
 
91 
List.Item = Item
92 
Contacts.List = List
6956 stevensc 93 
Contacts.Header = Header
6911 stevensc 94 
 
95 
export default Contacts