123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- import { Button, Chip, TextField } from "@mui/material";
- 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 variant="text" 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, searchInput])
- let searchHandler = async (e) => {
- setSearchInput(e.target.value)
- if (e.target.value) {
- onUserSearch(e.target.value)
- } else {
- setUsers([])
- }
- }
- return (
- <div className="user-search-panel">
- <TextField
- label="Найти юзеров..."
- variant="standard"
- 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}>
- {onDeleteMember ? <Chip
- label={m.nick || m.login}
- onDelete={() => onDeleteMember(m)}
- /> : <span>{m.nick || m.login}</span>}
- </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">
- <TextField
- label="Название чата"
- variant="standard"
- 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 variant="contained" 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
|