Proyectos de Subversion LeadersLinked - Antes de SPA

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

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 AddGroupModal from '../../components/modals/AddGroupModal'

const MyGroupsPage = () => {
  const [isShowAddModal, setIsShowAddModal] = useState(false)
  const [myGroups, setMyGroups] = useState([])
  const [loading, setLoading] = useState(false)
  const [search, setSearch] = useState('')

  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const getMyGroups = async (search = '') => {
    setLoading(true)
    try {
      const { success, data } = await searchEntities('group/my-groups', search)

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

      setMyGroups(data)
    } catch (error) {
      console.log(error)
      throw new Error(error)
    } finally {
      setLoading(false)
    }
  }

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

  const toggleModal = () => {
    setIsShowAddModal(!isShowAddModal)
  }

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

  return (
    <main className="companies-info container">
      <TitleSection
        title={labels.my_groups}
        onAdd={toggleModal}
        addLabel={labels.create_group}
      />
      <SearchBar onChange={handleSearch} />
      {loading ? (
        <LoaderContainer>
          <Spinner />
        </LoaderContainer>
      ) : (
        <ul className="companies-list">
          {myGroups.length ? (
            myGroups.map(({ id, privacy, ...rest }) => (
              <ProfileItem
                key={id}
                {...rest}
                status={privacy}
                btnAcceptTitle={labels.group_view}
                btnEditTitle={`${labels.edit} ${labels.group?.toLowerCase()}`}
                btnCancelTitle={`${
                  labels.delete
                } ${labels.group?.toLowerCase()}`}
                fetchCallback={getMyGroups}
              />
            ))
          ) : (
            <EmptySection
              align="left"
              message={labels.datatable_szerorecords}
            />
          )}
        </ul>
      )}
      <AddGroupModal
        show={isShowAddModal}
        groupTypes={{}}
        industries={{}}
        onHide={toggleModal}
        fetchGroups={getMyGroups}
      />
    </main>
  )
}

export default MyGroupsPage