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