Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import { Container } from '@mui/material'

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 (
    <>
      <Container>
        <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>
      </Container>

      <AddCompanyModal
        show={showCompanyModal}
        onHide={toggleShowCompanyModal}
        fetchCompanies={refetch}
      />
    </>
  )
}

export default MyCompanies