Proyectos de Subversion LeadersLinked - Antes de SPA

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";

import styles from "./View.module.scss";

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={styles.view}>
          <div className={`${styles.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&oacute;n</span>
                </a>
              </li>
            </ul>
          </div>
          {/* <!-- tab-feed end--> */}
          {/* <!--fin del tab--> */}
          <div
            className={` ${styles.description} 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}
            />
            {/* <!--post-bar end--> */}
          </div>
          {/* <!--posts-section end--> */}
          <div
            className={`${styles.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>

          {/* <!--product-feed-tab end--> */}
          {/* <!--main-ws-sec end--> */}
          <div className={styles.sidebar}>
            <ApplicationSidebar
              jobId={jobId}
              onApply={handleShowApplyModal}
              onWithdrawApply={handleWithdrawApply}
              isJobApplied={isJobApplied}
            />
            {/* <!--widget-about end--> */}
            <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;