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 { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";
import RequestTemplate from './invitationTemplate/InvitationTemplate'
import SearchList from "../../../components/SearchList";
import Profile from "../../../components/Profile";

const InvitationsReceived = (props) => {
  // states
  const [invitations, setInvitations] = useState([]);
  const [loading, setLoading] = useState(true);

  // redux destructuring
  const { addNotification } = props;

  // React hook form
  const { register, getValues } = useForm();

  let axiosThrottle = null;

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

  const fetchInvitationsReceived = async (searchParam = '') => {
    setLoading(true);
    await axios
      .get(
        "/group/invitations-received?search=" + searchParam)
      .then((response) => {
        const resData = response.data;
        (resData);
        if (resData.success) {
          setInvitations(resData.data);
        }
      });
    setLoading(false);
  };

  const handleResponse = (link) => {
    setLoading(true);
    axios.post(link)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          addNotification({
            style: "success",
            msg: resData.data,
          });
          fetchInvitationsReceived();
        } else {
          setLoading(false);
          addNotification({
            style: "danger",
            msg: resData.data ?? "ha ocurrido un error",
          });
        }
      });
  };

  const handleSearch = () => {
    //  (getValues());
    clearTimeout(axiosThrottle);
    // setLoading(true);
    const searchValue = getValues("search");
    axiosThrottle = setTimeout(() => {
      fetchInvitationsReceived(searchValue);
    }, 500);
  };

  return (
    <section className="companies-info" style={{ position: "relative" }}>
      <div className="container">
        <SearchList
          title="Invitaciones Recibidas"
          fetchCallback={fetchInvitationsReceived}
        />
        <div
          className="companies-list"
          style={{
            padding: "0 15px",
          }}
        >
          <div className="row" id="profiles-container">
            {
              invitations.length
                ?
                invitations.map((invitation, index) => (
                  <Profile
                    {...invitation}
                    key={index}
                    fetchCallback={fetchInvitationsReceived}
                  />
                ))
                :
                <div style={{ margin: "auto", textAlign: "center" }}>
                  Ningún registro coincidio con su consulta
                </div>
            }
          </div>
          {/* <!--product-feed-tab end--> */}
        </div>
      </div>
      {loading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </section>
  );
};

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

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