Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useCallback, useState } from 'react'

import IconButton from '@mui/material/IconButton'

import SearchIcon from '@mui/icons-material/Search'

import MoreVertIcon from '@mui/icons-material/MoreVert'

import ContactsList from './ContactsList'

import CreateGroupModal from '../group-modal/CreateGroupModal'

import ContactsModal from '../../../chat/chat/components/ContactsModal'

const Contacts = ({

  persons = [],

  groups = [],

  selectedConversation,

  changeConversation,

}) => {

  const TABS = { persons: 1, groups: 2 }

  const [tab, setTab] = useState(TABS.persons)

  const [search, setSearch] = useState('')

  const [isShowGroupModal, setIsShowGroupModal] = useState(false)

  const [isShowContactsModal, setIsShowContactsModal] = useState(false)

  const options = [

    {

      label: 'Iniciar conversación',

      action: () => setIsShowContactsModal(true),

    },

    { label: 'Crear grupo', action: () => setIsShowGroupModal(true) },

  ]

  const onCreateConversation = (url) => {

    const conversation = persons.find((user) => user.url_send === url)

    changeConversation(conversation)

  }

  const conversations = useCallback(() => {

    if (tab === TABS.persons) {

      return persons.filter((conversation) =>

        conversation.name.toLowerCase().includes(search.toLowerCase())

      )

    }

    return groups.filter((conversation) =>

      conversation.name.toLowerCase().includes(search.toLowerCase())

    )

  }, [TABS, tab])

  return (

    <>

      <aside className="chat_contacts">

        <div className="position-relative">

          <h1>Chat</h1>

          <Contacts.Options options={options} />

        </div>

        <div className="tabs">

          <button

            className={`btn ${tab === TABS.persons && 'active-tab'}`}

            onClick={() => setTab(TABS.persons)}

          >

            Personas

          </button>

          <button

            className={`btn ${tab === TABS.groups && 'active-tab'}`}

            onClick={() => setTab(TABS.groups)}

          >

            Grupos

          </button>

        </div>

        <div className="contact__search show">

          <SearchIcon />

          <input

            type="text"

            placeholder="Buscar"

            onChange={(e) => setSearch(e.target.value)}

          />

        </div>

        <ContactsList

          conversations={conversations()}

          selectedConversation={selectedConversation}

          onClick={changeConversation}

        />

      </aside>

      <ContactsModal

        show={isShowContactsModal}

        onClose={() => setIsShowContactsModal(false)}

        onComplete={onCreateConversation}

      />

      <CreateGroupModal

        isOpen={isShowGroupModal}

        onClose={() => setIsShowGroupModal(false)}

      />

    </>

  )

}

const Options = ({ options }) => {

  const [isShowMenu, setIsShowMenu] = useState(false)

  const toggleOptions = () => {

    setIsShowMenu(!isShowMenu)

  }

  return (

    <div className="header-options" style={{ right: '0' }}>

      <IconButton onClick={toggleOptions}>

        <MoreVertIcon />

      </IconButton>

      <div className="position-relative">

        <div className={`feed-options ${isShowMenu ? 'active' : ''}`}>

          <ul>

            {options.map((option, index) => (

              <li key={index}>

                <button

                  className="btn option-btn"

                  onClick={() => {

                    toggleOptions()

                    option.action()

                  }}

                >

                  {option.label}

                </button>

              </li>

            ))}

          </ul>

        </div>

      </div>

    </div>

  )

}

Contacts.Options = Options

export default Contacts