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, jsonToParams } from "../../utils";
import { addNotification } from "../../redux/notification/notification.actions";
import Spinner from "../../shared/loading-spinner/Spinner";
import Entity from "./entity/Entity";
import Profile from "../../components/Profile";
import SearchList from "../../components/SearchList";
import PaginationComponent from "../../shared/pagination/PaginationComponent";

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 Impersonate = (props) => {
  // states
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [pages, setPages] = useState(1);
  const { register, getValues } = useForm();


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





        const handleSearch = () => {
        const searchValue = getValues("search");

                console.log('searchValue')
                console.log(searchValue)
        setTimeout(() => fetchUsers(1, searchValue ), [500])
    };


const fetchUsers = async (page = 1, keyword  = '') => {
    setLoading(true);
    setError(false);
    setCurrentPage(page)
    let urlParams = {
      page,
      keyword
    }


    await axios
      .get(`/impersonate?${jsonToParams(urlParams)}`)
      .then((response) => {
        const responseData = response.data;
        if (responseData.success) {
          setUsers(responseData.data.current.items);
          setPages(responseData.data.total.pages);
        } else {
          const newError = responseData.data;
          setError(newError);
        }
      });
    setLoading(false);
  };

  return (
    <section className="companies-info">
      <div className="container">


                <div className="company-title">
                    <div
                        className="section_admin_title_buttons" >
                        <h1
                            className="title">Usuarios disponibles a personalizar</h1>
                    </div>
                </div>
    
            <div className="company-title">
                <div className="search-box border-gray border-radius">
                    <div className="form-group">
                        <input
                            type="text"
                            name="search"
                            id="search"
                            className="form-control"
                            placeholder=""
                                                        ref={register}
                            onKeyUp={handleSearch}

                        />
                    </div>
                </div>
            </div>


        <div
          className="companies-list"
          id="profiles-container"
          style={{ position: "relative", padding: "0 15px" }}
        >
          {users.length > 0 ? (
            users.map(
              (
                {
                  image,
                  name,
                                  email,
                                  network,      
                  link_impersonate,
                },
                id
              ) => (
                <Profile
                  isTopData
                  key={id}
                  image={image}
                  name={name}
                                  email={email}
                                  network={network}     
                  link_impersonate={link_impersonate}
                />
              )
            )
          ) : (
            <p>No hay resultados</p>
          )}
          {loading && (
            <StyledSpinnerContainer>
              <Spinner />
            </StyledSpinnerContainer>
          )}
        </div>
      </div>
   <PaginationComponent
                  pages={pages}
                  currentActivePage={currentPage}
                  onChangePage={fetchUsers}
                />
    </section>
  );
};

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

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

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