Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 604 | Rev 607 | 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;
605 andreina 23 
 
5 stevensc 24 
`
25 
const ProfileItem = ({
26 
  image,
27 
  name,
28 
  email,
29 
  network,
30 
  status,
31 
  fetchCallback,
489 andreina 32 
  btnAcceptTitle = ' Ver',
444 andreina 33 
  btnCancelTitle = 'Borrar',
34 
  btnEditTitle = 'Editar',
5 stevensc 35 
  btnLeaveTitle = 'Dejar',
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 
  const dispatch = useDispatch()
598 stevensc 59 
  const history = useHistory()
5 stevensc 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 
    axios
83 
      .post(url)
84 
      .then((response) => {
85 
        const { success, data } = response.data
86 
 
87 
        if (!success) {
88 
          const errorMessage =
89 
            typeof data === 'string'
90 
              ? data
91 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
92 
 
93 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
94 
          return
95 
        }
96 
 
97 
        if (fetchCallback) fetchCallback()
98 
        dispatch(addNotification({ style: 'success', msg: data }))
99 
      })
526 stevensc 100 
      .catch(() => {
5 stevensc 101 
        dispatch(
102 
          addNotification({
103 
            style: 'error',
104 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
105 
          })
106 
        )
107 
      })
108 
      .finally(() => {
109 
        confirmUrl.current = ''
110 
        setLoading(false)
111 
      })
112 
  }
113 
 
114 
  const handleUnfollow = (link_unfollow) => {
115 
    setLoading(true)
116 
    axios
117 
      .post(link_unfollow)
118 
      .then((response) => {
119 
        const { data, success } = response.data
120 
 
121 
        if (!success) {
122 
          const errorMessage =
123 
            typeof data === 'string'
124 
              ? data
125 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
126 
 
127 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
128 
          return
129 
        }
130 
 
131 
        if (fetchCallback) fetchCallback()
132 
        dispatch(addNotification({ style: 'success', msg: data }))
133 
      })
134 
      .finally(() => setLoading(false))
135 
  }
136 
 
137 
  const getManageUrl = async () => {
138 
    try {
139 
      const { data } = await axios.get(link_admin)
140 
      if (data.success) window.open(data.data, '_backend')
141 
    } catch (error) {
142 
      console.log('>>: error > ', error)
143 
    }
144 
  }
145 
 
146 
  const linksOptions = [
147 
    {
148 
      label: btnAcceptTitle || labels.accept,
149 
      url: link_view,
150 
      color: 'primary',
151 
    },
152 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
153 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
154 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
155 
    { label: labels.accept, url: link_accept, color: 'secondary' },
156 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
157 
    {
158 
      label: btnCancelTitle || labels.cancel,
159 
      url: link_delete,
160 
      color: 'tertiary',
161 
    },
162 
    {
163 
      label: labels.message || 'Mensaje',
164 
      url: link_inmail,
165 
      color: 'secondary',
166 
    },
167 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
168 
    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },
169 
    { label: labels.block, url: link_block, color: 'tertiary' },
170 
    { label: labels.unblock, url: link_unblock, color: 'tertiary' },
171 
    { label: labels.connect, url: link_request, color: 'tertiary' },
172 
    { label: labels.cancel, url: link_cancel, color: 'tertiary' },
173 
    { label: btnLeaveTitle, url: link_leave, color: 'tertiary' },
174 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
175 
  ]
176 
 
177 
  return (
597 stevensc 178 
    <>
603 andreina 179 
      <StyledContainer>
597 stevensc 180 
        <div className={styles.profile_item_header}>
181 
          {image && <img src={image} alt="group image" />}
182 
          <div className={styles.profile_item_header_info}>
598 stevensc 183 
            <h3>{name}</h3>
496 stevensc 184 
 
597 stevensc 185 
            {isTopData && email && <h4>{email}</h4>}
186 
            {network && <h4>{network}</h4>}
187 
            {status && <h4>{status}</h4>}
188 
            {isTopData && (
189 
              <ul>
190 
                {link_view && (
191 
                  <li>
192 
                    <Link
193 
                      to={link_view}
194 
                      data-link={link_view}
195 
                      className="btn btn-secondary ellipsis"
196 
                    >
197 
                      {btnAcceptTitle}
198 
                    </Link>
199 
                  </li>
200 
                )}
201 
                {link_inmail && (
202 
                  <li>
203 
                    <Link
204 
                      to={link_inmail}
205 
                      data-link={link_inmail}
206 
                      className="btn "
207 
                    >
208 
                      {labels.message}
209 
                    </Link>
210 
                  </li>
211 
                )}
212 
              </ul>
213 
            )}
214 
          </div>
5 stevensc 215 
        </div>
597 stevensc 216 
        <StyledContainer.Actions>
599 stevensc 217 
          {linksOptions.map(({ label, url, color }) => {
597 stevensc 218 
            const breakOptions = [link_view, link_edit, link_inmail]
5 stevensc 219 
 
597 stevensc 220 
            if (!url) {
221 
              return null
222 
            }
5 stevensc 223 
 
597 stevensc 224 
            if (url === link_view && isTopData) {
225 
              return null
226 
            }
5 stevensc 227 
 
597 stevensc 228 
            if (url === link_inmail && isTopData) {
229 
              return null
230 
            }
5 stevensc 231 
 
597 stevensc 232 
            return (
598 stevensc 233 
              <button
597 stevensc 234 
                key={url}
599 stevensc 235 
                className={`btn-${color}`}
598 stevensc 236 
                onClick={() => {
597 stevensc 237 
                  if (url === link_unfollow) {
598 stevensc 238 
                    return handleUnfollow(url)
5 stevensc 239 
                  }
240 
 
597 stevensc 241 
                  if (url === link_admin) {
598 stevensc 242 
                    return getManageUrl()
5 stevensc 243 
                  }
244 
 
597 stevensc 245 
                  if (url === link_impersonate) {
598 stevensc 246 
                    return getImpersonateUrl(url)
5 stevensc 247 
                  }
248 
 
597 stevensc 249 
                  if (!breakOptions.includes(url)) {
598 stevensc 250 
                    return showConfirm(url)
251 
                  } else {
252 
                    history.push(url)
5 stevensc 253 
                  }
254 
                }}
255 
              >
598 stevensc 256 
                {label}
257 
              </button>
597 stevensc 258 
            )
259 
          })}
260 
        </StyledContainer.Actions>
261 
        {loading && (
262 
          <StyledSpinnerContainer>
263 
            <Spinner />
264 
          </StyledSpinnerContainer>
265 
        )}
266 
      </StyledContainer>
267 
      <ConfirmModal
268 
        show={isShowConfirmation}
269 
        onClose={() => closeConfirm()}
270 
        onAccept={() => onConfirm(confirmUrl.current)}
271 
      />
272 
    </>
5 stevensc 273 
  )
274 
}
275 
 
276 
export default ProfileItem