Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
5 stevensc 1 
import React, { useRef, useState } from 'react'
2 
import { axios } from '../../utils'
3 
import { useDispatch, useSelector } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import styled from 'styled-components'
6 
 
7 
import Spinner from '../UI/Spinner'
8 
import ConfirmationBox from '../UI/ConfirmBox'
9 
 
10 
import styles from './ProfileItem.module.scss'
11 
import { Link } from 'react-router-dom'
12 
 
13 
const StyledSpinnerContainer = styled.div`
14 
  position: absolute;
15 
  left: 0;
16 
  top: 0;
17 
  width: 100%;
18 
  height: 100%;
19 
  background: rgba(255, 255, 255, 0.4);
20 
  place-items: center;
461 andreina 21 
  z-index: 50;
22 
 
23 
  .titulo{
462 andreina 24 
    color:#1b273e !important;
461 andreina 25 
  }
5 stevensc 26 
`
27 
const ProfileItem = ({
28 
  image,
29 
  name,
30 
  email,
31 
  network,
32 
  status,
33 
  fetchCallback,
489 andreina 34 
  btnAcceptTitle = ' Ver',
444 andreina 35 
  btnCancelTitle = 'Borrar',
36 
  btnEditTitle = 'Editar',
5 stevensc 37 
  btnLeaveTitle = 'Dejar',
38 
  link_remove,
39 
  link_view,
40 
  link_edit,
41 
  link_delete,
42 
  link_cancel,
43 
  link_block,
44 
  link_reject,
45 
  link_accept,
46 
  link_inmail,
47 
  link_request,
48 
  link_unblock,
49 
  link_unfollow,
50 
  link_approve,
51 
  link_leave,
52 
  link_admin,
53 
  link_impersonate,
54 
  isTopData,
55 
}) => {
56 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
57 
  const [loading, setLoading] = useState(false)
58 
  const confirmUrl = useRef('')
59 
  const labels = useSelector(({ intl }) => intl.labels)
60 
  const dispatch = useDispatch()
61 
 
62 
  const showConfirm = (url = '') => {
63 
    setIsShowConfirmation(true)
64 
    confirmUrl.current = url
65 
  }
66 
 
67 
  const closeConfirm = (url = '') => {
68 
    setIsShowConfirmation(false)
69 
    confirmUrl.current = ''
70 
  }
71 
 
72 
  const getImpersonateUrl = async (url = '') => {
73 
    try {
74 
      const { data } = await axios.get(url)
75 
      if (data.success) window.location.href = data.data
76 
    } catch (error) {
77 
      console.log('>>: error > ', error)
78 
    }
79 
  }
80 
 
81 
  const onConfirm = (url) => {
82 
    setLoading(true)
83 
 
84 
    axios
85 
      .post(url)
86 
      .then((response) => {
87 
        const { success, data } = response.data
88 
 
89 
        if (!success) {
90 
          const errorMessage =
91 
            typeof data === 'string'
92 
              ? data
93 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
94 
 
95 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
96 
          return
97 
        }
98 
 
99 
        if (fetchCallback) fetchCallback()
100 
        dispatch(addNotification({ style: 'success', msg: data }))
101 
      })
102 
      .catch((err) => {
103 
        dispatch(
104 
          addNotification({
105 
            style: 'error',
106 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
107 
          })
108 
        )
109 
        throw new Error(err)
110 
      })
111 
      .finally(() => {
112 
        confirmUrl.current = ''
113 
        setLoading(false)
114 
      })
115 
  }
116 
 
117 
  const handleUnfollow = (link_unfollow) => {
118 
    setLoading(true)
119 
    axios
120 
      .post(link_unfollow)
121 
      .then((response) => {
122 
        const { data, success } = response.data
123 
 
124 
        if (!success) {
125 
          const errorMessage =
126 
            typeof data === 'string'
127 
              ? data
128 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
129 
 
130 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
131 
          return
132 
        }
133 
 
134 
        if (fetchCallback) fetchCallback()
135 
        dispatch(addNotification({ style: 'success', msg: data }))
136 
      })
137 
      .finally(() => setLoading(false))
138 
  }
139 
 
140 
  const getManageUrl = async () => {
141 
    try {
142 
      const { data } = await axios.get(link_admin)
143 
      if (data.success) window.open(data.data, '_backend')
144 
    } catch (error) {
145 
      console.log('>>: error > ', error)
146 
    }
147 
  }
148 
 
149 
  const linksOptions = [
150 
    {
151 
      label: btnAcceptTitle || labels.accept,
152 
      url: link_view,
153 
      color: 'primary',
154 
    },
155 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
156 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
157 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
158 
    { label: labels.accept, url: link_accept, color: 'secondary' },
159 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
160 
    {
161 
      label: btnCancelTitle || labels.cancel,
162 
      url: link_delete,
163 
      color: 'tertiary',
164 
    },
165 
    {
166 
      label: labels.message || 'Mensaje',
167 
      url: link_inmail,
168 
      color: 'secondary',
169 
    },
170 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
171 
    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },
172 
    { label: labels.block, url: link_block, color: 'tertiary' },
173 
    { label: labels.unblock, url: link_unblock, color: 'tertiary' },
174 
    { label: labels.connect, url: link_request, color: 'tertiary' },
175 
    { label: labels.cancel, url: link_cancel, color: 'tertiary' },
176 
    { label: btnLeaveTitle, url: link_leave, color: 'tertiary' },
177 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
178 
  ]
179 
 
180 
  return (
181 
    <div className={styles.profile_item}>
182 
      <div className={styles.profile_item_header}>
183 
        {image && <img src={image} alt="group image" />}
184 
        <div className={styles.profile_item_header_info}>
455 andreina 185 
          <h3 className='titulo'>{name}</h3>
466 andreina 186 
 
5 stevensc 187 
          {isTopData && email && <h4>{email}</h4>}
188 
          {network && <h4>{network}</h4>}
189 
          {status && <h4>{status}</h4>}
190 
          {isTopData && (
465 andreina 191 
 
466 andreina 192 
            <ul className='my-5'>
5 stevensc 193 
              {link_view && (
194 
                <li>
195 
                  <Link
196 
                    to={link_view}
197 
                    data-link={link_view}
198 
                    className="btn btn-secondary ellipsis"
199 
                  >
200 
                    {btnAcceptTitle}
201 
                  </Link>
202 
                </li>
203 
              )}
204 
              {link_inmail && (
205 
                <li>
206 
                  <Link
207 
                    to={link_inmail}
208 
                    data-link={link_inmail}
492 andreina 209 
                    className="btn "
5 stevensc 210 
                  >
211 
                    {labels.message}
212 
                  </Link>
213 
                </li>
214 
              )}
215 
            </ul>
216 
          )}
217 
        </div>
218 
      </div>
447 andreina 219 
 
491 andreina 220 
      <ul className="position-relative mt-1">
5 stevensc 221 
        {linksOptions.map((option) => {
222 
          const breakOptions = [link_view, link_edit, link_inmail]
223 
 
224 
          if (!option.url) {
225 
            return null
226 
          }
227 
 
228 
          if (option.url === link_view && isTopData) {
229 
            return null
230 
          }
231 
 
232 
          if (option.url === link_inmail && isTopData) {
233 
            return null
234 
          }
235 
 
236 
          return (
237 
            <li key={option.label}>
238 
              <Link
239 
                to={option.url}
240 
                title={option.label}
241 
                className="position-relative"
242 
                onClick={(e) => {
243 
                  if (option.url === link_unfollow) {
244 
                    e.preventDefault()
245 
                    handleUnfollow(option.url)
246 
                    return
247 
                  }
248 
 
249 
                  if (option.url === link_admin) {
250 
                    e.preventDefault()
251 
                    getManageUrl()
252 
                    return
253 
                  }
254 
 
255 
                  if (option.url === link_impersonate) {
256 
                    e.preventDefault()
257 
                    getImpersonateUrl(option.url)
258 
                    return
259 
                  }
260 
 
261 
                  if (!breakOptions.includes(option.url)) {
262 
                    e.preventDefault()
263 
                    showConfirm(option.url)
264 
                  }
265 
                }}
266 
              >
444 andreina 267 
                <button className={`btn `}>
5 stevensc 268 
                  {option.label}
269 
                </button>
270 
              </Link>
489 andreina 271 
            </li>
5 stevensc 272 
          )
273 
        })}
274 
        <ConfirmationBox
275 
          show={isShowConfirmation}
276 
          onClose={() => closeConfirm()}
277 
          onAccept={() => onConfirm(confirmUrl.current)}
278 
        />
279 
      </ul>
490 andreina 280 
      <div className='mb-1'></div>
5 stevensc 281 
      {loading && (
282 
        <StyledSpinnerContainer>
283 
          <Spinner />
284 
        </StyledSpinnerContainer>
285 
      )}
286 
    </div>
287 
  )
288 
}
289 
 
290 
export default ProfileItem