Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2142 Rev 2902
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } from 'react'
2 
import { Link, useLocation } from 'react-router-dom'
 2 
import { Link, useLocation } from 'react-router-dom'
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux'
4 
import { Avatar, IconButton } from '@mui/material'
 4 
import { Avatar, Box, Button, IconButton, Typography } from '@mui/material'
5 
import EditIcon from '@mui/icons-material/EditOutlined'
 5 
import { Edit } from '@mui/icons-material'
6 
import parse from 'html-react-parser'
 - 
 
7 
 
 6 
 
8 
import { axios } from 'utils/index'
 7 
import { axios, parse } from '@utils'
9 
import { addNotification } from '../../redux/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions'
10 
 
 9 
 
11 
import Modal from 'components/UI/modal/Modal'
 10 
import Widget from '@components/UI/Widget'
12 
import ConfirmModal from 'components/modals/ConfirmModal'
 11 
import Cover from '@components/UI/cover/Cover'
13 
import ImageModal from 'components/modals/ImageModal'
 12 
import ConfirmModal from '@components/modals/ConfirmModal'
14 
import OverviewModal from 'components/overview/OverviewModal'
 - 
 
15 
import Cover from '../UI/cover/Cover'
 13 
import ProfileModal from './ProfileModal'
16 
import WidgetWrapper from '../widgets/WidgetLayout'
 - 
 
Línea 17... Línea 14...
17 
 
 14 
 
18 
const ProfileCard = ({
 15 
const ProfileCard = ({
19 
  full_name: fullName = '',
 - 
 
20 
  overview = '',
 - 
 
21 
  formatted_address: formattedAddress = '',
 - 
 
22 
  total_connections: totalConnections,
 - 
 
23 
  show_contact: showContact = false,
 - 
 
24 
  experiences = [],
 16 
  full_name: fullName,
25 
  link_inmail: linkInmail = '',
 - 
 
26 
  link_cancel: CancelConnectionUrl = '',
 - 
 
27 
  link_request: RequestConnectionUrl = '',
 17 
  user_profile_id: userProfileId,
28 
  image = '',
 18 
  image,
29 
  cover,
 - 
 
30 
  user_profile_uuid: profileId,
 - 
 
31 
  request_connection,
 - 
 
32 
  follower,
 19 
  cover,
33 
  following,
 20 
  overview,
34 
  facebook,
 - 
 
35 
  twitter,
 21 
  facebook,
36 
  instagram,
 22 
  instagram,
- 
 
 23 
  twitter,
- 
 
 24 
  formatted_address: formattedAddress,
- 
 
 25 
  user_experiences: userExperiences,
- 
 
 26 
  show_contact: showContact,
37 
  sizes,
 27 
  link_inmail: linkInmail,
- 
 
 28 
  following,
- 
 
 29 
  view_following: viewFollowing,
38 
  view_following,
 30 
  total_connections: totalConnections,
- 
 
 31 
  view_total_connections: viewTotalConnections,
- 
 
 32 
  request_connection: requestConnection,
- 
 
 33 
  link_cancel: linkCancel,
- 
 
 34 
  link_request: linkRequest,
39 
  view_total_connections
 35 
  sizes
40 
}) => {
 36 
}) => {
41 
  const [isAdded, setIsAdded] = useState(false)
 37 
  const [isAdded, setIsAdded] = useState(false)
42 
  const [connectionUrl, setConnectionUrl] = useState('')
 38 
  const [connectionUrl, setConnectionUrl] = useState('')
43 
  const [modalToShow, setModalToShow] = useState(null)
 39 
  const [modalToShow, setModalToShow] = useState(null)
Línea 47... Línea 43...
47 
  const [isEdit, setIsEdit] = useState(false)
 43 
  const [isEdit, setIsEdit] = useState(false)
48 
  const labels = useSelector(({ intl }) => intl.labels)
 44 
  const labels = useSelector(({ intl }) => intl.labels)
49 
  const { pathname } = useLocation()
 45 
  const { pathname } = useLocation()
50 
  const dispatch = useDispatch()
 46 
  const dispatch = useDispatch()
Línea -... Línea 47...
- 
 
 47 
 
- 
 
 48 
  const showConnections = totalConnections && viewTotalConnections
- 
 
 49 
  const showFollowing = following && viewFollowing
51 
 
 50 
 
52 
  const displayModal = () => {
 51 
  const displayModal = () => {
53 
    setIsModalShow(!isModalShow)
 52 
    setIsModalShow(!isModalShow)
Línea 54... Línea 53...
54 
  }
 53 
  }
Línea 93... Línea 92...
93 
  const closeModal = () => {
 92 
  const closeModal = () => {
94 
    setModalToShow(null)
 93 
    setModalToShow(null)
95 
  }
 94 
  }
Línea 96... Línea 95...
96 
 
 95 
 
97 
  useEffect(() => {
 96 
  useEffect(() => {
98 
    setIsAdded(!request_connection)
 97 
    setIsAdded(!requestConnection)
99 
    setSettedOverview(overview)
 98 
    setSettedOverview(overview)
100 
    setProfileImg(image)
 99 
    setProfileImg(image)
Línea 101... Línea 100...
101 
  }, [request_connection, overview, image])
 100 
  }, [requestConnection, overview, image])
102 
 
 - 
 
103 
  useEffect(() => {
 101 
 
104 
    RequestConnectionUrl
 - 
 
105 
      ? setConnectionUrl(RequestConnectionUrl)
 102 
  useEffect(() => {
Línea 106... Línea 103...
106 
      : setConnectionUrl(CancelConnectionUrl)
 103 
    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel)
107 
  }, [RequestConnectionUrl, CancelConnectionUrl])
 104 
  }, [linkRequest, linkCancel])
108 
 
 105 
 
Línea 109... Línea 106...
109 
  useEffect(() => {
 106 
  useEffect(() => {
110 
    setIsEdit(pathname.includes('edit'))
 - 
 
111 
  }, [pathname])
 107 
    setIsEdit(pathname.includes('edit'))
112 
 
 108 
  }, [pathname])
113 
  return (
 109 
 
114 
    <>
 110 
  return (
115 
      <WidgetWrapper>
 111 
    <Widget>
116 
        <Cover
 112 
      <Cover
- 
 
 113 
        cover={cover}
- 
 
 114 
        sizes={sizes?.cover}
- 
 
 115 
        edit={isEdit}
- 
 
 116 
        editUrl={`/profile/my-profiles/cover/${userProfileId}/operation/upload`}
- 
 
 117 
      />
- 
 
 118 
      <Box>
- 
 
 119 
        <Avatar
- 
 
 120 
          src={profileImg}
- 
 
 121 
          alt={fullName}
- 
 
 122 
          sx={{
- 
 
 123 
            width: { xs: '100px', lg: '150px' },
- 
 
 124 
            height: { xs: '100px', lg: '150px' },
- 
 
 125 
            mt: { xs: '-50px', lg: '-75px' },
- 
 
 126 
            border: '4px solid #fff',
117 
          cover={cover}
 127 
            backgroundColor: '#c9ced4',
118 
          sizes={sizes?.cover}
 128 
            cursor: isEdit ? 'pointer' : 'default'
119 
          edit={isEdit}
 129 
          }}
120 
          editUrl={`/profile/my-profiles/cover/${profileId}/operation/upload`}
 130 
          onClick={() => isEdit && setModalToShow('image')}
- 
 
 131 
        />
- 
 
 132 
        {isEdit && (
- 
 
 133 
          <IconButton onClick={() => setModalToShow('overview')}>
- 
 
 134 
            <Edit />
- 
 
 135 
          </IconButton>
- 
 
 136 
        )}
- 
 
 137 
      </Box>
- 
 
 138 
      <Widget.Body>
- 
 
 139 
        <Typography variant='h2'>{fullName}</Typography>
- 
 
 140 
        <Typography>{parse(settedOverview)}</Typography>
121 
        />
 141 
 
- 
 
 142 
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
- 
 
 143 
          <Typography>{formattedAddress}</Typography>
- 
 
 144 
          <Button onClick={() => setModalToShow('info')}>
- 
 
 145 
            {labels.personal_info}
- 
 
 146 
          </Button>
122 
        <section className='px-4 pb-4'>
 147 
        </Box>
- 
 
 148 
 
- 
 
 149 
        <div
- 
 
 150 
          className='d-inline-flex align-items-center mt-2'
- 
 
 151 
          style={{ gap: '1rem' }}
123 
          <div className='card__image-options'>
 152 
        >
- 
 
 153 
          {showConnections && (
124 
            <Avatar
 154 
            <Link to='/connection/my-connections'>
125 
              src={profileImg}
 155 
              {`${totalConnections} ${labels.connections}`}
126 
              alt={fullName}
 156 
            </Link>
- 
 
 157 
          )}
- 
 
 158 
          {showFollowing && (
- 
 
 159 
            <Link onClick={(e) => e.preventDefault()}>
127 
              sx={{
 160 
              {`${following} ${labels.following}`}
128 
                width: { xs: '100px', lg: '150px' },
 161 
            </Link>
129 
                height: { xs: '100px', lg: '150px' },
 162 
          )}
- 
 
 163 
        </div>
- 
 
 164 
        <div className='button-actions mt-2'>
130 
                mt: { xs: '-50px', lg: '-75px' },
 165 
          {connectionUrl && isAdded && (
- 
 
 166 
            <Button variant='primary' onClick={() => displayModal()}>
131 
                border: '4px solid #fff',
 167 
              {labels.cancel}
- 
 
 168 
            </Button>
- 
 
 169 
          )}
132 
                backgroundColor: '#c9ced4',
 170 
          {connectionUrl && !isAdded && (
133 
                cursor: isEdit ? 'pointer' : 'default'
 171 
            <Button variant='primary' onClick={connect}>
134 
              }}
 172 
              {labels.connect}
135 
              onClick={() => isEdit && setModalToShow('image')}
 173 
            </Button>
136 
            />
 174 
          )}
- 
 
 175 
          {showContact && (
- 
 
 176 
            <Button to={linkInmail} LinkComponent={Link} variant='secondary'>
- 
 
 177 
              {labels.message}
- 
 
 178 
            </Button>
- 
 
 179 
          )}
- 
 
 180 
        </div>
- 
 
 181 
 
- 
 
 182 
        <div className='card-experiences'>
- 
 
 183 
          <ul>
- 
 
 184 
            {userExperiences.map(
- 
 
 185 
              ({ company, title, industry, size }, index) => (
- 
 
 186 
                <li key={index}>
137 
            {isEdit && (
 187 
                  <span>{`${company} - ${title}`}</span>
138 
              <IconButton onClick={() => setModalToShow('overview')}>
 188 
                  <p>{`${industry} / ${size}`}</p>
139 
                <EditIcon />
 - 
 
140 
              </IconButton>
 - 
 
141 
            )}
 - 
 
142 
          </div>
 - 
 
143 
          <div className='card-content'>
 - 
 
144 
            <div className='card-info'>
 - 
 
145 
              <h1>{fullName}</h1>
 - 
 
146 
              {settedOverview && parse(settedOverview)}
 - 
 
147 
              <div
 - 
 
148 
                className='d-inline-flex align-items-center mt-2'
 - 
 
149 
                style={{ gap: '1rem' }}
 - 
 
150 
              >
 - 
 
151 
                <span>{formattedAddress}</span>
 - 
 
152 
                <Link
 - 
 
153 
                  onClick={(e) => {
 - 
 
154 
                    e.preventDefault()
 - 
 
155 
                    setModalToShow('info')
 - 
 
156 
                  }}
 - 
 
157 
                >
 - 
 
158 
                  {labels.personal_info}
 - 
 
159 
                </Link>
 - 
 
160 
              </div>
 - 
 
161 
              <div
 - 
 
162 
                className='d-inline-flex align-items-center mt-2'
 - 
 
163 
                style={{ gap: '1rem' }}
 - 
 
164 
              >
 - 
 
165 
                {Boolean(totalConnections) && view_total_connections && (
 - 
 
166 
                  <Link to='/connection/my-connections'>
 - 
 
167 
                    {`${totalConnections} ${labels.connections}`}
 - 
 
168 
                  </Link>
 - 
 
169 
                )}
 - 
 
170 
                {Boolean(follower) && view_following && (
 - 
 
171 
                  <Link onClick={(e) => e.preventDefault()}>
 - 
 
172 
                    {`${follower} ${labels.followers}`}
 - 
 
173 
                  </Link>
 - 
 
174 
                )}
 - 
 
175 
                {Boolean(following) && view_following && (
 - 
 
176 
                  <Link to='/company/following-companies'>
 - 
 
177 
                    {`${following} ${labels.following}`}
 - 
 
178 
                  </Link>
 - 
 
179 
                )}
 - 
 
180 
              </div>
 - 
 
181 
              <div className='button-actions mt-2'>
 - 
 
182 
                {connectionUrl && isAdded && (
 - 
 
183 
                  <button
 - 
 
184 
                    className='btn button btn-primary'
 - 
 
185 
                    onClick={() => displayModal()}
 - 
 
186 
                  >
 - 
 
187 
                    {labels.cancel}
 - 
 
188 
                  </button>
 - 
 
189 
                )}
 - 
 
190 
                {connectionUrl && !isAdded && (
 - 
 
191 
                  <button className='btn button btn-primary' onClick={connect}>
 - 
 
192 
                    {labels.connect}
 - 
 
193 
                  </button>
 - 
 
194 
                )}
 - 
 
195 
                {showContact && (
 - 
 
196 
                  <Link to={linkInmail} className='btn button btn-secondary'>
 - 
 
197 
                    {labels.message}
 - 
 
198 
                  </Link>
 - 
 
199 
                )}
 - 
 
200 
              </div>
 - 
 
201 
            </div>
 - 
 
202 
            <div className='card-experiences'>
 - 
 
203 
              <ul>
 - 
 
204 
                {experiences.map(
 - 
 
205 
                  ({ company, title, industry, size }, index) => (
 - 
 
206 
                    <li key={index}>
 - 
 
207 
                      <span>{`${company} - ${title}`}</span>
 - 
 
208 
                      <p>{`${industry} / ${size}`}</p>
 - 
 
209 
                    </li>
 - 
 
210 
                  )
 189 
                </li>
211 
                )}
 - 
 
212 
              </ul>
 190 
              )
213 
            </div>
 - 
 
214 
          </div>
 - 
 
215 
        </section>
 - 
 
216 
      </WidgetWrapper>
 - 
 
217 
 
 - 
 
218 
      {isEdit && (
 - 
 
219 
        <>
 - 
 
220 
          <OverviewModal
 - 
 
221 
            isOpen={modalToShow === 'overview'}
 - 
 
222 
            overview={settedOverview}
 - 
 
223 
            id={profileId}
 - 
 
224 
            closeModal={() => closeModal()}
 - 
 
225 
            onComplete={(newOverview) => setSettedOverview(newOverview)}
 - 
 
226 
          />
 - 
 
227 
          <ImageModal
 - 
 
228 
            show={modalToShow === 'image'}
 - 
 
229 
            id={profileId}
 - 
 
230 
            sizes={sizes?.image}
 - 
 
231 
            onClose={() => closeModal()}
 - 
 
Línea 232... Línea 191...
232 
            onComplete={(newImage) => setProfileImg(newImage)}
 191 
            )}
233 
          />
 192 
          </ul>
234 
        </>
 193 
        </div>
235 
      )}
 194 
      </Widget.Body>
236 
 
 195 
 
237 
      <ProfileCard.Modal
 196 
      <ProfileModal
238 
        show={modalToShow === 'info'}
 197 
        show={modalToShow === 'info'}
239 
        closeModal={() => closeModal()}
 198 
        closeModal={() => closeModal()}
240 
        fullName={fullName}
 199 
        fullName={fullName}
241 
        facebook={facebook}
 200 
        facebook={facebook}
242 
        twitter={twitter}
 201 
        twitter={twitter}
243 
        instagram={instagram}
 202 
        instagram={instagram}
244 
        following={following}
 203 
        following={following}
245 
        formatted_address={formattedAddress}
 204 
        formatted_address={formattedAddress}
246 
        overview={overview}
 205 
        overview={overview}
247 
        total_connections={totalConnections}
 206 
        total_connections={totalConnections}
248 
        follower={follower}
 207 
        // follower={follower}
249 
      />
 208 
      />
250 
      <ConfirmModal
 209 
      <ConfirmModal
251 
        show={isModalShow}
 210 
        show={isModalShow}
252 
        onClose={() => setIsModalShow(false)}
 211 
        onClose={() => setIsModalShow(false)}
Línea 253... Línea -...
253 
        onAccept={() => connect()}
 - 
 
254 
      />
 - 
 
255 
    </>
 - 
 
256 
  )
 - 
 
257 
}
 - 
 
258 
 
 - 
 
259 
const InfoModal = ({
 - 
 
260 
  show,
 - 
 
261 
  closeModal,
 - 
 
262 
  facebook,
 - 
 
263 
  following,
 - 
 
264 
  formatted_address,
 - 
 
265 
  fullName,
 - 
 
266 
  instagram,
 - 
 
267 
  overview,
 - 
 
268 
  total_connections,
 - 
 
269 
  twitter,
 - 
 
270 
  follower
 - 
 
271 
}) => {
 - 
 
272 
  const labels = useSelector(({ intl }) => intl.labels)
 - 
 
273 
 
 - 
 
274 
  return (
 - 
 
275 
    <Modal title={labels.personal_info} show={show} onClose={closeModal}>
 - 
 
276 
      <div className='description__label'>
 - 
 
277 
        <label htmlFor='name'>{labels.first_name}</label>
 - 
 
278 
        <p>{fullName}</p>
 - 
 
279 
      </div>
 - 
 
280 
      {!!overview && (
 - 
 
281 
        <div className='description__label'>
 - 
 
282 
          <label htmlFor='name'>{labels.description}</label>
 - 
 
283 
          {parse(overview)}
 - 
 
284 
        </div>
 - 
 
285 
      )}
 - 
 
286 
      {!!formatted_address && (
 - 
 
287 
        <div className='description__label'>
 - 
 
288 
          <label htmlFor='name'>{labels.location}</label>
 - 
 
289 
          <p>{formatted_address}</p>
 - 
 
290 
        </div>
 - 
 
291 
      )}
 - 
 
292 
      {!!total_connections && (
 - 
 
293 
        <div className='description__label'>
 - 
 
294 
          <label htmlFor='name'>{labels.connections}</label>
 - 
 
295 
          <p>{total_connections}</p>
 - 
 
296 
        </div>
 - 
 
297 
      )}
 - 
 
298 
      {!!follower && (
 - 
 
299 
        <div className='description__label'>
 - 
 
300 
          <label htmlFor='name'>{labels.followers}</label>
 - 
 
301 
          <p>{follower}</p>
 - 
 
302 
        </div>
 - 
 
303 
      )}
 - 
 
304 
      {!!following && (
 - 
 
305 
        <div className='description__label'>
 - 
 
306 
          <label htmlFor='name'>{labels.following}</label>
 - 
 
307 
          <p>{following}</p>
 - 
 
308 
        </div>
 - 
 
309 
      )}
 - 
 
310 
      <div className='description__label'>
 - 
 
311 
        <label htmlFor='name'>{labels.social_networks}</label>
 - 
 
312 
        {!!facebook && (
 - 
 
313 
          <a href={facebook} target='_blank' rel='noreferrer'>
 - 
 
314 
            <p className='mb-1'>{facebook}</p>
 - 
 
315 
          </a>
 - 
 
316 
        )}
 - 
 
317 
        {!!instagram && (
 - 
 
318 
          <a href={instagram} target='_blank' rel='noreferrer'>
 - 
 
319 
            <p className='mb-1'>{instagram}</p>
 - 
 
320 
          </a>
 - 
 
321 
        )}
 - 
 
322 
        {!!twitter && (
 - 
 
323 
          <a href={twitter} target='_blank' rel='noreferrer'>
 - 
 
324 
            <p className='mb-1'>{twitter}</p>
 - 
 
325 
          </a>
 - 
 
326 
        )}
 - 
 
327 
      </div>
 - 
 
328 
    </Modal>
 212 
        onAccept={() => connect()}