Proyectos de Subversion LeadersLinked - SPA

Rev

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