Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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