ChatMsgsPage.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. import React, { useState, useEffect } from "react";
  2. import { connect } from "react-redux";
  3. import { Link, useParams } from "react-router-dom";
  4. import { actionFullMsgsByChat } from "../actions";
  5. import { store } from "../reducers";
  6. import Button from "react-bootstrap/esm/Button";
  7. import { backURL } from "../constants";
  8. import { AvatarStubHeader, color } from "../components/AvatarStub";
  9. import { actionSendMsg } from "../actions";
  10. import { useDropzone } from "react-dropzone";
  11. const ChatMsgs = ({
  12. chatMsgs = [],
  13. getChat,
  14. msgsCount = 20,
  15. sendMsg,
  16. msg,
  17. nickOwner,
  18. }) => {
  19. const [files, setFiles] = useState(
  20. msg?.media.map((mediaFile) => ({
  21. ...mediaFile,
  22. url: backURL + mediaFile.url,
  23. })) || []
  24. );
  25. const { getRootProps, getInputProps, isDragActive } = useDropzone({
  26. accept: "image/*",
  27. maxFiles: 2,
  28. onDrop: (acceptedFiles) => {
  29. setFiles(acceptedFiles[0]);
  30. },
  31. });
  32. const [msgsBlock, setMsgsBlock] = useState(0);
  33. let { _id } = useParams();
  34. useEffect(() => {
  35. chatMsgs(_id, msgsBlock, msgsCount);
  36. }, [_id]);
  37. const [text, setText] = useState("");
  38. const [msgs] = useState(getChat);
  39. const oneChatMsgs = getChat[_id]?.messages;
  40. return (
  41. <>
  42. <div className="chatBlock">
  43. <Link to={"/chatediting/" + getChat[_id]?._id}>
  44. <div className="displayFixed">
  45. {getChat[_id]?.avatar?.url ? (
  46. <img
  47. className="forChatHeader"
  48. src={backURL + getChat[_id]?.avatar?.url}
  49. />
  50. ) : (
  51. <AvatarStubHeader
  52. login={
  53. getChat[_id]?.title !== null
  54. ? getChat[_id]?.title
  55. : "chat without title"
  56. }
  57. color={color()}
  58. />
  59. )}
  60. <h5>{getChat[_id]?.title}</h5>
  61. <h6>Members: {getChat[_id]?.members.length}</h6>
  62. </div>
  63. </Link>
  64. <div className="chatContainer">
  65. <ul className="msgsContainer">
  66. {oneChatMsgs === undefined ? (
  67. <h2 className="noMsg">No messages</h2>
  68. ) : (
  69. oneChatMsgs.map((msg) => (
  70. <div
  71. className={
  72. msg.owner.nick === nickOwner
  73. ? "msgLi"
  74. : "msgOther"
  75. }
  76. >
  77. {/* {msg?.media[0]?.url !== undefined ? (
  78. <img
  79. className="msgMedia"
  80. src={
  81. backURL + msg?.media[0]?.url
  82. }
  83. />
  84. ) : (
  85. ""
  86. )} */}
  87. {console.log(msg?.owner.avatar?.url)}
  88. <div className="msgBlock">
  89. {msg?.owner.avatar?.url === undefined ?
  90. <div className="avatarStubChat1"></div> :
  91. <img
  92. src={
  93. backURL + msg?.owner.avatar?.url
  94. }
  95. className="smallForChat1"
  96. /> }
  97. <h5 style={{ paddingTop: "5px" }}>
  98. {msg?.owner.nick}
  99. </h5>
  100. </div>
  101. <li key={Math.random}>{msg?.text}</li>
  102. </div>
  103. ))
  104. )}
  105. </ul>
  106. </div>
  107. <div>
  108. {oneChatMsgs === getChat[_id] ? (
  109. <></>
  110. ) : (
  111. <div className="sendMsgBlock">
  112. <div className="sendBlock">
  113. <div
  114. {...getRootProps({
  115. className: "dropZoneStyle2",
  116. })}
  117. >
  118. <input {...getInputProps()} />
  119. {isDragActive ? (
  120. <p className="dropZoneStyleBr">
  121. Drop the files here ...
  122. </p>
  123. ) : (
  124. <img
  125. src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
  126. className="sandFile"
  127. />
  128. )}
  129. </div>
  130. {/* <img
  131. src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
  132. className="sandFile"
  133. value={text}
  134. onChange={(e) => {
  135. setText(e.target.value);
  136. }}
  137. /> */}
  138. <textarea
  139. placeholder="Write a message..."
  140. rows="2"
  141. value={text}
  142. onChange={(e) => {
  143. setText(e.target.value);
  144. }}
  145. />
  146. </div>
  147. <Button
  148. onClick={() =>
  149. sendMsg(
  150. getChat[_id]?._id,
  151. text,
  152. "media",
  153. files
  154. )
  155. }
  156. >
  157. Send a message
  158. </Button>
  159. </div>
  160. )}
  161. </div>
  162. </div>
  163. </>
  164. );
  165. };
  166. export const CChatMsgs = connect(
  167. (state) => ({
  168. getChat: state.chats,
  169. nickOwner: store.getState().promise.myProfile.payload.nick,
  170. }),
  171. {
  172. chatMsgs: actionFullMsgsByChat,
  173. sendMsg: actionSendMsg,
  174. }
  175. )(ChatMsgs);