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 from '@mui/icons-material/Email';
import Visibility from '@mui/icons-material/Visibility';

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