Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useSelector } from 'react-redux'

import { useFetch } from '@hooks'
import { debounce } from '@app/utils'

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

const MyCompanies = () => {
  const [search, setSearch] = useState('')
  const [showCompanyModal, setShowCompanyModal] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    data: companies,
    isLoading,
    refetch
  } = useFetch(`/company/my-companies?search=${search}`)

  const toggleShowCompanyModal = () => setShowCompanyModal(!showCompanyModal)

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

  return (
    <>
      <TitleSection
        title={labels.my_companies}
        onAdd={toggleShowCompanyModal}
        addLabel={`${labels.add} ${labels.company?.toLowerCase()}`}
      />

      <SearchBar onChange={handleSearch} />

      <ul className='companies-list'>
        {isLoading ? <Spinner /> : null}
        {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={showCompanyModal}
        onHide={toggleShowCompanyModal}
        fetchCompanies={refetch}
      />
    </>
  )
}

export default MyCompanies