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