Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from "react"
import parse from "html-react-parser"
import styled from "styled-components"
import { axios } from "../../../../utils"
import { addNotification } from "../../../../redux/notification/notification.actions"
import { connect } from "react-redux"

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" ? false : true)

  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
        }

      })
  }

  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)