Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
/* eslint-disable camelcase */
import React, { useEffect, useState } from 'react'
import { debounce } from '../../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import { searchEntities } from '../../../services/search'
import Spinner from '../../../shared/loading-spinner/Spinner'
import AddCompanyModal from './add-company-modal/AddCompanyModal'
import SearchList from '../../../components/SearchList'
import Profile from '../../../components/Profile'
import TitleSection from '../../../components/TitleSection'
import EmptySection from '../../../shared/empty-section/EmptySection'

const MyCompanies = ({ companySizes, industries }) => {
  const [companies, setCompanies] = useState([])
  const [loading, setLoading] = useState(true)
  const [showAddCompanyModal, setShowCompanyModal] = useState(false)
  const dispatch = useDispatch()

  useEffect(() => {
    getCompanies()
  }, [])

  const getCompanies = async (searchValue = '') => {
    setLoading(true)
    const response = await searchEntities('company/my-companies', searchValue)

    if (!response.success) {
      dispatch(addNotification({ style: 'danger', msg: response.data }))
      setLoading(false)
      return
    }

    setCompanies(response.data)
    setLoading(false)
  }

  const handleShowAddCompanyModal = () => {
    setShowCompanyModal(!showAddCompanyModal)
  }

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

  return (
    <section className="companies-info container">
      <TitleSection title={LABELS.MY_COMPANIES} allowAdd onAdd={handleShowAddCompanyModal} />
      <SearchList onChange={handleSearch} />
      <div className="companies-list">
        {loading && <Spinner />}
        {(!loading && Boolean(!companies.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}
        {(!loading && Boolean(companies.length)) &&
          companies.map(({ image, link_my_company, link_view, name, status }, id) =>
            <Profile
              link_admin={link_my_company}
              key={id}
              name={name}
              image={image}
              status={status}
              link_view={link_view}
              btnAcceptTitle={LABELS.VIEW_COMPANY}
            />
          )}
      </div>
      <AddCompanyModal
        show={showAddCompanyModal}
        onHide={handleShowAddCompanyModal}
        fetchCompanies={getCompanies}
        companySizes={companySizes}
        industries={industries}
      />
    </section>
  )
}

export default MyCompanies