Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5473 Rev 5868
Línea 2... Línea 2...
2 
/* eslint-disable indent */
 2 
/* eslint-disable indent */
3 
/* eslint-disable react/prop-types */
 3 
/* eslint-disable react/prop-types */
4 
import React, { useState } from 'react'
 4 
import React, { useState } from 'react'
5 
import parse from 'html-react-parser'
 5 
import parse from 'html-react-parser'
6 
import EditIcon from '@mui/icons-material/EditOutlined'
 6 
import EditIcon from '@mui/icons-material/EditOutlined'
7 
import { axios } from '../../../../../utils'
 7 
import { axios } from '../../../../../../utils'
8 
import { useDispatch } from 'react-redux'
 8 
import { useDispatch } from 'react-redux'
9 
import { addNotification } from '../../../../../redux/notification/notification.actions'
 9 
import { addNotification } from '../../../../../../redux/notification/notification.actions'
10 
import { Modal } from 'react-bootstrap'
 10 
import { Modal } from 'react-bootstrap'
11 
import ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'
 11 
import ImageModal from '../../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'
12 
import { profileTypes } from '../../../../../shared/profile/Profile.types'
 12 
import { profileTypes } from '../../../../../../shared/profile/Profile.types'
13 
import CoverModal from '../../../../../shared/profile/edit/cover-section/CoverModal'
 13 
import CoverModal from '../../../../../../shared/cover/CoverModal'
14 
import OverviewModal from '../../../../my-profiles/edit/overview/OverviewModal'
 14 
import OverviewModal from '../../../../../components/overview/OverviewModal'
15 
import ConfirmModal from '../../../../../shared/confirm-modal/ConfirmModal'
 15 
import ConfirmModal from '../../../../../../shared/confirm-modal/ConfirmModal'
Línea 16... Línea 16...
16 
 
 16 
 
17 
const ProfileCard = ({
 17 
const ProfileCard = ({
18 
    fullName = '',
 18 
  fullName = '',
19 
    overview = '',
 19 
  overview = '',
20 
    formatted_address: formattedAddress = '',
 20 
  formatted_address: formattedAddress = '',
21 
    total_connections: totalConnections,
 21 
  total_connections: totalConnections,
22 
    showContact = false,
 22 
  showContact = false,
23 
    userExperiences = [],
 23 
  userExperiences = [],
24 
    linkInmail = '',
 24 
  linkInmail = '',
25 
    CancelConnectionUrl = '',
 25 
  CancelConnectionUrl = '',
26 
    RequestConnectionUrl = '',
 26 
  RequestConnectionUrl = '',
27 
    image = '',
 27 
  image = '',
28 
    cover = '',
 28 
  cover = '',
29 
    userIdEncrypted,
 29 
  userIdEncrypted,
30 
    userProfileIdEncrypted,
 30 
  userProfileIdEncrypted,
31 
    follower,
 31 
  follower,
32 
    following,
 32 
  following,
33 
    facebook,
 33 
  facebook,
34 
    twitter,
 34 
  twitter,
35 
    instagram,
 35 
  instagram,
36 
    imageProfileCover,
 36 
  imageProfileCover,
37 
    imageSizeCover,
 37 
  imageSizeCover,
38 
    view_following,
 38 
  view_following,
39 
    view_total_connections
 39 
  view_total_connections,
40 
}) => {
 40 
}) => {
41 
    const [isAdded, setIsAdded] = useState(!RequestConnectionUrl)
 41 
  const [isAdded, setIsAdded] = useState(!RequestConnectionUrl)
- 
 
 42 
  const [connectionUrl, setConnectionUrl] = useState(
- 
 
 43 
    RequestConnectionUrl || CancelConnectionUrl
42 
    const [connectionUrl, setConnectionUrl] = useState(RequestConnectionUrl || CancelConnectionUrl)
 44 
  )
43 
    const [isModalShow, setIsModalShow] = useState(false)
 45 
  const [isModalShow, setIsModalShow] = useState(false)
44 
    const dispatch = useDispatch()
 46 
  const dispatch = useDispatch()
45 
    const PATH = window.location.pathname
 47 
  const PATH = window.location.pathname
46 
 
 48 
 
47 
    // modals state
 49 
  // modals state
48 
    const [modalToShow, setModalToShow] = useState(null)
 50 
  const [modalToShow, setModalToShow] = useState(null)
49 
    const [settedOverview, setSettedOverview] = useState(overview)
 51 
  const [settedOverview, setSettedOverview] = useState(overview)
50 
    const [profileImg, setProfileImg] = useState({
 52 
  const [profileImg, setProfileImg] = useState({
- 
 
 53 
    path: `/storage/type/user-profile/code/${userIdEncrypted}/${
51 
        path: `/storage/type/user-profile/code/${userIdEncrypted}/${image ? `filename/${image}` : ''}`
 54 
      image ? `filename/${image}` : ''
- 
 
 55 
    }`,
52 
    })
 56 
  })
53 
    const [coverImg, setCoverImg] = useState({
 57 
  const [coverImg, setCoverImg] = useState({
- 
 
 58 
    path: `/storage/type/user-cover/code/${userIdEncrypted}/${
54 
        path: `/storage/type/user-cover/code/${userIdEncrypted}/${cover ? `filename/${cover}` : ''}`
 59 
      cover ? `filename/${cover}` : ''
- 
 
 60 
    }`,
55 
    })
 61 
  })
56 
 
 62 
 
57 
    const displayModal = () => setIsModalShow(!isModalShow)
 63 
  const displayModal = () => setIsModalShow(!isModalShow)
58 
 
 64 
 
59 
    const getProfileData = async () => {
 65 
  const getProfileData = async () => {
60 
        try {
 66 
    try {
61 
            const { data: response } = await axios.get(window.location.href)
 67 
      const { data: response } = await axios.get(window.location.href)
62 
 
 68 
 
63 
            if (response.link_request) {
 69 
      if (response.link_request) {
64 
                return setConnectionUrl(response.link_request)
 70 
        return setConnectionUrl(response.link_request)
65 
            }
 71 
      }
66 
 
 72 
 
67 
            return setConnectionUrl(response.link_cancel)
 73 
      return setConnectionUrl(response.link_cancel)
68 
        } catch (error) {
 74 
    } catch (error) {
- 
 
 75 
      console.log(error)
69 
            console.log(error)
 76 
      return dispatch(
70 
            return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
 77 
        addNotification({ style: 'danger', msg: 'Ha ocurrido un error' })
71 
        }
 78 
      )
- 
 
 79 
    }
Línea 72... Línea 80...
72 
    }
 80 
  }
73 
 
 81 
 
74 
    const connect = async () => {
 82 
  const connect = async () => {
75 
        try {
 83 
    try {
76 
            const { data: response } = await axios.post(connectionUrl)
 84 
      const { data: response } = await axios.post(connectionUrl)
- 
 
 85 
 
77 
 
 86 
      if (!response.success) {
78 
            if (!response.success) {
 87 
        return dispatch(
- 
 
 88 
          addNotification({ style: 'danger', msg: response.data })
79 
                return dispatch(addNotification({ style: 'danger', msg: response.data }))
 89 
        )
80 
            }
 90 
      }
81 
 
 91 
 
82 
            if (response.success && isModalShow) {
 92 
      if (response.success && isModalShow) {
83 
                displayModal()
 93 
        displayModal()
84 
            }
 94 
      }
85 
 
 95 
 
86 
            await getProfileData()
 96 
      await getProfileData()
87 
            dispatch(addNotification({ style: 'success', msg: response.data }))
 97 
      dispatch(addNotification({ style: 'success', msg: response.data }))
- 
 
 98 
      setIsAdded(!isAdded)
88 
            setIsAdded(!isAdded)
 99 
    } catch (error) {
89 
        } catch (error) {
 100 
      dispatch(
90 
            dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }))
 101 
        addNotification({ style: 'danger', msg: `Error: ${error.message}` })
- 
 
 102 
      )
Línea 91... Línea 103...
91 
        }
 103 
    }
Línea 92... Línea 104...
92 
    }
 104 
  }
93 
 
 105 
 
94 
    const closeModal = () => setModalToShow(null)
 106 
  const closeModal = () => setModalToShow(null)
95 
 
 107 
 
96 
    return (
 108 
  return (
97 
        <>
 109 
    <>
98 
            <section className='profile__user-card'>
 - 
 
99 
                <div className='cover__image-container'>
 - 
 
100 
                    <img alt='Background Image' src={coverImg.path} />
 - 
 
101 
                    {PATH.includes('edit') &&
 110 
      <section className="profile__user-card">
102 
                        <button className='button-icon cover__edit-btn' onClick={() => setModalToShow('cover')}>
 - 
 
103 
                            <EditIcon />
 111 
        <div className="cover__image-container">
104 
                        </button>
 - 
 
105 
                    }
 - 
 
106 
                </div>
 - 
 
107 
                <section className='px-4 pb-4'>
 - 
 
108 
                    <div className='card__image-options'>
 - 
 
109 
                        <img
 112 
          <img alt="Background Image" src={coverImg.path} />
110 
                            alt='Profile Image'
 113 
          {PATH.includes('edit') && (
111 
                            className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
 - 
 
112 
                            src={profileImg.path}
 - 
 
113 
                            onClick={() => PATH.includes('edit') && setModalToShow('image')}
 114 
            <button
114 
                        />
 115 
              className="button-icon cover__edit-btn"
115 
                        {PATH.includes('edit') &&
 116 
              onClick={() => setModalToShow('cover')}
116 
                            <button className='button-icon' onClick={() => setModalToShow('overview')}>
 117 
            >
117 
                                <EditIcon />
 118 
              <EditIcon />
118 
                            </button>
 - 
 
119 
                        }
 - 
 
120 
                    </div>
 - 
 
121 
                    <div className='card-content'>
 - 
 
122 
                        <div className='card-info'>
 - 
 
123 
                            <h1>{fullName}</h1>
 - 
 
124 
                            {parse(settedOverview.replaceAll('h1', 'p'))}
 - 
 
125 
                            <div className='d-inline-flex align-items-center mt-2' style={{ gap: '1rem' }}>
 - 
 
126 
                                <span>{formattedAddress}</span>
 - 
 
127 
                                <a
 - 
 
128 
                                    href=''
 - 
 
129 
                                    onClick={(e) => {
 - 
 
130 
                                        e.preventDefault()
 - 
 
131 
                                        setModalToShow('info')
 - 
 
132 
                                    }}>
 - 
 
133 
                                    {LABELS.PERSONAL_INFO}
 - 
 
134 
                                </a>
 - 
 
135 
                            </div>
 - 
 
136 
                            <div className='d-inline-flex align-items-center mt-2' style={{ gap: '1rem' }}>
 - 
 
137 
                                {(Boolean(totalConnections) && view_total_connections) &&
 - 
 
138 
                                    <a href='/connection/my-connections' target='_blank'>
 - 
 
139 
                                        {`${totalConnections} ${LABELS.CONNECTIONS}`}
 - 
 
140 
                                    </a>
 - 
 
141 
                                }
 - 
 
142 
                                {(Boolean(follower) && view_following) &&
 - 
 
143 
                                    <a href='' className='cursor-auto' onClick={(e) => e.preventDefault()}>
 - 
 
144 
                                        {`${follower} ${LABELS.FOLLOWERS}`}
 - 
 
145 
                                    </a>
 - 
 
146 
                                }
 - 
 
147 
                                {(Boolean(following) && view_following) &&
 - 
 
148 
                                    <a href='/company/following-companies' target='_blank'>
 - 
 
149 
                                        {`${following} ${LABELS.FOLLOWING}`}
 - 
 
150 
                                    </a>
 - 
 
151 
                                }
 - 
 
152 
                            </div>
 - 
 
153 
                            <div className='button-actions mt-2'>
 - 
 
154 
                                {(connectionUrl && isAdded) &&
 - 
 
155 
                                    <button className='btn button btn-primary' onClick={() => displayModal()}>
 - 
 
156 
                                        {LABELS.CANCEL}
 - 
 
157 
                                    </button>
 - 
 
158 
                                }
 - 
 
159 
                                {(connectionUrl && !isAdded) &&
 - 
 
160 
                                    <button className='btn button btn-primary' onClick={() => connect()}>
 - 
 
161 
                                        {LABELS.CONNECT}
 - 
 
162 
                                    </button>
 - 
 
163 
                                }
 - 
 
164 
                                {showContact &&
 - 
 
165 
                                    <a href={linkInmail} className='btn button btn-secondary'>
 - 
 
166 
                                        {LABELS.MESSAGE}
 - 
 
167 
                                    </a>
 119 
            </button>
168 
                                }
 - 
 
169 
                            </div>
 - 
 
170 
                        </div>
 - 
 
171 
                        <div className='card-experiences'>
 - 
 
172 
                            <ul>
 - 
 
173 
                                {userExperiences.map(({ company, title, industry, size }, index) =>
 - 
 
174 
                                    <li key={index}>
 - 
 
175 
                                        <span>{`${company} - ${title}`}</span>
 - 
 
176 
                                        <p>{`${industry} / ${size}`}</p>
 - 
 
177 
                                    </li>
 - 
 
178 
                                )}
 - 
 
179 
                            </ul>
 120 
          )}
180 
                        </div>
 121 
        </div>
181 
                    </div>
 122 
        <section className="px-4 pb-4">
182 
                </section>
 - 
 
183 
            </section>
 123 
          <div className="card__image-options">
184 
            <OverviewModal
 - 
 
185 
                isOpen={modalToShow === 'overview'}
 124 
            <img
186 
                overview={settedOverview}
 125 
              alt="Profile Image"
- 
 
 126 
              className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
- 
 
 127 
              src={profileImg.path}
- 
 
 128 
              onClick={() => PATH.includes('edit') && setModalToShow('image')}
- 
 
 129 
            />
- 
 
 130 
            {PATH.includes('edit') && (
- 
 
 131 
              <button
- 
 
 132 
                className="button-icon"
- 
 
 133 
                onClick={() => setModalToShow('overview')}
- 
 
 134 
              >
- 
 
 135 
                <EditIcon />
- 
 
 136 
              </button>
- 
 
 137 
            )}
- 
 
 138 
          </div>
- 
 
 139 
          <div className="card-content">
- 
 
 140 
            <div className="card-info">
- 
 
 141 
              <h1>{fullName}</h1>
- 
 
 142 
              {parse(settedOverview.replaceAll('h1', 'p'))}
- 
 
 143 
              <div
- 
 
 144 
                className="d-inline-flex align-items-center mt-2"
- 
 
 145 
                style={{ gap: '1rem' }}
- 
 
 146 
              >
- 
 
 147 
                <span>{formattedAddress}</span>
- 
 
 148 
                <a
- 
 
 149 
                  href=""
- 
 
 150 
                  onClick={(e) => {
- 
 
 151 
                    e.preventDefault()
- 
 
 152 
                    setModalToShow('info')
- 
 
 153 
                  }}
- 
 
 154 
                >
- 
 
 155 
                  {LABELS.PERSONAL_INFO}
- 
 
 156 
                </a>
- 
 
 157 
              </div>
- 
 
 158 
              <div
- 
 
 159 
                className="d-inline-flex align-items-center mt-2"
- 
 
 160 
                style={{ gap: '1rem' }}
- 
 
 161 
              >
- 
 
 162 
                {Boolean(totalConnections) && view_total_connections && (
- 
 
 163 
                  <a href="/connection/my-connections" target="_blank">
- 
 
 164 
                    {`${totalConnections} ${LABELS.CONNECTIONS}`}
- 
 
 165 
                  </a>
- 
 
 166 
                )}
- 
 
 167 
                {Boolean(follower) && view_following && (
- 
 
 168 
                  <a
- 
 
 169 
                    href=""
- 
 
 170 
                    className="cursor-auto"
- 
 
 171 
                    onClick={(e) => e.preventDefault()}
- 
 
 172 
                  >
- 
 
 173 
                    {`${follower} ${LABELS.FOLLOWERS}`}
- 
 
 174 
                  </a>
- 
 
 175 
                )}
- 
 
 176 
                {Boolean(following) && view_following && (
- 
 
 177 
                  <a href="/company/following-companies" target="_blank">
- 
 
 178 
                    {`${following} ${LABELS.FOLLOWING}`}
- 
 
 179 
                  </a>
- 
 
 180 
                )}
- 
 
 181 
              </div>
- 
 
 182 
              <div className="button-actions mt-2">
- 
 
 183 
                {connectionUrl && isAdded && (
- 
 
 184 
                  <button
- 
 
 185 
                    className="btn button btn-primary"
- 
 
 186 
                    onClick={() => displayModal()}
- 
 
 187 
                  >
- 
 
 188 
                    {LABELS.CANCEL}
- 
 
 189 
                  </button>
- 
 
 190 
                )}
- 
 
 191 
                {connectionUrl && !isAdded && (
- 
 
 192 
                  <button
- 
 
 193 
                    className="btn button btn-primary"
- 
 
 194 
                    onClick={() => connect()}
- 
 
 195 
                  >
- 
 
 196 
                    {LABELS.CONNECT}
- 
 
 197 
                  </button>
- 
 
 198 
                )}
- 
 
 199 
                {showContact && (
- 
 
 200 
                  <a href={linkInmail} className="btn button btn-secondary">
- 
 
 201 
                    {LABELS.MESSAGE}
- 
 
 202 
                  </a>
- 
 
 203 
                )}
- 
 
 204 
              </div>
- 
 
 205 
            </div>
- 
 
 206 
            <div className="card-experiences">
- 
 
 207 
              <ul>
- 
 
 208 
                {userExperiences.map(
- 
 
 209 
                  ({ company, title, industry, size }, index) => (
- 
 
 210 
                    <li key={index}>
- 
 
 211 
                      <span>{`${company} - ${title}`}</span>
- 
 
 212 
                      <p>{`${industry} / ${size}`}</p>
- 
 
 213 
                    </li>
- 
 
 214 
                  )
- 
 
 215 
                )}
- 
 
 216 
              </ul>
- 
 
 217 
            </div>
- 
 
 218 
          </div>
- 
 
 219 
        </section>
- 
 
 220 
      </section>
- 
 
 221 
      <OverviewModal
- 
 
 222 
        isOpen={modalToShow === 'overview'}
- 
 
 223 
        overview={settedOverview}
187 
                userIdEncrypted={userProfileIdEncrypted}
 224 
        userIdEncrypted={userProfileIdEncrypted}
188 
                closeModal={() => closeModal()}
 225 
        closeModal={() => closeModal()}
189 
                setOverview={(newOverview) => setSettedOverview(newOverview)}
 226 
        setOverview={(newOverview) => setSettedOverview(newOverview)}
190 
            />
 227 
      />
191 
            <CoverModal
 228 
      <CoverModal
192 
                isModalOpen={modalToShow === 'cover'}
 229 
        isModalOpen={modalToShow === 'cover'}
193 
                coverType={profileTypes.USER}
 230 
        coverType={profileTypes.USER}
194 
                entityId={userIdEncrypted}
 231 
        entityId={userIdEncrypted}
195 
                profileId={userProfileIdEncrypted}
 232 
        profileId={userProfileIdEncrypted}
196 
                handleCoverSectionModalOpen={() => closeModal()}
 233 
        handleCoverSectionModalOpen={() => closeModal()}
197 
                imageSizeCover={imageSizeCover}
 234 
        imageSizeCover={imageSizeCover}
198 
                setCoverImg={(newImage) => setCoverImg(newImage)}
 235 
        setCoverImg={(newImage) => setCoverImg(newImage)}
199 
            />
 236 
      />
200 
            <ImageModal
 237 
      <ImageModal
201 
                handleModalOpen={() => closeModal()}
 238 
        handleModalOpen={() => closeModal()}
202 
                isModalOpen={modalToShow === 'image'}
 239 
        isModalOpen={modalToShow === 'image'}
203 
                profileId={userProfileIdEncrypted}
 240 
        profileId={userProfileIdEncrypted}
204 
                imageProfileCover={imageProfileCover}
 241 
        imageProfileCover={imageProfileCover}
205 
                profileType={profileTypes.USER}
 242 
        profileType={profileTypes.USER}
206 
                setProfileImg={(newImage) => setProfileImg(newImage)}
 243 
        setProfileImg={(newImage) => setProfileImg(newImage)}
207 
            />
 244 
      />
208 
            <ProfileCard.Modal
 245 
      <ProfileCard.Modal
209 
                show={modalToShow === 'info'}
 246 
        show={modalToShow === 'info'}
210 
                closeModal={() => closeModal()}
 247 
        closeModal={() => closeModal()}
211 
                fullName={fullName}
 248 
        fullName={fullName}
212 
                facebook={facebook}
 249 
        facebook={facebook}
213 
                twitter={twitter}
 250 
        twitter={twitter}
214 
                instagram={instagram}
 251 
        instagram={instagram}
215 
                following={following}
 252 
        following={following}
216 
                formatted_address={formattedAddress}
 253 
        formatted_address={formattedAddress}
217 
                overview={overview}
 254 
        overview={overview}
218 
                total_connections={totalConnections}
 255 
        total_connections={totalConnections}
219 
                follower={follower}
 256 
        follower={follower}
220 
            />
 257 
      />
221 
            <ConfirmModal
 258 
      <ConfirmModal
222 
                show={isModalShow}
 259 
        show={isModalShow}
223 
                onClose={() => setIsModalShow(false)}
 260 
        onClose={() => setIsModalShow(false)}
224 
                onAccept={() => connect()}
 261 
        onAccept={() => connect()}
Línea 225... Línea 262...
225 
            />
 262 
      />
226 
        </>
 263 
    </>
227 
    )
 264 
  )
228 
}
 265 
}
229 
 
 266 
 
230 
const InfoModal = ({
 267 
const InfoModal = ({
231 
    show,
 268 
  show,
232 
    closeModal,
 269 
  closeModal,
233 
    facebook,
 270 
  facebook,
234 
    following,
 271 
  following,
235 
    formatted_address,
 272 
  formatted_address,
236 
    fullName,
 273 
  fullName,
237 
    instagram,
 274 
  instagram,
238 
    overview,
 275 
  overview,
239 
    total_connections,
 - 
 
240 
    twitter,
 - 
 
241 
    follower
 276 
  total_connections,
242 
}) => {
 - 
 
243 
    return (
 277 
  twitter,
244 
        <Modal
 278 
  follower,
245 
            show={show}
 279 
}) => {
246 
            onHide={closeModal}
 280 
  return (
247 
        >
 281 
    <Modal show={show} onHide={closeModal}>
248 
            <Modal.Header closeButton>
 282 
      <Modal.Header closeButton>
249 
                <h2>{LABELS.ABOUT_GROUP}</h2>
 283 
        <h2>{LABELS.ABOUT_GROUP}</h2>
250 
            </Modal.Header>
 284 
      </Modal.Header>
251 
            <Modal.Body>
 285 
      <Modal.Body>
252 
                <div className="description__label">
 286 
        <div className="description__label">
253 
                    <label htmlFor="name">{LABELS.FIRST_NAME}</label>
 287 
          <label htmlFor="name">{LABELS.FIRST_NAME}</label>
254 
                    <p>{fullName}</p>
 288 
          <p>{fullName}</p>
255 
                </div>
 289 
        </div>
256 
                {overview &&
 290 
        {overview && (
257 
                    <div className="description__label">
 291 
          <div className="description__label">
258 
                        <label htmlFor="name">{LABELS.DESCRIPTION}</label>
 292 
            <label htmlFor="name">{LABELS.DESCRIPTION}</label>
259 
                        {parse(overview)}
 293 
            {parse(overview)}
260 
                    </div>
 294 
          </div>
261 
                }
 295 
        )}
262 
                {formatted_address &&
 296 
        {formatted_address && (
263 
                    <div className="description__label">
 297 
          <div className="description__label">
264 
                        <label htmlFor="name">{LABELS.LOCATION}</label>
 298 
            <label htmlFor="name">{LABELS.LOCATION}</label>
265 
                        <p>{formatted_address}</p>
 299 
            <p>{formatted_address}</p>
266 
                    </div>
 300 
          </div>
267 
                }
 301 
        )}
268 
                {total_connections &&
 302 
        {total_connections && (
269 
                    <div className="description__label">
 303 
          <div className="description__label">
270 
                        <label htmlFor="name">{LABELS.CONNECTIONS}</label>
 304 
            <label htmlFor="name">{LABELS.CONNECTIONS}</label>
271 
                        <p>{total_connections}</p>
 305 
            <p>{total_connections}</p>
272 
                    </div>
 306 
          </div>
273 
                }
 307 
        )}
274 
                {follower &&
 308 
        {follower && (
275 
                    <div className="description__label">
 309 
          <div className="description__label">
276 
                        <label htmlFor="name">{LABELS.FOLLOWERS}</label>
 310 
            <label htmlFor="name">{LABELS.FOLLOWERS}</label>
277 
                        <p>{follower}</p>
 311 
            <p>{follower}</p>
278 
                    </div>
 312 
          </div>
279 
                }
 313 
        )}
280 
                {following &&
 314 
        {following && (
281 
                    <div className="description__label">
 315 
          <div className="description__label">
282 
                        <label htmlFor="name">{LABELS.FOLLOWING}</label>
 316 
            <label htmlFor="name">{LABELS.FOLLOWING}</label>
283 
                        <p>{following}</p>
 317 
            <p>{following}</p>
284 
                    </div>
 318 
          </div>
285 
                }
 319 
        )}
286 
                <div className="description__label">
 320 
        <div className="description__label">
- 
 
 321 
          <label htmlFor="name">{LABELS.SOCIAL_NETWORKS}</label>
287 
                    <label htmlFor="name">{LABELS.SOCIAL_NETWORKS}</label>
 322 
          {facebook && (
288 
                    {facebook &&
 323 
            <a href={facebook} target="_blank" rel="noreferrer">
289 
                        <a href={facebook} target="_blank" rel="noreferrer">
 324 
              <p className="mb-1">{facebook}</p>
290 
                            <p className='mb-1'>{facebook}</p>
 325 
            </a>
- 
 
 326 
          )}
291 
                        </a>}
 327 
          {instagram && (
292 
                    {instagram &&
 328 
            <a href={instagram} target="_blank" rel="noreferrer">
293 
                        <a href={instagram} target="_blank" rel="noreferrer">
 329 
              <p className="mb-1">{instagram}</p>
294 
                            <p className='mb-1'>{instagram}</p>
 330 
            </a>
- 
 
 331 
          )}
295 
                        </a>}
 332 
          {twitter && (
296 
                    {twitter &&
 333 
            <a href={twitter} target="_blank" rel="noreferrer">
297 
                        <a href={twitter} target="_blank" rel="noreferrer">
 334 
              <p className="mb-1">{twitter}</p>
298 
                            <p className='mb-1'>{twitter}</p>
 335 
            </a>
299 
                        </a>}
 336 
          )}
Línea 300... Línea 337...
300 
                </div>
 337 
        </div>
Línea 301... Línea 338...
301 
            </Modal.Body>
 338 
      </Modal.Body>