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)