Proyectos de Subversion LeadersLinked - SPA

Rev

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