12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- import { Avatar, Button, ButtonGroup, TextField } from "@mui/material"
- import { useEffect, useState } from "react"
- import { connect } from "react-redux"
- import { actionFullEditChat, actionUserSearch } from "../actions"
- import { MemberList, UserSearch } from "./chatForm"
- import { ConnectDropzone } from "./dropzone"
- const ChatEditForm = ({ chat_id, chat, searchState, onUserSearch, onChangeChat }) => {
- let [edit, setEdit] = useState(false)
- let [newTitle, setNewTitle] = useState(chat.title || "")
- let [newAvatar, setNewAvatar] = useState([])
- let [newMembers, setNewMembers] = useState(chat.members)
- useEffect(() => {
- setEdit(false)
- setNewTitle(chat.title)
- setNewAvatar([chat.avatar])
- setNewMembers(chat.members)
- }, [chat])
- let editChatHandler = () => {
- setEdit(!edit)
- setNewMembers(chat.members)
- }
- let userAddHandler = (user) => {
- setNewMembers([...newMembers, user])
- }
- let memberDeleteHandler = (user) => {
- setNewMembers(newMembers.filter(member => member._id !== user._id))
- }
- return (
- <div className="chat-edit-form">
- {edit ? <div>
- <span>Загрузите новый аватар</span>
- <ConnectDropzone maxFiles={1} onSet={setNewAvatar} />
- </div> :
- chat.avatar && <Avatar src={"/" + chat.avatar.url} alt="chatAvatar" sx={{ width: 60, height: 60 }} />}
- {edit ? <TextField
- label="Сменить название чата"
- variant="standard"
- onChange={(e) => setNewTitle(e.target.value)}
- value={newTitle}
- placeholder="Сменить название чата" /> : <span>Название чата: {chat.title}</span>}
- {<MemberList members={newMembers} onDeleteMember={edit && memberDeleteHandler} />}
- {edit && <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />}
- <ButtonGroup size="small">
- <Button variant="outlined" onClick={() => editChatHandler()} >
- {edit ? "Отменить редактирование" : "Редактировать чат"}
- </Button>
- {edit &&
- <Button variant="contained" onClick={() => onChangeChat(chat_id, newTitle, newAvatar[0]?._id, newMembers)}>
- Применить изменения
- </Button>}
- </ButtonGroup>
- </div>
- )
- }
- const ConnectChatEditForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
- {
- onUserSearch: actionUserSearch,
- onChangeChat: actionFullEditChat
- })(ChatEditForm)
- export default ConnectChatEditForm
|