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 { uuid } = useParams();
  const dispatch = useDispatch();

  const { data: job, loading, 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 () => {
    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 }));
    }
  };

  const apply = async (apply) => {
    try {
      const msg = await axios.post(`/job/apply-job/${job.job_uuid}`, apply);
      dispatch(addNotification({ style: "success", msg }));
      toggleApplication();
      toggleApplyModal();
    } catch (error) {
      dispatch(
        addNotification({
          styled: "danger",
          msg: "Error al aplicar al trabajo",
        })
      );
    }
  };

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

  return (
    <>
      <Grid container spacing={1}>
        <Grid item xs md={8} display="flex" direction="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 item xs md={4} display="flex" direction="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;