Proyectos de Subversion LeadersLinked - 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)

  }, [search])

  return (

    <main className='companies-info container'>

      <TitleSection

        title={labels.my_companies}

        onAdd={toggleShowCompanyModal}

        addLabel={`${labels.add} ${labels.company.toLowerCase()}`}

      />

      <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