Spaces:
Paused
Paused
File size: 4,199 Bytes
a0fda44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import ChatHeader from "../components/pages/Chat/ChatHeader";
import MessageList from "../components/pages/Chat/MessageList";
import NewMessage from "../components/pages/Chat/NewMessage";
import useChat from "../hooks/useChat";
import { userProfileActions } from "../store/userProfileSlice";
import useSocket from "../hooks/useSocket";
import { chatListActions } from "../store/chatListSlice";
function Chat() {
const {
mode,
chat: { chatProfile, messageHistory },
chatActions,
} = useChat();
const unreadMessagesByUser = useSelector(
(state) => state.userReducer.user.unreadMessages
);
const { socketListen, socketEmit, userId } = useSocket();
const dispatch = useDispatch();
useEffect(() => {
dispatch(userProfileActions.setProfile(chatProfile));
}, [chatProfile]);
useEffect(() => {
// Listen to typing events from other users
let timeInterval;
socketListen("user:typing", ({ userId, chatRoomId }) => {
clearTimeout(timeInterval);
dispatch(chatActions.setChatProfileMode({ id: userId, mode: "typing" }));
dispatch(chatListActions.setChatMode({ chatRoomId, mode: "typing" }));
timeInterval = setTimeout(() => {
dispatch(chatActions.setChatProfileMode({ id: userId, mode: null }));
dispatch(chatListActions.setChatMode({ chatRoomId, mode: null }));
}, 1000);
});
// Listen to recording event from other users
socketListen("user:recording", ({ userId, chatRoomId }) => {
dispatch(
chatActions.setChatProfileMode({ id: userId, mode: "recording" })
);
dispatch(chatListActions.setChatMode({ chatRoomId, mode: "recording" }));
});
// Listen to record stopping event from other users
socketListen("user:recordingStopped", ({ userId, chatRoomId }) => {
dispatch(chatActions.setChatProfileMode({ id: userId, mode: null }));
dispatch(chatListActions.setChatMode({ chatRoomId, mode: null }));
});
// Listen to clearance of a chat room
socketListen("user:chatRoomClear", ({ chatRoomId }) => {
dispatch(
chatActions.removeChatRoom({
chatRoomId,
})
);
});
}, []);
const chatActive = useSelector((state) => state.chatReducer.active);
const currentChatRoom = useSelector(
(state) => state.chatReducer.currentChatRoom
);
useEffect(() => {
// Mark messages unread in that chat room as read
const unreadMessagesInCurrentChatRoom = unreadMessagesByUser?.filter(
(messages) => messages.chatRoomId === currentChatRoom._id
);
if (
unreadMessagesInCurrentChatRoom &&
unreadMessagesInCurrentChatRoom.length
) {
socketEmit("user:markMessagesAsRead", {
chatRoomId: currentChatRoom._id,
messages: unreadMessagesInCurrentChatRoom,
userId,
});
}
}, [currentChatRoom]);
return (
<div
className={`chat-bg flex-grow h-full relative flex flex-col overflow-hidden shrink-0 sm:absolute sm:top-0 sm:left-0 sm:w-full duration-200 ${
chatActive
? "lg:basis-full sm:translate-x-0"
: "lg:basis-[100rem] sm:translate-x-[55rem]"
}`}
onClick={() => {
if (!chatActive && currentChatRoom._id) {
dispatch(chatActions.setChatActive());
}
}}
>
{userId && (
<>
{/* Header */}
<ChatHeader
className={`${!currentChatRoom.chatProfile.username && "hidden"}`}
chatProfile={chatProfile}
/>
{/* container */}
<div
className={`flex-grow px-[1rem] sm:px-[.5rem] overflow-hidden ${
!currentChatRoom.chatProfile.username && "hidden"
}`}
>
<div className="max-w-[75rem] h-full mx-auto flex flex-col justify-end pb-[2rem] relative overflow-hidden">
<MessageList messageHistory={messageHistory} />
<NewMessage mode={mode} currentChatRoom={currentChatRoom} />
</div>
</div>
</>
)}
</div>
);
}
export default Chat;
|