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 Follower from "./follower/Follower";

import PaginationComponent from "../../../../shared/pagination/PaginationComponent";

import Spinner from "../../../../shared/loading-spinner/Spinner";

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 Followers = (props) => {

  // backendVars destructuring

  const { companyId } = props.backendVars;

  // states

  const [followers, setFollowers] = useState([]);

  const [loading, setLoading] = useState(true);

  const [pages, setPages] = useState(1);

  const [currentPage, setCurrentPage] = useState(1);

  // redux destructuring

  const { addNotification } = props;

  // React hook form

  const { register, getValues } = useForm();

  let axiosThrottle = null;

  useEffect(() => {

    fetchFollowers();

    return () => {

      clearTimeout(axiosThrottle);

    };

  }, [currentPage]);

  const fetchFollowers = async () => {

    setLoading(true);

    let params = {

      params: {

        page: currentPage,

      },

    };

    if (getValues("search")) {

      params = { params: { ...params.params, search: getValues("search") } };

    }

    await axios

      .get(`/my-company/${companyId}/follower`, params)

      .then((response) => {

        const resData = response.data;

        if (resData.success) {

          setFollowers(resData.data.current.items);

          setPages(resData.data.total.pages);

        }

      });

    setLoading(false);

  };

  const handleSearch = () => {

    //  (getValues());

    clearTimeout(axiosThrottle);

    // setLoading(true);

    axiosThrottle = setTimeout(() => {

      fetchFollowers();

    }, 500);

  };

  const handleChangePage = (newPage) => {

    setCurrentPage(newPage);

  };

  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">Seguidores</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",

            }}

          >

            {followers.map(({ image, name, link_view, link_inmail }, index) => (

              <Follower

                key={index}

                image={image}

                name={name}

                link_view={link_view}

                link_inmail={link_inmail}

              />

            ))}

            <PaginationComponent

              pages={pages}

              currentPage={currentPage}

              onChangePage={handleChangePage}

            />

            {loading && (

              <StyledSpinnerContainer>

                <Spinner />

              </StyledSpinnerContainer>

            )}

          </div>

          {/* <!--posts-section end--> */}

        </div>

      </div>

    </section>

  );

};

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

};

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