123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- 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, color } 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),
- })
- ),
- ])
- },
- })
- {console.log(files, "FILES")}
- const [msgsBlock, setMsgsBlock] = useState(0);
- let { _id } = useParams();
- useEffect(() => {
- chatMsgs(_id, msgsBlock, msgsCount);
- }, [_id]);
- 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"
- }
- color={color()}
- />
- )}
- <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 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>
- </>
- );
- };
- export const CChatMsgs = connect(
- (state) => ({
- getChat: state.chats,
- nickOwner: store.getState().promise.myProfile.payload?.nick,
- }),
- {
- chatMsgs: actionFullMsgsByChat,
- sendMsg: actionSendMsg,
- }
- )(ChatMsgs);
|