NewChatPage.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import React, { useState } from "react";
  2. import { connect } from "react-redux";
  3. import { useDropzone } from "react-dropzone";
  4. import { Link } from "react-router-dom";
  5. import Button from "react-bootstrap/esm/Button";
  6. import { Input, InputDebounce } from "../helpers/UserSearch";
  7. import { CSearchByLogin } from "../helpers/UserSearch";
  8. import { actionSetChatInfo } from "../actions";
  9. import { CChatAvatar } from "../components/Avatar";
  10. const ChatPage = ({ onChat, chat, myProfile, create }) => {
  11. const [img, setImg] = useState(null);
  12. const [title, setTitle] = useState(chat?.title || "");
  13. const [members, setMembers] = useState(chat?.members || [myProfile]);
  14. const { getRootProps, getInputProps, isDragActive } = useDropzone({
  15. accept: "image/*",
  16. maxFiles: 1,
  17. onDrop: (acceptedFiles) => {
  18. setImg(acceptedFiles[0]);
  19. },
  20. });
  21. function prepareMembers(members) {
  22. const newMembers = [];
  23. for (const member of members) {
  24. if (create) {
  25. if (member._id !== myProfile?._id) {
  26. newMembers.push({ _id: member._id });
  27. }
  28. } else {
  29. newMembers.push({ _id: member._id });
  30. }
  31. }
  32. return newMembers;
  33. }
  34. return (
  35. <div className="newChatContainer">
  36. <div {...getRootProps({ className: "dropZoneStyle" })}>
  37. <input {...getInputProps()} />
  38. {isDragActive ? (
  39. <p className="dropZoneStyleBr">Drop the files here ...</p>
  40. ) : (
  41. <CChatAvatar
  42. text="upload chat avatar"
  43. className="profileStyle"
  44. />
  45. )}
  46. </div>
  47. <div className="profileContainer">
  48. <div className="loginNickSetting">
  49. <div className="inputContainer">
  50. <label for="loginInput">
  51. Enter the name of the chat:{" "}
  52. </label>
  53. <input
  54. className="form-control-editing form-control"
  55. id="loginInput"
  56. type="text"
  57. value={title}
  58. onChange={(e) => {
  59. setTitle(e.target.value);
  60. }}
  61. />
  62. </div>
  63. <div className="inputContainer">
  64. <CSearchByLogin/>
  65. </div>
  66. <div className="df">
  67. <Button
  68. variant="primary"
  69. className="buttonSetting"
  70. onClick={() => {
  71. onChat(
  72. "media",
  73. img,
  74. title,
  75. prepareMembers(members),
  76. chat?.id
  77. );
  78. }}
  79. >
  80. <Link
  81. to="/changesdonechats"
  82. style={{
  83. color: "white",
  84. textDecoration: "none",
  85. }}
  86. >
  87. Apply Changes
  88. </Link>
  89. </Button>
  90. <Link to="/main" className="changepasLink">
  91. Back to all chats
  92. </Link>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. );
  98. };
  99. export const CNewChatPage = connect(
  100. (state) => ({
  101. myProfile: state.promise.myProfile?.payload || {},
  102. }),
  103. { onChat: actionSetChatInfo }
  104. )(ChatPage);