Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { axios } from "../../../utils";
import { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";
import SearchList from "../../../components/SearchList";
import Card from "../../../components/Profile";

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 SavedJobs = () => {
  // states
  const [savedJobs, setSavedJobs] = useState([]);
  const [loading, setLoading] = useState(true);

  let axiosThrottle = null;

  useEffect(() => {
    fetchSavedJobs();
    return () => {
      clearTimeout(axiosThrottle);
    };
  }, []);

  const handleCancelApply = (cancelLink) => {
    setLoading(true);
    axios
      .post(cancelLink)
      .then((response) => {
        const resData = response.data;
        (resData);
        if (resData.success) {
          fetchSavedJobs();
        } else {
          const errorMsg =
            typeof resData.data === "string"
              ? resData.data
              : "Ha ocurrido un error, Por favor intente más tarde";
          addNotification({
            style: "danger",
            msg: errorMsg,
          });
          setLoading(false);
        }
      })
      .catch((error) => {
        (error);
        setLoading(false);
      });
  };

  const fetchSavedJobs = async (searchParam = '') => {
    setLoading(true);
    await axios.get("/job/saved-jobs?search=" + searchParam)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          console.log(resData.data)
          setSavedJobs(resData.data);
        }
      });
    setLoading(false);
  };

  return (
    <section className="companies-info" style={{ position: "relative" }}>
      <div className="container">
        <SearchList
          title="Empleos guardados"
          fetchCallback={fetchSavedJobs}
        />
        <div className="companies-list" style={{ padding: "0 15px", }}>
          {savedJobs.length > 0
            ?
            savedJobs.map(
              ({
                employment_type,
                id,
                image,
                link_remove,
                link_view,
                title,
              }) =>
                <Card
                  key={id}
                  image={image}
                  name={title}
                  status={employment_type}
                  link_view={link_view}
                  link_delete={link_remove}
                  fetchCallback={fetchSavedJobs}
                  btnAcceptTitle='Ver Empleo'
                  btnCancelTitle='Eliminar'
                />
            )
            : <p>No hay resultados</p>
          }
        </div>
      </div>
      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </section>
  );
};

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

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
};

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