Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5064 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5064 Rev 5206
Línea 5... Línea 5...
5 
import ContactsList from './ContactsList'
 5 
import ContactsList from './ContactsList'
6 
import AddIcon from '@mui/icons-material/Add'
 6 
import AddIcon from '@mui/icons-material/Add'
7 
import CreateGroupModal from './CreateGroupModal'
 7 
import CreateGroupModal from './CreateGroupModal'
Línea 8... Línea 8...
8 
 
 8 
 
9 
const ContactsFilters = ({ dataset, selectConversation }) => {
 9 
const ContactsFilters = ({ dataset, selectConversation }) => {
10 
    const [search, setSearch] = useState('')
 10 
  const [search, setSearch] = useState('')
11 
    const [contacts, setContacts] = useState([])
 11 
  const [contacts, setContacts] = useState([])
12 
    const [addGroup, setAddGroup] = useState(false)
 12 
  const [addGroup, setAddGroup] = useState(false)
13 
    const [groups, setGroups] = useState([])
 13 
  const [groups, setGroups] = useState([])
14 
    const [activeTab, setActiveTab] = useState("user")
 14 
  const [activeTab, setActiveTab] = useState('user')
15 
 
 15 
 
16 
    const filtredContacts = contacts.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
 16 
  const filtredContacts = contacts.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
17 
    const filtredGroups = groups.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
 17 
  const filtredGroups = groups.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
18 
 
 18 
 
19 
    const handleChangeTab = (tab) => setActiveTab(tab)
 19 
  const handleChangeTab = (tab) => setActiveTab(tab)
20 
 
 20 
 
21 
    const handleEntities = () => {
 21 
  const handleEntities = () => {
22 
        let newUserContacts = []
 22 
    let newUserContacts = []
23 
        let newGroups = []
 23 
    let newGroups = []
24 
        dataset.map((entity) => {
 24 
    dataset.map((entity) => {
25 
            switch (entity.type) {
 25 
      switch (entity.type) {
26 
                case "user":
 26 
        case 'user':
27 
                    newUserContacts = [...newUserContacts, entity]
 27 
          newUserContacts = [...newUserContacts, entity]
28 
                    break
 28 
          break
29 
                case "group":
 29 
        case 'group':
30 
                    newGroups = [...newGroups, entity]
 30 
          newGroups = [...newGroups, entity]
31 
                    break
 31 
          break
32 
                default:
 32 
        default:
33 
                    break
 33 
          break
34 
            }
 34 
      }
35 
        })
 35 
    })
36 
        setContacts(newUserContacts)
 36 
    setContacts(newUserContacts)
37 
        setGroups(newGroups)
 37 
    setGroups(newGroups)
38 
    }
 38 
  }
39 
 
 39 
 
40 
    useEffect(() => {
 40 
  useEffect(() => {
41 
        handleEntities()
 41 
    handleEntities()
Línea 42... Línea 42...
42 
    }, [dataset])
 42 
  }, [dataset])
43 
 
 43 
 
44 
    return (
 44 
  return (
45 
        <>
 - 
 
46 
            <div className="search-input mx-2">
 - 
 
47 
                <input
 - 
 
48 
                    type="text"
 - 
 
49 
                    name='search'
 45 
        <>
50 
                    value={search}
 - 
 
51 
                    onChange={(e) => setSearch(e.target.value)}
 46 
            <div className="search-input mx-2">
52 
                />
 47 
                <input type="text" name='search' value={search} onChange={(e) => setSearch(e.target.value)}/>
53 
                <SearchIcon />
 48 
                <SearchIcon />
54 
            </div>
 49 
            </div>
55 
            {activeTab === 'group' &&
 50 
            {activeTab === 'group' &&
56 
                <button className="action-btn ml-2" onClick={() => setAddGroup(true)}>
 51 
                <button className="action-btn ml-2" onClick={() => setAddGroup(true)}>
57 
                    <AddIcon />
 52 
                    <AddIcon />
58 
                    Crear grupo
 53 
                    {CHAT_LABELS.CREATE_GROUP}
59 
                </button>
 54 
                </button>
60 
            }
 55 
            }
61 
            <div className="actions-container">
 56 
            <div className="actions-container">
62 
                <button className={`action-btn ${activeTab === 'user' && 'active'}`} onClick={() => handleChangeTab("user")}>
 57 
                <button className={`action-btn ${activeTab === 'user' && 'active'}`} onClick={() => handleChangeTab('user')}>
63 
                    Contactos
 58 
                    {CHAT_LABELS.CONTACTS}
64 
                </button>
 59 
                </button>
65 
                <button className={`action-btn ${activeTab === 'group' && 'active'}`} onClick={() => handleChangeTab("group")}>
 60 
                <button className={`action-btn ${activeTab === 'group' && 'active'}`} onClick={() => handleChangeTab('group')}>
66 
                    Grupos
 61 
                    {CHAT_LABELS.GROUPS}
67 
                </button>
 62 
                </button>
68 
            </div>
 63 
            </div>
69 
            <ContactsList contacts={activeTab === 'user' ? filtredContacts : filtredGroups} selectConversation={selectConversation} />
 64 
            <ContactsList contacts={activeTab === 'user' ? filtredContacts : filtredGroups} selectConversation={selectConversation} />
70 
            <CreateGroupModal show={addGroup} closeModal={() => setAddGroup(false)} />
 65 
            <CreateGroupModal show={addGroup} closeModal={() => setAddGroup(false)} />
71 
        </>
 66 
        </>
Línea 72... Línea -...
72 
    )
 - 
 
73 
}
 - 
 
74 
 
 67 
  )
- 
 
 68 
}