Proyectos de Subversion LeadersLinked - Antes de SPA

/* 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