Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { useParams } from 'react-router-dom'

import { useDispatch } from 'react-redux'

import { Grid, Tab, Tabs } 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 ClientInfo from '@components/job/client-info'

import ApplyModal from '@components/job/ApplyModal'

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

      const { data, success } = response.data

      if (!success) throw new Error('Error al eliminar la aplicación')

      dispatch(addNotification({ styled: 'success', msg: data }))

      toggleApplication()

    } catch (error) {

      dispatch(addNotification({ styled: '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()

    } catch (error) {

      dispatch(addNotification({ styled: 'danger', msg: error.message }))

    } finally {

      setLoading(false)

    }

  }

  if (isLoading) {

    return <Spinner />

  }

  return (

    <>

      <Tabs>

        <Tab label='Avance' value='user' disableRipple />

        <Tab label='Información' value='group' disableRipple />

      </Tabs>

      <Grid container spacing={2}>

        <Grid item xs md={8} spacing={3}>

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

          <button

            type='button'

            className={`btn ${isJobApplied ? 'btn-secondary' : 'btn-primary'}`}

            onClick={isJobApplied ? removeApply : toggleApplyModal}

            disabled={loading}

          >

            {job?.job_apply_operation === 'remove-apply'

              ? 'Quitar aplicación'

              : 'Aplicar'}

          </button>

          <ClientInfo

            companySize={job?.company_size}

            companyAddress={job?.company_address}

            companyWebsite={job?.company_website}

            companyIndustry={job?.company_industry}

            companyFoundationYear={job?.company_foundation_year}

          />

        </Grid>

      </Grid>

      <ApplyModal

        show={showApplyModal}

        profiles={job?.user_profiles}

        onConfirm={apply}

        onClose={toggleApplyModal}

      />

    </>

  )

}

export default JobViewPage