123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- import React, { useState, useEffect } from "react";
- import { connect } from "react-redux";
- import { Link, useParams } from "react-router-dom";
- import { actionFullMsgsByChat } from "../actions";
- import { store } from "../reducers";
- import Button from "react-bootstrap/esm/Button";
- import { backURL } from "../constants";
- import { AvatarStubHeader } from "../components/AvatarStub";
- import { actionSendMsg } from "../actions";
- import { useDropzone } from "react-dropzone";
- const ChatMsgs = ({
- chatMsgs = [],
- getChat,
- msgsCount = 20,
- sendMsg,
- msg,
- nickOwner,
- }) => {
- const [files, setFiles] = useState(
- msg?.media.map((mediaFile) => ({
- ...mediaFile,
- url: backURL + mediaFile.url,
- })) || []
- );
- const { getRootProps, getInputProps } = useDropzone({
- noKeyboard: true,
- onDrop: async (acceptedFiles) => {
- await setFiles([
- ...files,
- ...acceptedFiles.map((file) =>
- Object.assign(file, {
- url: URL.createObjectURL(file),
- })
- ),
- ]);
- },
- });
- const [msgsBlock, setMsgsBlock] = useState(0);
- console.log(files, "FILES");
- let { _id } = useParams();
- useEffect(() => setFiles([]) , [getChat[_id]])
- useEffect(() => {
- chatMsgs(_id, msgsBlock, msgsCount);
- }, [_id]);
- const onDelFiles = (i) => {
- setFiles(
- files.filter((el, index) => files[index].lastModified !== files[i].lastModified)
- );
- };
- const [text, setText] = useState("");
- const [msgs] = useState(getChat);
- const oneChatMsgs = getChat[_id]?.messages;
- return (
- <>
- <div className="chatBlock">
- <Link to={"/chatediting/" + getChat[_id]?._id}>
- <div className="displayFixed">
- {getChat[_id]?.avatar?.url ? (
- <img
- className="forChatHeader"
- src={backURL + getChat[_id]?.avatar?.url}
- />
- ) : (
- <AvatarStubHeader
- login={
- getChat[_id]?.title !== null
- ? getChat[_id]?.title
- : "chat without title"
- }
- />
- )}
- <h5>{getChat[_id]?.title}</h5>
- <h6>Members: {getChat[_id]?.members.length}</h6>
- </div>
- </Link>
- <div className="chatContainer">
- <ul className="msgsContainer">
- {oneChatMsgs === undefined ? (
- <h2 className="noMsg">No messages</h2>
- ) : (
- oneChatMsgs.map((msg) => (
- <div
- className={
- msg?.owner?.nick === nickOwner
- ? "msgLi"
- : "msgOther"
- }
- key={Math.random()}
- >
- <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) => (
- <img
- className="msgMedia"
- src={backURL + oneMsg.url}
- key={Math.random()}
- />
- ))}
- <li key={Math.random}>{msg?.text}</li>
- </div>
- ))
- )}
- </ul>
- </div>
- <div>
- {oneChatMsgs === getChat[_id] ? (
- <></>
- ) : (
- <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
- src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
- className="sandFile"
- />
- </div>
- <textarea
- name="inputName"
- placeholder="Write a message..."
- rows="2"
- value={text}
- onChange={(e) => {
- setText(e.target.value);
- }}
- />
- </div>
- <Button
- onClick={() => {
- sendMsg(
- getChat[_id]?._id,
- text,
- "media",
- files
- );
- setText("");
- setFiles([]);
- }}
- >
- Send a message
- </Button>
- </div>
- </div>
- )}
- </div>
- </div>
- </>
- );
- };
- export const CChatMsgs = connect(
- (state) => ({
- getChat: state.chats,
- nickOwner: store.getState().promise.myProfile.payload?.nick,
- }),
- {
- chatMsgs: actionFullMsgsByChat,
- sendMsg: actionSendMsg,
- }
- )(ChatMsgs);
|