Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, 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);

    display: flex;

    align-items: center;

  }

  p {

    font-size: 1rem;

    color: var(--font-color);

  }

  .info {

    align-items: center;

    display: inline-flex;

    gap: 0.5rem;

  }

  .name {

    display: flex;

    flex-direction: column;

  }

  .details {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

  }

  .job {

    display: flex;

    flex-direction: column;

    gap: 5px;

  }

`

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 = false,

  lastDateOfApplication = '',

  employmentType = '',

  jobCategory = '',

  jobDescription = '',

  jobSkills = [],

  totalApplications = 0,

  jobVisits = 0,

}) => {

  const [isJobSaved, setIsJobSaved] = useState(false)

  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',

            })

          )

        }

      })

  }

  useEffect(() => {

    setIsJobSaved(jobSaved !== 'job-save')

  }, [jobSaved])

  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 sx={{ fontSize: '1rem' }} />

            Posteado hace {timeElapsed}

          </span>

        </div>

      </div>

      <div className="details">

        <span>

          <LocationOnIcon sx={{ color: '#cd5c5c' }} />

          {location}

        </span>

        <span>

          {isJobSaved ? (

            <StyledHeart sx={{ color: 'red' }} onClick={handleClickFollow} />

          ) : (

            <StyledHeartOutline

              sx={{ color: 'red' }}

              onClick={handleClickFollow}

            />

          )}

          Última aplicación : {lastDateOfApplication}

        </span>

      </div>

      <div className="job">

        <h3>{employmentType}</h3>

        <h3>{jobCategory}</h3>

        <div>{jobDescription && parse(jobDescription)}</div>

        {jobSkills && !!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