Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Button, Grid } from '@mui/material';

import { axios, parse } from '@utils';
import { useFetch } from '@hooks';
import { addNotification } from '@store/notification/notification.actions';

import Spinner from '@components/UI/Spinner';
import JobCard from '@components/job/job-card';
import JobAttr from '@components/job/job-attr';
import CompanyInfo from '@components/job/company-info';
import ApplyModal from '@components/job/apply-modal';

const JobViewPage = () => {
  const [showApplyModal, setShowApplyModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const { uuid } = useParams();
  const dispatch = useDispatch();

  const { data: job, isLoading, mutate } = useFetch(`/job/view/${uuid}`);
  const isJobApplied = job?.job_apply_operation === 'remove-apply';

  const toggleApplyModal = () => setShowApplyModal(!showApplyModal);

  const toggleApplication = () => {
    mutate({
      ...job,
      job_apply_operation: isJobApplied ? 'apply' : 'remove-apply'
    });
  };

  const removeApply = async () => {
    setLoading(true);
    try {
      const response = await axios.post(`/job/remove-apply-job/${job.job_uuid}`);
      const { data, success } = response.data;
      if (!success) throw new Error('Error al eliminar la aplicación');
      dispatch(addNotification({ style: 'success', msg: data }));
      toggleApplication();
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    } finally {
      setLoading(false);
    }
  };

  const apply = async (jobApply) => {
    setLoading(true);

    try {
      const url = `/job/apply-job/${job.job_uuid}`;
      const formData = new FormData();
      Object.entries(jobApply).map(([key, value]) => formData.append(key, value));

      const response = await axios.post(url, formData);
      const { data, success } = response.data;

      if (!success) throw new Error('Error al aplicar al trabajo');

      dispatch(addNotification({ style: 'success', msg: data }));
      toggleApplication();
      toggleApplyModal();
    } catch (error) {
      dispatch(addNotification({ styled: 'danger', msg: error.message }));
    } finally {
      setLoading(false);
    }
  };

  if (isLoading) {
    return <Spinner />;
  }

  return (
    <>
      <Grid container spacing={1}>
        <Grid size={{ xs: 12, md: 8 }} sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
          <JobCard job={job} />

          <JobAttr title='Visión general' info={parse(job?.job_description)} />
          <JobAttr title='Último día de aplicación' info={job?.last_date_of_application} />
          <JobAttr title='Tipo de empleo' info={job?.employment_type} />
          <JobAttr title='Ubicación' info={job?.location} />
          <JobAttr title='Experiencia' info={job?.experience} />
          <JobAttr title='Salario' info={job?.salary} />
          <JobAttr title='Categoría' info={job?.job_category} />
          <JobAttr title='Habilidades' info={job?.job_skills} />
          <JobAttr title='Idiomas' info={job?.job_languages} />
          <JobAttr title='Grados' info={job?.job_degrees} />
        </Grid>

        <Grid size={{ xs: 12, md: 4 }} sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
          <Button
            variant={isJobApplied ? 'secondary' : 'primary'}
            onClick={isJobApplied ? removeApply : toggleApplyModal}
            disabled={loading}
          >
            {isJobApplied ? 'Quitar aplicación' : 'Aplicar'}
          </Button>

          <CompanyInfo company={job} />
        </Grid>
      </Grid>

      <ApplyModal
        show={showApplyModal}
        profiles={job?.user_profiles}
        onConfirm={apply}
        onClose={toggleApplyModal}
      />
    </>
  );
};

export default JobViewPage;