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