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_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}

            />

            {/* <!--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;