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 styled from "styled-components";

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

import { addNotification } from "../../../redux/notification/notification.actions";

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

import SavedJob from "./saved-job/SavedJob";

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 = (props) => {

  // states

  const [savedJobs, setSavedJobs] = useState([]);

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

  // redux destructuring

  const { addNotification } = props;

  // React hook form

  const { register, getValues } = useForm();

  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"

          id="profiles-container"

          style={{

            padding: "0 15px",

          }}

        >

          {savedJobs.length > 0 ? (

            savedJobs.map(

              (

                {

                  title,

                  employment_type,

                  last_date_of_application,

                  image,

                  link_view,

                  link_remove,

                },

                index

              ) => (

                <Card

                  key={index}

                  image={image}

                  name={title}

                  status={employment_type}

                  link_view={link_view}

                  link_delete={link_remove}

                  fetchCallback={fetchSavedJobs}

                  btnAcceptTitle='Ver Empleo'

                  btnCancelTitle='Eliminar'

                />

                // <SavedJob

                //   title={title}

                //   employment_type={employment_type}

                //   last_date_of_application={last_date_of_application}

                //   link_view={link_view}

                //   link_remove={link_remove}

                //   onCancelApply={handleCancelApply}

                //   key={index}

                // />

              )

            )

          ) : (

            <p>No hay resultados</p>

          )}

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

        </div>

      </div>

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </section>

  );

};

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

const mapDispatchToProps = {

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

};

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