Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6000 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5070 stevensc 1 
/* eslint-disable camelcase */
3517 stevensc 2 
/* eslint-disable react/prop-types */
5997 stevensc 3 
import React, { useRef, useState } from 'react'
5070 stevensc 4 
import { addNotification } from '../redux/notification/notification.actions'
5 
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
6 
import Spinner from '../shared/loading-spinner/Spinner'
7 
import { axios } from '../utils'
1587 steven 8 
import styled from 'styled-components'
5996 stevensc 9 
import { useSelector } from 'react-redux'
1587 steven 10 
 
11 
const StyledSpinnerContainer = styled.div`
12 
  position: absolute;
13 
  left: 0;
14 
  top: 0;
15 
  width: 100%;
16 
  height: 100%;
17 
  background: rgba(255, 255, 255, 0.4);
18 
  display: flex;
19 
  justify-content: center;
20 
  align-items: center;
21 
  z-index: 300;
5070 stevensc 22 
`
23 
const Profile = ({
24 
  image,
25 
  name,
26 
  email,
27 
  network,
28 
  status,
5997 stevensc 29 
  fetchCallback,
30 
  isTopData = false,
31 
  btnAcceptTitle = 'Ver perfil',
32 
  btnCancelTitle = 'Borrar perfil',
33 
  btnEditTitle = 'Editar perfil',
6739 stevensc 34 
  btnLeaveTitle = 'Editar perfil',
5070 stevensc 35 
  link_view,
36 
  link_edit,
37 
  link_delete,
38 
  link_cancel,
39 
  link_block,
40 
  link_reject,
41 
  link_accept,
42 
  link_inmail,
43 
  link_request,
44 
  link_unblock,
45 
  link_unfollow,
46 
  link_approve,
47 
  link_leave,
48 
  link_admin,
49 
  link_impersonate,
50 
}) => {
5997 stevensc 51 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
5070 stevensc 52 
  const [loading, setLoading] = useState(false)
5997 stevensc 53 
  const confirmUrl = useRef('')
5996 stevensc 54 
  const labels = useSelector((state) => state.labels)
1587 steven 55 
 
5997 stevensc 56 
  const handleConfirm = (url = '') => {
57 
    setIsShowConfirmation(!isShowConfirmation)
58 
    confirmUrl.current = url
3639 efrain 59 
  }
1587 steven 60 
 
5070 stevensc 61 
  const getImpersonateUrl = async (url = '') => {
62 
    try {
63 
      const { data } = await axios.get(url)
64 
      if (data.success) window.location.href = data.data
65 
    } catch (error) {
66 
      console.log('>>: error > ', error)
67 
    }
68 
  }
69 
 
5997 stevensc 70 
  const onConfirm = (url) => {
5070 stevensc 71 
    setLoading(true)
5996 stevensc 72 
    axios
73 
      .post(url)
3522 stevensc 74 
      .then(({ data }) => {
75 
        if (!data.success) {
1587 steven 76 
          const errorMsg =
5070 stevensc 77 
            typeof data.data === 'string'
3522 stevensc 78 
              ? data.data
5070 stevensc 79 
              : 'Ha ocurrido un error, Por favor intente más tarde'
1587 steven 80 
          addNotification({
5070 stevensc 81 
            style: 'danger',
5996 stevensc 82 
            msg: errorMsg,
5070 stevensc 83 
          })
1587 steven 84 
        }
5070 stevensc 85 
        const msg = data.data
5997 stevensc 86 
        addNotification({ style: 'success', msg })
5070 stevensc 87 
        if (fetchCallback) fetchCallback()
1587 steven 88 
      })
3522 stevensc 89 
      .catch((error) => console.log('>>: error > ', error))
5997 stevensc 90 
      .finally(() => {
91 
        confirmUrl.current = ''
92 
        setLoading(false)
93 
      })
5070 stevensc 94 
  }
1587 steven 95 
 
1588 steven 96 
  const handleUnfollow = async (link_unfollow) => {
5070 stevensc 97 
    setLoading(true)
5996 stevensc 98 
    await axios.post(link_unfollow).then(({ data }) => {
99 
      if (data.success) fetchCallback()
3517 stevensc 100 
 
5996 stevensc 101 
      typeof data.data === 'string' &&
102 
        addNotification({
103 
          style: 'danger',
104 
          msg: data.data,
105 
        })
106 
    })
5070 stevensc 107 
    setLoading(false)
108 
  }
1588 steven 109 
 
1587 steven 110 
  const getManageUrl = async () => {
111 
    try {
3517 stevensc 112 
      const { data } = await axios.get(link_admin)
113 
      if (data.success) window.open(data.data, '_backend')
1587 steven 114 
    } catch (error) {
115 
      console.log('>>: error > ', error)
116 
    }
117 
  }
118 
 
5997 stevensc 119 
  const linksOptions = [
120 
    { label: btnAcceptTitle, url: link_view, color: 'primary' },
121 
    { label: btnEditTitle, url: link_edit, color: 'secondary' },
122 
    { label: labels.APPROVE, url: link_approve, color: 'tertiary' },
123 
    { label: labels.ACCEPT, url: link_accept, color: 'tertiary' },
124 
    { label: labels.REJECT, url: link_reject, color: 'tertiary' },
125 
    { label: btnCancelTitle, url: link_delete, color: 'tertiary' },
126 
    { label: labels.MESSAGE, url: link_inmail, color: 'secondary' },
127 
    { label: labels.ADMINISTRATE, url: link_admin, color: 'secondary' },
128 
    { label: labels.UNFOLLOW, url: link_unfollow, color: 'tertiary' },
129 
    { label: labels.BLOCK, url: link_block, color: 'tertiary' },
130 
    { label: labels.UNBLOCK, url: link_unblock, color: 'tertiary' },
131 
    { label: labels.CONNECT, url: link_request, color: 'tertiary' },
132 
    { label: labels.CANCEL, url: link_cancel, color: 'tertiary' },
133 
    { label: labels.LEAVE, url: link_leave, color: 'tertiary' },
134 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
135 
  ]
136 
 
1587 steven 137 
  return (
5996 stevensc 138 
    <div className="profile_info">
3522 stevensc 139 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
5996 stevensc 140 
        {image && (
141 
          <div className="profile_info_header_imgContainer">
142 
            <img
143 
              src={image}
144 
              className="object-fit-contain"
145 
              style={{ maxHeight: '100px' }}
146 
              alt="group image"
147 
            />
3520 stevensc 148 
          </div>
5996 stevensc 149 
        )}
150 
        <div
151 
          className={`${
152 
            image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'
153 
          } ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}
154 
        >
155 
          <h3
156 
            className={`${status ? '' : 'w-100 text-left'} ${
157 
              isTopData ? 'mb-2' : ''
158 
            } w-100`}
159 
          >
2296 stevensc 160 
            {name}
161 
          </h3>
5996 stevensc 162 
          {isTopData && email && (
163 
            <h4
164 
              className={`${status ? '' : 'w-100 text-left'} ${
165 
                isTopData ? 'mb-2' : ''
166 
              } w-100`}
167 
            >
3814 stevensc 168 
              {email}
169 
            </h4>
5996 stevensc 170 
          )}
171 
          {network && (
172 
            <h4
173 
              className={`${status ? '' : 'w-100 text-left'} ${
174 
                isTopData ? 'mb-2' : ''
175 
              } w-100`}
176 
            >
3814 stevensc 177 
              {network}
178 
            </h4>
5996 stevensc 179 
          )}
180 
          {isTopData && (
2386 stevensc 181 
            <ul>
5996 stevensc 182 
              {link_view && (
2386 stevensc 183 
                <li>
184 
                  <a
185 
                    href={link_view}
3816 stevensc 186 
                    data-link={link_view}
187 
                    className="btn btn-secondary ellipsis"
2386 stevensc 188 
                  >
189 
                    {btnAcceptTitle}
190 
                  </a>
191 
                </li>
5996 stevensc 192 
              )}
193 
              {link_inmail && (
2386 stevensc 194 
                <li>
195 
                  <a
196 
                    href={link_inmail}
3816 stevensc 197 
                    data-link={link_inmail}
198 
                    className="btn btn-primary"
2386 stevensc 199 
                  >
5996 stevensc 200 
                    {labels.MESSAGE}
2386 stevensc 201 
                  </a>
202 
                </li>
5996 stevensc 203 
              )}
2386 stevensc 204 
            </ul>
5996 stevensc 205 
          )}
3064 stevensc 206 
        </div>
5996 stevensc 207 
        {status && (
208 
          <h4
209 
            className={`col-sm-12 d-flex justify-content-center align-items-center ${
210 
              !image ? 'position-relative' : ''
211 
            }`}
212 
          >
3068 stevensc 213 
            {status}
214 
          </h4>
5996 stevensc 215 
        )}
2385 stevensc 216 
      </div>
217 
      <hr />
5999 stevensc 218 
      <ul className="position-relative">
5997 stevensc 219 
        {linksOptions.map((option) => {
220 
          const breakOptions = [link_view, link_edit, link_inmail]
221 
 
5998 stevensc 222 
          if (!option.url) {
223 
            return null
224 
          }
225 
 
5997 stevensc 226 
          if (option.url === link_view && isTopData) {
227 
            return null
228 
          }
5998 stevensc 229 
 
5997 stevensc 230 
          if (option.url === link_inmail && isTopData) {
231 
            return null
232 
          }
233 
 
234 
          return (
2316 stevensc 235 
            <a
5997 stevensc 236 
              key={option.label}
237 
              href={option.url}
238 
              title={option.label}
239 
              className={`btn btn-${option.color} position-relative`}
3816 stevensc 240 
              onClick={(e) => {
5997 stevensc 241 
                if (!breakOptions.includes(option.url)) {
242 
                  e.preventDefault()
6000 stevensc 243 
                  handleConfirm(option.url)
5997 stevensc 244 
                }
2519 stevensc 245 
 
5997 stevensc 246 
                if (option.url === link_unfollow) {
6000 stevensc 247 
                  e.preventDefault()
5997 stevensc 248 
                  handleUnfollow(option.url)
249 
                }
250 
                if (option.url === link_admin) {
6000 stevensc 251 
                  e.preventDefault()
5997 stevensc 252 
                  getManageUrl()
253 
                }
254 
 
255 
                if (option.url === link_impersonate) {
6000 stevensc 256 
                  e.preventDefault()
5997 stevensc 257 
                  getImpersonateUrl(option.url)
258 
                }
3816 stevensc 259 
              }}
2519 stevensc 260 
            >
5997 stevensc 261 
              {option.label}
3816 stevensc 262 
            </a>
5997 stevensc 263 
          )
264 
        })}
5999 stevensc 265 
        <ConfirmationBox
266 
          show={isShowConfirmation}
267 
          onClose={() => handleConfirm()}
268 
          onAccept={() => onConfirm(confirmUrl.current)}
269 
        />
3816 stevensc 270 
      </ul>
5996 stevensc 271 
      {loading && (
3522 stevensc 272 
        <StyledSpinnerContainer>
273 
          <Spinner />
274 
        </StyledSpinnerContainer>
5996 stevensc 275 
      )}
5070 stevensc 276 
    </div>
277 
  )
278 
}
1587 steven 279 
 
5070 stevensc 280 
export default Profile