Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

/* eslint-disable camelcase */

import React, { useEffect, useState } from 'react'

import { connect } from 'react-redux'

import { debounce } from '../../../../utils'

import { searchEntities } from '../../../../services/search'

import { addNotification } from '../../../../redux/notification/notification.actions'

import Spinner from '../../../../shared/loading-spinner/Spinner'

import Profile from '../../../../components/Profile'

import SearchList from '../../../../components/SearchList'

import TitleSection from '../../../../components/TitleSection'

import EmptySection from '../../../../shared/empty-section/EmptySection'

import AddGroupModal from './add-group-modal/AddGroupModal'

import { setIntlLabels } from '../../../../redux/intl/intl.action'

const MyGroups = ({ groupTypes, industries, addNotification, labels }) => {

  const [groups, setGroups] = useState([])

  const [loading, setLoading] = useState(true)

  const [showAddGroupModal, setShowAddGroupModal] = useState(false)

  useEffect(() => {

    getGroups()

    setIntlLabels(labels)

  }, [])

  const getGroups = async (searchValue = '') => {

    setLoading(true)

    const response = await searchEntities('group/my-groups', searchValue)

    if (!response.success) {

      addNotification({ style: 'danger', msg: response.data })

      setLoading(false)

      return

    }

    setGroups(response.data)

    setLoading(false)

  }

  const handleShowAddGroupModal = () => {

    setShowAddGroupModal(!showAddGroupModal)

  }

  const handleSearch = debounce((value) => getGroups(value), 500)

  return (

    <section className="companies-info container">

      <TitleSection

        title={labels.MY_GROUPS}

        allowAdd

        onAdd={handleShowAddGroupModal}

      />

      <SearchList onChange={handleSearch} />

      <div className="companies-list">

        {loading && <Spinner />}

        {!loading && Boolean(!groups.length) && (

          <EmptySection align="left" message={labels.DATATABLE_SZERORECORDS} />

        )}

        {!loading &&

          Boolean(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={getGroups}

                btnAcceptTitle={labels.GROUP_VIEW}

                btnEditTitle={`${labels.EDIT} ${labels.GROUP?.toLowerCase()}`}

                btnCancelTitle={`${

                  labels.DELETE

                } ${labels.GROUP?.toLowerCase()}`}

              />

            )

          )}

      </div>

      <AddGroupModal

        show={showAddGroupModal}

        groupTypes={groupTypes}

        industries={industries}

        onHide={() => handleShowAddGroupModal()}

        fetchGroups={getGroups}

      />

    </section>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

}

export default connect(null, mapDispatchToProps)(MyGroups)