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;