Proyectos de Subversion LeadersLinked - SPA

Rev

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