Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3088 | Rev 3091 | 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'
3089 stevensc 3 
import { Chip, Grid, List, 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}
106 
      />
3083 stevensc 107 
      <Widget.Body>
3089 stevensc 108 
        <Grid container>
109 
          <Grid item xs>
110 
            <Typography variant='h2'>{jobTitle}</Typography>
3083 stevensc 111 
 
3089 stevensc 112 
            <Typography variant='overline'>
113 
              <LocationOn sx={{ color: '#cd5c5c' }} />
114 
              {location}
115 
            </Typography>
3083 stevensc 116 
 
3089 stevensc 117 
            <Typography variant='overline'>
118 
              {isJobSaved ? (
119 
                <StyledHeart
120 
                  sx={{ color: 'red' }}
121 
                  onClick={handleClickFollow}
122 
                />
123 
              ) : (
124 
                <StyledHeartOutline
125 
                  sx={{ color: 'red' }}
126 
                  onClick={handleClickFollow}
127 
                />
128 
              )}
129 
              Última aplicación : {lastDateOfApplication}
130 
            </Typography>
3083 stevensc 131 
 
3089 stevensc 132 
            <Typography variant='overline'>{employmentType}</Typography>
133 
            <Typography variant='overline'>{jobCategory}</Typography>
3083 stevensc 134 
 
3089 stevensc 135 
            <Typography>{parse(jobDescription)}</Typography>
136 
          </Grid>
3083 stevensc 137 
 
3089 stevensc 138 
          <Grid item xs>
139 
            {jobSkills && !!jobSkills.length && (
140 
              <List>
141 
                {jobSkills.map((skill) => (
142 
                  <Chip key={skill} label={skill} />
143 
                ))}
144 
              </List>
145 
            )}
3083 stevensc 146 
 
3089 stevensc 147 
            <Typography variant='overline'>
148 
              <Email />
149 
              Solicitantes {totalApplications}
150 
            </Typography>
3088 stevensc 151 
 
3089 stevensc 152 
            <Typography variant='overline'>
153 
              <Visibility /> Visto {jobVisits}
154 
            </Typography>
155 
          </Grid>
156 
        </Grid>
3083 stevensc 157 
      </Widget.Body>
158 
    </Widget>
159 
  )
160 
}