Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

import { useEffect, useState } from "react";

import { connect } from "react-redux";

import { useForm } from "react-hook-form";

import {axios} from "../../../../../utils";

import styled from "styled-components";

import Job from "./job/Job";

import Spinner from "../../../../../shared/loading-spinner/Spinner";

import AddJobModal from "./add-job-modal/AddJobModal";

const StyledSpinnerContainer = styled.div`

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 300;

`;

const Jobs = (props) => {

  // backendVars destructuring

  const {

    companyId,

    companyName,

    employmentTypes,

    jobCategories,

  } = props.backendVars;

  // states

  const [jobs, setJobs] = useState([]);

  const [loading, setLoading] = useState(true);

  const [showAddJobModal, setShowAddJobModal] = useState(false);

  // redux destructuring

  const { addNotification } = props;

  // React hook form

  const { register, getValues } = useForm();

  let axiosThrottle = null;

  useEffect(() => {

    fetchJobs();

    return () => {

      clearTimeout(axiosThrottle);

    };

  }, []);

  const fetchJobs = async (searchParam='') => {

    setLoading(true);

    await axios

      .get(

        `/my-company/${companyId}/job?search=${searchParam}`)

      .then((response) => {

        const resData = response.data;

         (resData);

        if (resData.success) {

          setJobs(resData.data);

        }

      });

    setLoading(false);

  };

  const handleSearch = () => {

    //  (getValues());

    clearTimeout(axiosThrottle);

    // setLoading(true);

    const searchValue = getValues("search");

    axiosThrottle = setTimeout(() => {

      fetchJobs(searchValue);

    }, 500);

  };

  const handleDelete = (link) => {

    setLoading(true);

    axios

      .post(link)

      .then((response) => {

        const resData = response.data;

         (resData);

        if (resData.success) {

          const msg = resData.data;

          addNotification({

            style: "success",

            msg: msg,

          });

          fetchGroups();

        } else {

          setLoading(false);

        }

      })

      .catch((error) => {

        setLoading(false);

      });

  };

  const handleShowAddJobModal = () => {

    setShowAddJobModal(!showAddJobModal);

  };

  return (

    <React.Fragment>

      <section className="companies-info">

        <div className="container">

          <div className="company-title">

            <div className="section_admin_title_buttons">

              <div style={{ float: "left" }}>

                <h1 className="title">{`${companyName} - Mis Empleos`}</h1>

              </div>

              {/* <?php if($allowAdd) : ?> */}

              <div style={{ float: "right" }}>

                <button

                  type="button"

                  className="btn btn-primary btn-add"

                  onClick={handleShowAddJobModal}

                >

                  Agregar

                </button>

              </div>

              {/* <?php endif; ?> */}

            </div>

          </div>

          <div className="company-title">

            <div className="section_admin_title_buttons">

              <form

                name="form-connection-search"

                id="form-connection-search"

                onSubmit={(event) => event.preventDefault()}

              >

                <div className="form-group">

                  <input

                    type="text"

                    name="search"

                    id="search"

                    className="form-control"

                    placeholder="Buscar"

                    ref={register}

                    onChange={handleSearch}

                  />

                </div>

              </form>

            </div>

          </div>

          <div className="companies-list">

            <div

              className="row"

              id="profiles-container"

              style={{

                position: "relative",

              }}

            >

              {jobs.length ? (

                jobs.map(

                  ({

                    title,

                    status,

                    employment_type,

                    last_date_of_application,

                    link_users,

                    link_view,

                    link_admin,

                    link_delete,

                    id,

                  }) => (

                    <Job

                      title={title}

                      status={status}

                      employment_type={employment_type}

                      last_date_of_application={last_date_of_application}

                      link_users={link_users}

                      link_view={link_view}

                      link_admin={link_admin}

                      link_delete={link_delete}

                      onDelete={handleDelete}

                      key={id}

                    />

                  )

                )

              ) : (

                <div style={{ margin: "auto", textAlign: "center" }}>

                  Ningún registro coincidio con su consulta

                </div>

              )}

              {loading && (

                <StyledSpinnerContainer>

                  <Spinner />

                </StyledSpinnerContainer>

              )}

            </div>

            {/* <!--product-feed-tab end--> */}

          </div>

        </div>

      </section>

      <AddJobModal

        show={showAddJobModal}

        onHide={handleShowAddJobModal}

        companyId={companyId}

        fetchJobs={fetchJobs}

        addNotification={addNotification}

        employmentTypes={employmentTypes}

        jobCategories={jobCategories}

      />

    </React.Fragment>

  );

};

// const mapStateToProps = (state) => ({});

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

};

export default connect(null, mapDispatchToProps)(Jobs);