Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { debounce } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import { searchEntities } from '../../services/items'

import Spinner from '../../components/UI/Spinner'
import SearchBar from '../../components/UI/SearchBar'
import ProfileItem from '../../components/profile/ProfileItem'
import TitleSection from '../../components/UI/TitleSection'
import EmptySection from '../../components/UI/EmptySection'
import LoaderContainer from '../../components/UI/LoaderContainer'
import AddCompanyModal from '../../components/modals/AddCompanyModal'

const MyCompanies = () => {
  const [companies, setCompanies] = useState([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [showAddCompanyModal, setShowCompanyModal] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const getMyCompanies = 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 toggleShowCompanyModal = () => {
    setShowCompanyModal(!showAddCompanyModal)
  }

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

  useEffect(() => {
    getMyCompanies()
  }, [search])

  return (
    <main className="companies-info container">
      <TitleSection
        title={labels.my_companies}
        onAdd={toggleShowCompanyModal}
        addLabel={labels.add_company}
      />
      <SearchBar onChange={handleSearch} />
      {loading ? (
        <LoaderContainer>
          <Spinner />
        </LoaderContainer>
      ) : (
        <ul className="companies-list">
          {companies.length ? (
            companies.map(({ id, link_my_company, ...rest }) => (
              <ProfileItem
                key={id}
                link_admin={link_my_company}
                btnAcceptTitle={labels.view_company}
                {...rest}
              />
            ))
          ) : (
            <EmptySection
              align="left"
              message={labels.datatable_szerorecords}
            />
          )}
        </ul>
      )}
      <AddCompanyModal
        show={showAddCompanyModal}
        onHide={toggleShowCompanyModal}
        fetchCompanies={getMyCompanies}
      />
    </main>
  )
}

export default MyCompanies