Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2937 | Rev 3156 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
720 stevensc 1
import React, { useRef, useState } from 'react'
2
import { axios } from '../../utils'
3
import { Avatar } from '@mui/material'
2614 stevensc 4
import { useNavigate } from 'react-router-dom'
720 stevensc 5
import { addNotification } from 'store/notification/notification.actions'
6
import { useDispatch, useSelector } from 'react-redux'
7
import styled from 'styled-components'
929 stevensc 8
 
720 stevensc 9
import Spinner from '../UI/Spinner'
1507 stevensc 10
import WidgetWrapper from '../widgets/WidgetLayout'
720 stevensc 11
import ConfirmModal from '../modals/ConfirmModal'
1567 stevensc 12
import Button from '../UI/buttons/Buttons'
5 stevensc 13
 
14
const StyledSpinnerContainer = styled.div`
15
  position: absolute;
16
  left: 0;
17
  top: 0;
18
  width: 100%;
19
  height: 100%;
20
  background: rgba(255, 255, 255, 0.4);
21
  place-items: center;
496 stevensc 22
  z-index: 50;
720 stevensc 23
`
607 stevensc 24
 
1507 stevensc 25
const StyledItemContainer = styled(WidgetWrapper)`
613 stevensc 26
  display: flex;
27
  flex-direction: column;
28
  justify-content: center;
2184 stevensc 29
  height: fit-content;
720 stevensc 30
  border-radius: 5px;
31
`
613 stevensc 32
 
607 stevensc 33
const StyledHeader = styled.div`
34
  align-items: center;
35
  display: flex;
36
  gap: 0.5rem;
663 andreina 37
  justify-content: flex-start;
607 stevensc 38
  position: relative;
966 stevensc 39
  padding: 0.5rem;
720 stevensc 40
`
607 stevensc 41
 
611 stevensc 42
const StyledContent = styled.div`
43
  display: flex;
44
  flex-direction: column;
45
  text-align: center;
645 stevensc 46
  ul {
611 stevensc 47
    align-items: center;
48
    display: flex;
49
    justify-content: center;
721 stevensc 50
    gap: 0.5rem;
611 stevensc 51
  }
720 stevensc 52
`
611 stevensc 53
 
848 stevensc 54
const Actions = styled.div`
55
  display: flex;
1330 stevensc 56
  flex-wrap: wrap;
848 stevensc 57
  justify-content: space-around;
58
  border-top: 1px solid rgb(211, 211, 211);
966 stevensc 59
  padding: 0.5rem;
929 stevensc 60
  gap: 0.5rem;
848 stevensc 61
`
62
 
607 stevensc 63
const StyledAvatar = styled(Avatar)`
665 andreina 64
  height: 60px !important;
720 stevensc 65
  width: 60px !important;
66
`
607 stevensc 67
 
5 stevensc 68
const ProfileItem = ({
69
  image,
70
  name,
71
  email,
72
  network,
73
  status,
74
  fetchCallback,
75
  link_remove,
76
  link_view,
77
  link_edit,
78
  link_delete,
79
  link_cancel,
80
  link_block,
81
  link_reject,
82
  link_accept,
83
  link_inmail,
84
  link_request,
85
  link_unblock,
86
  link_unfollow,
87
  link_approve,
88
  link_leave,
89
  link_admin,
90
  link_impersonate,
933 stevensc 91
  btnAcceptTitle,
92
  btnCancelTitle,
93
  btnEditTitle,
94
  btnLeaveTitle,
2937 stevensc 95
  btnRemoveLabel,
720 stevensc 96
  isTopData
5 stevensc 97
}) => {
720 stevensc 98
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
99
  const [loading, setLoading] = useState(false)
100
  const confirmUrl = useRef('')
101
  const labels = useSelector(({ intl }) => intl.labels)
102
  const dispatch = useDispatch()
2614 stevensc 103
  const navigate = useNavigate()
5 stevensc 104
 
720 stevensc 105
  const showConfirm = (url = '') => {
106
    setIsShowConfirmation(true)
107
    confirmUrl.current = url
108
  }
5 stevensc 109
 
496 stevensc 110
  const closeConfirm = () => {
720 stevensc 111
    setIsShowConfirmation(false)
112
    confirmUrl.current = ''
113
  }
5 stevensc 114
 
720 stevensc 115
  const getImpersonateUrl = async (url = '') => {
5 stevensc 116
    try {
1617 stevensc 117
      const { data: response } = await axios.get(url)
118
      const { data, success } = response
119
 
120
      if (success) {
1618 stevensc 121
        window.location.href = data
1617 stevensc 122
      }
5 stevensc 123
    } catch (error) {
720 stevensc 124
      console.log('>>: error > ', error)
5 stevensc 125
    }
720 stevensc 126
  }
5 stevensc 127
 
128
  const onConfirm = (url) => {
720 stevensc 129
    setLoading(true)
5 stevensc 130
    axios
131
      .post(url)
132
      .then((response) => {
720 stevensc 133
        const { success, data } = response.data
5 stevensc 134
 
135
        if (!success) {
136
          const errorMessage =
720 stevensc 137
            typeof data === 'string'
5 stevensc 138
              ? data
720 stevensc 139
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
5 stevensc 140
 
720 stevensc 141
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
142
          return
5 stevensc 143
        }
144
 
720 stevensc 145
        if (fetchCallback) fetchCallback()
146
        dispatch(addNotification({ style: 'success', msg: data }))
5 stevensc 147
      })
526 stevensc 148
      .catch(() => {
5 stevensc 149
        dispatch(
150
          addNotification({
720 stevensc 151
            style: 'error',
152
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
5 stevensc 153
          })
720 stevensc 154
        )
5 stevensc 155
      })
156
      .finally(() => {
720 stevensc 157
        confirmUrl.current = ''
158
        setLoading(false)
159
      })
160
  }
5 stevensc 161
 
162
  const handleUnfollow = (link_unfollow) => {
720 stevensc 163
    setLoading(true)
5 stevensc 164
    axios
165
      .post(link_unfollow)
166
      .then((response) => {
720 stevensc 167
        const { data, success } = response.data
5 stevensc 168
 
169
        if (!success) {
170
          const errorMessage =
720 stevensc 171
            typeof data === 'string'
5 stevensc 172
              ? data
720 stevensc 173
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
5 stevensc 174
 
720 stevensc 175
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
176
          return
5 stevensc 177
        }
178
 
720 stevensc 179
        if (fetchCallback) fetchCallback()
180
        dispatch(addNotification({ style: 'success', msg: data }))
5 stevensc 181
      })
720 stevensc 182
      .finally(() => setLoading(false))
183
  }
5 stevensc 184
 
1872 stevensc 185
  const getManageUrl = () => {
186
    axios
187
      .get(link_admin)
188
      .then((response) => {
189
        const { data, success } = response.data
190
 
191
        if (!success) {
192
          throw new Error(data)
193
        }
194
 
1884 stevensc 195
        setTimeout(() => {
196
          window.open(data, '_backend')
197
        }, 0)
1872 stevensc 198
      })
199
      .catch((error) => {
200
        console.log('>>: error > ', error)
201
      })
720 stevensc 202
  }
5 stevensc 203
 
723 stevensc 204
  const navigateTo = (url) => {
2614 stevensc 205
    navigate(url)
723 stevensc 206
  }
207
 
5 stevensc 208
  return (
597 stevensc 209
    <>
613 stevensc 210
      <StyledItemContainer>
607 stevensc 211
        <StyledHeader>
212
          {image && <StyledAvatar src={image} alt={`${name} image`} />}
611 stevensc 213
          <StyledContent>
214
            <h2>{name}</h2>
597 stevensc 215
            {isTopData && email && <h4>{email}</h4>}
611 stevensc 216
            {network && <span>{network}</span>}
217
            {status && <span>{status}</span>}
597 stevensc 218
            {isTopData && (
219
              <ul>
220
                {link_view && (
221
                  <li>
1567 stevensc 222
                    <Button
223
                      variant='primary'
929 stevensc 224
                      onClick={() => navigateTo(link_view)}
1567 stevensc 225
                    >
226
                      {btnAcceptTitle || labels.view_profile}
227
                    </Button>
597 stevensc 228
                  </li>
229
                )}
230
                {link_inmail && (
231
                  <li>
1567 stevensc 232
                    <Button
233
                      variant='secondary'
929 stevensc 234
                      onClick={() => navigateTo(link_inmail)}
1567 stevensc 235
                    >
236
                      {labels.message}
237
                    </Button>
597 stevensc 238
                  </li>
239
                )}
240
              </ul>
241
            )}
611 stevensc 242
          </StyledContent>
607 stevensc 243
        </StyledHeader>
848 stevensc 244
        <Actions>
931 stevensc 245
          {link_view && !isTopData ? (
1567 stevensc 246
            <Button variant='primary' onClick={() => navigateTo(link_view)}>
247
              {btnAcceptTitle || labels.view_profile}
248
            </Button>
929 stevensc 249
          ) : null}
5 stevensc 250
 
929 stevensc 251
          {link_edit ? (
1567 stevensc 252
            <Button onClick={() => navigateTo(link_edit)} variant='secondary'>
253
              {btnEditTitle || labels.edit}
254
            </Button>
929 stevensc 255
          ) : null}
5 stevensc 256
 
929 stevensc 257
          {link_accept ? (
1567 stevensc 258
            <Button onClick={() => onConfirm(link_accept)} variant='secondary'>
259
              {labels.accept}
260
            </Button>
929 stevensc 261
          ) : null}
5 stevensc 262
 
931 stevensc 263
          {link_inmail && !isTopData ? (
1567 stevensc 264
            <Button variant='secondary' onClick={() => navigateTo(link_inmail)}>
265
              {labels.message}
266
            </Button>
929 stevensc 267
          ) : null}
5 stevensc 268
 
929 stevensc 269
          {link_admin ? (
1567 stevensc 270
            <Button
271
              variant='secondary'
929 stevensc 272
              onClick={() => getManageUrl(link_admin)}
1567 stevensc 273
            >
274
              {labels.administrate}
275
            </Button>
929 stevensc 276
          ) : null}
5 stevensc 277
 
929 stevensc 278
          {link_approve ? (
1567 stevensc 279
            <Button variant='secondary' onClick={() => onConfirm(link_approve)}>
280
              {labels.approve}
281
            </Button>
929 stevensc 282
          ) : null}
5 stevensc 283
 
929 stevensc 284
          {link_unblock ? (
1567 stevensc 285
            <Button variant='secondary' onClick={() => onConfirm(link_unblock)}>
286
              {labels.unblock}
287
            </Button>
929 stevensc 288
          ) : null}
5 stevensc 289
 
929 stevensc 290
          {link_request ? (
1567 stevensc 291
            <Button variant='secondary' onClick={() => onConfirm(link_request)}>
292
              {labels.connect}
293
            </Button>
929 stevensc 294
          ) : null}
295
 
296
          {link_impersonate ? (
1567 stevensc 297
            <Button
298
              variant='secondary'
929 stevensc 299
              onClick={() => getImpersonateUrl(link_impersonate)}
1567 stevensc 300
            >
301
              Personificar
302
            </Button>
929 stevensc 303
          ) : null}
304
 
305
          {link_remove ? (
1567 stevensc 306
            <Button variant='tertiary' onClick={() => showConfirm(link_remove)}>
2937 stevensc 307
              {btnRemoveLabel}
1567 stevensc 308
            </Button>
929 stevensc 309
          ) : null}
310
 
311
          {link_reject ? (
1567 stevensc 312
            <Button variant='tertiary' onClick={() => showConfirm(link_reject)}>
313
              {labels.reject}
314
            </Button>
929 stevensc 315
          ) : null}
316
 
317
          {link_delete ? (
1567 stevensc 318
            <Button variant='tertiary' onClick={() => showConfirm(link_delete)}>
319
              {btnCancelTitle || labels.cancel}
320
            </Button>
929 stevensc 321
          ) : null}
322
 
323
          {link_unfollow ? (
1567 stevensc 324
            <Button
325
              variant='tertiary'
929 stevensc 326
              onClick={() => handleUnfollow(link_unfollow)}
1567 stevensc 327
            >
328
              {labels.unfollow}
329
            </Button>
929 stevensc 330
          ) : null}
331
 
332
          {link_block ? (
1567 stevensc 333
            <Button variant='tertiary' onClick={() => showConfirm(link_block)}>
334
              {labels.block}
335
            </Button>
929 stevensc 336
          ) : null}
337
 
338
          {link_cancel ? (
1567 stevensc 339
            <Button variant='tertiary' onClick={() => showConfirm(link_cancel)}>
340
              {labels.cancel}
341
            </Button>
929 stevensc 342
          ) : null}
343
 
344
          {link_leave ? (
1567 stevensc 345
            <Button variant='tertiary' onClick={() => showConfirm(link_leave)}>
346
              {btnLeaveTitle || labels.group_leave}
347
            </Button>
929 stevensc 348
          ) : null}
848 stevensc 349
        </Actions>
597 stevensc 350
        {loading && (
351
          <StyledSpinnerContainer>
352
            <Spinner />
353
          </StyledSpinnerContainer>
354
        )}
613 stevensc 355
      </StyledItemContainer>
597 stevensc 356
      <ConfirmModal
357
        show={isShowConfirmation}
358
        onClose={() => closeConfirm()}
359
        onAccept={() => onConfirm(confirmUrl.current)}
360
      />
361
    </>
720 stevensc 362
  )
363
}
5 stevensc 364
 
720 stevensc 365
export default ProfileItem