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

            <div

              className="row"

              id="profiles-container"

              style={{

                position: "relative",

              }}

            >

              {

                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}

                      />

                    ))

                  :

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

                    Ningún registro coincidio con su consulta

                  </div>

              }

              {loading && (

                <StyledSpinnerContainer>

                  <Spinner />

                </StyledSpinnerContainer>

              )}

            </div>

            {/* <!--product-feed-tab end--> */}

          </div>

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