1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- import { useEffect, useState } from "react"
- import { connect } from "react-redux"
- import { actionEditChat, actionFullEditChat, actionUploadFile, actionUserSearch } from "../actions"
- import { MemberList, UserSearch } from "./chatForm"
- import { MyDropzone } from "./dropzone"
- export const ChatEditForm = ({ chat_id, chat, searchState, onUpload, onUserSearch, onChangeChat }) => {
- let [edit, setEdit] = useState(false)
- let [newTitle, setNewTitle] = useState(chat.title || "")
- let [newAvatar, setNewAvatar] = useState(chat.avatar)
- let [newMembers, setNewMembers] = useState(chat.members)
- useEffect(() => {
- setEdit(false)
- setNewTitle(chat.title)
- setNewAvatar(chat.avatar)
- setNewMembers(chat.members)
- }, [chat])
- console.log(chat_id)
- 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 ? <input onChange={(e) => setNewTitle(e.target.value)} value={newTitle} /> : <span>Название чата: {chat.title}</span>}
- {edit ? <div>
- <span>Загрузите новый аватар</span>
- <MyDropzone maxFiles={1} onUpload={onUpload} onSet={setNewAvatar} />
- </div> :
- chat.avatar && <img src={"/" + chat.avatar.url} />}
- {<MemberList members={newMembers} onDeleteMember={edit && memberDeleteHandler} />}
- {edit && <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />}
- <div className="edit-btn-container">
- <button onClick={() => editChatHandler()} >{edit ? "Отменить редактирование" : "Редактировать чат"}</button>
- {edit && <button onClick={() => onChangeChat(chat_id, newTitle, newAvatar._id, newMembers)}>Применить изменения</button>}
- </div>
- </div>
- )
- }
- export const ConnectChatEditForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
- {
- onUpload: actionUploadFile,
- onUserSearch: actionUserSearch,
- onChangeChat: actionFullEditChat
- })(ChatEditForm)
|