Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5191 Rev 5944
Línea 10... Línea 10...
10 
 
 10 
 
Línea 11... Línea 11...
11 
let path_id = window.location.pathname.split('/inmail/')[1]
 11 
let path_id = window.location.pathname.split('/inmail/')[1]
12 
 
 12 
 
13 
const Sidebar = ({
 13 
const Sidebar = ({
14 
  selectedConversation = null,
 14 
  selectedConversation = null,
15 
  setConversation = function () { }
 15 
  setConversation = function () {},
16 
}) => {
 16 
}) => {
17 
  const [conversations, setConversations] = useState([])
 17 
  const [conversations, setConversations] = useState([])
18 
  const [searchActive, setSearchActive] = useState(false)
 18 
  const [searchActive, setSearchActive] = useState(false)
19 
  const [search, setSearch] = useState('')
 19 
  const [search, setSearch] = useState('')
20 
  const [visible, setVisible] = useState(false)
 20 
  const [visible, setVisible] = useState(false)
21 
  const [loading, setLoading] = useState(false)
 21 
  const [loading, setLoading] = useState(false)
Línea 22... Línea 22...
22 
  const dispatch = useDispatch()
 22 
  const dispatch = useDispatch()
- 
 
 23 
  const searchContainer = useRef()
- 
 
 24 
 
Línea 23... Línea 25...
23 
  const searchContainer = useRef()
 25 
  const filtredConversations = conversations.filter((conversation) =>
24 
 
 26 
    conversation.name.toLowerCase().includes(search.toLowerCase())
25 
  const filtredConversations = conversations.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))
 27 
  )
26 
 
 28 
 
Línea 37... Línea 39...
37 
    }
 39 
    }
38 
  }
 40 
  }
Línea 39... Línea 41...
39 
 
 41 
 
40 
  useEffect(() => {
 42 
  useEffect(() => {
- 
 
 43 
    const handleClickOutside = (event) => {
- 
 
 44 
      if (
41 
    const handleClickOutside = (event) => {
 45 
        searchContainer.current &&
- 
 
 46 
        !searchContainer.current.contains(event.target)
42 
      if (searchContainer.current && !searchContainer.current.contains(event.target)) {
 47 
      ) {
43 
        setSearchActive(false)
 48 
        setSearchActive(false)
44 
      }
 49 
      }
45 
    }
 50 
    }
Línea 50... Línea 55...
50 
    }
 55 
    }
51 
  }, [searchContainer])
 56 
  }, [searchContainer])
Línea 52... Línea 57...
52 
 
 57 
 
53 
  useEffect(() => {
 58 
  useEffect(() => {
- 
 
 59 
    if (path_id && conversations.length) {
54 
    if (path_id && conversations.length) {
 60 
      setConversation(
- 
 
 61 
        conversations.find((conversation) => conversation.uuid === path_id)
55 
      setConversation(conversations.find(conversation => conversation.uuid === path_id))
 62 
      )
56 
      path_id = null
 63 
      path_id = null
57 
    }
 64 
    }
Línea 58... Línea 65...
58 
  }, [conversations])
 65 
  }, [conversations])
Línea 74... Línea 81...
74 
      <Sidebar.StartConversationModal
 81 
      <Sidebar.StartConversationModal
75 
        show={visible}
 82 
        show={visible}
76 
        setConversation={setConversation}
 83 
        setConversation={setConversation}
77 
      />
 84 
      />
78 
      <div className="chat_contacts">
 85 
      <div className="chat_contacts">
79 
        <h1 className='chat-title'>{LABELS.PEOPLE}</h1>
 86 
        <h1 className="chat-title">{LABELS.PEOPLE}</h1>
80 
        <div className="msgs_icons-container">
 87 
        <div className="msgs_icons-container">
81 
          <div className='contact__search show' ref={searchContainer}>
 88 
          <div className="contact__search show" ref={searchContainer}>
82 
            <SearchIcon onClick={() => setSearchActive(!searchActive)} />
 89 
            <SearchIcon onClick={() => setSearchActive(!searchActive)} />
- 
 
 90 
            <input
- 
 
 91 
              type="text"
- 
 
 92 
              placeholder={LABELS.SEARCH}
83 
            <input type='text' placeholder={LABELS.SEARCH} onChange={(e) => setSearch(e.target.value)} />
 93 
              onChange={(e) => setSearch(e.target.value)}
- 
 
 94 
            />
84 
          </div>
 95 
          </div>
- 
 
 96 
          <div
85 
          <div className="d-inline-flex align-items-center cursor-pointer" style={{ gap: '.5rem' }} onClick={() => setVisible(true)}>
 97 
            className="d-inline-flex align-items-center cursor-pointer"
- 
 
 98 
            style={{ gap: '.5rem' }}
- 
 
 99 
            onClick={() => setVisible(true)}
- 
 
 100 
          >
86 
            <i className='fa fa-plus icon text-gray' />
 101 
            <i className="fa fa-plus icon text-gray" />
87 
            {LABELS.START_CONVERSATION}
 102 
            {LABELS.START_CONVERSATION}
88 
          </div>
 103 
          </div>
89 
        </div>
 104 
        </div>
90 
        {!filtredConversations.length
 105 
        {!filtredConversations.length ? (
91 
          ? <EmptySection message='Sin conversaciones' />
 106 
          <EmptySection message="Sin conversaciones" />
- 
 
 107 
        ) : (
92 
          : <ul className='messages-list'>
 108 
          <ul className="messages-list">
93 
            {filtredConversations.map((conversation) => {
 109 
            {filtredConversations.map((conversation) => {
94 
              return (
 110 
              return (
- 
 
 111 
                <li
- 
 
 112 
                  key={conversation.uuid}
95 
                <li key={conversation.uuid} onClick={() => setConversation(conversation)}>
 113 
                  onClick={() => setConversation(conversation)}
- 
 
 114 
                >
- 
 
 115 
                  <div
- 
 
 116 
                    className={`usr-msg-details ${
96 
                  <div className={`usr-msg-details ${selectedConversation?.uuid === conversation.uuid && 'is_selected'}`}>
 117 
                      selectedConversation?.uuid === conversation.uuid &&
- 
 
 118 
                      'is_selected'
- 
 
 119 
                    }`}
- 
 
 120 
                  >
97 
                    <div className="usr-ms-img">
 121 
                    <div className="usr-ms-img">
98 
                      <img src={conversation.image} alt={conversation.name} />
 122 
                      <img src={conversation.image} alt={conversation.name} />
99 
                    </div>
 123 
                    </div>
100 
                    <div className="usr-mg-info">
 124 
                    <div className="usr-mg-info">
101 
                      <h3>{conversation.name}</h3>
 125 
                      <h3>{conversation.name}</h3>
102 
                      {Number(conversation.count_unread) > 0 &&
 126 
                      {Number(conversation.count_unread) > 0 && (
103 
                        <p className="text-gray">
 127 
                        <p className="text-gray">
- 
 
 128 
                          {conversation.count_unread}{' '}
- 
 
 129 
                          {LABELS.NEW_MESSAGES.toLowerCase()} |{' '}
104 
                          {conversation.count_unread} {LABELS.NEW_MESSAGES.toLowerCase()} | <span> {conversation.last_message} </span>
 130 
                          <span> {conversation.last_message} </span>
105 
                        </p>
 131 
                        </p>
106 
                      }
 132 
                      )}
107 
                    </div>
 133 
                    </div>
108 
                  </div>
 134 
                  </div>
109 
                </li>
 135 
                </li>
110 
              )
 136 
              )
111 
            })}
 137 
            })}
112 
          </ul>
 138 
          </ul>
113 
        }
 139 
        )}
114 
      </div>
 140 
      </div>
115 
    </>
 141 
    </>
116 
  )
 142 
  )
117 
}
 143 
}
Línea 122... Línea 148...
122 
  const [inmailPersons, setInmailPersons] = useState([])
 148 
  const [inmailPersons, setInmailPersons] = useState([])
Línea 123... Línea 149...
123 
 
 149 
 
124 
  const closeModal = () => setIsShow(false)
 150 
  const closeModal = () => setIsShow(false)
Línea 125... Línea 151...
125 
  const handleSearch = ({ target }) => setSearch(target.value)
 151 
  const handleSearch = ({ target }) => setSearch(target.value)
126 
 
 152 
 
127 
  const searchUsers = async value => {
 153 
  const searchUsers = async (value) => {
128 
    try {
 154 
    try {
129 
      const { data } = await axios.get('/helpers/search-people?search=' + value)
 155 
      const { data } = await axios.get('/helpers/search-people?search=' + value)
130 
      if (data.success) setInmailPersons(data.data)
 156 
      if (data.success) setInmailPersons(data.data)
131 
    } catch (error) {
 157 
    } catch (error) {
132 
      console.log('>>: error > ', error)
 158 
      console.log('>>: error > ', error)
Línea 133... Línea 159...
133 
    }
 159 
    }
134 
  }
 160 
  }
135 
 
 161 
 
136 
  const handleInmailPerson = uuid => {
 162 
  const handleInmailPerson = (uuid) => {
137 
    closeModal()
 163 
    closeModal()
138 
    axios.get(`/inmail/${uuid}`)
 164 
    axios.get(`/inmail/${uuid}`).then(({ data }) => {
- 
 
 165 
      if (data.success) {
139 
      .then(({ data }) => {
 166 
        const newConversation = data.data.find(
140 
        if (data.success) {
 167 
          (conversation) => conversation.uuid === uuid
141 
          const newConversation = data.data.find(conversation => conversation.uuid === uuid)
 168 
        )
142 
          setConversation(newConversation)
 169 
        setConversation(newConversation)
Línea 143... Línea 170...
143 
        }
 170 
      }
144 
      })
 171 
    })
145 
  }
 172 
  }
Línea 151... Línea 178...
151 
  useEffect(() => {
 178 
  useEffect(() => {
152 
    setIsShow(show)
 179 
    setIsShow(show)
153 
  }, [show])
 180 
  }, [show])
Línea 154... Línea 181...
154 
 
 181 
 
155 
  return (
 - 
 
156 
    <Modal
 - 
 
157 
      show={isShow}
 182 
  return (
158 
      onHide={closeModal}
 - 
 
159 
    >
 183 
    <Modal show={isShow} onHide={closeModal}>
160 
      <Modal.Header closeButton>
 184 
      <Modal.Header closeButton>
161 
        <h3 className="card-title font-weight-bold">{LABELS.CREATE_INMAIL}</h3>
 185 
        <h3 className="card-title font-weight-bold">{LABELS.CREATE_INMAIL}</h3>
- 
 
 186 
      </Modal.Header>
162 
      </Modal.Header>
 187 
      <Modal.Body>
163 
      <div className="form-group">
 188 
        <div className="form-group">
164 
        <label htmlFor="search-people">{LABELS.WRITE_NAME}</label>
 189 
          <label htmlFor="search-people">{LABELS.WRITE_NAME}</label>
165 
        <input
 190 
          <input
166 
          type="email"
 191 
            type="email"
167 
          className="form-control"
 192 
            className="form-control"
168 
          aria-describedby="Buscador de personas"
 193 
            aria-describedby="Buscador de personas"
169 
          placeholder={LABELS.WRITE_PERSON_NAME}
 194 
            placeholder={LABELS.WRITE_PERSON_NAME}
170 
          onChange={handleSearch}
 195 
            onChange={handleSearch}
171 
        />
 196 
          />
172 
      </div>
 197 
        </div>
173 
      <div className='container'>
 198 
        <div className="container">
174 
        {inmailPersons.map((person) => {
 199 
          {inmailPersons.map((person) => {
175 
          return (
 200 
            return (
176 
            <div className='row' key={person.value}>
 201 
              <div className="row" key={person.value}>
177 
              <div className='col-8'>
 202 
                <div className="col-8">
178 
                <p>{person.text}</p>
 203 
                  <p>{person.text}</p>
179 
              </div>
 204 
                </div>
- 
 
 205 
                <div className="col-4">
- 
 
 206 
                  <button
180 
              <div className='col-4'>
 207 
                    className="btn btn-primary"
- 
 
 208 
                    onClick={() => handleInmailPerson(person.value)}
181 
                <button className='btn btn-primary' onClick={() => handleInmailPerson(person.value)}>
 209 
                  >
182 
                  <i className='fa fa-check' />
 210 
                    <i className="fa fa-check" />
- 
 
 211 
                  </button>
183 
                </button>
 212 
                </div>
184 
              </div>
 213 
              </div>
185 
            </div>
 214 
            )
186 
          )
 215 
          })}
187 
        })}
 216 
        </div>
188 
      </div>
 217 
      </Modal.Body>
189 
    </Modal>
 218 
    </Modal>
190 
  )
 219 
  )
Línea 191... Línea 220...
191 
}
 220 
}