Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5180 Rev 5996
Línea 4... Línea 4...
4 
import { addNotification } from '../redux/notification/notification.actions'
 4 
import { addNotification } from '../redux/notification/notification.actions'
5 
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
 5 
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
6 
import Spinner from '../shared/loading-spinner/Spinner'
 6 
import Spinner from '../shared/loading-spinner/Spinner'
7 
import { axios } from '../utils'
 7 
import { axios } from '../utils'
8 
import styled from 'styled-components'
 8 
import styled from 'styled-components'
- 
 
 9 
import { useSelector } from 'react-redux'
Línea 9... Línea 10...
9 
 
 10 
 
10 
const StyledSpinnerContainer = styled.div`
 11 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
 12 
  position: absolute;
12 
  left: 0;
 13 
  left: 0;
Línea 42... Línea 43...
42 
  link_impersonate,
 43 
  link_impersonate,
43 
  fetchCallback,
 44 
  fetchCallback,
44 
  isTopData = false,
 45 
  isTopData = false,
45 
  btnAcceptTitle = 'Ver perfil',
 46 
  btnAcceptTitle = 'Ver perfil',
46 
  btnCancelTitle = 'Borrar perfil',
 47 
  btnCancelTitle = 'Borrar perfil',
47 
  btnEditTitle = 'Editar perfil'
 48 
  btnEditTitle = 'Editar perfil',
48 
}) => {
 49 
}) => {
49 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false)
 50 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false)
50 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false)
 51 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] =
- 
 
 52 
    useState(false)
51 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false)
 53 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] =
- 
 
 54 
    useState(false)
52 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false)
 55 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] =
- 
 
 56 
    useState(false)
53 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false)
 57 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] =
- 
 
 58 
    useState(false)
54 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false)
 59 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] =
- 
 
 60 
    useState(false)
55 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false)
 61 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] =
- 
 
 62 
    useState(false)
56 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false)
 63 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] =
- 
 
 64 
    useState(false)
57 
  const [loading, setLoading] = useState(false)
 65 
  const [loading, setLoading] = useState(false)
- 
 
 66 
  const labels = useSelector((state) => state.labels)
Línea 58... Línea 67...
58 
 
 67 
 
59 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
 68 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
60 
    setShowConfirmationBox(show)
 69 
    setShowConfirmationBox(show)
61 
  }
 70 
  }
Línea 90... Línea 99...
90 
    }
 99 
    }
91 
  }
 100 
  }
Línea 92... Línea 101...
92 
 
 101 
 
93 
  const handleCancelApply = (url = link_delete) => {
 102 
  const handleCancelApply = (url = link_delete) => {
- 
 
 103 
    setLoading(true)
94 
    setLoading(true)
 104 
    axios
95 
    axios.post(url)
 105 
      .post(url)
96 
      .then(({ data }) => {
 106 
      .then(({ data }) => {
97 
        if (!data.success) {
 107 
        if (!data.success) {
98 
          const errorMsg =
 108 
          const errorMsg =
99 
            typeof data.data === 'string'
 109 
            typeof data.data === 'string'
100 
              ? data.data
 110 
              ? data.data
101 
              : 'Ha ocurrido un error, Por favor intente más tarde'
 111 
              : 'Ha ocurrido un error, Por favor intente más tarde'
102 
          addNotification({
 112 
          addNotification({
103 
            style: 'danger',
 113 
            style: 'danger',
104 
            msg: errorMsg
 114 
            msg: errorMsg,
105 
          })
 115 
          })
106 
        }
 116 
        }
107 
        const msg = data.data
 117 
        const msg = data.data
108 
        addNotification({
 118 
        addNotification({
109 
          style: 'success',
 119 
          style: 'success',
110 
          msg
 120 
          msg,
111 
        })
 121 
        })
112 
        if (fetchCallback) fetchCallback()
 122 
        if (fetchCallback) fetchCallback()
113 
      })
 123 
      })
114 
      .catch((error) => console.log('>>: error > ', error))
 124 
      .catch((error) => console.log('>>: error > ', error))
115 
      .finally(() => setLoading(false))
 125 
      .finally(() => setLoading(false))
Línea 116... Línea 126...
116 
  }
 126 
  }
117 
 
 127 
 
118 
  const handleUnfollow = async (link_unfollow) => {
 128 
  const handleUnfollow = async (link_unfollow) => {
119 
    setLoading(true)
 - 
 
120 
    await axios.post(link_unfollow)
 129 
    setLoading(true)
Línea 121... Línea 130...
121 
      .then(({ data }) => {
 130 
    await axios.post(link_unfollow).then(({ data }) => {
122 
        if (data.success) fetchCallback()
 131 
      if (data.success) fetchCallback()
123 
 
 132 
 
124 
        typeof data.data === 'string' &&
 133 
      typeof data.data === 'string' &&
125 
          addNotification({
 134 
        addNotification({
126 
            style: 'danger',
 135 
          style: 'danger',
127 
            msg: data.data
 136 
          msg: data.data,
128 
          })
 137 
        })
Línea 129... Línea 138...
129 
      })
 138 
    })
130 
    setLoading(false)
 139 
    setLoading(false)
Línea 138... Línea 147...
138 
      console.log('>>: error > ', error)
 147 
      console.log('>>: error > ', error)
139 
    }
 148 
    }
140 
  }
 149 
  }
Línea 141... Línea 150...
141 
 
 150 
 
142 
  return (
 151 
  return (
143 
    <div className='profile_info'>
 152 
    <div className="profile_info">
144 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
 153 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
145 
        {image &&
 154 
        {image && (
- 
 
 155 
          <div className="profile_info_header_imgContainer">
- 
 
 156 
            <img
- 
 
 157 
              src={image}
146 
          <div className='profile_info_header_imgContainer'>
 158 
              className="object-fit-contain"
- 
 
 159 
              style={{ maxHeight: '100px' }}
- 
 
 160 
              alt="group image"
147 
            <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
 161 
            />
148 
          </div>
 162 
          </div>
- 
 
 163 
        )}
- 
 
 164 
        <div
- 
 
 165 
          className={`${
149 
        }
 166 
            image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'
- 
 
 167 
          } ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}
- 
 
 168 
        >
150 
        <div className={`${image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'} ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}>
 169 
          <h3
- 
 
 170 
            className={`${status ? '' : 'w-100 text-left'} ${
- 
 
 171 
              isTopData ? 'mb-2' : ''
- 
 
 172 
            } w-100`}
151 
          <h3 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
 173 
          >
152 
            {name}
 174 
            {name}
153 
          </h3>
 175 
          </h3>
- 
 
 176 
          {isTopData && email && (
154 
          {(isTopData && email) &&
 177 
            <h4
- 
 
 178 
              className={`${status ? '' : 'w-100 text-left'} ${
- 
 
 179 
                isTopData ? 'mb-2' : ''
- 
 
 180 
              } w-100`}
155 
            <h4 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
 181 
            >
156 
              {email}
 182 
              {email}
157 
            </h4>
 183 
            </h4>
158 
          }
 184 
          )}
- 
 
 185 
          {network && (
159 
          {network &&
 186 
            <h4
- 
 
 187 
              className={`${status ? '' : 'w-100 text-left'} ${
- 
 
 188 
                isTopData ? 'mb-2' : ''
- 
 
 189 
              } w-100`}
160 
            <h4 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
 190 
            >
161 
              {network}
 191 
              {network}
162 
            </h4>
 192 
            </h4>
163 
          }
 193 
          )}
164 
          {isTopData &&
 194 
          {isTopData && (
165 
            <ul>
 195 
            <ul>
166 
              {link_view &&
 196 
              {link_view && (
167 
                <li>
 197 
                <li>
168 
                  <a
 198 
                  <a
169 
                    href={link_view}
 199 
                    href={link_view}
170 
                    data-link={link_view}
 200 
                    data-link={link_view}
171 
                    className="btn btn-secondary ellipsis"
 201 
                    className="btn btn-secondary ellipsis"
172 
                  >
 202 
                  >
173 
                    {btnAcceptTitle}
 203 
                    {btnAcceptTitle}
174 
                  </a>
 204 
                  </a>
175 
                </li>
 205 
                </li>
176 
              }
 206 
              )}
177 
              {link_inmail &&
 207 
              {link_inmail && (
178 
                <li>
 208 
                <li>
179 
                  <a
 209 
                  <a
180 
                    href={link_inmail}
 210 
                    href={link_inmail}
181 
                    data-link={link_inmail}
 211 
                    data-link={link_inmail}
182 
                    className="btn btn-primary"
 212 
                    className="btn btn-primary"
183 
                  >
 213 
                  >
184 
                    {LABELS.MESSAGE}
 214 
                    {labels.MESSAGE}
185 
                  </a>
 215 
                  </a>
186 
                </li>
 216 
                </li>
187 
              }
 217 
              )}
188 
            </ul>
 218 
            </ul>
189 
          }
 219 
          )}
190 
        </div>
 220 
        </div>
- 
 
 221 
        {status && (
191 
        {status &&
 222 
          <h4
- 
 
 223 
            className={`col-sm-12 d-flex justify-content-center align-items-center ${
- 
 
 224 
              !image ? 'position-relative' : ''
- 
 
 225 
            }`}
192 
          <h4 className={`col-sm-12 d-flex justify-content-center align-items-center ${!image ? 'position-relative' : ''}`}>
 226 
          >
193 
            {status}
 227 
            {status}
194 
          </h4>
 228 
          </h4>
195 
        }
 229 
        )}
196 
      </div>
 230 
      </div>
197 
      <hr />
 231 
      <hr />
198 
      <ul>
 - 
 
199 
        {
 232 
      <ul>
200 
          link_view && !isTopData && (
 233 
        {link_view && !isTopData && (
201 
            <li>
 234 
          <li>
202 
              <a
 235 
            <a
203 
                href={link_view}
 236 
              href={link_view}
204 
                data-link={link_view}
 237 
              data-link={link_view}
205 
                title=""
 238 
              title=""
206 
                className="btn btn-primary"
 239 
              className="btn btn-primary"
207 
              >
 240 
            >
208 
                {btnAcceptTitle}
 241 
              {btnAcceptTitle}
209 
              </a>
 242 
            </a>
210 
            </li>
 - 
 
211 
          )
 243 
          </li>
212 
        }
 - 
 
213 
        {
 244 
        )}
214 
          link_edit && (
 245 
        {link_edit && (
215 
            <li>
 246 
          <li>
216 
              <a
 247 
            <a
217 
                href={link_edit}
 248 
              href={link_edit}
218 
                data-link={link_edit}
 249 
              data-link={link_edit}
219 
                title=""
 250 
              title=""
220 
                className="btn btn-secondary"
 251 
              className="btn btn-secondary"
221 
              >
 252 
            >
222 
                {btnEditTitle}
 253 
              {btnEditTitle}
223 
              </a>
 254 
            </a>
224 
            </li>
 - 
 
225 
          )
 255 
          </li>
226 
        }
 - 
 
227 
        {
 256 
        )}
228 
          link_approve &&
 257 
        {link_approve && (
229 
          <li>
 258 
          <li>
230 
            <a
 259 
            <a
231 
              href="#"
 260 
              href="#"
232 
              className="btn btn-tertiary"
 261 
              className="btn btn-tertiary"
233 
              onClick={(e) => {
 262 
              onClick={(e) => {
234 
                e.preventDefault()
 263 
                e.preventDefault()
235 
                handleApproveConfirmationBox()
 264 
                handleApproveConfirmationBox()
236 
              }}
 265 
              }}
237 
            >
 266 
            >
238 
            {LABELS.APPROVE}
 267 
              {labels.APPROVE}
239 
            </a>
 268 
            </a>
240 
          </li>
 269 
          </li>
241 
        }
 - 
 
242 
        {
 270 
        )}
243 
          link_accept &&
 271 
        {link_accept && (
244 
          <li>
 272 
          <li>
245 
            <a
 273 
            <a
246 
              href="#"
 274 
              href="#"
247 
              className="btn btn-tertiary"
 275 
              className="btn btn-tertiary"
248 
              onClick={(e) => {
 276 
              onClick={(e) => {
249 
                e.preventDefault()
 277 
                e.preventDefault()
250 
                handleApproveConfirmationBox()
 278 
                handleApproveConfirmationBox()
251 
              }}
 279 
              }}
252 
            >
 280 
            >
253 
              {LABELS.ACCEPT}
 281 
              {labels.ACCEPT}
254 
            </a>
 282 
            </a>
255 
          </li>
 283 
          </li>
256 
        }
 - 
 
257 
        {
 284 
        )}
258 
          link_reject &&
 285 
        {link_reject && (
259 
          <li>
 286 
          <li>
260 
            <a
 287 
            <a
261 
              href="#"
 288 
              href="#"
262 
              className="btn btn-tertiary"
 289 
              className="btn btn-tertiary"
263 
              onClick={(e) => {
 290 
              onClick={(e) => {
264 
                e.preventDefault()
 291 
                e.preventDefault()
265 
                handleRejectConfirmationBox()
 292 
                handleRejectConfirmationBox()
266 
              }}
 293 
              }}
267 
            >
 294 
            >
268 
              {LABELS.REJECT}
 295 
              {labels.REJECT}
269 
            </a>
 296 
            </a>
270 
          </li>
 297 
          </li>
271 
        }
 - 
 
272 
        {
 298 
        )}
273 
          link_delete &&
 299 
        {link_delete && (
274 
          <li>
 300 
          <li>
275 
            <a
 301 
            <a
276 
              href="#"
 302 
              href="#"
277 
              className="btn btn-tertiary"
 303 
              className="btn btn-tertiary"
Línea 281... Línea 307...
281 
              }}
 307 
              }}
282 
            >
 308 
            >
283 
              {btnCancelTitle}
 309 
              {btnCancelTitle}
284 
            </a>
 310 
            </a>
285 
          </li>
 311 
          </li>
286 
        }
 312 
        )}
287 
        {
 - 
 
288 
          link_inmail && !isTopData &&
 313 
        {link_inmail && !isTopData && (
289 
          <li>
 314 
          <li>
290 
            <a
 315 
            <a
291 
              href={link_inmail}
 316 
              href={link_inmail}
292 
              data-link={link_inmail}
 317 
              data-link={link_inmail}
293 
              title=""
 318 
              title=""
294 
              className="btn btn-secondary"
 319 
              className="btn btn-secondary"
295 
            >
 320 
            >
296 
              {LABELS.MESSAGE}
 321 
              {labels.MESSAGE}
297 
            </a>
 322 
            </a>
298 
          </li>
 323 
          </li>
299 
        }
 324 
        )}
300 
        {
 - 
 
301 
          link_admin &&
 325 
        {link_admin && (
302 
          <li>
 326 
          <li>
303 
            <a
 327 
            <a
304 
              onClick={() => getManageUrl()}
 328 
              onClick={() => getManageUrl()}
305 
              data-link={link_admin}
 329 
              data-link={link_admin}
306 
              title="Administrar empresa"
 330 
              title="Administrar empresa"
307 
              className="btn btn-secondary"
 331 
              className="btn btn-secondary"
308 
            >
 332 
            >
309 
              {LABELS.ADMINISTRATE}
 333 
              {labels.ADMINISTRATE}
310 
            </a>
 334 
            </a>
311 
          </li>
 335 
          </li>
312 
        }
 336 
        )}
313 
        {
 - 
 
314 
          link_unfollow &&
 337 
        {link_unfollow && (
315 
          <li>
 338 
          <li>
316 
            <a
 339 
            <a
317 
              onClick={() => handleUnfollow(link_unfollow)}
 340 
              onClick={() => handleUnfollow(link_unfollow)}
318 
              data-link={link_unfollow}
 341 
              data-link={link_unfollow}
319 
              title="Administrar empresa"
 342 
              title="Administrar empresa"
320 
              className="btn btn-tertiary"
 343 
              className="btn btn-tertiary"
321 
            >
 344 
            >
322 
              {LABELS.UNFOLLOW}
 345 
              {labels.UNFOLLOW}
323 
            </a>
 346 
            </a>
324 
          </li>
 347 
          </li>
325 
        }
 348 
        )}
Línea 326... Línea -...
326 
 
 - 
 
327 
        {
 349 
 
328 
          link_block &&
 350 
        {link_block && (
329 
          <li>
 351 
          <li>
330 
            <a
 352 
            <a
331 
              href="#"
 353 
              href="#"
332 
              className="btn btn-tertiary"
 354 
              className="btn btn-tertiary"
333 
              onClick={(e) => {
 355 
              onClick={(e) => {
334 
                e.preventDefault()
 356 
                e.preventDefault()
335 
                handleBlockConfirmationBox()
 357 
                handleBlockConfirmationBox()
336 
              }}
 358 
              }}
337 
            >
 359 
            >
338 
              {LABELS.BLOCK}
 360 
              {labels.BLOCK}
339 
            </a>
 361 
            </a>
340 
          </li>
 362 
          </li>
341 
        }
 - 
 
342 
        {
 363 
        )}
343 
          link_unblock && (
 364 
        {link_unblock && (
344 
            <li>
 365 
          <li>
345 
              <a
 366 
            <a
346 
                href="#"
 367 
              href="#"
347 
                className="btn btn-tertiary"
 368 
              className="btn btn-tertiary"
348 
                onClick={(e) => {
 369 
              onClick={(e) => {
349 
                  e.preventDefault()
 370 
                e.preventDefault()
350 
                  handleUnblockConfirmationBox()
 371 
                handleUnblockConfirmationBox()
351 
                }}
 372 
              }}
352 
              >
 373 
            >
353 
                {LABELS.UNBLOCK}
 374 
              {labels.UNBLOCK}
354 
              </a>
 375 
            </a>
355 
            </li>
 - 
 
356 
          )
 376 
          </li>
357 
        }
 - 
 
358 
        {
 377 
        )}
359 
          link_request &&
 378 
        {link_request && (
360 
          <li>
 379 
          <li>
361 
            <a
 380 
            <a
362 
              href="#"
 381 
              href="#"
363 
              className="btn btn-tertiary"
 382 
              className="btn btn-tertiary"
364 
              onClick={(e) => {
 383 
              onClick={(e) => {
365 
                e.preventDefault()
 384 
                e.preventDefault()
366 
                handleRequestConfirmationBox()
 385 
                handleRequestConfirmationBox()
367 
              }}
 386 
              }}
368 
            >
 387 
            >
369 
              {LABELS.CONNECT}
 388 
              {labels.CONNECT}
370 
            </a>
 389 
            </a>
371 
          </li>
 390 
          </li>
372 
        }
 - 
 
373 
        {
 391 
        )}
374 
          link_cancel &&
 392 
        {link_cancel && (
375 
          <li>
 393 
          <li>
376 
            <a
 394 
            <a
377 
              href="#"
 395 
              href="#"
378 
              className="btn btn-tertiary"
 396 
              className="btn btn-tertiary"
379 
              onClick={(e) => {
 397 
              onClick={(e) => {
380 
                e.preventDefault()
 398 
                e.preventDefault()
381 
                handleCancelConfirmationBox()
 399 
                handleCancelConfirmationBox()
382 
              }}
 400 
              }}
383 
            >
 401 
            >
384 
              {LABELS.CANCEL}
 402 
              {labels.CANCEL}
385 
            </a>
 403 
            </a>
386 
          </li>
 404 
          </li>
387 
        }
 405 
        )}
388 
        {link_leave &&
 406 
        {link_leave && (
389 
          <li>
 407 
          <li>
390 
            <a
 408 
            <a
391 
              href="#"
 409 
              href="#"
392 
              className="btn btn-tertiary"
 410 
              className="btn btn-tertiary"
393 
              onClick={(e) => {
 411 
              onClick={(e) => {
394 
                e.preventDefault()
 412 
                e.preventDefault()
395 
                handleLeaveConfirmationBox()
 413 
                handleLeaveConfirmationBox()
396 
              }}
 414 
              }}
397 
            >
 415 
            >
398 
              {LABELS.LEAVE}
 416 
              {labels.LEAVE}
399 
            </a>
 417 
            </a>
400 
          </li>
 418 
          </li>
401 
        }
 419 
        )}
402 
        {link_impersonate &&
 420 
        {link_impersonate && (
- 
 
 421 
          <li>
- 
 
 422 
            <a
- 
 
 423 
              href="#"
403 
        <li>
 424 
              className="btn btn-tertiary"
- 
 
 425 
              onClick={() => getImpersonateUrl(link_impersonate)}
- 
 
 426 
            >
- 
 
 427 
              {' '}
- 
 
 428 
              Personificar{' '}
404 
          <a href="#" className="btn btn-tertiary" onClick={() => getImpersonateUrl(link_impersonate)} > Personificar </a>
 429 
            </a>
405 
        </li>
 430 
          </li>
406 
      }
 431 
        )}
407 
      </ul>
 - 
 
408 
      {
 432 
      </ul>
409 
        link_delete &&
 433 
      {link_delete && (
410 
        <div style={{ position: 'relative' }}>
 434 
        <div style={{ position: 'relative' }}>
411 
          <ConfirmationBox
 435 
          <ConfirmationBox
412 
            show={showConfirmationBox}
 436 
            show={showConfirmationBox}
413 
            onClose={() => handleShowConfirmationBox(false)}
 437 
            onClose={() => handleShowConfirmationBox(false)}
414 
            onAccept={() => handleCancelApply(link_delete)}
 438 
            onAccept={() => handleCancelApply(link_delete)}
415 
          />
 439 
          />
416 
        </div>
 440 
        </div>
417 
      }
 - 
 
418 
      {
 441 
      )}
419 
        link_cancel && (
 442 
      {link_cancel && (
420 
          <div style={{ position: 'relative' }}>
 443 
        <div style={{ position: 'relative' }}>
421 
            <ConfirmationBox
 444 
          <ConfirmationBox
422 
              show={showCancelConfirmationBox}
 445 
            show={showCancelConfirmationBox}
423 
              onClose={() => handleCancelConfirmationBox(false)}
 446 
            onClose={() => handleCancelConfirmationBox(false)}
424 
              onAccept={() => handleCancelApply(link_cancel)}
 447 
            onAccept={() => handleCancelApply(link_cancel)}
425 
            />
 448 
          />
426 
          </div>
 - 
 
427 
        )
 449 
        </div>
428 
      }
 - 
 
429 
      {
 450 
      )}
430 
        link_block && (
 451 
      {link_block && (
431 
          <div style={{ position: 'relative' }}>
 452 
        <div style={{ position: 'relative' }}>
432 
            <ConfirmationBox
 453 
          <ConfirmationBox
433 
              show={showBlockConfirmationBox}
 454 
            show={showBlockConfirmationBox}
434 
              onClose={() => handleBlockConfirmationBox(false)}
 455 
            onClose={() => handleBlockConfirmationBox(false)}
435 
              onAccept={() => handleCancelApply(link_block)}
 456 
            onAccept={() => handleCancelApply(link_block)}
436 
            />
 457 
          />
437 
          </div>
 - 
 
438 
        )
 458 
        </div>
439 
      }
 - 
 
440 
      {
 459 
      )}
441 
        link_accept && (
 460 
      {link_accept && (
442 
          <div style={{ position: 'relative' }}>
 461 
        <div style={{ position: 'relative' }}>
443 
            <ConfirmationBox
 462 
          <ConfirmationBox
444 
              show={showApproveConfirmationBox}
 463 
            show={showApproveConfirmationBox}
445 
              onClose={() => handleApproveConfirmationBox(false)}
 464 
            onClose={() => handleApproveConfirmationBox(false)}
446 
              onAccept={() => handleCancelApply(link_accept)}
 465 
            onAccept={() => handleCancelApply(link_accept)}
447 
            />
 466 
          />
448 
          </div>
 - 
 
449 
        )
 467 
        </div>
450 
      }
 - 
 
451 
      {
 468 
      )}
452 
        link_approve && (
 469 
      {link_approve && (
453 
          <div style={{ position: 'relative' }}>
 470 
        <div style={{ position: 'relative' }}>
454 
            <ConfirmationBox
 471 
          <ConfirmationBox
455 
              show={showApproveConfirmationBox}
 472 
            show={showApproveConfirmationBox}
456 
              onClose={() => handleApproveConfirmationBox(false)}
 473 
            onClose={() => handleApproveConfirmationBox(false)}
457 
              onAccept={() => handleCancelApply(link_approve)}
 474 
            onAccept={() => handleCancelApply(link_approve)}
458 
            />
 475 
          />
459 
          </div>
 - 
 
460 
        )
 476 
        </div>
461 
      }
 - 
 
462 
      {
 477 
      )}
463 
        link_reject && (
 478 
      {link_reject && (
464 
          <div style={{ position: 'relative' }}>
 479 
        <div style={{ position: 'relative' }}>
465 
            <ConfirmationBox
 480 
          <ConfirmationBox
466 
              show={showRejectConfirmationBox}
 481 
            show={showRejectConfirmationBox}
467 
              onClose={() => handleRejectConfirmationBox(false)}
 482 
            onClose={() => handleRejectConfirmationBox(false)}
468 
              onAccept={() => handleCancelApply(link_reject)}
 483 
            onAccept={() => handleCancelApply(link_reject)}
469 
            />
 484 
          />
470 
          </div>
 - 
 
471 
        )
 485 
        </div>
472 
      }
 - 
 
473 
      {
 486 
      )}
474 
        link_request && (
 487 
      {link_request && (
475 
          <div style={{ position: 'relative' }}>
 488 
        <div style={{ position: 'relative' }}>
476 
            <ConfirmationBox
 489 
          <ConfirmationBox
477 
              show={showRequestConfirmationBox}
 490 
            show={showRequestConfirmationBox}
478 
              onClose={() => handleRequestConfirmationBox(false)}
 491 
            onClose={() => handleRequestConfirmationBox(false)}
479 
              onAccept={() => handleCancelApply(link_request)}
 492 
            onAccept={() => handleCancelApply(link_request)}
480 
            />
 493 
          />
481 
          </div>
 - 
 
482 
        )
 494 
        </div>
483 
      }
 - 
 
484 
      {
 495 
      )}
485 
        link_unblock && (
 496 
      {link_unblock && (
486 
          <div style={{ position: 'relative' }}>
 497 
        <div style={{ position: 'relative' }}>
487 
            <ConfirmationBox
 498 
          <ConfirmationBox
488 
              show={showUnblockConfirmationBox}
 499 
            show={showUnblockConfirmationBox}
489 
              onClose={() => handleUnblockConfirmationBox(false)}
 500 
            onClose={() => handleUnblockConfirmationBox(false)}
490 
              onAccept={() => handleCancelApply(link_unblock)}
 501 
            onAccept={() => handleCancelApply(link_unblock)}
491 
            />
 502 
          />
492 
          </div>
 - 
 
493 
        )
 503 
        </div>
494 
      }
 - 
 
495 
      {
 504 
      )}
496 
        link_leave && (
 505 
      {link_leave && (
497 
          <div style={{ position: 'relative' }}>
 506 
        <div style={{ position: 'relative' }}>
498 
            <ConfirmationBox
 507 
          <ConfirmationBox
499 
              show={showLeaveConfirmationBox}
 508 
            show={showLeaveConfirmationBox}
500 
              onClose={() => handleLeaveConfirmationBox(false)}
 509 
            onClose={() => handleLeaveConfirmationBox(false)}
501 
              onAccept={() => handleCancelApply(link_leave)}
 510 
            onAccept={() => handleCancelApply(link_leave)}
502 
            />
 511 
          />
503 
          </div>
 - 
 
504 
        )
 512 
        </div>
505 
      }
 513 
      )}
506 
      {loading &&
 514 
      {loading && (
507 
        <StyledSpinnerContainer>
 515 
        <StyledSpinnerContainer>
508 
          <Spinner />
 516 
          <Spinner />
509 
        </StyledSpinnerContainer>
 517 
        </StyledSpinnerContainer>
510 
      }
 518 
      )}
511 
    </div>
 519 
    </div>
512 
  )
 520 
  )
Línea 513... Línea 521...
513 
}
 521 
}