123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- import React, { useState, useRef, useEffect } 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 { actionFindUsers } from "../actions";
- import { CSearchAvatar } from "../components/Avatar";
- import { actionSetChatInfo } from "../actions";
- import { CChatAvatar } from "../components/Avatar";
- import { backURL } from "../constants";
- import { color } from "../components/AvatarStub";
- const ChatEditing = ({
- chatId,
- onChat,
- myProfile,
- create,
- onLeave,
- onGetUser,
- foundUsers,
- }) => {
- const useDebounce = (cb, depArray, delay, onAdd) => {
- let timeoutRef = useRef();
- useEffect(() => {
- clearInterval(timeoutRef.current);
- timeoutRef.current === undefined
- ? (timeoutRef.current = -1)
- : (timeoutRef.current = setTimeout(cb, delay));
- }, depArray);
- };
- const [login, setLogin] = useState();
- useDebounce(() => onGetUser(login), [login], 2000);
- let { _id } = useParams();
- const [chat] = useState();
- const [img, setImg] = useState(null);
- const [newTitle, setNewTitle] = useState(chatId[_id]?.title || "");
- const { getRootProps, getInputProps, isDragActive } = useDropzone({
- accept: "image/*",
- maxFiles: 1,
- onDrop: (acceptedFiles) => {
- setImg(acceptedFiles[0]);
- },
- });
- const [members, setMembers] = useState(chatId[_id].members || [myProfile]);
- console.log(members)
- 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;
- }
- const onAddMember = (newMember) => {
- setMembers(prepareMembers([...members, newMember]));
- };
- const onDelMember = (i) => {
- setMembers(
- members.filter((el, index) => members[index]._id !== members[i]._id)
- );
- };
- return (
- <div className="newChatContainer">
- <div className="dfb">
- <div>
- <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 onChange={newUserId}/> */}
- <form>
- <label for="loginInput">
- Add users to a group:{" "}
- </label>
- <div className="search-box">
- <input
- className="form-control-editing form-control"
- placeholder=""
- value={login}
- onChange={(e) =>
- setLogin(e.target.value)
- }
- />
- </div>
- {foundUsers
- ? foundUsers.map((user, i) => {
- return (
- <div className="searchBlock">
- {user?.avatar !== null ? (
- <CSearchAvatar
- avatarUrl={user}
- />
- ) : (
- <div className="avatarStubChat2"></div>
- )}
- <div>
- {user?.login
- ? user.login
- : "anon"}
- </div>
- <div>
- <Button
- id={user._id + i}
- user={user?.login}
- onClick={() => {
- onAddMember(
- user
- );
- (document.getElementById(
- user._id + i
- ).innerHTML =
- "✓");
- }}
- >
- +
- </Button>
- </div>
- </div>
- );
- })
- : null}
- </form>
- </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>
-
- <Link
- to={"/main/" + _id}
- className="changepasLink"
- >
- Back to chat
- </Link>
- </div>
- </div>
- </div>
- </div>
- <div>
- <div>
- {chatId[_id]?.members.map((login, i) => {
- return (
- <>
- <div className="membersBlock">
- {login?.avatar !== null ? (
- <CSearchAvatar avatarUrl={login} />
- ) : (
- <div className="avatarStubChat2"></div>
- )}
- <div>
- {login?.login
- ? login.login
- : "anon"}
- </div>
- <div>
- <Button
- id={login._id}
- user={login?.login}
- onClick={() => {
- onDelMember(i);
- document.getElementById(
- login._id
- ).innerHTML = "✓";
- }}
- key={i}
- >
- x
- </Button>
- </div>
- </div>
- </>
- );
- })}
- </div>
- <p className="p">
- *Click on "x" and don't forget to click "Apply Changes"
- </p>
- </div>
- </div>
- </div>
- );
- };
- export const CChatEditing = connect(
- (state) => ({
- myProfile: state.promise.myProfile?.payload || {},
- chatId: state.chats,
- foundUsers: state?.promise?.findUsers?.payload,
- }),
- {
- onChat: actionSetChatInfo,
-
- onGetUser: actionFindUsers,
- }
- )(ChatEditing);
|