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

import SearchList from "../../../components/SearchList";

import Profile from "../../../components/Profile";

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">

        <SearchList

          title="Grupos unidos"

          fetchCallback={fetchJoinedGroups}

        />

        <div className="companies-list">

          <div className="row" id="profiles-container">

            {

              joinedGroups.length

                ?

                joinedGroups.map(

                  ({ image, name, privacy, link_view, link_leave }, index) => (

                    <Profile

                      image={image}

                      name={name}

                      status={privacy}

                      link_view={link_view}

                      link_leave={link_leave}

                      key={index}

                    />

                  ))

                :

                <div style={{ margin: "auto", textAlign: "center" }}>

                  Ningún registro coincidio con su consulta

                </div>

            }

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