Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { axios } from '../../utils'
import { connect } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import parse from 'html-react-parser'
import styled from 'styled-components'

const StyledHeart = styled.a`
  .heart.animate {
    animation: heartBeatAnimation 0.2s linear;
  }
  @keyframes heartBeatAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
`

const Description = ({
  jobId,
  companyId,
  companyImage,
  jobTitle,
  companyName,
  timeElapsed,
  location,
  jobSaved,
  lastDateOfApplication,
  employmentType,
  jobCategory,
  jobDescription,
  jobSkills,
  totalApplications,
  jobVisits,
  addNotification, // redux destructuring
}) => {
  const [animateHeart, setAnimateHeart] = useState(false)
  const [isJobSaved, setIsJobSaved] = useState(jobSaved !== 'job-save')

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

  const likeHandler = () => {
    axios
      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobId}`)
      .then(({ data: response }) => {
        if (!response.success) {
          setIsJobSaved((currentState) => !currentState)
          addNotification({
            style: 'danger',
            msg: 'Ha ocurrido un error, por favor intente más tarde',
          })
        }
      })
  }

  return (
    <div className="description">
      <div className="header">
        <div className="usy-dt">
          <img
            style={{ width: '50px', height: 'auto' }}
            src={`/storage/type/company/code/${companyId}/${
              companyImage ? `filename/${companyImage}` : ''
            }`}
            alt=""
          />
          <div className="usy-name">
            <h3>{jobTitle}</h3>
            <p>{companyName}</p>
            <span>
              <img src="/images/clock.png" alt="" />
              Posteado hace {timeElapsed}
            </span>
          </div>
        </div>
      </div>
      <div className="infoContainer">
        <div className="descpContainer">
          <ul className="locationContainer">
            <li>
              <img src="/images/icon9.png" alt="" />
              <span>{location}</span>
            </li>
          </ul>
          <ul className="likeContainer">
            <li>
              <StyledHeart
                href="#"
                title=""
                className="btn-remove-saved-job"
                onClick={(e) => {
                  e.preventDefault()
                  handleClickFollow()
                }}
                onAnimationEnd={() => setAnimateHeart(false)}
              >
                <i
                  className={`la la-heart${isJobSaved ? '' : '-o'} heart ${
                    animateHeart ? 'animate' : ''
                  }`}
                  style={{ color: '#53d690' }}
                />
              </StyledHeart>
            </li>
            <li>
              <span>Última aplicación : {lastDateOfApplication}</span>
            </li>
          </ul>
        </div>

        <div className="job_descp accountnone">
          <ul className="job-dt">
            <li>
              <a href="#">{employmentType}</a>
            </li>
            <li>
              <a href="#">{jobCategory}</a>
            </li>
          </ul>
          <div className="show-read-more">{parse(jobDescription)}</div>
          {jobSkills.length && (
            <ul className="skill-tags">
              {jobSkills.map((jobSkill, index) => (
                <li key={index}>
                  <a href="#" title="">
                    {jobSkill}
                  </a>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
      <div className="job-status-bar btm-line">
        <ul className="d-inline-flex" style={{ gap: '.5rem' }}>
          <li>
            <i className="fa fa-address-card-o" />
            <span>{`Solicitantes ${totalApplications}`}</span>
          </li>
        </ul>
        <a>
          <i className="fas fa-eye"></i>Visto {jobVisits}
        </a>
      </div>
    </div>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
}

export default connect(null, mapDispatchToProps)(Description)