Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from "react";
import ApplicationSidebar from "./application-sidebar/ApplicationSidebar";
import ApplyModal from "./apply-modal/ApplyModal";
import Description from "./description/Description";
import Information from "./information/Information";
import Widget from "./widget/Widget";

const View = (props) => {
  // backendVars destructuring
  const {
    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,
  } = props.backendVars;

  const [showApplyModal, setShowApplyModal] = useState(false);
  const [isJobApplied, setIsJobApplied] = useState(
    jobApplyOperation === "apply" ? false : true
  );

  const handleShowApplyModal = () => setShowApplyModal((currentState) => !currentState)
  const handleApply = () => setIsJobApplied(true)
  const handleWithdrawApply = () => setIsJobApplied(false)

  return (
    <React.Fragment>
      <main>
        <div className='view'>
          <div className={`tab tab-feed`}>
            <ul>
              <li data-tab="portfolio-dd" className="active animated fadeIn">
                <a href="#" title="">
                  <img src="/images/ic3.png" alt="" />
                  <span>Avance</span>
                </a>
              </li>
              <li data-tab="info-dd" className="animated fadeIn">
                <a href="#" title="">
                  <img src="/images/ic2.png" alt="" />
                  <span>Información</span>
                </a>
              </li>
            </ul>
          </div>
          <div
            className={`description_header product-feed-tab current animated fadeIn`}
            id="portfolio-dd"
          >
            <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>
          <div className={`description product-feed-tab animated fadeIn`} id="info-dd">
            <Information
              jobDescription={jobDescription}
              lastDateOfApplication={lastDateOfApplication}
              employmentType={employmentType}
              location={location}
              experience={experience}
              salary={salary}
              jobCategory={jobCategory}
              jobSkills={jobSkills}
              jobLanguages={jobLanguages}
              jobDegrees={jobDegrees}
            />
          </div>
          <div className='sidebar'>
            <ApplicationSidebar
              jobId={jobId}
              onApply={handleShowApplyModal}
              onWithdrawApply={handleWithdrawApply}
              isJobApplied={isJobApplied}
            />
            <Widget
              companyIndustry={companyIndustry}
              companySize={companySize}
              companyAddress={companyAddress}
              companyWebsite={companyWebsite}
              companyFoundationYear={companyFoundationYear}
            />
          </div>
        </div>
      </main>
      <ApplyModal
        show={showApplyModal}
        onHide={() => setShowApplyModal(false)}
        jobId={jobId}
        userProfiles={userProfiles}
        onApplied={handleApply}
      />
    </React.Fragment>
  );
};

export default View;