Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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