Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6918 | Rev 6939 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6918 Rev 6938
Línea 1... Línea 1...
1 
import React, { useCallback, useEffect, useState } from 'react'
 1 
import React, { useCallback, useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
 2 
import { axios } from '../../utils'
3 
import { useSelector } from 'react-redux'
 3 
import { useSelector } from 'react-redux'
4 
import { Tab, Tabs } from '@mui/material'
 4 
import { Avatar, Tab, Tabs } from '@mui/material'
- 
 
 5 
import styled from 'styled-components'
5 
import SearchIcon from '@mui/icons-material/Search'
 6 
import SearchIcon from '@mui/icons-material/Search'
Línea 6... Línea 7...
6 
 
 7 
 
7 
import Options from '../UI/Option'
 8 
import Options from '../UI/Option'
8 
import EmptySection from '../UI/EmptySection'
 9 
import EmptySection from '../UI/EmptySection'
9 
import ContactsModal from '../modals/ContactsModal'
 10 
import ContactsModal from '../modals/ContactsModal'
Línea 10... Línea 11...
10 
import CreateGroupModal from '../modals/CreateGroupModal'
 11 
import CreateGroupModal from '../modals/CreateGroupModal'
Línea -... Línea 12...
- 
 
 12 
 
- 
 
 13 
const notifyAudio = new Audio('/audio/chat.mp3')
- 
 
 14 
 
- 
 
 15 
const StyledContact = styled.div`
- 
 
 16 
  align-items: center;
- 
 
 17 
  display: flex;
- 
 
 18 
  height: auto;
- 
 
 19 
  padding: 0.2rem 1rem;
- 
 
 20 
  gap: 0.5rem;
- 
 
 21 
`
- 
 
 22 
const StyledContactInfo = styled.div`
- 
 
 23 
  display: flex;
- 
 
 24 
  flex-direction: column;
- 
 
 25 
 
- 
 
 26 
  span {
- 
 
 27 
    font-size: 0.9rem;
- 
 
 28 
    cursor: pointer;
- 
 
 29 
    font-weight: bold;
- 
 
 30 
    white-space: nowrap;
- 
 
 31 
    overflow: hidden;
- 
 
 32 
    text-overflow: ellipsis;
- 
 
 33 
    max-width: 20ch;
11 
 
 34 
  }
12 
const notifyAudio = new Audio('/audio/chat.mp3')
 35 
`
13 
 
 36 
 
14 
const Contacts = ({ selectedConversation, changeConversation }) => {
 37 
const Contacts = ({ selectedConversation, changeConversation }) => {
15 
  const [showContactModal, setShowContactModal] = useState(false)
 38 
  const [showContactModal, setShowContactModal] = useState(false)
Línea 100... Línea 123...
100 
          />
 123 
          />
101 
        </div>
 124 
        </div>
Línea 102... Línea 125...
102 
 
 125 
 
103 
        <Contacts.List
 126 
        <Contacts.List
- 
 
 127 
          contacts={filterConversations(getConversations())}
104 
          contacts={filterConversations(getConversations())}
 128 
          onChange={changeConversation}
105 
          selectConversation={changeConversation}
 129 
          currentConversation={selectedConversation}
106 
        />
 130 
        />
107 
      </aside>
 131 
      </aside>
108 
      <ContactsModal
 132 
      <ContactsModal
109 
        show={showContactModal}
 133 
        show={showContactModal}
Línea 116... Línea 140...
116 
      />
 140 
      />
117 
    </>
 141 
    </>
118 
  )
 142 
  )
119 
}
 143 
}
Línea -... Línea 144...
- 
 
 144 
 
- 
 
 145 
const List = ({
120 
 
 146 
  contacts = [],
- 
 
 147 
  onChange = () => null,
- 
 
 148 
  currentConversation,
121 
const List = ({ contacts = [], selectConversation = () => null }) => {
 149 
}) => {
Línea 122... Línea 150...
122 
  const labels = useSelector(({ intl }) => intl.labels)
 150 
  const labels = useSelector(({ intl }) => intl.labels)
123 
 
 151 
 
124 
  return (
 152 
  return (
125 
    <div className="contacts-list">
 153 
    <div className="contacts-list">
126 
      <ul>
 154 
      <ul>
127 
        {!contacts.length ? (
 155 
        {!contacts.length ? (
128 
          <EmptySection message={labels.datatable_szerorecords} />
 156 
          <EmptySection message={labels.datatable_szerorecords} />
129 
        ) : (
 157 
        ) : (
- 
 
 158 
          contacts.map((contact) => (
- 
 
 159 
            <li key={contact.id}>
- 
 
 160 
              <List.Item
130 
          contacts.map((contact) => (
 161 
                contact={contact}
- 
 
 162 
                onClick={onChange}
131 
            <li key={contact.id}>
 163 
                selected={contact.id === currentConversation.id}
132 
              <List.Item contact={contact} onClick={selectConversation} />
 164 
              />
133 
            </li>
 165 
            </li>
134 
          ))
 166 
          ))
135 
        )}
 167 
        )}
Línea 140... Línea 172...
140 
 
 172 
 
141 
const Item = ({ contact, onClick }) => {
 173 
const Item = ({ contact, onClick }) => {
Línea 142... Línea 174...
142 
  const labels = useSelector(({ intl }) => intl.labels)
 174 
  const labels = useSelector(({ intl }) => intl.labels)
143 
 
 175 
 
144 
  return (
 176 
  return (
145 
    <div className="contacts-list__item">
 - 
 
146 
      <img
 - 
 
147 
        className="chat-image img-circle"
 - 
 
148 
        height="36"
 177 
    <StyledContact>
149 
        width="36"
 178 
      <Avatar
- 
 
 179 
        src={contact.image || '/images/users-group.png'}
150 
        src={contact.image || '/images/users-group.png'}
 180 
        alt="image-image"
151 
        alt="image-image"
 181 
        sx={{ width: 32, height: 32 }}
152 
      />
 182 
      />
153 
      <div className="contacts-list__item-content">
 183 
      <StyledContactInfo>
154 
        <span onClick={() => onClick(contact)}>{contact.name}</span>
 184 
        <span onClick={() => onClick(contact)}>{contact.name}</span>
155 
        {contact.last_message && (
 185 
        {contact.last_message && (
156 
          <p>
 186 
          <p>
157 
            {`${contact.count_not_seen_messages} ${labels.new_messages} |
 187 
            {`${contact.count_not_seen_messages} ${labels.new_messages} |
158 
            ${contact.last_message}`}
 188 
            ${contact.last_message}`}
159 
          </p>
 189 
          </p>
160 
        )}
 190 
        )}
161 
      </div>
 191 
      </StyledContactInfo>
162 
    </div>
 192 
    </StyledContact>
Línea 163... Línea 193...
163 
  )
 193 
  )
164 
}
 194 
}