Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 603 | Rev 605 | 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'
598 stevensc 3 
import { Link, useHistory } from 'react-router-dom'
496 stevensc 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'
597 stevensc 9 
import StyledContainer from '../widgets/WidgetLayout'
10 
import ConfirmModal from '../modals/ConfirmModal'
5 stevensc 11 
 
12 
import styles from './ProfileItem.module.scss'
13 
 
14 
const StyledSpinnerContainer = styled.div`
15 
  position: absolute;
16 
  left: 0;
17 
  top: 0;
18 
  width: 100%;
19 
  height: 100%;
20 
  background: rgba(255, 255, 255, 0.4);
21 
  place-items: center;
496 stevensc 22 
  z-index: 50;
604 andreina 23 
  padding:10px;
24 
  border-radius:10px;
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()
598 stevensc 60 
  const history = useHistory()
5 stevensc 61 
 
62 
  const showConfirm = (url = '') => {
63 
    setIsShowConfirmation(true)
64 
    confirmUrl.current = url
65 
  }
66 
 
496 stevensc 67 
  const closeConfirm = () => {
5 stevensc 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 
    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 
      })
526 stevensc 101 
      .catch(() => {
5 stevensc 102 
        dispatch(
103 
          addNotification({
104 
            style: 'error',
105 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
106 
          })
107 
        )
108 
      })
109 
      .finally(() => {
110 
        confirmUrl.current = ''
111 
        setLoading(false)
112 
      })
113 
  }
114 
 
115 
  const handleUnfollow = (link_unfollow) => {
116 
    setLoading(true)
117 
    axios
118 
      .post(link_unfollow)
119 
      .then((response) => {
120 
        const { data, success } = response.data
121 
 
122 
        if (!success) {
123 
          const errorMessage =
124 
            typeof data === 'string'
125 
              ? data
126 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
127 
 
128 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
129 
          return
130 
        }
131 
 
132 
        if (fetchCallback) fetchCallback()
133 
        dispatch(addNotification({ style: 'success', msg: data }))
134 
      })
135 
      .finally(() => setLoading(false))
136 
  }
137 
 
138 
  const getManageUrl = async () => {
139 
    try {
140 
      const { data } = await axios.get(link_admin)
141 
      if (data.success) window.open(data.data, '_backend')
142 
    } catch (error) {
143 
      console.log('>>: error > ', error)
144 
    }
145 
  }
146 
 
147 
  const linksOptions = [
148 
    {
149 
      label: btnAcceptTitle || labels.accept,
150 
      url: link_view,
151 
      color: 'primary',
152 
    },
153 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
154 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
155 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
156 
    { label: labels.accept, url: link_accept, color: 'secondary' },
157 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
158 
    {
159 
      label: btnCancelTitle || labels.cancel,
160 
      url: link_delete,
161 
      color: 'tertiary',
162 
    },
163 
    {
164 
      label: labels.message || 'Mensaje',
165 
      url: link_inmail,
166 
      color: 'secondary',
167 
    },
168 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
169 
    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },
170 
    { label: labels.block, url: link_block, color: 'tertiary' },
171 
    { label: labels.unblock, url: link_unblock, color: 'tertiary' },
172 
    { label: labels.connect, url: link_request, color: 'tertiary' },
173 
    { label: labels.cancel, url: link_cancel, color: 'tertiary' },
174 
    { label: btnLeaveTitle, url: link_leave, color: 'tertiary' },
175 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
176 
  ]
177 
 
178 
  return (
597 stevensc 179 
    <>
603 andreina 180 
      <StyledContainer>
597 stevensc 181 
        <div className={styles.profile_item_header}>
182 
          {image && <img src={image} alt="group image" />}
183 
          <div className={styles.profile_item_header_info}>
598 stevensc 184 
            <h3>{name}</h3>
496 stevensc 185 
 
597 stevensc 186 
            {isTopData && email && <h4>{email}</h4>}
187 
            {network && <h4>{network}</h4>}
188 
            {status && <h4>{status}</h4>}
189 
            {isTopData && (
190 
              <ul>
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}
207 
                      className="btn "
208 
                    >
209 
                      {labels.message}
210 
                    </Link>
211 
                  </li>
212 
                )}
213 
              </ul>
214 
            )}
215 
          </div>
5 stevensc 216 
        </div>
597 stevensc 217 
        <StyledContainer.Actions>
599 stevensc 218 
          {linksOptions.map(({ label, url, color }) => {
597 stevensc 219 
            const breakOptions = [link_view, link_edit, link_inmail]
5 stevensc 220 
 
597 stevensc 221 
            if (!url) {
222 
              return null
223 
            }
5 stevensc 224 
 
597 stevensc 225 
            if (url === link_view && isTopData) {
226 
              return null
227 
            }
5 stevensc 228 
 
597 stevensc 229 
            if (url === link_inmail && isTopData) {
230 
              return null
231 
            }
5 stevensc 232 
 
597 stevensc 233 
            return (
598 stevensc 234 
              <button
597 stevensc 235 
                key={url}
599 stevensc 236 
                className={`btn-${color}`}
598 stevensc 237 
                onClick={() => {
597 stevensc 238 
                  if (url === link_unfollow) {
598 stevensc 239 
                    return handleUnfollow(url)
5 stevensc 240 
                  }
241 
 
597 stevensc 242 
                  if (url === link_admin) {
598 stevensc 243 
                    return getManageUrl()
5 stevensc 244 
                  }
245 
 
597 stevensc 246 
                  if (url === link_impersonate) {
598 stevensc 247 
                    return getImpersonateUrl(url)
5 stevensc 248 
                  }
249 
 
597 stevensc 250 
                  if (!breakOptions.includes(url)) {
598 stevensc 251 
                    return showConfirm(url)
252 
                  } else {
253 
                    history.push(url)
5 stevensc 254 
                  }
255 
                }}
256 
              >
598 stevensc 257 
                {label}
258 
              </button>
597 stevensc 259 
            )
260 
          })}
261 
        </StyledContainer.Actions>
262 
        {loading && (
263 
          <StyledSpinnerContainer>
264 
            <Spinner />
265 
          </StyledSpinnerContainer>
266 
        )}
267 
      </StyledContainer>
268 
      <ConfirmModal
269 
        show={isShowConfirmation}
270 
        onClose={() => closeConfirm()}
271 
        onAccept={() => onConfirm(confirmUrl.current)}
272 
      />
273 
    </>
5 stevensc 274 
  )
275 
}
276 
 
277 
export default ProfileItem