Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'

import { useDispatch } from 'react-redux'

import { Box, Button, Chip, Grid, Typography } from '@mui/material'

import { Email, Visibility } from '@mui/icons-material'

import { axios, parse } from '@utils'

import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'

export default function JobCard({

  job: {

    company_uuid: companyUuid,

    company_image: companyImage,

    job_uuid: jobUuid,

    job_title: jobTitle,

    job_description: jobDescription,

    total_applications: totalApplications,

    location,

    employment_type: employmentType,

    last_date_of_application: lastDateOfApplication,

    job_category: jobCategory,

    timeElapsed,

    job_skills: jobSkills,

    job_visits: jobVisits,

    job_save_operation: jobSaveOperation,

    company_name: companyName

  }

}) {

  const [isJobSaved, setIsJobSaved] = useState(false)

  const dispatch = useDispatch()

  const handleClickFollow = () => {

    setIsJobSaved(!isJobSaved)

    likeHandler()

  }

  const likeHandler = () => {

    axios

      .post(`/job/${isJobSaved ? 'remove-' : ''}save-job/${jobUuid}`)

      .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(jobSaveOperation !== 'job-save')

  }, [jobSaveOperation])

  return (

    <Widget>

      <Widget.Header

        avatar={`/storage/type/company/code/${companyUuid}/${

          companyImage ? `filename/${companyImage}` : ''

        }`}

        title={companyName}

        subheader={timeElapsed}

        renderAction={() => (

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>

            <Typography variant='overline'>

              <Email />

              Solicitantes {totalApplications}

            </Typography>

            <Typography variant='overline'>

              <Visibility /> Visto {jobVisits}

            </Typography>

          </Box>

        )}

      />

      <Widget.Body>

        <Grid container>

          <Grid item xs>

            <Typography variant='h2'>{jobTitle}</Typography>

            <Typography variant='overline'>Ubicación: {location}</Typography>

            <Typography variant='overline'>

              Última aplicación: {lastDateOfApplication}

            </Typography>

            <Typography variant='overline'>

              Tipo de empleo: {employmentType}

            </Typography>

            <Typography variant='overline'>Categoría: {jobCategory}</Typography>

            <Typography>Descripción: {parse(jobDescription)}</Typography>

          </Grid>

          <Grid item xs>

            <Typography variant='overline'>Habilidades:</Typography>

            {jobSkills && !!jobSkills.length && (

              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>

                {jobSkills.map((skill) => (

                  <Chip key={skill} label={skill} />

                ))}

              </Box>

            )}

          </Grid>

        </Grid>

      </Widget.Body>

      <Widget.Actions>

        <Button

          variant={isJobSaved ? 'secondary' : 'primary'}

          onClick={handleClickFollow}

        >

          {isJobSaved ? 'Dejar de seguir' : 'Guardar empleo'}

        </Button>

      </Widget.Actions>

    </Widget>

  )

}