Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7268 Rev 7271
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { axios } from '../../utils'
 2 
import { axios } from '../../utils'
3 
import { connect } from 'react-redux'
 3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
 4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import parse from 'html-react-parser'
 5 
import parse from 'html-react-parser'
- 
 
 6 
import Avatar from '@mui/material/Avatar'
- 
 
 7 
import { Favorite, FavoriteBorder } from '@mui/icons-material'
- 
 
 8 
import AccessTimeIcon from '@mui/icons-material/AccessTime'
- 
 
 9 
import LocationOnIcon from '@mui/icons-material/LocationOn'
- 
 
 10 
import VisibilityIcon from '@mui/icons-material/Visibility'
- 
 
 11 
import EmailIcon from '@mui/icons-material/Email'
- 
 
 12 
 
6 
import styled from 'styled-components'
 13 
import styled from 'styled-components'
- 
 
 14 
import WidgetLayout from '../widgets/WidgetLayout'
- 
 
 15 
 
- 
 
 16 
const StyledContainer = styled(WidgetLayout)`
- 
 
 17 
  padding: 1rem;
- 
 
 18 
`
- 
 
 19 
 
- 
 
 20 
const StyledHeart = styled(Favorite)`
- 
 
 21 
  animation: heartBeatAnimation 0.2s linear;
Línea -... Línea 22...
- 
 
 22 
 
- 
 
 23 
  @keyframes heartBeatAnimation {
7 
 
 24 
    0% {
- 
 
 25 
      transform: scale(1);
- 
 
 26 
    }
8 
const StyledHeart = styled.a`
 27 
    50% {
- 
 
 28 
      transform: scale(1.3);
- 
 
 29 
    }
9 
  .heart.animate {
 30 
    100% {
- 
 
 31 
      transform: scale(1);
10 
    animation: heartBeatAnimation 0.2s linear;
 32 
    }
- 
 
 33 
  }
- 
 
 34 
`
- 
 
 35 
 
- 
 
 36 
const StyledHeartOutline = styled(FavoriteBorder)`
- 
 
 37 
  animation: heartBeatAnimation 0.2s linear;
11 
  }
 38 
 
12 
  @keyframes heartBeatAnimation {
 39 
  @keyframes heartBeatAnimation {
13 
    0% {
 40 
    0% {
14 
      transform: scale(1);
 41 
      transform: scale(1);
15 
    }
 42 
    }
Línea 36... Línea 63...
36 
  jobCategory,
 63 
  jobCategory,
37 
  jobDescription,
 64 
  jobDescription,
38 
  jobSkills,
 65 
  jobSkills,
39 
  totalApplications,
 66 
  totalApplications,
40 
  jobVisits,
 67 
  jobVisits,
41 
  addNotification, // redux destructuring
 - 
 
42 
}) => {
 68 
}) => {
43 
  const [animateHeart, setAnimateHeart] = useState(false)
 - 
 
44 
  const [isJobSaved, setIsJobSaved] = useState(jobSaved !== 'job-save')
 69 
  const [isJobSaved, setIsJobSaved] = useState(jobSaved !== 'job-save')
- 
 
 70 
  const dispatch = useDispatch()
Línea 45... Línea 71...
45 
 
 71 
 
46 
  const handleClickFollow = () => {
 - 
 
47 
    setAnimateHeart(true)
 72 
  const handleClickFollow = () => {
48 
    setIsJobSaved(!isJobSaved)
 73 
    setIsJobSaved(!isJobSaved)
49 
    likeHandler()
 74 
    likeHandler()
Línea 50... Línea 75...
50 
  }
 75 
  }
51 
 
 76 
 
52 
  const likeHandler = () => {
 77 
  const likeHandler = () => {
53 
    axios
 78 
    axios
- 
 
 79 
      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobId}`)
- 
 
 80 
      .then((response) => {
54 
      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobId}`)
 81 
        const { success } = response.data
55 
      .then(({ data: response }) => {
 82 
 
- 
 
 83 
        if (!success) {
56 
        if (!response.success) {
 84 
          setIsJobSaved((currentState) => !currentState)
57 
          setIsJobSaved((currentState) => !currentState)
 85 
          dispatch(
58 
          addNotification({
 86 
            addNotification({
- 
 
 87 
              style: 'danger',
59 
            style: 'danger',
 88 
              msg: 'Ha ocurrido un error, por favor intente más tarde',
60 
            msg: 'Ha ocurrido un error, por favor intente más tarde',
 89 
            })
61 
          })
 90 
          )
62 
        }
 91 
        }
Línea 63... Línea 92...
63 
      })
 92 
      })
64 
  }
 - 
 
65 
 
 93 
  }
66 
  return (
 94 
 
67 
    <div className="description">
 95 
  return (
68 
      <div className="header">
 - 
 
69 
        <div className="usy-dt">
 96 
    <StyledContainer>
70 
          <img
 97 
      <div className="user-info">
71 
            style={{ width: '50px', height: 'auto' }}
 98 
        <Avatar
72 
            src={`/storage/type/company/code/${companyId}/${
 99 
          src={`/storage/type/company/code/${companyId}/${
73 
              companyImage ? `filename/${companyImage}` : ''
 100 
            companyImage ? `filename/${companyImage}` : ''
74 
            }`}
 101 
          }`}
75 
            alt=""
 102 
          sx={{ width: '50px', height: '50px' }}
76 
          />
 103 
        />
77 
          <div className="usy-name">
 104 
        <div className="user-name">
78 
            <h3>{jobTitle}</h3>
 105 
          <h3>{jobTitle}</h3>
79 
            <p>{companyName}</p>
 106 
          <p>{companyName}</p>
80 
            <span>
 107 
          <span>
81 
              <img src="/images/clock.png" alt="" />
 - 
 
82 
              Posteado hace {timeElapsed}
 108 
            <AccessTimeIcon />
83 
            </span>
 109 
            Posteado hace {timeElapsed}
84 
          </div>
 - 
 
85 
        </div>
 - 
 
86 
      </div>
 - 
 
87 
      <div className="infoContainer">
 - 
 
88 
        <div className="descpContainer">
 - 
 
89 
          <ul className="locationContainer">
 - 
 
90 
            <li>
 - 
 
91 
              <img src="/images/icon9.png" alt="" />
 - 
 
92 
              <span>{location}</span>
 - 
 
93 
            </li>
 - 
 
94 
          </ul>
 - 
 
95 
          <ul className="likeContainer">
 - 
 
96 
            <li>
 - 
 
97 
              <StyledHeart
 - 
 
98 
                href="#"
 - 
 
99 
                title=""
 - 
 
100 
                className="btn-remove-saved-job"
 - 
 
101 
                onClick={(e) => {
 - 
 
102 
                  e.preventDefault()
 - 
 
103 
                  handleClickFollow()
 - 
 
104 
                }}
 - 
 
105 
                onAnimationEnd={() => setAnimateHeart(false)}
 - 
 
106 
              >
 - 
 
107 
                <i
 - 
 
108 
                  className={`la la-heart${isJobSaved ? '' : '-o'} heart ${
 - 
 
109 
                    animateHeart ? 'animate' : ''
 - 
 
110 
                  }`}
 - 
 
111 
                  style={{ color: '#53d690' }}
 - 
 
112 
                />
 - 
 
113 
              </StyledHeart>
 - 
 
114 
            </li>
 - 
 
115 
            <li>
 - 
 
116 
              <span>Última aplicación : {lastDateOfApplication}</span>
 - 
 
Línea 117... Línea -...
117 
            </li>
 - 
 
118 
          </ul>
 110 
          </span>
119 
        </div>
 111 
        </div>
120 
 
 - 
 
121 
        <div className="job_descp accountnone">
 112 
      </div>
122 
          <ul className="job-dt">
 113 
 
123 
            <li>
 - 
 
124 
              <a href="#">{employmentType}</a>
 114 
      <div className="details">
- 
 
 115 
        <span>
125 
            </li>
 116 
          <LocationOnIcon />
126 
            <li>
 - 
 
127 
              <a href="#">{jobCategory}</a>
 117 
          {location}
128 
            </li>
 118 
        </span>
129 
          </ul>
 - 
 
130 
          <div className="show-read-more">{parse(jobDescription)}</div>
 - 
 
131 
          {jobSkills.length && (
 - 
 
132 
            <ul className="skill-tags">
 - 
 
133 
              {jobSkills.map((jobSkill, index) => (
 - 
 
134 
                <li key={index}>
 - 
 
135 
                  <a href="#" title="">
 119 
 
136 
                    {jobSkill}
 120 
        <span>
137 
                  </a>
 121 
          {isJobSaved ? (
- 
 
 122 
            <StyledHeart onClick={handleClickFollow} />
138 
                </li>
 123 
          ) : (
139 
              ))}
 124 
            <StyledHeartOutline onClick={handleClickFollow} />
- 
 
 125 
          )}
140 
            </ul>
 126 
          Última aplicación : {lastDateOfApplication}
141 
          )}
 127 
        </span>
142 
        </div>
 128 
      </div>
- 
 
 129 
 
- 
 
 130 
      <div className="job-info">
- 
 
 131 
        <h3>{employmentType}</h3>
143 
      </div>
 132 
        <h3>{jobCategory}</h3>
- 
 
 133 
        <div>{parse(jobDescription)}</div>
- 
 
 134 
 
144 
      <div className="job-status-bar btm-line">
 135 
        {!!jobSkills.length && (
145 
        <ul className="d-inline-flex" style={{ gap: '.5rem' }}>
 136 
          <ul className="skill-tags">
- 
 
 137 
            {jobSkills.map((skill, index) => (
146 
          <li>
 138 
              <li key={index}>
- 
 
 139 
                <span>{skill}</span>
147 
            <i className="fa fa-address-card-o" />
 140 
              </li>
- 
 
 141 
            ))}
148 
            <span>{`Solicitantes ${totalApplications}`}</span>
 142 
          </ul>
149 
          </li>
 143 
        )}
150 
        </ul>
 144 
        <span>
151 
        <a>
 - 
 
152 
          <i className="fas fa-eye"></i>Visto {jobVisits}
 - 
 
153 
        </a>
 - 
 
Línea 154... Línea 145...
154 
      </div>
 145 
          <EmailIcon />
155 
    </div>
 146 
          Solicitantes {totalApplications}
- 
 
 147 
        </span>
- 
 
 148 
      </div>
- 
 
 149 
 
156 
  )
 150 
      <span>
Línea 157... Línea 151...
157 
}
 151 
        <VisibilityIcon /> Visto {jobVisits}