|
@@ -6,6 +6,7 @@ import Button from "react-bootstrap/esm/Button";
|
|
|
import { CSearchAvatar } from "../components/Avatar";
|
|
|
import { actionSetChatInfo } from "../actions";
|
|
|
import { actionFindUsers } from "../actions";
|
|
|
+import { history } from "../App";
|
|
|
|
|
|
import { CChatAvatar } from "../components/Avatar";
|
|
|
|
|
@@ -35,10 +36,27 @@ const ChatPage = ({
|
|
|
const [title, setTitle] = useState(chat?.title || "");
|
|
|
const [members, setMembers] = useState(chat?.members || [myProfile]);
|
|
|
|
|
|
+ function checkMembers(members, user) {
|
|
|
+ for (var i = 0; i < members.length; i++) {
|
|
|
+ if (members[i]?._id === user?._id) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return onAddMember(user);
|
|
|
+ }
|
|
|
+
|
|
|
const onAddMember = (newMember) => {
|
|
|
- setMembers(prepareMembers([...members, newMember]));
|
|
|
+ setMembers([...members, newMember]);
|
|
|
};
|
|
|
|
|
|
+ const onDelMember = (i) => {
|
|
|
+ setMembers(
|
|
|
+ members.filter((el, index) => members[index]._id !== members[i]._id)
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
setTitle(chat?.title || "");
|
|
|
setImg(null);
|
|
@@ -57,7 +75,7 @@ const ChatPage = ({
|
|
|
const newMembers = [];
|
|
|
|
|
|
for (const member of members) {
|
|
|
- if (create) {
|
|
|
+ if (checkMembers(newMembers, member)) {
|
|
|
if (member._id !== myProfile?._id) {
|
|
|
newMembers.push({ _id: member._id });
|
|
|
}
|
|
@@ -66,122 +84,173 @@ const ChatPage = ({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ newMembers.shift();
|
|
|
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 className="dfb">
|
|
|
+ <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="inputContainer">
|
|
|
- <form>
|
|
|
- <label for="loginInput">
|
|
|
- Add users to a group:{" "}
|
|
|
- </label>
|
|
|
- <div className="search-box">
|
|
|
+ <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"
|
|
|
- placeholder=""
|
|
|
- value={login}
|
|
|
- onChange={(e) => setLogin(e.target.value)}
|
|
|
+ id="loginInput"
|
|
|
+ type="text"
|
|
|
+ value={title}
|
|
|
+ onChange={(e) => {
|
|
|
+ setTitle(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 className="inputContainer">
|
|
|
+ <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={() => {
|
|
|
+ checkMembers(
|
|
|
+ members,
|
|
|
+ user
|
|
|
+ );
|
|
|
+ document.getElementById(
|
|
|
+ user._id +
|
|
|
+ i
|
|
|
+ ).innerHTML =
|
|
|
+ "✓";
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ +
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })
|
|
|
+ : null}
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="df">
|
|
|
+ <Button
|
|
|
+ variant="primary"
|
|
|
+ className="buttonSetting"
|
|
|
+ onClick={() => {
|
|
|
+ onChat(
|
|
|
+ "media",
|
|
|
+ img,
|
|
|
+ title,
|
|
|
+ prepareMembers(members),
|
|
|
+ chat?.id
|
|
|
+ );
|
|
|
+ history.push("/main");
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ {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 className="df">
|
|
|
- <Button
|
|
|
- variant="primary"
|
|
|
- className="buttonSetting"
|
|
|
- onClick={() => {
|
|
|
- (console.log(prepareMembers(members, "members")))
|
|
|
- onChat(
|
|
|
- "media",
|
|
|
- img,
|
|
|
- title,
|
|
|
- prepareMembers(members),
|
|
|
- chat?.id,
|
|
|
-
|
|
|
- )
|
|
|
- }}
|
|
|
- >
|
|
|
- {console.log(members, "members")}
|
|
|
- <Link
|
|
|
- to="/changesdonechats"
|
|
|
- style={{
|
|
|
- color: "white",
|
|
|
- textDecoration: "none",
|
|
|
- }}
|
|
|
- >
|
|
|
- Apply Changes
|
|
|
- </Link>
|
|
|
- </Button>
|
|
|
-
|
|
|
- <Link to="/main" className="changepasLink">
|
|
|
- Back to all chats
|
|
|
- </Link>
|
|
|
+ <div>
|
|
|
+ <Button
|
|
|
+ id={login._id}
|
|
|
+ user={login?.login}
|
|
|
+ onClick={() => {
|
|
|
+ onDelMember(i);
|
|
|
+ document.getElementById(
|
|
|
+ login._id
|
|
|
+ ).innerHTML = "✓";
|
|
|
+ }}
|
|
|
+ key={i}
|
|
|
+ >
|
|
|
+ x
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|