Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2906 Rev 2909
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, Box, Button, IconButton, Typography } from '@mui/material'
 4 
import { Button, IconButton, Typography } from '@mui/material'
5 
import { Edit } from '@mui/icons-material'
 5 
import { Edit } from '@mui/icons-material'
Línea 6... Línea 6...
6 
 
 6 
 
7 
import { axios, parse } from '@utils'
 7 
import { axios, parse } from '@utils'
Línea 8... Línea 8...
8 
import { addNotification } from '@store/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions'
9 
 
 9 
 
10 
import Widget from '@components/UI/Widget'
 10 
import Widget from '@components/UI/Widget'
11 
import Cover from '@components/UI/cover/Cover'
 11 
import Cover from '@components/UI/cover/Cover'
12 
import ConfirmModal from '@components/modals/ConfirmModal'
 12 
import ConfirmModal from '@components/modals/ConfirmModal'
- 
 
 13 
import ProfileModal from './ProfileModal'
Línea 13... Línea 14...
13 
import ProfileModal from './ProfileModal'
 14 
import Avatar from '@components/common/Avatar'
14 
import TagsList from '@components/UI/TagsList'
 15 
import Row from '@components/common/Row'
15 
 
 16 
 
16 
const ProfileCard = ({
 17 
const ProfileCard = ({
Línea 37... Línea 38...
37 
}) => {
 38 
}) => {
38 
  const [isAdded, setIsAdded] = useState(false)
 39 
  const [isAdded, setIsAdded] = useState(false)
39 
  const [connectionUrl, setConnectionUrl] = useState('')
 40 
  const [connectionUrl, setConnectionUrl] = useState('')
40 
  const [modalToShow, setModalToShow] = useState(null)
 41 
  const [modalToShow, setModalToShow] = useState(null)
41 
  const [settedOverview, setSettedOverview] = useState('')
 42 
  const [settedOverview, setSettedOverview] = useState('')
42 
  const [profileImg, setProfileImg] = useState('')
 - 
 
43 
  const [isModalShow, setIsModalShow] = useState(false)
 43 
  const [isModalShow, setIsModalShow] = useState(false)
44 
  const [isEdit, setIsEdit] = useState(false)
 44 
  const [isEdit, setIsEdit] = useState(false)
45 
  const labels = useSelector(({ intl }) => intl.labels)
 45 
  const labels = useSelector(({ intl }) => intl.labels)
46 
  const { pathname } = useLocation()
 46 
  const { pathname } = useLocation()
47 
  const dispatch = useDispatch()
 47 
  const dispatch = useDispatch()
Línea 95... Línea 95...
95 
  }
 95 
  }
Línea 96... Línea 96...
96 
 
 96 
 
97 
  useEffect(() => {
 97 
  useEffect(() => {
98 
    setIsAdded(!requestConnection)
 98 
    setIsAdded(!requestConnection)
99 
    setSettedOverview(overview)
 - 
 
100 
    setProfileImg(image)
 99 
    setSettedOverview(overview)
Línea 101... Línea 100...
101 
  }, [requestConnection, overview, image])
 100 
  }, [requestConnection, overview])
102 
 
 101 
 
103 
  useEffect(() => {
 102 
  useEffect(() => {
Línea 115... Línea 114...
115 
        sizes={sizes?.cover}
 114 
        sizes={sizes?.cover}
116 
        edit={isEdit}
 115 
        edit={isEdit}
117 
        editUrl={`/profile/my-profiles/cover/${userProfileId}/operation/upload`}
 116 
        editUrl={`/profile/my-profiles/cover/${userProfileId}/operation/upload`}
118 
      />
 117 
      />
119 
      <Widget.Body>
 118 
      <Widget.Body>
- 
 
 119 
        <Row>
120 
        <Avatar
 120 
          <Avatar
121 
          src={profileImg}
 121 
            src={image}
122 
          alt={fullName}
 122 
            alt={fullName}
123 
          sx={{
 123 
            styles={{
124 
            width: { xs: '100px', lg: '150px' },
 124 
              width: { xs: '100px', lg: '150px' },
125 
            height: { xs: '100px', lg: '150px' },
 125 
              height: { xs: '100px', lg: '150px' },
126 
            mt: { xs: '-50px', lg: '-75px' },
 126 
              mt: { xs: '-50px', lg: '-75px' },
127 
            border: '4px solid #fff',
 127 
              border: '4px solid #fff',
128 
            backgroundColor: '#c9ced4',
 128 
              backgroundColor: '#c9ced4',
129 
            cursor: isEdit ? 'pointer' : 'default'
 129 
              cursor: isEdit ? 'pointer' : 'default'
130 
          }}
 130 
            }}
131 
          onClick={() => isEdit && setModalToShow('image')}
 131 
            url={`/profile/my-profiles/image/${userProfileId}/operation/upload`}
- 
 
 132 
            edit
132 
        />
 133 
          />
133 
 
 134 
 
134 
        {isEdit && (
 135 
          {isEdit && (
135 
          <IconButton onClick={() => setModalToShow('overview')}>
 136 
            <IconButton onClick={() => setModalToShow('overview')}>
136 
            <Edit />
 137 
              <Edit />
137 
          </IconButton>
 138 
            </IconButton>
138 
        )}
 139 
          )}
- 
 
 140 
        </Row>
Línea 139... Línea 141...
139 
 
 141 
 
140 
        <Typography variant='h2'>{fullName}</Typography>
 142 
        <Typography variant='h2'>{fullName}</Typography>
Línea 141... Línea 143...
141 
        <Typography>{parse(settedOverview)}</Typography>
 143 
        <Typography>{parse(settedOverview)}</Typography>
142 
 
 144 
 
- 
 
 145 
        <Row>
143 
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
 146 
          <Typography>{formattedAddress}</Typography>
144 
          <Typography>{formattedAddress}</Typography>
 147 
          <Typography variant='body2'> - </Typography>
145 
          <Button onClick={() => setModalToShow('info')}>
 148 
          <Typography variant='body2' onClick={() => setModalToShow('info')}>
146 
            {labels.personal_info}
 149 
            {labels.personal_info}
Línea 147... Línea 150...
147 
          </Button>
 150 
          </Typography>
148 
        </Box>
 - 
 
149 
 
 - 
 
150 
        <div
 - 
 
151 
          className='d-inline-flex align-items-center mt-2'
 151 
        </Row>
152 
          style={{ gap: '1rem' }}
 152 
 
153 
        >
 153 
        <Row>
154 
          {showConnections && (
 154 
          {showConnections && (
155 
            <Link to='/connection/my-connections'>
 155 
            <Link to='/connection/my-connections'>
156 
              {`${totalConnections} ${labels.connections}`}
 156 
              {`${totalConnections} ${labels.connections}`}
157 
            </Link>
 157 
            </Link>
158 
          )}
 158 
          )}
159 
          {showFollowing && (
 159 
          {showFollowing && (
160 
            <Link onClick={(e) => e.preventDefault()}>
 160 
            <Link onClick={(e) => e.preventDefault()}>
161 
              {`${following} ${labels.following}`}
 161 
              {`${following} ${labels.following}`}
Línea 162... Línea 162...
162 
            </Link>
 162 
            </Link>
163 
          )}
 163 
          )}
- 
 
 164 
        </Row>
- 
 
 165 
 
- 
 
 166 
        <Row>
- 
 
 167 
          {connectionUrl && isAdded && (
- 
 
 168 
            <Button variant='primary' onClick={() => displayModal()}>
164 
        </div>
 169 
              {labels.cancel}
165 
 
 170 
            </Button>
- 
 
 171 
          )}
- 
 
 172 
          {connectionUrl && !isAdded && (
- 
 
 173 
            <Button variant='primary' onClick={connect}>
- 
 
 174 
              {labels.connect}
- 
 
 175 
            </Button>
- 
 
 176 
          )}
166 
        <TagsList
 177 
          {showContact && (
167 
          tags={userExperiences?.map((exp) => ({
 178 
            <Button to={linkInmail} LinkComponent={Link} variant='secondary'>
168 
            name: `${exp.company} - ${exp.title}`,
 179 
              {labels.message}
169 
            value: exp.title
 - 
 
170 
          }))}
 - 
 
171 
        />
 - 
 
172 
      </Widget.Body>
 - 
 
173 
 
 - 
 
174 
      <Widget.Actions>
 180 
            </Button>
175 
        {connectionUrl && isAdded && (
 181 
          )}
176 
          <Button variant='primary' onClick={() => displayModal()}>
 182 
        </Row>
177 
            {labels.cancel}
 183 
      </Widget.Body>
178 
          </Button>
 184 
      {/*  {isEdit && (
179 
        )}
 185 
        <>
180 
        {connectionUrl && !isAdded && (
 - 
 
181 
          <Button variant='primary' onClick={connect}>
 186 
          <OverviewModal
182 
            {labels.connect}
 187 
            isOpen={modalToShow === 'overview'}
183 
          </Button>
 - 
 
184 
        )}
 188 
            overview={settedOverview}
185 
        {showContact && (
 189 
            id={profileId}
186 
          <Button to={linkInmail} LinkComponent={Link} variant='secondary'>
 190 
            closeModal={() => closeModal()}
Línea 187... Línea 191...
187 
            {labels.message}
 191 
            onComplete={(newOverview) => setSettedOverview(newOverview)}
188 
          </Button>
 192 
          />
189 
        )}
 193 
        </>
190 
      </Widget.Actions>
 194 
      )} */}