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