Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import AddIcon from '@mui/icons-material/Add'
import SearchIcon from '@mui/icons-material/Search'

import ContactsList from './ContactsList'
import CreateGroupModal from './CreateGroupModal'

const ContactsFilters = ({ dataset, selectConversation }) => {
  const [search, setSearch] = useState('')
  const [contacts, setContacts] = useState([])
  const [addGroup, setAddGroup] = useState(false)
  const [groups, setGroups] = useState([])
  const [activeTab, setActiveTab] = useState('user')
  const labels = useSelector(({ intl }) => intl.labels)

  const filtredContacts = contacts.filter(({ name }) =>
    name.toLowerCase().includes(search.toLowerCase())
  )
  const filtredGroups = groups.filter(({ name }) =>
    name.toLowerCase().includes(search.toLowerCase())
  )

  const handleChangeTab = (tab) => setActiveTab(tab)

  const handleEntities = () => {
    let newUserContacts = []
    let newGroups = []
    dataset.map((entity) => {
      switch (entity.type) {
        case 'user':
          newUserContacts = [...newUserContacts, entity]
          break
        case 'group':
          newGroups = [...newGroups, entity]
          break
        default:
          break
      }
    })
    setContacts(newUserContacts)
    setGroups(newGroups)
  }

  useEffect(() => {
    handleEntities()
  }, [dataset])

  return (
    <>
      <div className="search-input mx-2">
        <input
          type="text"
          name="search"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <SearchIcon />
      </div>
      {activeTab === 'group' && (
        <button className="action-btn ml-2" onClick={() => setAddGroup(true)}>
          <AddIcon />
          {labels.create_group}
        </button>
      )}
      <div className="actions-container">
        <button
          className={`action-btn ${activeTab === 'user' && 'active'}`}
          onClick={() => handleChangeTab('user')}
        >
          {labels.contacts}
        </button>
        <button
          className={`action-btn ${activeTab === 'group' && 'active'}`}
          onClick={() => handleChangeTab('group')}
        >
          {labels.groups}
        </button>
      </div>
      <ContactsList
        contacts={activeTab === 'user' ? filtredContacts : filtredGroups}
        selectConversation={selectConversation}
      />
      <CreateGroupModal show={addGroup} closeModal={() => setAddGroup(false)} />
    </>
  )
}

export default ContactsFilters