Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3083 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
3088 stevensc 3 
import { Avatar, Chip, List, styled, Typography } from '@mui/material'
3083 stevensc 4 
import {
5 
  Favorite,
6 
  FavoriteBorder,
7 
  AccessTime,
8 
  LocationOn,
9 
  Email,
10 
  Visibility
11 
} from '@mui/icons-material'
12 
 
13 
import { axios, parse } from '@utils'
14 
import { addNotification } from '@store/notification/notification.actions'
15 
 
16 
import Widget from '@components/UI/Widget'
17 
 
18 
const StyledHeart = styled(Favorite)`
19 
  animation: heartBeatAnimation 0.2s linear;
20 
 
21 
  @keyframes heartBeatAnimation {
22 
    0% {
23 
      transform: scale(1);
24 
    }
25 
    50% {
26 
      transform: scale(1.3);
27 
    }
28 
    100% {
29 
      transform: scale(1);
30 
    }
31 
  }
32 
`
33 
 
34 
const StyledHeartOutline = styled(FavoriteBorder)`
35 
  animation: heartBeatAnimation 0.2s linear;
36 
 
37 
  @keyframes heartBeatAnimation {
38 
    0% {
39 
      transform: scale(1);
40 
    }
41 
    50% {
42 
      transform: scale(1.3);
43 
    }
44 
    100% {
45 
      transform: scale(1);
46 
    }
47 
  }
48 
`
49 
 
50 
export default function JobCard({
51 
  job: {
3086 stevensc 52 
    company_uuid: companyUuid,
53 
    company_image: companyImage,
54 
    job_uuid: jobUuid,
55 
    job_title: jobTitle,
56 
    job_description: jobDescription,
57 
    total_applications: totalApplications,
58 
    location,
59 
    employment_type: employmentType,
60 
    last_date_of_application: lastDateOfApplication,
61 
    job_category: jobCategory,
62 
    timeElapsed,
63 
    job_skills: jobSkills,
64 
    job_visits: jobVisits,
65 
    job_save_operation: jobSaveOperation,
66 
    company_name: companyName
3083 stevensc 67 
  }
68 
}) {
69 
  const [isJobSaved, setIsJobSaved] = useState(false)
70 
  const dispatch = useDispatch()
71 
 
72 
  const handleClickFollow = () => {
73 
    setIsJobSaved(!isJobSaved)
74 
    likeHandler()
75 
  }
76 
 
77 
  const likeHandler = () => {
78 
    axios
3086 stevensc 79 
      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobUuid}`)
3083 stevensc 80 
      .then((response) => {
81 
        const { success } = response.data
82 
 
83 
        if (!success) {
84 
          setIsJobSaved((currentState) => !currentState)
85 
          dispatch(
86 
            addNotification({
87 
              style: 'danger',
88 
              msg: 'Ha ocurrido un error, por favor intente más tarde'
89 
            })
90 
          )
91 
        }
92 
      })
93 
  }
94 
 
95 
  useEffect(() => {
3086 stevensc 96 
    setIsJobSaved(jobSaveOperation !== 'job-save')
97 
  }, [jobSaveOperation])
3083 stevensc 98 
 
99 
  return (
100 
    <Widget>
101 
      <Widget.Body>
102 
        <Avatar
3086 stevensc 103 
          src={`/storage/type/company/code/${companyUuid}/${
3083 stevensc 104 
            companyImage ? `filename/${companyImage}` : ''
105 
          }`}
106 
          sx={{ width: '50px', height: '50px' }}
107 
        />
108 
 
109 
        <Typography variant='h3'>{jobTitle}</Typography>
110 
        <Typography>{companyName}</Typography>
111 
        <Typography variant='overline'>
112 
          <AccessTime sx={{ fontSize: '1rem' }} />
113 
          Posteado hace {timeElapsed}
114 
        </Typography>
115 
 
3088 stevensc 116 
        <Typography variant='overline'>
117 
          <LocationOn sx={{ color: '#cd5c5c' }} />
118 
          {location}
119 
        </Typography>
3083 stevensc 120 
 
3088 stevensc 121 
        <Typography variant='overline'>
122 
          {isJobSaved ? (
123 
            <StyledHeart sx={{ color: 'red' }} onClick={handleClickFollow} />
124 
          ) : (
125 
            <StyledHeartOutline
126 
              sx={{ color: 'red' }}
127 
              onClick={handleClickFollow}
128 
            />
129 
          )}
130 
          Última aplicación : {lastDateOfApplication}
131 
        </Typography>
3083 stevensc 132 
 
3088 stevensc 133 
        <Typography variant='overline'>{employmentType}</Typography>
134 
        <Typography variant='overline'>{jobCategory}</Typography>
3083 stevensc 135 
 
3088 stevensc 136 
        <div>{jobDescription && parse(jobDescription)}</div>
3083 stevensc 137 
 
3088 stevensc 138 
        {jobSkills && !!jobSkills.length && (
139 
          <List>
140 
            {jobSkills.map((skill) => (
141 
              <Chip key={skill} label={skill} />
142 
            ))}
143 
          </List>
144 
        )}
145 
 
146 
        <Typography variant='overline'>
147 
          <Email />
148 
          Solicitantes {totalApplications}
149 
        </Typography>
150 
 
151 
        <Typography variant='overline'>
3083 stevensc 152 
          <Visibility /> Visto {jobVisits}
3088 stevensc 153 
        </Typography>
3083 stevensc 154 
      </Widget.Body>
155 
    </Widget>
156 
  )
157 
}