Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/display-name */
/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import SearchIcon from '@mui/icons-material/Search'
import ContactsList from './ContactsList'
import AddIcon from '@mui/icons-material/Add'
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 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 />
                    {CHAT_LABELS.CREATE_GROUP}
                </button>
            }
            <div className="actions-container">
                <button className={`action-btn ${activeTab === 'user' && 'active'}`} onClick={() => handleChangeTab('user')}>
                    {CHAT_LABELS.CONTACTS}
                </button>
                <button className={`action-btn ${activeTab === 'group' && 'active'}`} onClick={() => handleChangeTab('group')}>
                    {CHAT_LABELS.GROUPS}
                </button>
            </div>
            <ContactsList contacts={activeTab === 'user' ? filtredContacts : filtredGroups} selectConversation={selectConversation} />
            <CreateGroupModal show={addGroup} closeModal={() => setAddGroup(false)} />
        </>
  )
}

export default ContactsFilters