Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import parse from 'html-react-parser'
import { axios } from '../../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'

import JobAttr from './components/JobAttr'
import ApplyModal from './components/ApplyModal'
import ClientInfo from './components/ClientInfo'
import Description from './components/Description'

const View = ({
  jobId,
  companyId,
  companyImage,
  jobTitle,
  companyName,
  timeElapsed,
  location,
  jobSaved,
  lastDateOfApplication,
  employmentType,
  jobCategory,
  jobDescription,
  jobSkills,
  totalApplications,
  jobVisits,
  experience,
  salary,
  jobLanguages,
  jobDegrees,
  companyIndustry,
  companySize,
  companyAddress,
  companyWebsite,
  companyFoundationYear,
  jobApplyOperation,
  userProfiles,
}) => {
  const TABS_OPTIONS = {
    info: 'Information',
    advance: 'Advance',
  }
  const [currentTab, setCurrentTab] = useState(TABS_OPTIONS.info)
  const [showApplyModal, setShowApplyModal] = useState(false)
  const [loading, setLoading] = useState(false)
  const [isJobApplied, setIsJobApplied] = useState(
    jobApplyOperation !== 'apply'
  )

  const dispatch = useDispatch()

  const handleShowApplyModal = () => setShowApplyModal(!showApplyModal)

  const handleApply = () => setIsJobApplied(!isJobApplied)

  const removeApply = async () => {
    setLoading(true)
    axios
      .post(`/job/remove-apply-job/${jobId}`)
      .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))
  }

  return (
    <>
      <main className="job-page container px-0">
        <ul className="job-tabs">
          <li className="animated fadeIn">
            <button
              className="btn"
              onClick={() => setCurrentTab(TABS_OPTIONS.advance)}
            >
              <img src="/images/ic3.png" alt="" />
              <span>Avance</span>
            </button>
          </li>
          <li className="animated fadeIn">
            <button
              className="btn"
              onClick={() => setCurrentTab(TABS_OPTIONS.info)}
            >
              <img src="/images/ic2.png" alt="" />
              <span>Información</span>
            </button>
          </li>
        </ul>
        <section className="job-main-section">
          <div className="description_header fadeIn">
            <Description
              jobId={jobId}
              companyId={companyId}
              companyImage={companyImage}
              jobTitle={jobTitle}
              companyName={companyName}
              timeElapsed={timeElapsed}
              location={location}
              jobSaved={jobSaved}
              lastDateOfApplication={lastDateOfApplication}
              employmentType={employmentType}
              jobCategory={jobCategory}
              jobDescription={jobDescription}
              jobSkills={jobSkills}
              totalApplications={totalApplications}
              jobVisits={jobVisits}
            />
          </div>
          <JobAttr title="Visión general" info={parse(jobDescription)} />
          <JobAttr
            title="Último día de aplicación"
            info={lastDateOfApplication}
          />
          <JobAttr title="Tipo de empleo" info={employmentType} />
          <JobAttr title="Ubicación" info={location} />
          <JobAttr title="Experiencia" info={experience} />
          <JobAttr title="Salario" info={salary} />
          <JobAttr title="Categoría" info={jobCategory} />
          <JobAttr title="Habilidades" info={jobSkills} />
          <JobAttr title="Idiomas" info={jobLanguages} />
          <JobAttr title="Grados" info={jobDegrees} />
        </section>
        <div className="sidebar">
          <button
            type="button"
            className={`btn ${isJobApplied ? 'btn-secondary' : 'btn-primary'}`}
            onClick={isJobApplied ? removeApply : handleShowApplyModal}
            disabled={loading}
          >
            {isJobApplied ? 'Quitar aplicación' : 'Aplicar'}
          </button>
          <ClientInfo
            companySize={companySize}
            companyAddress={companyAddress}
            companyWebsite={companyWebsite}
            companyIndustry={companyIndustry}
            companyFoundationYear={companyFoundationYear}
          />
        </div>
      </main>
      <ApplyModal
        jobId={jobId}
        show={showApplyModal}
        onApplied={handleApply}
        userProfiles={userProfiles}
        onHide={() => setShowApplyModal(false)}
      />
    </>
  )
}

export default View