Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import parse from 'html-react-parser'
import Avatar from '@mui/material/Avatar'
import { Favorite, FavoriteBorder } from '@mui/icons-material'
import AccessTimeIcon from '@mui/icons-material/AccessTime'
import LocationOnIcon from '@mui/icons-material/LocationOn'
import VisibilityIcon from '@mui/icons-material/Visibility'
import EmailIcon from '@mui/icons-material/Email'

import styled from 'styled-components'
import WidgetLayout from '../widgets/WidgetLayout'

const StyledContainer = styled(WidgetLayout)`
  padding: 1rem;
  h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--title-color);
  }
  span {
    font-weight: 600;
    color: var(--subtitle-color);
  }
  .info {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
  }
  .name {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
`

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);
    }
  }
`

const Description = ({
  jobId,
  companyId,
  companyImage,
  jobTitle,
  companyName,
  timeElapsed,
  location,
  jobSaved,
  lastDateOfApplication,
  employmentType,
  jobCategory,
  jobDescription,
  jobSkills,
  totalApplications,
  jobVisits,
}) => {
  const [isJobSaved, setIsJobSaved] = useState(jobSaved !== 'job-save')
  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',
            })
          )
        }
      })
  }

  return (
    <StyledContainer>
      <div className="info">
        <Avatar
          src={`/storage/type/company/code/${companyId}/${
            companyImage ? `filename/${companyImage}` : ''
          }`}
          sx={{ width: '50px', height: '50px' }}
        />

        <div className="name">
          <h3>{jobTitle}</h3>
          <p>{companyName}</p>
          <span>
            <AccessTimeIcon />
            Posteado hace {timeElapsed}
          </span>
        </div>
      </div>

      <div className="details">
        <span>
          <LocationOnIcon />
          {location}
        </span>

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

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

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

      <span>
        <VisibilityIcon /> Visto {jobVisits}
      </span>
    </StyledContainer>
  )
}

export default Description