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

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

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

  return (
    <section className="companies-info" style={{ position: "relative" }}>
      <div className="container">
        <SearchList
          title="Grupos unidos"
          fetchCallback={fetchJoinedGroups}
        />
        <div className="companies-list" 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}
                    fetchCallback={fetchJoinedGroups}
                    btnAcceptTitle='Ver grupo'
                  />
                ))
              :
              <div style={{ margin: "auto", textAlign: "center" }}>
                Ningún registro coincidio con su consulta
              </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);