Proyectos de Subversion LeadersLinked - Antes de 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 { Container, 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 {
    company_uuid,
    company_image,
    job_uuid,
    job_title,
    job_description,
    total_applications,
    location,
    employment_type,
    last_date_of_application,
    job_category,
    timeElapsed,
    experience,
    salary,
    job_degrees,
    job_languages,
    job_skills,
    job_visits,
    job_apply_operation,
    job_save_operation,
    company_name,
    company_foundation_year,
    company_website,
    company_industry,
    company_size,
    company_address,
    user_profiles,
    // skills,
    // languages,
    // degrees,
  } = job

  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 interno. Por favor, intente más tarde.',
          })
        )
        throw new Error(error)
      })
  }

  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_apply_operation === 'apply')
  }, [job_apply_operation])

  return (
    <>
      <Container as="main" className="px-0">
        <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_uuid}
              companyId={company_uuid}
              companyImage={company_image}
              jobTitle={job_title}
              companyName={company_name}
              timeElapsed={timeElapsed}
              location={location}
              jobSaved={job_save_operation}
              lastDateOfApplication={last_date_of_application}
              employmentType={employment_type}
              jobCategory={job_category}
              jobDescription={job_description}
              jobSkills={job_skills}
              totalApplications={total_applications}
              jobVisits={job_visits}
            />
            <JobAttr
              title="Visión general"
              info={job_description && parse(job_description)}
            />
            <JobAttr
              title="Último día de aplicación"
              info={last_date_of_application}
            />
            <JobAttr title="Tipo de empleo" info={employment_type} />
            <JobAttr title="Ubicación" info={location} />
            <JobAttr title="Experiencia" info={experience} />
            <JobAttr title="Salario" info={salary} />
            <JobAttr title="Categoría" info={job_category} />
            <JobAttr title="Habilidades" info={job_skills} />
            <JobAttr title="Idiomas" info={job_languages} />
            <JobAttr title="Grados" info={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={company_size}
              companyAddress={company_address}
              companyWebsite={company_website}
              companyIndustry={company_industry}
              companyFoundationYear={company_foundation_year}
            />
          </Col>
        </Grid>
      </Container>
      <ApplyModal
        jobId={job_uuid}
        show={showApplyModal}
        onApplied={handleApply}
        userProfiles={user_profiles}
        onHide={() => setShowApplyModal(false)}
      />
    </>
  )
}

export default JobViewPage