123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- import React, { useState } from "react";
- import { connect } from "react-redux";
- import { useDropzone } from "react-dropzone";
- import { Link, useParams } from "react-router-dom";
- import Button from "react-bootstrap/esm/Button";
- import { Input, InputDebounce } from "../helpers/UserSearch";
- import { CUserSearch } from "../helpers/UserSearch";
- import { removeUserChat } from "../actions";
- import { CSearchByLogin } from '../helpers/UserSearch'
- import { actionSetChatInfo } from "../actions";
- import { CChatAvatar } from "../components/Avatar";
- const ChatEditing = ({ chatId, onChat, myProfile, create, onLeave }) => {
- let { _id } = useParams();
- const [chat] = useState();
- const [img, setImg] = useState(null);
- const [newTitle, setNewTitle] = useState(chatId[_id]?.title || "");
- const [members, setMembers] = useState(chat?.members || [myProfile]);
- const { getRootProps, getInputProps, isDragActive } = useDropzone({
- accept: "image/*",
- maxFiles: 1,
- onDrop: (acceptedFiles) => {
- setImg(acceptedFiles[0]);
- },
- });
- function prepareMembers(members) {
- const newMembers = [];
- for (const member of members) {
- if (create) {
- if (member._id !== myProfile?._id) {
- newMembers.push({ _id: member._id });
- }
- } else {
- newMembers.push({ _id: member._id });
- }
- }
- return newMembers;
- }
- return (
- <div className="newChatContainer">
- <div {...getRootProps({ className: "dropZoneStyle" })}>
- <input {...getInputProps()} />
- {isDragActive ? (
- <p className="dropZoneStyleBr">Drop the files here ...</p>
- ) : (
- <CChatAvatar
- _id={_id}
- text="upload chat avatar"
- className="profileStyle"
- />
- )}
- </div>
- <div className="profileContainer">
- <div className="loginNickSetting">
- <div className="inputContainer">
- <label for="loginInput">
- Enter the new name of the chat:{" "}
- </label>
- <input
- className="form-control-editing form-control"
- id="loginInput"
- type="text"
- value={newTitle}
- onChange={(e) => {
- setNewTitle(e.target.value);
- }}
- />
- </div>
- <div className="inputContainer">
- <CSearchByLogin/>
- </div>
- <div className="df">
- <div className="df"></div>
- <Button
- variant="primary"
- className="buttonSetting"
- onClick={() => {
- onChat(
- "media",
- img,
- newTitle,
- prepareMembers(members),
- _id
- );
- }}
- >
- <Link
- to="/changesdonechats"
- style={{
- color: "white",
- textDecoration: "none",
- }}
- >
- Apply Changes
- </Link>
- </Button>
- <Button variant="danger" onClick={() => onLeave(_id)}>
- <Link
- to="/changesdonechats"
- style={{
- color: "white",
- textDecoration: "none",
- }}
- >
- Remove chat
- </Link>
- </Button>
- <Link to={"/main/" + _id} className="changepasLink">
- Back to chat
- </Link>
- </div>
- </div>
- </div>
- </div>
- );
- };
- export const CChatEditing = connect(
- (state) => ({
- myProfile: state.promise.myProfile?.payload || {},
- chatId: state.chats,
- }),
- { onChat: actionSetChatInfo, onLeave: removeUserChat }
- )(ChatEditing);
|