Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'

import { axios } from '../../utils'

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

import { useDispatch } from 'react-redux'

import { getBackendVars } from '../../services/backendVars'

import { addNotification } from '../../redux/notification/notification.actions'

import { Grid, Tab, Tabs } from '@mui/material'

import parse from 'html-react-parser'

import styled from 'styled-components'

import Description from '../../components/job/Description'

import JobAttr from '../../components/job/JobAttr'

import ClientInfo from '../../components/job/ClientInfo'

import ApplyModal from '../../components/job/ApplyModal'

const Col = styled(Grid)`

  display: flex;

  flex-direction: column !important;

  gap: 0.5rem;

`

const JobViewPage = () => {

  const [job, setJob] = useState({})

  const [isJobApplied, setIsJobApplied] = useState(false)

  const [showApplyModal, setShowApplyModal] = useState(false)

  const [loading, setLoading] = useState(false)

  const { uuid } = useParams()

  const dispatch = useDispatch()

  const handleShowApplyModal = () => {

    setShowApplyModal(!showApplyModal)

  }

  const handleApply = () => {

    setIsJobApplied(!isJobApplied)

  }

  const getJob = () => {

    getBackendVars(`/job/view/${uuid}`)

      .then((response) => {

        setJob(response)

      })

      .catch((error) => {

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

      })

  }

  const removeApply = async () => {

    setLoading(true)

    axios

      .post(`/job/remove-apply-job/${job}`)

      .then(({ data: response }) => {

        const { data, success } = response

        if (!success) {

          const errorMessage =

            typeof data === 'string'

              ? data

              : 'Ha ocurrido un error, por favor intente más tarde'

          dispatch(addNotification({ styled: 'danger', msg: errorMessage }))

        }

        handleApply()

      })

      .finally(() => setLoading(false))

  }

  useEffect(() => {

    getJob()

  }, [])

  useEffect(() => {

    setIsJobApplied(job?.job_apply_operation === 'remove-apply')

  }, [job])

  return (

    <>

      <Tabs>

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

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

      </Tabs>

      <Grid container spacing={2}>

        <Col item xs={12} md={8} spacing={3}>

          <Description

            jobId={job?.job_uuid}

            companyId={job?.company_uuid}

            companyImage={job?.company_image}

            jobTitle={job?.job_title}

            companyName={job?.company_name}

            timeElapsed={job?.timeElapsed}

            location={job?.location}

            jobSaved={job?.job_save_operation}

            lastDateOfApplication={job?.last_date_of_application}

            employmentType={job?.employment_type}

            jobCategory={job?.job_category}

            jobDescription={job?.job_description}

            jobSkills={job?.job_skills}

            totalApplications={job?.total_applications}

            jobVisits={job?.job_visits}

          />

          <JobAttr

            title='Visión general'

            info={job?.job_description && 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} />

        </Col>

        <Col item xs={12} md={4}>

          <button

            type='button'

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

            onClick={isJobApplied ? removeApply : handleShowApplyModal}

            disabled={loading}

          >

            {isJobApplied ? '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}

          />

        </Col>

      </Grid>

      <ApplyModal

        jobId={job?.job_uuid}

        show={showApplyModal}

        onApplied={handleApply}

        userProfiles={job?.user_profiles}

        onHide={() => setShowApplyModal(false)}

      />

    </>

  )

}

export default JobViewPage