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 JoinedGroup from "./joined-group/JoinedGroup";

const JoinedGroups = (props) => {
  // states
  const [joinedGroups, setJoinedGroups] = useState([]);
  const [loading, setLoading] = useState(true);

  // redux destructuring
  const { addNotification } = props;

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

  let axiosThrottle = null;

  useEffect(() => {
    fetchJoinedGroups();
    return () => {
      clearTimeout(axiosThrottle);
    };
  }, []);

  const fetchJoinedGroups = async (searchParam='') => {
    setLoading(true);
    await axios
      .get(
        "/group/joined-groups?search="+searchParam,
      )
      .then((response) => {
        const resData = response.data;
         (resData);
        if (resData.success) {
          setJoinedGroups(resData.data);
        }
      });
    setLoading(false);
  };

  const handleLeaveGroup = (link) => {
    setLoading(true);
    axios.post(link).then((response) => {
      const resData = response.data;
      if (resData.success) {
        addNotification({
          style: "success",
          msg: resData.data,
        });
        fetchCompanies();
      } else {
        setLoading(false);
        addNotification({
          style: "danger",
          msg: resData.data ?? "ha ocurrido un error",
        });
      }
    });
  };

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

  return (
    <section className="companies-info" style={{ position: "relative" }}>
      <div className="container">
        <div className="company-title">
          <div className="section_admin_title_buttons">
            <div style={{ float: "left" }}>
              <h1 className="title">Grupos Unidos</h1>
            </div>
          </div>
        </div>

        <div className="company-title">
          <div className="section_admin_title_buttons">
            <div className="form-group">
              <input
                type="text"
                name="search"
                id="search"
                className="form-control"
                placeholder="Buscar"
                ref={register}
                onChange={handleSearch}
              />
            </div>
          </div>
        </div>
        <div className="companies-list">
          <div className="row" id="profiles-container">
            {joinedGroups.map(
              ({ image, name, privacy, link_view, link_leave }, index) => (
                <JoinedGroup
                  image={image}
                  name={name}
                  privacy={privacy}
                  link_view={link_view}
                  link_leave={link_leave}
                  key={index}
                  onLeave={handleLeaveGroup}
                />
              )
            )}
          </div>
          {/* <!--product-feed-tab end--> */}
        </div>
      </div>
      {loading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </section>
  );
};

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

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

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