|
@@ -5,7 +5,7 @@ import { actionFullMsgsByChat } from "../actions";
|
|
import { store } from "../reducers";
|
|
import { store } from "../reducers";
|
|
import Button from "react-bootstrap/esm/Button";
|
|
import Button from "react-bootstrap/esm/Button";
|
|
import { backURL } from "../constants";
|
|
import { backURL } from "../constants";
|
|
-import { AvatarStubHeader, color } from "../components/AvatarStub";
|
|
|
|
|
|
+import { AvatarStubHeader } from "../components/AvatarStub";
|
|
import { actionSendMsg } from "../actions";
|
|
import { actionSendMsg } from "../actions";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { useDropzone } from "react-dropzone";
|
|
|
|
|
|
@@ -17,7 +17,6 @@ const ChatMsgs = ({
|
|
msg,
|
|
msg,
|
|
nickOwner,
|
|
nickOwner,
|
|
}) => {
|
|
}) => {
|
|
-
|
|
|
|
const [files, setFiles] = useState(
|
|
const [files, setFiles] = useState(
|
|
msg?.media.map((mediaFile) => ({
|
|
msg?.media.map((mediaFile) => ({
|
|
...mediaFile,
|
|
...mediaFile,
|
|
@@ -28,7 +27,6 @@ const ChatMsgs = ({
|
|
const { getRootProps, getInputProps } = useDropzone({
|
|
const { getRootProps, getInputProps } = useDropzone({
|
|
noKeyboard: true,
|
|
noKeyboard: true,
|
|
onDrop: async (acceptedFiles) => {
|
|
onDrop: async (acceptedFiles) => {
|
|
-
|
|
|
|
await setFiles([
|
|
await setFiles([
|
|
...files,
|
|
...files,
|
|
...acceptedFiles.map((file) =>
|
|
...acceptedFiles.map((file) =>
|
|
@@ -36,22 +34,30 @@ const ChatMsgs = ({
|
|
url: URL.createObjectURL(file),
|
|
url: URL.createObjectURL(file),
|
|
})
|
|
})
|
|
),
|
|
),
|
|
- ])
|
|
|
|
|
|
+ ]);
|
|
},
|
|
},
|
|
- })
|
|
|
|
- {console.log(files, "FILES")}
|
|
|
|
|
|
+ });
|
|
const [msgsBlock, setMsgsBlock] = useState(0);
|
|
const [msgsBlock, setMsgsBlock] = useState(0);
|
|
|
|
|
|
|
|
+ console.log(files, "FILES");
|
|
|
|
+
|
|
let { _id } = useParams();
|
|
let { _id } = useParams();
|
|
|
|
|
|
|
|
+ useEffect(() => setFiles([]) , [getChat[_id]])
|
|
|
|
+
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
chatMsgs(_id, msgsBlock, msgsCount);
|
|
chatMsgs(_id, msgsBlock, msgsCount);
|
|
}, [_id]);
|
|
}, [_id]);
|
|
|
|
|
|
|
|
+ const onDelFiles = (i) => {
|
|
|
|
+ setFiles(
|
|
|
|
+ files.filter((el, index) => files[index].lastModified !== files[i].lastModified)
|
|
|
|
+ );
|
|
|
|
+ };
|
|
|
|
+
|
|
const [text, setText] = useState("");
|
|
const [text, setText] = useState("");
|
|
const [msgs] = useState(getChat);
|
|
const [msgs] = useState(getChat);
|
|
|
|
|
|
-
|
|
|
|
const oneChatMsgs = getChat[_id]?.messages;
|
|
const oneChatMsgs = getChat[_id]?.messages;
|
|
return (
|
|
return (
|
|
<>
|
|
<>
|
|
@@ -70,7 +76,6 @@ const ChatMsgs = ({
|
|
? getChat[_id]?.title
|
|
? getChat[_id]?.title
|
|
: "chat without title"
|
|
: "chat without title"
|
|
}
|
|
}
|
|
- color={color()}
|
|
|
|
/>
|
|
/>
|
|
)}
|
|
)}
|
|
<h5>{getChat[_id]?.title}</h5>
|
|
<h5>{getChat[_id]?.title}</h5>
|
|
@@ -84,7 +89,6 @@ const ChatMsgs = ({
|
|
<h2 className="noMsg">No messages</h2>
|
|
<h2 className="noMsg">No messages</h2>
|
|
) : (
|
|
) : (
|
|
oneChatMsgs.map((msg) => (
|
|
oneChatMsgs.map((msg) => (
|
|
-
|
|
|
|
<div
|
|
<div
|
|
className={
|
|
className={
|
|
msg?.owner?.nick === nickOwner
|
|
msg?.owner?.nick === nickOwner
|
|
@@ -93,33 +97,40 @@ const ChatMsgs = ({
|
|
}
|
|
}
|
|
key={Math.random()}
|
|
key={Math.random()}
|
|
>
|
|
>
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
<div className="msgBlock">
|
|
<div className="msgBlock">
|
|
- {msg?.owner?.avatar?.url === undefined ?
|
|
|
|
- <div className="avatarStubChat1" key={Math.random()}></div> :
|
|
|
|
- <img
|
|
|
|
- src={
|
|
|
|
- backURL + msg?.owner.avatar?.url
|
|
|
|
- }
|
|
|
|
- className="smallForChat1"
|
|
|
|
- key={Math.random()}
|
|
|
|
- /> }
|
|
|
|
-
|
|
|
|
- <h5 style={{ paddingTop: "5px" }} key={Math.random()}>
|
|
|
|
- {msg?.owner?.nick === null ? msg?.owner?.login : msg?.owner?.nick}
|
|
|
|
- </h5>
|
|
|
|
- </div>
|
|
|
|
- {msg?.media?.map((oneMsg) => (
|
|
|
|
|
|
+ {msg?.owner?.avatar?.url ===
|
|
|
|
+ undefined ? (
|
|
|
|
+ <div
|
|
|
|
+ className="avatarStubChat1"
|
|
|
|
+ key={Math.random()}
|
|
|
|
+ ></div>
|
|
|
|
+ ) : (
|
|
<img
|
|
<img
|
|
- className="msgMedia"
|
|
|
|
src={
|
|
src={
|
|
- backURL + oneMsg.url
|
|
|
|
|
|
+ backURL +
|
|
|
|
+ msg?.owner.avatar?.url
|
|
}
|
|
}
|
|
|
|
+ className="smallForChat1"
|
|
key={Math.random()}
|
|
key={Math.random()}
|
|
/>
|
|
/>
|
|
- ))}
|
|
|
|
|
|
+ )}
|
|
|
|
+
|
|
|
|
+ <h5
|
|
|
|
+ style={{ paddingTop: "5px" }}
|
|
|
|
+ key={Math.random()}
|
|
|
|
+ >
|
|
|
|
+ {msg?.owner?.nick === null
|
|
|
|
+ ? msg?.owner?.login
|
|
|
|
+ : msg?.owner?.nick}
|
|
|
|
+ </h5>
|
|
|
|
+ </div>
|
|
|
|
+ {msg?.media?.map((oneMsg) => (
|
|
|
|
+ <img
|
|
|
|
+ className="msgMedia"
|
|
|
|
+ src={backURL + oneMsg.url}
|
|
|
|
+ key={Math.random()}
|
|
|
|
+ />
|
|
|
|
+ ))}
|
|
<li key={Math.random}>{msg?.text}</li>
|
|
<li key={Math.random}>{msg?.text}</li>
|
|
</div>
|
|
</div>
|
|
))
|
|
))
|
|
@@ -131,49 +142,60 @@ const ChatMsgs = ({
|
|
{oneChatMsgs === getChat[_id] ? (
|
|
{oneChatMsgs === getChat[_id] ? (
|
|
<></>
|
|
<></>
|
|
) : (
|
|
) : (
|
|
- <div className="sendMsgBlock">
|
|
|
|
- <div className="sendBlock">
|
|
|
|
- <div
|
|
|
|
- {...getRootProps({
|
|
|
|
- className: "dropZoneStyle2",
|
|
|
|
- })}
|
|
|
|
- >
|
|
|
|
- <input {...getInputProps()} />
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <div className="preloaderContainer">
|
|
|
|
+ {files.map((file, i) => (
|
|
|
|
+ <div className="preloaderBlock">
|
|
|
|
+ <img src={file?.url} className="preload" key={file.lastModified}/>
|
|
|
|
+ <button onClick={() => onDelFiles(i)} key={i}>
|
|
|
|
+ x
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
+
|
|
|
|
+ ))}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div className="sendMsgBlock">
|
|
|
|
+ <div className="sendBlock">
|
|
|
|
+ <div
|
|
|
|
+ {...getRootProps({
|
|
|
|
+ className: "dropZoneStyle2",
|
|
|
|
+ })}
|
|
|
|
+ >
|
|
|
|
+ <input {...getInputProps()} />
|
|
|
|
+
|
|
<img
|
|
<img
|
|
src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
|
|
src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
|
|
className="sandFile"
|
|
className="sandFile"
|
|
/>
|
|
/>
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <textarea
|
|
|
|
+ name="inputName"
|
|
|
|
+ placeholder="Write a message..."
|
|
|
|
+ rows="2"
|
|
|
|
+ value={text}
|
|
|
|
+ onChange={(e) => {
|
|
|
|
+ setText(e.target.value);
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- <textarea
|
|
|
|
- name="inputName"
|
|
|
|
- placeholder="Write a message..."
|
|
|
|
- rows="2"
|
|
|
|
- value={text}
|
|
|
|
- onChange={(e) => {
|
|
|
|
- setText(e.target.value);
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
|
|
|
|
- <Button
|
|
|
|
- onClick={() =>
|
|
|
|
- {
|
|
|
|
|
|
+ <Button
|
|
|
|
+ onClick={() => {
|
|
sendMsg(
|
|
sendMsg(
|
|
getChat[_id]?._id,
|
|
getChat[_id]?._id,
|
|
text,
|
|
text,
|
|
"media",
|
|
"media",
|
|
files
|
|
files
|
|
- )
|
|
|
|
- setText("")
|
|
|
|
- setFiles([])
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- >
|
|
|
|
- Send a message
|
|
|
|
- </Button>
|
|
|
|
|
|
+ );
|
|
|
|
+ setText("");
|
|
|
|
+ setFiles([]);
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ Send a message
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
)}
|
|
</div>
|
|
</div>
|
|
@@ -182,7 +204,6 @@ const ChatMsgs = ({
|
|
);
|
|
);
|
|
};
|
|
};
|
|
|
|
|
|
-
|
|
|
|
export const CChatMsgs = connect(
|
|
export const CChatMsgs = connect(
|
|
(state) => ({
|
|
(state) => ({
|
|
getChat: state.chats,
|
|
getChat: state.chats,
|