Proyectos de Subversion LeadersLinked - SPA

Rev

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