Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
3517 stevensc 1 
/* eslint-disable react/prop-types */
1587 steven 2 
import React, { useState } from "react";
3814 stevensc 3 
import { axios } from "../utils";
1587 steven 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 styled from 'styled-components'
8 
 
9 
const StyledSpinnerContainer = styled.div`
10 
  position: absolute;
11 
  left: 0;
12 
  top: 0;
13 
  width: 100%;
14 
  height: 100%;
15 
  background: rgba(255, 255, 255, 0.4);
16 
  display: flex;
17 
  justify-content: center;
18 
  align-items: center;
19 
  z-index: 300;
20 
`;
21 
 
3814 stevensc 22 
 
23 
const Profile = ({
24 
  image,
25 
  name,
26 
  email,
27 
  network,
28 
  status,
29 
  link_view,
30 
  link_edit,
31 
  link_delete,
32 
  link_cancel,
33 
  link_block,
34 
  link_reject,
35 
  link_accept,
36 
  link_inmail,
37 
  link_request,
38 
  link_unblock,
39 
  link_unfollow,
40 
  link_approve,
41 
  link_leave,
42 
  link_admin,
43 
  link_impersonate,
44 
  fetchCallback,
45 
  isTopData = false,
46 
  btnAcceptTitle = 'Ver perfil',
47 
  btnCancelTitle = 'Borrar perfil',
48 
  btnEditTitle = 'Editar perfil'
49 
}) => {
50 
 
3639 efrain 51 
  const getImpersonateUrl = async (url = '') => {
52 
    try {
53 
      const { data } = await axios.get(url)
54 
      if (data.success) window.location.href = data.data;
55 
    } catch (error) {
56 
      console.log('>>: error > ', error)
57 
    }
58 
  }
59 
 
3814 stevensc 60 
  const [showConfirmationBox, setShowConfirmationBox] = useState(null)
1587 steven 61 
  const [loading, setLoading] = useState(false)
62 
 
3814 stevensc 63 
  const handleShowConfirmation = (type) => setShowConfirmationBox(type)
64 
 
65 
  const linkOptions = {
66 
    view: link_view,
67 
    edit: link_edit,
68 
    delete: link_delete,
69 
    cancel: link_cancel,
70 
    block: link_block,
71 
    reject: link_reject,
72 
    accept: link_accept,
73 
    inmail: link_inmail,
74 
    request: link_request,
75 
    unblock: link_unblock,
76 
    unfollow: link_unfollow,
77 
    approve: link_approve,
78 
    leave: link_leave,
79 
    admin: link_admin,
80 
  }
81 
 
1587 steven 82 
  const handleCancelApply = (url = link_delete) => {
83 
    setLoading(true);
3522 stevensc 84 
    axios.post(url)
85 
      .then(({ data }) => {
86 
        if (!data.success) {
1587 steven 87 
          const errorMsg =
3522 stevensc 88 
            typeof data.data === "string"
89 
              ? data.data
1587 steven 90 
              : "Ha ocurrido un error, Por favor intente más tarde";
91 
          addNotification({
92 
            style: "danger",
93 
            msg: errorMsg,
94 
          });
95 
        }
3522 stevensc 96 
        const msg = data.data;
97 
        addNotification({
98 
          style: "success",
99 
          msg: msg,
100 
        });
101 
        if (fetchCallback) fetchCallback();
1587 steven 102 
      })
3522 stevensc 103 
      .catch((error) => console.log('>>: error > ', error))
104 
      .finally(() => setLoading(false))
1587 steven 105 
  };
106 
 
1588 steven 107 
  const handleUnfollow = async (link_unfollow) => {
108 
    setLoading(true);
3517 stevensc 109 
    await axios.post(link_unfollow)
110 
      .then(({ data }) => {
111 
        if (data.success) fetchCallback()
112 
 
113 
        typeof data.data === 'string' &&
1588 steven 114 
          addNotification({
115 
            style: "danger",
3517 stevensc 116 
            msg: data.data
117 
          })
118 
      })
1588 steven 119 
    setLoading(false);
120 
  };
121 
 
1587 steven 122 
  const getManageUrl = async () => {
123 
    try {
3517 stevensc 124 
      const { data } = await axios.get(link_admin)
125 
      if (data.success) window.open(data.data, '_backend')
1587 steven 126 
    } catch (error) {
127 
      console.log('>>: error > ', error)
128 
    }
129 
  }
130 
 
131 
  return (
3517 stevensc 132 
    <div className='profile_info'>
3522 stevensc 133 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
3814 stevensc 134 
        {image &&
3520 stevensc 135 
          <div className='profile_info_header_imgContainer'>
136 
            <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
137 
          </div>
2296 stevensc 138 
        }
3526 stevensc 139 
        <div
3635 stevensc 140 
          className={`${image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'} ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}>
3526 stevensc 141 
          <h3 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
2296 stevensc 142 
            {name}
143 
          </h3>
3814 stevensc 144 
          {(isTopData && email) &&
145 
            <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
146 
              {email}
147 
            </h4>
148 
          }
149 
          {network &&
150 
            <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
151 
              {network}
152 
            </h4>
153 
          }
3635 stevensc 154 
          {isTopData &&
2386 stevensc 155 
            <ul>
3635 stevensc 156 
              {link_view &&
2386 stevensc 157 
                <li>
158 
                  <a
159 
                    href={link_view}
3814 stevensc 160 
                    className="btn btn-primary ellipsis"
2386 stevensc 161 
                  >
162 
                    {btnAcceptTitle}
163 
                  </a>
164 
                </li>
165 
              }
3635 stevensc 166 
              {link_inmail &&
2386 stevensc 167 
                <li>
168 
                  <a
169 
                    href={link_inmail}
3814 stevensc 170 
                    className="btn btn-secondary"
2386 stevensc 171 
                  >
172 
                    Mensaje
173 
                  </a>
174 
                </li>
175 
              }
176 
            </ul>
177 
          }
3064 stevensc 178 
        </div>
3520 stevensc 179 
        {status &&
3521 stevensc 180 
          <h4 className={`col-sm-12 d-flex justify-content-center align-items-center ${!image ? 'position-relative' : ''}`}>
3068 stevensc 181 
            {status}
182 
          </h4>
183 
        }
2385 stevensc 184 
      </div>
185 
      <hr />
186 
      <ul>
3814 stevensc 187 
        {(link_view && !isTopData) &&
2316 stevensc 188 
          <li>
189 
            <a
3814 stevensc 190 
              href={link_view}
2317 stevensc 191 
              className="btn btn-tertiary"
2316 stevensc 192 
            >
3814 stevensc 193 
              {btnAcceptTitle}
2316 stevensc 194 
            </a>
195 
          </li>
2296 stevensc 196 
        }
3814 stevensc 197 
        {link_edit &&
3046 stevensc 198 
          <li>
199 
            <a
3814 stevensc 200 
              href={link_edit}
201 
              data-link={link_edit}
202 
              title=""
3046 stevensc 203 
              className="btn btn-tertiary"
204 
            >
3814 stevensc 205 
              {btnEditTitle}
3046 stevensc 206 
            </a>
207 
          </li>
208 
        }
3814 stevensc 209 
        {link_approve &&
2320 stevensc 210 
          <li>
3814 stevensc 211 
            <button
212 
              className="btn btn-tertiary"
213 
              onClick={() => handleShowConfirmation('aprove')}
2320 stevensc 214 
            >
3814 stevensc 215 
              Aprobar
216 
            </button>
2320 stevensc 217 
          </li>
2296 stevensc 218 
        }
3814 stevensc 219 
        {link_accept &&
2320 stevensc 220 
          <li>
3814 stevensc 221 
            <button
222 
              className="btn btn-tertiary"
223 
              onClick={() => handleShowConfirmation('accept')}
2320 stevensc 224 
            >
3814 stevensc 225 
              Aceptar
226 
            </button>
2320 stevensc 227 
          </li>
2296 stevensc 228 
        }
3814 stevensc 229 
        {link_reject &&
2518 stevensc 230 
          <li>
3814 stevensc 231 
            <button
232 
              className="btn btn-tertiary"
233 
              onClick={() => handleShowConfirmation('reject')}
234 
            >
235 
              Rechazar
236 
            </button>
237 
          </li >
238 
        }
239 
        {link_delete &&
240 
          <li>
241 
            <button
242 
              className="btn btn-tertiary"
243 
              onClick={() => handleShowConfirmation('delete')}
244 
            >
245 
              {btnCancelTitle}
246 
            </button>
247 
          </li >
248 
        }
249 
        {(link_inmail && !isTopData) &&
250 
          <li>
2518 stevensc 251 
            <a
252 
              href={link_inmail}
3814 stevensc 253 
              className="btn btn-secondary"
2518 stevensc 254 
            >
255 
              Mensaje
256 
            </a>
257 
          </li>
258 
        }
3814 stevensc 259 
        {link_admin &&
2320 stevensc 260 
          <li>
261 
            <a
262 
              onClick={() => getManageUrl()}
263 
              data-link={link_admin}
264 
              title="Administrar empresa"
3814 stevensc 265 
              className="btn btn-secondary"
2320 stevensc 266 
            >
267 
              Administrar
268 
            </a>
269 
          </li>
2296 stevensc 270 
        }
3814 stevensc 271 
        {link_unfollow &&
2320 stevensc 272 
          <li>
273 
            <a
274 
              onClick={() => handleUnfollow(link_unfollow)}
275 
              data-link={link_unfollow}
276 
              title="Administrar empresa"
3814 stevensc 277 
              className="btn btn-secondary"
2320 stevensc 278 
            >
279 
              Dejar de seguir
280 
            </a>
281 
          </li>
2296 stevensc 282 
        }
2519 stevensc 283 
 
3814 stevensc 284 
        {link_block &&
2519 stevensc 285 
          <li>
3814 stevensc 286 
            <button
287 
              className="btn btn-tertiary"
288 
              onClick={() => handleShowConfirmation('block')}
2519 stevensc 289 
            >
290 
              Bloquear
3814 stevensc 291 
            </button>
292 
          </li >
293 
        }
294 
        {link_unblock &&
295 
          <li>
296 
            <button
297 
              className="btn btn-tertiary"
298 
              onClick={() => handleShowConfirmation('unblock')}
299 
            >
300 
              Desbloquear
301 
            </button>
2519 stevensc 302 
          </li>
303 
        }
3814 stevensc 304 
        {link_request &&
2320 stevensc 305 
          <li>
3814 stevensc 306 
            <button
2410 stevensc 307 
              className="btn btn-tertiary"
3814 stevensc 308 
              onClick={() => handleShowConfirmation('request')}
2320 stevensc 309 
            >
310 
              Conectar
3814 stevensc 311 
            </button>
312 
          </li >
2296 stevensc 313 
        }
3814 stevensc 314 
        {link_cancel &&
2320 stevensc 315 
          <li>
3814 stevensc 316 
            <button
317 
              className="btn btn-tertiary"
318 
              onClick={() => handleShowConfirmation('cancel')}
2320 stevensc 319 
            >
2507 stevensc 320 
              Cancelar
3814 stevensc 321 
            </button>
322 
          </li >
2296 stevensc 323 
        }
3814 stevensc 324 
        {link_leave &&
2320 stevensc 325 
          <li>
3814 stevensc 326 
            <button
2320 stevensc 327 
              className="btn btn-tertiary"
3814 stevensc 328 
              onClick={() => handleShowConfirmation('leave')}
2320 stevensc 329 
            >
330 
              Abandonar
3814 stevensc 331 
            </button>
332 
          </li >
2296 stevensc 333 
        }
3814 stevensc 334 
      </ul >
335 
      {link_delete &&
2320 stevensc 336 
        <div style={{ position: "relative" }}>
337 
          <ConfirmationBox
338 
            show={showConfirmationBox}
3814 stevensc 339 
            onClose={() => handleShowConfirmation(null)}
340 
            onAccept={() => handleCancelApply(linkOptions[showConfirmationBox])}
2320 stevensc 341 
          />
342 
        </div>
2285 stevensc 343 
      }
3814 stevensc 344 
      {link_impersonate &&
345 
        <li>
346 
          <a
347 
            href="#"
348 
            className="btn btn-primary"
349 
            onClick={(e) => {
350 
              e.preventDefault()
351 
              getImpersonateUrl(link_impersonate)
352 
            }}
353 
          >
354 
            Personificar
355 
          </a>
356 
        </li>
2285 stevensc 357 
      }
358 
      {
3526 stevensc 359 
        loading &&
3522 stevensc 360 
        <StyledSpinnerContainer>
361 
          <Spinner />
362 
        </StyledSpinnerContainer>
2285 stevensc 363 
      }
3526 stevensc 364 
    </div >
1587 steven 365 
  );
366 
};
367 
 
368 
export default Profile;