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