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