123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- 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 { 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">
-
- </div>
-
- <div className="df">
- <Button
- variant="primary"
- className="buttonSetting"
- onClick={() => {
- onChat("media", img, title, prepareMembers(members), chat?.id);
- console.log("media", title, members, img);
- }}
- >
- <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);
|