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 Group from "./group/Group";
import AddGroupModal from "./add-group-modal/AddGroupModal";
import { addNotification } from "../../../../redux/notification/notification.actions";
import Spinner from "../../../../shared/loading-spinner/Spinner";
import SearchList from "../../../../components/SearchList";
import Profile from "../../../../components/Profile";

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 MyGroups = (props) => {
  // props destructuring
  const { groupTypes, industries } = props.backendVars;

  // states
  const [Groups, setGroups] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showAddGroupModal, setShowAddGroupModal] = useState(false);

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

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

  const handleShowAddGroupModal = () => {
    setShowAddGroupModal(!showAddGroupModal);
  };

  return (
    <React.Fragment>
      <section className="companies-info">
        <div className="container">
          <SearchList
            title="Mis Grupos"
            fetchCallback={fetchGroups}
            addTitle="Agregar"
            addCallback={handleShowAddGroupModal}
          />

          <div className="companies-list">
            {
              Groups.length
                ?
                Groups.map(
                  ({ image, link_delete, link_edit, link_view, name, privacy }, id) => (
                    <Profile
                      image={image}
                      name={name}
                      status={privacy}
                      link_view={link_view}
                      link_edit={link_edit}
                      link_delete={link_delete}
                      key={id}
                      fetchCallback={fetchGroups}
                      btnAcceptTitle='Ver grupo'
                      btnEditTitle='Editar grupo'
                      btnCancelTitle='Borrar grupo'
                    />
                  ))
                :
                <div style={{ margin: "auto", textAlign: "center" }}>
                  Ningún registro coincidio con su consulta
                </div>
            }
            {loading && (
              <StyledSpinnerContainer>
                <Spinner />
              </StyledSpinnerContainer>
            )}
          </div>
          {/* <!--product-feed-tab end--> */}
        </div>
      </section>
      <AddGroupModal
        show={showAddGroupModal}
        onHide={handleShowAddGroupModal}
        fetchGroups={fetchGroups}
        groupTypes={groupTypes}
        industries={industries}
      />
    </React.Fragment>
  );
};

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

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

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