Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { Avatar, styled, Typography } from '@mui/material'
import {
  Favorite,
  FavoriteBorder,
  AccessTime,
  LocationOn,
  Email,
  Visibility
} from '@mui/icons-material'

import { axios, parse } from '@utils'
import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'

const StyledHeart = styled(Favorite)`
  animation: heartBeatAnimation 0.2s linear;

  @keyframes heartBeatAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
`

const StyledHeartOutline = styled(FavoriteBorder)`
  animation: heartBeatAnimation 0.2s linear;

  @keyframes heartBeatAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
`

export default function JobCard({
  job: {
    jobId = '',
    companyId = '',
    companyImage = '',
    jobTitle = '',
    companyName = '',
    timeElapsed = '',
    location = '',
    jobSaved = false,
    lastDateOfApplication = '',
    employmentType = '',
    jobCategory = '',
    jobDescription = '',
    jobSkills = [],
    totalApplications = 0,
    jobVisits = 0
  }
}) {
  const [isJobSaved, setIsJobSaved] = useState(false)
  const dispatch = useDispatch()

  const handleClickFollow = () => {
    setIsJobSaved(!isJobSaved)
    likeHandler()
  }

  const likeHandler = () => {
    axios
      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobId}`)
      .then((response) => {
        const { success } = response.data

        if (!success) {
          setIsJobSaved((currentState) => !currentState)
          dispatch(
            addNotification({
              style: 'danger',
              msg: 'Ha ocurrido un error, por favor intente más tarde'
            })
          )
        }
      })
  }

  useEffect(() => {
    setIsJobSaved(jobSaved !== 'job-save')
  }, [jobSaved])

  return (
    <Widget>
      <Widget.Body>
        <Avatar
          src={`/storage/type/company/code/${companyId}/${
            companyImage ? `filename/${companyImage}` : ''
          }`}
          sx={{ width: '50px', height: '50px' }}
        />

        <Typography variant='h3'>{jobTitle}</Typography>
        <Typography>{companyName}</Typography>
        <Typography variant='overline'>
          <AccessTime sx={{ fontSize: '1rem' }} />
          Posteado hace {timeElapsed}
        </Typography>

        <div className='details'>
          <span>
            <LocationOn sx={{ color: '#cd5c5c' }} />
            {location}
          </span>

          <span>
            {isJobSaved ? (
              <StyledHeart sx={{ color: 'red' }} onClick={handleClickFollow} />
            ) : (
              <StyledHeartOutline
                sx={{ color: 'red' }}
                onClick={handleClickFollow}
              />
            )}
            Última aplicación : {lastDateOfApplication}
          </span>
        </div>

        <div className='job'>
          <h3>{employmentType}</h3>
          <h3>{jobCategory}</h3>
          <div>{jobDescription && parse(jobDescription)}</div>

          {jobSkills && !!jobSkills.length && (
            <ul className='skill-tags'>
              {jobSkills.map((skill, index) => (
                <li key={index}>
                  <span>{skill}</span>
                </li>
              ))}
            </ul>
          )}
          <span>
            <Email />
            Solicitantes {totalApplications}
          </span>
        </div>

        <span>
          <Visibility /> Visto {jobVisits}
        </span>
      </Widget.Body>
    </Widget>
  )
}