1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- import { useEffect, useState } from "react";
- import { connect } from "react-redux";
- import { actionAddChatBack, actionUserSearch } from "../actions"
- const UserList = ({ users, onAddMember }) => {
- return (
- <ul className="user-search-list">
- {users.map(user =>
- <li key={user._id}>
- <button onClick={() => onAddMember(user)}>{user.nick || user.login}</button>
- </li>)}
- </ul>
- )
- }
- export const UserSearch = ({ searchState, onUserSearch, onAddMember }) => {
- let [searchInput, setSearchInput] = useState("")
- let [users, setUsers] = useState([])
- useEffect(() => {
- searchInput && setUsers(searchState)
- }, [searchState])
- let searchHandler = async (e) => {
- setSearchInput(e.target.value)
- if (e.target.value) {
- onUserSearch(e.target.value)
- } else {
- setUsers([])
- }
- }
- return (
- <div className="user-search-panel">
- <span>Добавьте пользователей</span>
- <input onInput={e => searchHandler(e)} value={searchInput} placeholder="Введите имя пользователя..." />
- {searchInput && users && users.length > 0 && <UserList users={users} onAddMember={onAddMember} />}
- {searchState && searchInput && users && !users.length && <span>Пользователей с таким именем не существует</span>}
- </div>
- )
- }
- export const MemberList = ({ members, onDeleteMember }) => {
- return (
- <div className="chat-member-list">
- <h4>Пользователи чата</h4>
- <ul>
- {members.map(m =>
- <li key={m._id}>
- <span>{m.nick || m.login}</span>
- {onDeleteMember && <button onClick={() => onDeleteMember(m)}>x</button>}
- </li>
- )}
- </ul>
- </div>
- )
- }
- const ChatForm = ({ searchState, onUserSearch, onNewChat }) => {
- let [title, setTitle] = useState("")
- let [members, setMembers] = useState([])
- let userAddHandler = (user) => {
- members.length > 0 ? setMembers([...members, user]) : setMembers([user])
- }
- let memberDeleteHandler = (user) => {
- setMembers(members.filter(member => member._id !== user._id))
- }
- return (
- <div className="new-chat">
- <span>Выберите чат или создайте новый</span>
- <input onInput={e => setTitle(e.target.value)} value={title} placeholder="Введите название чата" />
- <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />
- {members && members.length > 0 && <MemberList members={members} onDeleteMember={memberDeleteHandler} />}
- <button onClick={() => onNewChat(title, members)} disabled={!title || !members.length}>Создать чат</button>
- </div>
- )
- }
- const ConnectChatForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
- {
- onUserSearch: actionUserSearch,
- onNewChat: actionAddChatBack
- })(ChatForm)
- export default ConnectChatForm
|