Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4775 Rev 5185
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable camelcase */
1 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef, useState } from 'react'
 3 
import React, { useEffect, useRef, useState } from 'react'
3 
import EmptySection from '../../shared/empty-section/EmptySection';
 4 
import EmptySection from '../../shared/empty-section/EmptySection'
4 
import SearchIcon from '@mui/icons-material/Search'
 5 
import SearchIcon from '@mui/icons-material/Search'
5 
import { axios } from '../../utils';
 6 
import { axios } from '../../utils'
6 
import { Modal } from 'react-bootstrap';
 7 
import { Modal } from 'react-bootstrap'
Línea 7... Línea 8...
7 
 
 8 
 
Línea 8... Línea 9...
8 
let path_id = window.location.pathname.split('/inmail/')[1]
 9 
let path_id = window.location.pathname.split('/inmail/')[1]
9 
 
 10 
 
10 
const Sidebar = ({
 11 
const Sidebar = ({
11 
    selectedConversation = null,
 12 
  selectedConversation = null,
12 
    setConversation = function () { },
 13 
  setConversation = function () { }
13 
}) => {
 14 
}) => {
14 
    const [conversations, setConversations] = useState([])
 15 
  const [conversations, setConversations] = useState([])
15 
    const [searchActive, setSearchActive] = useState(false)
 16 
  const [searchActive, setSearchActive] = useState(false)
16 
    const [search, setSearch] = useState('')
 17 
  const [search, setSearch] = useState('')
17 
    const [visible, setVisible] = useState(false)
 18 
  const [visible, setVisible] = useState(false)
18 
    const searchContainer = useRef()
 19 
  const searchContainer = useRef()
19 
 
 20 
 
20 
    const filtredConversations = conversations.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))
 21 
  const filtredConversations = conversations.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))
21 
 
 22 
 
22 
    const load = async () => {
 23 
  const load = async () => {
23 
        try {
 24 
    try {
24 
            const { data } = await axios.get(window.location.href)
 25 
      const { data } = await axios.get(window.location.href)
25 
            if (data.success) setConversations(data.data)
 26 
      if (data.success) setConversations(data.data)
26 
        } catch (error) {
 - 
 
27 
            console.log('>>: error > ', error)
 27 
    } catch (error) {
- 
 
 28 
      console.log('>>: error > ', error)
Línea 28... Línea 29...
28 
        }
 29 
    }
29 
    }
 30 
  }
30 
 
 31 
 
31 
    useEffect(() => {
 32 
  useEffect(() => {
32 
        const handleClickOutside = (event) => {
 33 
    const handleClickOutside = (event) => {
33 
            if (searchContainer.current && !searchContainer.current.contains(event.target)) {
 34 
      if (searchContainer.current && !searchContainer.current.contains(event.target)) {
34 
                setSearchActive(false)
 35 
        setSearchActive(false)
Línea 35... Línea 36...
35 
            }
 36 
      }
36 
        }
 37 
    }
37 
        document.addEventListener("mousedown", handleClickOutside);
 38 
    document.addEventListener('mousedown', handleClickOutside)
38 
 
 39 
 
39 
        return () => {
 40 
    return () => {
40 
            document.removeEventListener("mousedown", handleClickOutside);
 41 
      document.removeEventListener('mousedown', handleClickOutside)
41 
        };
 42 
    }
42 
    }, [searchContainer]);
 43 
  }, [searchContainer])
43 
 
 44 
 
44 
    useEffect(() => {
 45 
  useEffect(() => {
45 
        if (path_id && conversations.length) {
 46 
    if (path_id && conversations.length) {
- 
 
 47 
      setConversation(conversations.find(conversation => conversation.uuid === path_id))
- 
 
 48 
      path_id = null
- 
 
 49 
    }
- 
 
 50 
  }, [conversations])
- 
 
 51 
 
Línea 46... Línea -...
46 
            setConversation(conversations.find(conversation => conversation.uuid === path_id))
 - 
 
47 
            path_id = null
 - 
 
48 
        }
 - 
 
49 
    }, [conversations]);
 - 
 
50 
 
 - 
 
51 
    useEffect(() => {
 52 
  useEffect(() => {
52 
        const interval = setInterval(() => {
 53 
    const interval = setInterval(() => {
53 
            load()
 54 
      load()
54 
        }, 3000)
 55 
    }, 3000)
55 
 
 56 
 
56 
        return () => {
 57 
    return () => {
57 
            clearInterval(interval)
 58 
      clearInterval(interval)
58 
        };
 59 
    }
59 
    }, []);
 60 
  }, [])
60 
 
 61 
 
61 
    return (
 62 
  return (
62 
        <>
 63 
    <>
63 
            <Sidebar.StartConversationModal
 64 
      <Sidebar.StartConversationModal
64 
                show={visible}
 65 
        show={visible}
- 
 
 66 
        setConversation={setConversation}
- 
 
 67 
      />
- 
 
 68 
      <div className="chat_contacts">
65 
                setConversation={setConversation}
 69 
        <h1 className='chat-title'>{LABELS.PEOPLE}</h1>
- 
 
 70 
        <div className="msgs_icons-container">
66 
            />
 71 
          <div className='contact__search show' ref={searchContainer}>
67 
            <div className="chat_contacts">
 72 
            <SearchIcon onClick={() => setSearchActive(!searchActive)} />
68 
                <h1 className='chat-title'>Personas</h1>
 73 
            <input type='text' placeholder={LABELS.SEARCH} onChange={(e) => setSearch(e.target.value)} />
- 
 
 74 
          </div>
- 
 
 75 
          <div className="d-inline-flex align-items-center cursor-pointer" style={{ gap: '.5rem' }} onClick={() => setVisible(true)}>
69 
                <div className="msgs_icons-container">
 76 
            <i className='fa fa-plus icon text-gray' />
70 
                    <div
 77 
            {LABELS.START_CONVERSATION}
71 
                        className={`contact__search show`}
 78 
          </div>
72 
                        ref={searchContainer}
 79 
        </div>
73 
                    >
 80 
        {!filtredConversations.length
- 
 
 81 
          ? <EmptySection message='Sin conversaciones' />
74 
                        <SearchIcon onClick={() => setSearchActive(!searchActive)} />
 82 
          : <ul className='messages-list'>
- 
 
 83 
            {filtredConversations.map((conversation) => {
75 
                        <input
 84 
              return (
- 
 
 85 
                <li key={conversation.uuid} onClick={() => setConversation(conversation)}>
- 
 
 86 
                  <div className={`usr-msg-details ${selectedConversation?.uuid === conversation.uuid && 'is_selected'}`}>
76 
                            type='text'
 87 
                    <div className="usr-ms-img">
77 
                            placeholder='Buscar'
 88 
                      <img src={conversation.image} alt={conversation.name} />
- 
 
 89 
                    </div>
78 
                            onChange={(e) => setSearch(e.target.value)}
 90 
                    <div className="usr-mg-info">
- 
 
 91 
                      <h3>{conversation.name}</h3>
79 
                        />
 92 
                      {Number(conversation.count_unread) > 0 &&
80 
                    </div>
 93 
                        <p className="text-gray">
81 
                    <div className="d-inline-flex align-items-center cursor-pointer" style={{ gap: '.5rem' }} onClick={() => setVisible(true)}>
 - 
 
82 
                        <i className='fa fa-plus icon text-gray' />
 - 
 
83 
                        Iniciar conversación
 - 
 
84 
                    </div>
 - 
 
85 
                </div>
 - 
 
86 
                {!filtredConversations.length
 - 
 
87 
                    ? <EmptySection message='Sin conversaciones' />
 - 
 
88 
                    : <ul className='messages-list'>
 - 
 
89 
                        {filtredConversations.map((conversation) => {
 - 
 
90 
                            return (
 - 
 
91 
                                <li key={conversation.uuid} onClick={() => setConversation(conversation)}>
 - 
 
92 
                                    <div className={`usr-msg-details ${selectedConversation?.uuid === conversation.uuid && 'is_selected'}`}>
 - 
 
93 
                                        <div className="usr-ms-img">
 - 
 
94 
                                            <img src={conversation.image} alt={conversation.name} />
 - 
 
95 
                                        </div>
 - 
 
96 
                                        <div className="usr-mg-info">
 - 
 
97 
                                            <h3>{conversation.name}</h3>
 - 
 
98 
                                            {Number(conversation.count_unread) > 0 &&
 - 
 
99 
                                                <p className="text-gray">
 - 
 
100 
                                                    {conversation.count_unread} mensajes nuevos | <span> {conversation.last_message} </span>
 94 
                          {conversation.count_unread} {LABELS.NEW_MESSAGES.toLowerCase()} | <span> {conversation.last_message} </span>
101 
                                                </p>
 95 
                        </p>
102 
                                            }
 96 
                      }
103 
                                        </div>
 97 
                    </div>
104 
                                    </div>
 98 
                  </div>
105 
                                </li>
 99 
                </li>
106 
                            )
 100 
              )
107 
                        })}
 101 
            })}
108 
                    </ul>
 102 
          </ul>
Línea 109... Línea 103...
109 
                }
 103 
        }
110 
            </div>
 104 
      </div>
111 
        </>
 105 
    </>
112 
    )
 106 
  )
113 
}
 107 
}
114 
 
 108 
 
115 
const StartConversationModal = ({ show, setConversation }) => {
 109 
const StartConversationModal = ({ show, setConversation }) => {
116 
    const [search, setSearch] = useState('')
 110 
  const [search, setSearch] = useState('')
117 
    const [isShow, setIsShow] = useState(show)
 111 
  const [isShow, setIsShow] = useState(show)
118 
    const [inmailPersons, setInmailPersons] = useState([])
 112 
  const [inmailPersons, setInmailPersons] = useState([])
119 
 
 113 
 
120 
    const closeModal = () => setIsShow(false)
 114 
  const closeModal = () => setIsShow(false)
121 
    const handleSearch = ({ target }) => setSearch(target.value)
 115 
  const handleSearch = ({ target }) => setSearch(target.value)
122 
 
 116 
 
123 
    const searchUsers = async value => {
 - 
 
124 
        try {
 117 
  const searchUsers = async value => {
- 
 
 118 
    try {
Línea 125... Línea 119...
125 
            const { data } = await axios.get('/helpers/search-people?search=' + value)
 119 
      const { data } = await axios.get('/helpers/search-people?search=' + value)
126 
            if (data.success) setInmailPersons(data.data)
 120 
      if (data.success) setInmailPersons(data.data)
127 
        } catch (error) {
 121 
    } catch (error) {
128 
            console.log('>>: error > ', error)
 122 
      console.log('>>: error > ', error)
129 
        }
 123 
    }
130 
    }
 124 
  }
131 
 
 125 
 
132 
    const handleInmailPerson = uuid => {
 126 
  const handleInmailPerson = uuid => {
133 
        closeModal()
 127 
    closeModal()
134 
        axios.get(`/inmail/${uuid}`)
 128 
    axios.get(`/inmail/${uuid}`)
135 
            .then(({ data }) => {
 129 
      .then(({ data }) => {
136 
                if (data.success) {
 130 
        if (data.success) {
137 
                    const newConversation = data.data.find(conversation => conversation.uuid === uuid)
 131 
          const newConversation = data.data.find(conversation => conversation.uuid === uuid)
138 
                    setConversation(newConversation)
 132 
          setConversation(newConversation)
139 
                }
 133 
        }
140 
            })
 134 
      })
141 
    }
 135 
  }
142 
 
 136 
 
143 
    useEffect(() => {
 137 
  useEffect(() => {
144 
        searchUsers(search)
 138 
    searchUsers(search)
145 
    }, [search]);
 139 
  }, [search])
146 
 
 140 
 
147 
    useEffect(() => {
 141 
  useEffect(() => {
148 
        setIsShow(show)
 142 
    setIsShow(show)
149 
    }, [show])
 143 
  }, [show])
150 
 
 144 
 
151 
    return (
 145 
  return (
152 
        <Modal
 146 
    <Modal
153 
            show={isShow}
 147 
      show={isShow}
154 
            onHide={closeModal}
 148 
      onHide={closeModal}
155 
        >
 149 
    >
156 
            <Modal.Header closeButton>
 150 
      <Modal.Header closeButton>
157 
                <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>
 - 
 
158 
            </Modal.Header>
 151 
        <h3 className="card-title font-weight-bold">{LABELS.CREATE_INMAIL}</h3>
159 
            <div className="form-group">
 152 
      </Modal.Header>
160 
                <label htmlFor="search-people">Escribe el nombre</label>
 153 
      <div className="form-group">
161 
                <input
 154 
        <label htmlFor="search-people">{LABELS.WRITE_NAME}</label>
162 
                    type="email"
 155 
        <input
163 
                    className="form-control"
 156 
          type="email"
164 
                    id="search-people"
 157 
          className="form-control"
165 
                    aria-describedby="Buscador de personas"
 158 
          aria-describedby="Buscador de personas"
166 
                    placeholder="Escribe el nombre de la persona"
 159 
          placeholder={LABELS.WRITE_PERSON_NAME}
167 
                    onChange={handleSearch}
 160 
          onChange={handleSearch}
168 
                />
 161 
        />
169 
            </div>
 162 
      </div>
170 
            <div className='container'>
 163 
      <div className='container'>
171 
                {inmailPersons.map((person) => {
 - 
 
172 
                    return (
 - 
 
173 
                        <div className='row' key={person.value}>
 164 
        {inmailPersons.map((person) => {
174 
                            <div className='col-8'>
 - 
 
175 
                                <p>{person.text}</p>
 165 
          return (
176 
                            </div>
 - 
 
177 
                            <div className='col-4'>
 - 
 
178 
                                <button
 - 
 
179 
                                    className='btn btn-primary'
 166 
            <div className='row' key={person.value}>
180 
                                    onClick={() => handleInmailPerson(person.value)}
 167 
              <div className='col-8'>
181 
                                >
 168 
                <p>{person.text}</p>
- 
 
 169 
              </div>
- 
 
 170 
              <div className='col-4'>
- 
 
 171 
                <button className='btn btn-primary' onClick={() => handleInmailPerson(person.value)}>
182 
                                    <i className='fa fa-check' />
 172 
                  <i className='fa fa-check' />
183 
                                </button>
 173 
                </button>
184 
                            </div>
 174 
              </div>
Línea 185... Línea 175...
185 
                        </div>
 175 
            </div>
Línea 186... Línea -...
186 
                    )
 - 
 
187 
                })}
 176 
          )
- 
 
 177 
        })}