Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2296 | Rev 3432 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2296 Rev 3416
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from "react";
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from "react-router-dom";
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from "react-redux";
4 
import { Facebook, Instagram, Twitter } from '@mui/icons-material'
 4 
import { Facebook, Instagram, Twitter } from "@mui/icons-material";
Línea 5... Línea 5...
5 
 
 5 
 
6 
import { axios } from '../utils'
 6 
import { api } from "@api";
Línea 7... Línea 7...
7 
import { addNotification } from '../redux/notification/notification.actions'
 7 
import { addNotification } from "../redux/notification/notification.actions";
8 
 
 8 
 
Línea 9... Línea 9...
9 
import ConfirmModal from '../../shared/confirm-modal/ConfirmModal'
 9 
import ConfirmModal from "../../shared/confirm-modal/ConfirmModal";
10 
import SocialNetworks from '../../shared/social-networks/SocialNetwors'
 10 
import SocialNetworks from "../../shared/social-networks/SocialNetwors";
11 
 
 11 
 
12 
const ProfileInfo = ({
 12 
const ProfileInfo = ({
Línea 20... Línea 20...
20 
  showContact,
 20 
  showContact,
21 
  fullName,
 21 
  fullName,
22 
  linkInmail,
 22 
  linkInmail,
23 
  connectUrl,
 23 
  connectUrl,
24 
  cancelUrl,
 24 
  cancelUrl,
25 
  isEdit
 25 
  isEdit,
26 
}) => {
 26 
}) => {
27 
  const [isAdded, setIsAdded] = useState(!connectUrl)
 27 
  const [isAdded, setIsAdded] = useState(!connectUrl);
28 
  const [connectionUrl, setConnectionUrl] = useState(connectUrl || cancelUrl)
 28 
  const [connectionUrl, setConnectionUrl] = useState(connectUrl || cancelUrl);
29 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 29 
  const [showConfirmModal, setShowConfirmModal] = useState(false);
30 
  const labels = useSelector(({ intl }) => intl.labels)
 30 
  const labels = useSelector(({ intl }) => intl.labels);
31 
  const dispatch = useDispatch()
 31 
  const dispatch = useDispatch();
Línea 32... Línea 32...
32 
 
 32 
 
33 
  const getProfile = () => {
 33 
  const getProfile = () => {
34 
    axios.get(window.location.href).then(({ data }) => {
 34 
    api.get(window.location.href).then(({ data }) => {
35 
      if (data.link_request) {
 35 
      if (data.link_request) {
36 
        return setConnectionUrl(data.link_request)
 36 
        return setConnectionUrl(data.link_request);
Línea 37... Línea 37...
37 
      }
 37 
      }
38 
 
 38 
 
39 
      return setConnectionUrl(data.link_cancel)
 39 
      return setConnectionUrl(data.link_cancel);
Línea 40... Línea 40...
40 
    })
 40 
    });
41 
  }
 41 
  };
42 
 
 42 
 
43 
  const connect = () => {
 43 
  const connect = () => {
44 
    axios.post(connectionUrl).then(({ data: response }) => {
 44 
    axios.post(connectionUrl).then(({ data: response }) => {
45 
      const { data, success } = response
 45 
      const { data, success } = response;
46 
      if (!success) {
 46 
      if (!success) {
47 
        dispatch(addNotification({ style: 'danger', msg: data }))
 47 
        dispatch(addNotification({ style: "danger", msg: data }));
48 
        return
 48 
        return;
49 
      }
 49 
      }
50 
      dispatch(addNotification({ style: 'success', msg: data }))
 50 
      dispatch(addNotification({ style: "success", msg: data }));
51 
      getProfile()
 51 
      getProfile();
Línea 52... Línea 52...
52 
      setIsAdded(!isAdded)
 52 
      setIsAdded(!isAdded);
53 
    })
 53 
    });
54 
  }
 54 
  };
Línea 55... Línea 55...
55 
 
 55 
 
56 
  const toggleConfirmationModal = () => {
 56 
  const toggleConfirmationModal = () => {
57 
    setShowConfirmModal(!showConfirmModal)
 57 
    setShowConfirmModal(!showConfirmModal);
58 
  }
 58 
  };
59 
 
 59 
 
60 
  return (
 60 
  return (
61 
    <>
 61 
    <>
62 
      <div className='profile-info'>
 62 
      <div className="profile-info">
63 
        <img id='user-profile-img' src={image} alt='profile-image' />
 63 
        <img id="user-profile-img" src={image} alt="profile-image" />
64 
        <h3>{fullName}</h3>
 64 
        <h3>{fullName}</h3>
65 
        <div className='row'>
 65 
        <div className="row">
66 
          {facebook && (
 66 
          {facebook && (
67 
            <a href={facebook} target='_blank' rel='noreferrer'>
 67 
            <a href={facebook} target="_blank" rel="noreferrer">
68 
              <Facebook />
 68 
              <Facebook />
69 
            </a>
 69 
            </a>
70 
          )}
 70 
          )}
71 
          {twitter && (
 71 
          {twitter && (
72 
            <a href={twitter} target='_blank' rel='noreferrer'>
 72 
            <a href={twitter} target="_blank" rel="noreferrer">
73 
              <Twitter />
 73 
              <Twitter />
74 
            </a>
 74 
            </a>
75 
          )}
 75 
          )}
76 
          {instagram && (
 76 
          {instagram && (
77 
            <a href={instagram} target='_blank' rel='noreferrer'>
 77 
            <a href={instagram} target="_blank" rel="noreferrer">
78 
              <Instagram />
 78 
              <Instagram />
79 
            </a>
 79 
            </a>
80 
          )}
 80 
          )}
81 
        </div>
 81 
        </div>
82 
        <div className='row'>
 82 
        <div className="row">
Línea 93... Línea 93...
93 
              <br />
 93 
              <br />
94 
              Seguidores
 94 
              Seguidores
95 
            </span>
 95 
            </span>
96 
          )}
 96 
          )}
97 
        </div>
 97 
        </div>
98 
        <div className='row '>
 98 
        <div className="row ">
99 
          {showContact && (
 99 
          {showContact && (
100 
            <>
 100 
            <>
101 
              <button
 101 
              <button
102 
                className={`btn btn-${isAdded ? 'secondary' : 'primary'}`}
 102 
                className={`btn btn-${isAdded ? "secondary" : "primary"}`}
103 
                onClick={() =>
 103 
                onClick={() =>
104 
                  isAdded ? toggleConfirmationModal() : connect()
 104 
                  isAdded ? toggleConfirmationModal() : connect()
105 
                }
 105 
                }
106 
              >
 106 
              >
107 
                {isAdded ? labels.cancel : labels.add}
 107 
                {isAdded ? labels.cancel : labels.add}
108 
              </button>
 108 
              </button>
109 
              <Link to={linkInmail} className='btn btn-tertiary'>
 109 
              <Link to={linkInmail} className="btn btn-tertiary">
110 
                {labels.message}
 110 
                {labels.message}
111 
              </Link>
 111 
              </Link>
112 
            </>
 112 
            </>
113 
          )}
 113 
          )}
114 
        </div>
 114 
        </div>
115 
        {isEdit && (
 115 
        {isEdit && (
116 
          <SocialNetworks
 116 
          <SocialNetworks
117 
            type='profile'
 117 
            type="profile"
118 
            profileId={id}
 118 
            profileId={id}
119 
            facebook={facebook}
 119 
            facebook={facebook}
120 
            instagram={instagram}
 120 
            instagram={instagram}
121 
            twitter={twitter}
 121 
            twitter={twitter}
122 
          />
 122 
          />
Línea 128... Línea 128...
128 
        onAccept={connect}
 128 
        onAccept={connect}
129 
        title={labels.title_confirm_connection}
 129 
        title={labels.title_confirm_connection}
130 
        acceptLabel={labels.accept}
 130 
        acceptLabel={labels.accept}
131 
      />
 131 
      />
132 
    </>
 132 
    </>
133 
  )
 133 
  );
134 
}
 134 
};
Línea 135... Línea 135...
135 
 
 135