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 "../../../css/shared/global.scss";

const PeopleYouMayKnow = (props) => {
  // states
  const [entities, setEntities] = useState([]);
  const [loading, setLoading] = useState(false);

  // Redux
  const { addNotification } = props;

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

  let axiosThrottle = null;

  useEffect(() => {
    fetchEntitys();
  }, []);

  const fetchEntitys = async (searchValue) => {
    setLoading(true);
    await axios
      .get("/connection/people-blocked?search="+(searchValue || ''))
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          setEntities(resData.data);
        }
      });
    setLoading(false);
  };

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

  const handleUnblock = async (link) => {
    setLoading(true);
    await axios.post(link).then((response) => {
      const resData = response.data;
      if (resData.success) {
        const msg = resData.data;
        addNotification({
          style: "success",
          msg: msg,
        });
        fetchEntitys();
      } else {
        setLoading(false);
        const errorMsg = resData.data;
        addNotification({
          style: "danger",
          msg: errorMsg,
        });
      }
    });
  };

  return (
    <section className="companies-info">
      <div className="container">
        <div className="company-title">
          <div className="section_admin_title_buttons">
            <div style={{ float: "left" }}>
              <h1 className="title">Personas bloqueadas</h1>
            </div>
          </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",
              padding: "0 15px",
            }}
          >
            {entities.length > 0 ? (
              entities.map(
                ({ image, link_unblock, link_view, name }, index) => (
                  <div className="col-lg-3 col-md-3 col-sm-6" key={index}>
                    <div className="company_profile_info">
                      <div className="company-up-info">
                        <img src={image} alt="profile-image" />
                        <h3>{name}</h3>
                        <ul>
                          {link_view && (
                            <li>
                              <a
                                href={link_view}
                                title=""
                                className="follow btn-profile-view"
                              >
                                Ver Perfil
                              </a>
                            </li>
                          )}
                          <li>
                            <a
                              href="#"
                              title=""
                              className="message-us btn-connection-unblock"
                              onClick={(e) => {
                                e.preventDefault();
                                handleUnblock(link_unblock);
                              }}
                            >
                              Desbloquear
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                )
              )
            ) : (
              <p>No hay resultados</p>
            )}
            {loading ? (
              <div className="spinner-container">
                <Spinner />
              </div>
            ) : (
              ""
            )}
          </div>
          {/* <!--product-feed-tab end--> */}
        </div>
      </div>
    </section>
  );
};

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

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