123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- import React, { useState } from "react";
- import { connect } from "react-redux";
- import { useDropzone } from "react-dropzone";
- import { Link } from "react-router-dom";
- import Button from "react-bootstrap/esm/Button";
- import { Input, InputDebounce } from "../helpers/UserSearch";
- import { CSearchByLogin } from "../helpers/UserSearch";
- import { actionSetChatInfo } from "../actions";
- import { CChatAvatar } from "../components/Avatar";
- const ChatPage = ({ onChat, chat, myProfile, create }) => {
- const [img, setImg] = useState(null);
- const [title, setTitle] = useState(chat?.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
- text="upload chat avatar"
- className="profileStyle"
- />
- )}
- </div>
- <div className="profileContainer">
- <div className="loginNickSetting">
- <div className="inputContainer">
- <label for="loginInput">
- Enter the name of the chat:{" "}
- </label>
- <input
- className="form-control-editing form-control"
- id="loginInput"
- type="text"
- value={title}
- onChange={(e) => {
- setTitle(e.target.value);
- }}
- />
- </div>
- <div className="inputContainer">
- <CSearchByLogin/>
- </div>
- <div className="df">
- <Button
- variant="primary"
- className="buttonSetting"
- onClick={() => {
- onChat(
- "media",
- img,
- title,
- prepareMembers(members),
- chat?.id
- );
-
- }}
- >
- <Link
- to="/changesdonechats"
- style={{
- color: "white",
- textDecoration: "none",
- }}
- >
- Apply Changes
- </Link>
- </Button>
- <Link to="/main" className="changepasLink">
- Back to all chats
- </Link>
- </div>
- </div>
- </div>
- </div>
- );
- };
- export const CNewChatPage = connect(
- (state) => ({
- myProfile: state.promise.myProfile?.payload || {},
- }),
- { onChat: actionSetChatInfo }
- )(ChatPage);
|