main.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { useEffect, useState } from "react";
  2. import io from 'socket.io-client';
  3. import { connect } from "react-redux";
  4. import Chat from "../components/chatWindow";
  5. import ChatsList from "../components/chatsList";
  6. import ConnectChatForm from "../components/chatForm";
  7. import ConnectChatEditForm from "../components/chatEditForm";
  8. import { ConnectProfile } from "../components/profileBar";
  9. import {
  10. actionAddChat, actionAddChatBack, actionAddMSG, actionAddMSGBack,
  11. actionEditMSGback, actionFullGetChats, actionFullGetMessages,
  12. actionGetUserInfo, actionUploadFile
  13. } from "../actions";
  14. const Main = ({ match: { params: { _id } }, userID, chats, getUserInfo, getChat, getMessages, addChat, addMSG, editMSG, sendMSG, addFile }) => {
  15. let [isEdit, setIsEdit] = useState(false)
  16. let onInfoHandler = () => {
  17. setIsEdit(!isEdit)
  18. }
  19. let chat_id = _id.split(".")[1]
  20. useEffect(() => {
  21. getUserInfo(userID)
  22. getChat(userID)
  23. const socket = io("ws://chat.fs.a-level.com.ua")
  24. socket.emit("jwt", localStorage.authToken)
  25. socket.on("jwt_ok", data => console.log("С JWT все норм", data))
  26. socket.on("jwt_fail", error => console.log("С JWT траблы", error))
  27. socket.on("connect", () => {
  28. // getChat(userID)
  29. console.log("Законектились, сокет: ", socket.id)
  30. });
  31. socket.on("connect_error", error => console.log("ошибка конекта", error));
  32. socket.on("reconnect_attempt", () => console.log("пробуем реконектнуть"));
  33. socket.on("disconnect", () => console.log("дисконект", socket.id));
  34. socket.on('chat', chat => {
  35. addChat(chat._id, chat.title, chat.createdAt, chat.lastModified, chat.owner, chat.avatar, chat.messages, chat.members)
  36. })
  37. socket.on('msg', msg => {
  38. addMSG(true, msg.chat._id, msg._id, msg.text, msg.createdAt, msg.owner, msg.media, msg.replyTo)
  39. })
  40. }, [])
  41. useEffect(() => {
  42. chat_id && getMessages(chat_id, 0)
  43. }, [_id, chat_id, getMessages])
  44. return (
  45. <>
  46. <ConnectProfile />
  47. <main>
  48. <ChatsList />
  49. {_id === "chat" && <ConnectChatForm />}
  50. {chats[chat_id] &&
  51. <Chat chat_id={chat_id}
  52. chat_title={chats[chat_id].title}
  53. chat_avatar={chats[chat_id].avatar?.url}
  54. user_id={userID}
  55. messages={chats[chat_id].messages || []}
  56. onUpload={addFile}
  57. onSend={sendMSG}
  58. onMSGEdit={editMSG}
  59. onScrollTopComplete={getMessages}
  60. onInfo={onInfoHandler} />}
  61. {isEdit && chats[chat_id] && <ConnectChatEditForm chat_id={chat_id} chat={chats[chat_id]} />}
  62. </main>
  63. </>
  64. )
  65. }
  66. export const ConnectMain = connect(state => ({
  67. userID: state.auth.payload.sub.id,
  68. chats: state.chat,
  69. }),
  70. {
  71. getUserInfo: actionGetUserInfo,
  72. getChat: actionFullGetChats,
  73. getMessages: actionFullGetMessages,
  74. addChat: actionAddChat,
  75. addMSG: actionAddMSG,
  76. editMSG: actionEditMSGback,
  77. sendMSG: actionAddMSGBack,
  78. newChat: actionAddChatBack,
  79. addFile: actionUploadFile
  80. })(Main)