Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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