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)