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)