Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7312 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7268 stevensc 1 
import React, { useState } from 'react'
2 
import { axios } from '../../utils'
7271 stevensc 3 
import { useDispatch } from 'react-redux'
7268 stevensc 4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import parse from 'html-react-parser'
7271 stevensc 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 
 
7268 stevensc 13 
import styled from 'styled-components'
7271 stevensc 14 
import WidgetLayout from '../widgets/WidgetLayout'
7268 stevensc 15 
 
7271 stevensc 16 
const StyledContainer = styled(WidgetLayout)`
17 
  padding: 1rem;
7272 stevensc 18 
  h3 {
19 
    font-size: 1.1rem;
20 
    font-weight: 600;
21 
    color: var(--title-color);
22 
  }
23 
  span {
24 
    font-weight: 600;
25 
    color: var(--subtitle-color);
7279 stevensc 26 
    display: flex;
27 
    align-items: center;
28 
    gap: 0.5rem;
7272 stevensc 29 
  }
30 
  .info {
31 
    align-items: center;
32 
    display: inline-flex;
33 
    gap: 0.5rem;
34 
  }
35 
  .name {
36 
    display: flex;
37 
    flex-direction: column;
38 
    gap: 0.5rem;
39 
  }
7273 stevensc 40 
  .details {
41 
    display: flex;
42 
    align-items: center;
43 
    justify-content: space-between;
44 
    gap: 0.5rem;
45 
  }
7271 stevensc 46 
`
47 
 
48 
const StyledHeart = styled(Favorite)`
49 
  animation: heartBeatAnimation 0.2s linear;
50 
 
51 
  @keyframes heartBeatAnimation {
52 
    0% {
53 
      transform: scale(1);
54 
    }
55 
    50% {
56 
      transform: scale(1.3);
57 
    }
58 
    100% {
59 
      transform: scale(1);
60 
    }
7268 stevensc 61 
  }
7271 stevensc 62 
`
63 
 
64 
const StyledHeartOutline = styled(FavoriteBorder)`
65 
  animation: heartBeatAnimation 0.2s linear;
66 
 
7268 stevensc 67 
  @keyframes heartBeatAnimation {
68 
    0% {
69 
      transform: scale(1);
70 
    }
71 
    50% {
72 
      transform: scale(1.3);
73 
    }
74 
    100% {
75 
      transform: scale(1);
76 
    }
77 
  }
78 
`
79 
 
80 
const Description = ({
7312 stevensc 81 
  jobId = '',
82 
  companyId = '',
83 
  companyImage = '',
84 
  jobTitle = '',
85 
  companyName = '',
86 
  timeElapsed = '',
87 
  location = '',
88 
  jobSaved = false,
89 
  lastDateOfApplication = '',
90 
  employmentType = '',
91 
  jobCategory = '',
92 
  jobDescription = '',
93 
  jobSkills = [],
94 
  totalApplications = 0,
95 
  jobVisits = 0,
7268 stevensc 96 
}) => {
97 
  const [isJobSaved, setIsJobSaved] = useState(jobSaved !== 'job-save')
7271 stevensc 98 
  const dispatch = useDispatch()
7268 stevensc 99 
 
100 
  const handleClickFollow = () => {
101 
    setIsJobSaved(!isJobSaved)
102 
    likeHandler()
103 
  }
104 
 
105 
  const likeHandler = () => {
106 
    axios
107 
      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobId}`)
7271 stevensc 108 
      .then((response) => {
109 
        const { success } = response.data
110 
 
111 
        if (!success) {
7268 stevensc 112 
          setIsJobSaved((currentState) => !currentState)
7271 stevensc 113 
          dispatch(
114 
            addNotification({
115 
              style: 'danger',
116 
              msg: 'Ha ocurrido un error, por favor intente más tarde',
117 
            })
118 
          )
7268 stevensc 119 
        }
120 
      })
121 
  }
122 
 
123 
  return (
7271 stevensc 124 
    <StyledContainer>
7272 stevensc 125 
      <div className="info">
7271 stevensc 126 
        <Avatar
127 
          src={`/storage/type/company/code/${companyId}/${
128 
            companyImage ? `filename/${companyImage}` : ''
129 
          }`}
130 
          sx={{ width: '50px', height: '50px' }}
131 
        />
7272 stevensc 132 
 
133 
        <div className="name">
7271 stevensc 134 
          <h3>{jobTitle}</h3>
135 
          <p>{companyName}</p>
136 
          <span>
137 
            <AccessTimeIcon />
138 
            Posteado hace {timeElapsed}
139 
          </span>
7268 stevensc 140 
        </div>
141 
      </div>
142 
 
7271 stevensc 143 
      <div className="details">
144 
        <span>
145 
          <LocationOnIcon />
146 
          {location}
147 
        </span>
148 
 
149 
        <span>
150 
          {isJobSaved ? (
151 
            <StyledHeart onClick={handleClickFollow} />
152 
          ) : (
153 
            <StyledHeartOutline onClick={handleClickFollow} />
7268 stevensc 154 
          )}
7271 stevensc 155 
          Última aplicación : {lastDateOfApplication}
156 
        </span>
7268 stevensc 157 
      </div>
7271 stevensc 158 
 
7272 stevensc 159 
      <div className="job">
7271 stevensc 160 
        <h3>{employmentType}</h3>
161 
        <h3>{jobCategory}</h3>
7311 stevensc 162 
        <div>{jobDescription && parse(jobDescription)}</div>
7271 stevensc 163 
 
7314 stevensc 164 
        {jobSkills && !!jobSkills.length && (
7271 stevensc 165 
          <ul className="skill-tags">
166 
            {jobSkills.map((skill, index) => (
167 
              <li key={index}>
168 
                <span>{skill}</span>
169 
              </li>
170 
            ))}
171 
          </ul>
172 
        )}
173 
        <span>
174 
          <EmailIcon />
175 
          Solicitantes {totalApplications}
176 
        </span>
7268 stevensc 177 
      </div>
7271 stevensc 178 
 
179 
      <span>
180 
        <VisibilityIcon /> Visto {jobVisits}
181 
      </span>
182 
    </StyledContainer>
7268 stevensc 183 
  )
184 
}
185 
 
7271 stevensc 186 
export default Description