Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 1456
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { axios, debounce } from '../../utils'
 - 
 
3 
import { Modal } from 'react-bootstrap'
 - 
 
4 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
- 
 
 3 
import {
- 
 
 4 
  Avatar,
- 
 
 5 
  List,
- 
 
 6 
  ListItem,
- 
 
 7 
  ListItemAvatar,
- 
 
 8 
  ListItemButton,
- 
 
 9 
  ListItemText
- 
 
 10 
} from '@mui/material'
- 
 
 11 
 
- 
 
 12 
import { axios, debounce } from 'utils/index'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 13 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import SendIcon from '@mui/icons-material/Send'
 - 
 
Línea -... Línea 14...
- 
 
 14 
 
7 
 
 15 
import Modal from 'components/UI/modal/Modal'
- 
 
 16 
import Spinner from 'components/UI/Spinner'
Línea 8... Línea 17...
8 
import Spinner from '../UI/Spinner'
 17 
import TextInput from 'components/UI/inputs/TextInput'
9 
 
 - 
 
10 
const ContactsModal = ({ show, onClose, onComplete }) => {
 18 
 
11 
  const [isShow, setIsShow] = useState(show)
 19 
const ContactsModal = ({ show, onClose, onComplete }) => {
12 
  const [contacts, setContacts] = useState([])
 20 
  const [contacts, setContacts] = useState([])
Línea 13... Línea 21...
13 
  const [loading, setLoading] = useState(false)
 21 
  const [loading, setLoading] = useState(false)
14 
  const dispatch = useDispatch()
 - 
 
15 
 
 22 
  const dispatch = useDispatch()
16 
  const closeModal = () => {
 23 
 
17 
    setIsShow(false)
 24 
  const closeModal = () => {
Línea 18... Línea 25...
18 
    setContacts([])
 25 
    setContacts([])
Línea 47... Línea 54...
47 
        }
 54 
        }
48 
      })
 55 
      })
49 
      .finally(() => setLoading(false))
 56 
      .finally(() => setLoading(false))
50 
  }
 57 
  }
Línea 51... Línea -...
51 
 
 - 
 
52 
  useEffect(() => {
 - 
 
53 
    setIsShow(show)
 - 
 
54 
  }, [show])
 - 
 
55 
 
 58 
 
56 
  return (
 59 
  return (
57 
    <Modal show={isShow} onHide={closeModal}>
 60 
    <Modal
58 
      <Modal.Header closeButton>
 61 
      show={show}
59 
        <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
 62 
      title='Iniciar conversación'
60 
      </Modal.Header>
 63 
      onClose={closeModal}
- 
 
 64 
      showFooter={false}
61 
      <Modal.Body className="pb-3">
 65 
    >
62 
        <div className="form-group">
 66 
      <TextInput
63 
          <label htmlFor="search-people">Escribe el nombre</label>
 67 
        label='Escribe el nombre'
64 
          <input
 68 
        name='search-contact'
65 
            type="text"
 - 
 
66 
            className="form-control"
 69 
        type='text'
67 
            placeholder="Escribe el nombre de la persona"
 70 
        placeholder='Escribe el nombre de la persona'
68 
            onChange={(e) => handleSearch(e.target.value)}
 71 
        onChange={(e) => handleSearch(e.target.value)}
69 
          />
 72 
      />
70 
        </div>
 73 
 
71 
        {loading ? (
 74 
      {loading ? (
72 
          <Spinner />
 75 
        <Spinner />
73 
        ) : (
 76 
      ) : (
74 
          <ul className="d-flex flex-column gap-3">
 77 
        <List sx={{ width: '100%' }}>
75 
            {contacts.map((user) => (
 78 
          {contacts.map((user) => {
76 
              <li key={user.name}>
 - 
 
77 
                <div className="d-flex align-items-center justify-content-between gap-3">
 - 
 
- 
 
 79 
            const { image, name } = user
78 
                  <div className="d-flex align-items-center gap-3">
 80 
 
79 
                    <img
 - 
 
80 
                      src={user.image}
 81 
            return (
81 
                      alt={`User ${user.name} image`}
 82 
              <ListItem key={name} disablePadding disableRipple>
82 
                      width={40}
 83 
                <ListItemButton
83 
                      height={40}
 84 
                  disableRipple
84 
                      style={{ borderRadius: '50%' }}
 85 
                  onClick={() => startConversation(user)}
85 
                    />
 86 
                >
- 
 
 87 
                  <ListItemAvatar>
86 
                    <p>{user.name}</p>
 88 
                    <Avatar alt={`${name} image`} src={image} />
87 
                  </div>
 89 
                  </ListItemAvatar>
88 
 
 - 
 
89 
                  <button
 90 
 
90 
                    className="btn btn-primary"
 - 
 
91 
                    onClick={() => startConversation(user)}
 - 
 
92 
                  >
 - 
 
93 
                    <SendIcon />
 91 
                  <ListItemText primary={name} />
94 
                  </button>
 92 
                </ListItemButton>
95 
                </div>
 93 
              </ListItem>
96 
              </li>
 94 
            )
97 
            ))}
 95 
          })}
98 
          </ul>
 96 
        </List>
99 
        )}
 - 
 
100 
      </Modal.Body>
 97 
      )}
101 
    </Modal>
 98 
    </Modal>
102 
  )
 99 
  )
Línea 103... Línea 100...
103 
}
 100 
}