Skip to content

Commit

Permalink
chat issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@thakiyudheen
thakiyudheen committed Jul 16, 2024
1 parent 5e64af3 commit 821603a
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 130 deletions.
4 changes: 2 additions & 2 deletions src/Components/common/chat/chatList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,15 @@ const ChatList: React.FC<SidebarProps> = ({onlineUsers, users ,createNewChat ,
>
<div className='relative'>
<img src={chat?.participant.profile?.avatar} className="w-10 h-10 rounded-full"></img>
{onlineUsers?.includes(chat?.participant._id) && (
{onlineUsers?.includes(chat?.participant?._id) && (
<span style={{ marginLeft: '8px', color: 'green', fontWeight: 'bold' }} className='absolute left-5 bottom-[2px] w-3 h-3 bg-[green] rounded-full'></span>
)}
</div>
<div className="ml-4 flex-1 flex flex-col">
<small className={`font-bold ${chat.active ? 'text-white' : ''} dark:text-gray-200 text-black`}>{chat?.participant.firstName}</small>
<small className={`text-gray-500 ${chat.active ? 'text-gray-300' : ''}`}>{'This is sample message'}</small>
</div>
{onlineUsers?.includes(chat?.participant._id) ? <small className='text-[green]'>Online</small> : <small>Offline</small>}
{onlineUsers?.includes(chat?.participant?._id) ? <small className='text-[green]'>Online</small> : <small>Offline</small>}
<small className={`ml-auto ${chat.active ? 'text-gray-300' : 'text-gray-500'}`}>{chat.time}</small>
</li>
))
Expand Down
12 changes: 6 additions & 6 deletions src/Components/common/chat/chatWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({

const getMessageSender = (message: any) => {
if (typeof message.sender === 'object') {
return message.sender._id;
return message.sender?._id;
}
return message.sender;
};
Expand Down Expand Up @@ -279,7 +279,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
{messages.map((message: any, index: number) => (
<div
key={index}
className={`chat ${getMessageSender(message) === currentUser._id ? 'chat-end' : 'chat-start'}`}
className={`chat ${getMessageSender(message) === currentUser?._id ? 'chat-end' : 'chat-start'}`}
>
<div className="chat-image avatar">
<div className="w-5 rounded-full">
Expand All @@ -290,14 +290,14 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
</div>
</div>
<div className="chat-header">
<small className={`${getMessageSender(message) === currentUser._id ? "text-end relative right-2" : "text-start relative left-2"}`}>{new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</small>
<small className={`${getMessageSender(message) === currentUser?._id ? "text-end relative right-2" : "text-start relative left-2"}`}>{new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</small>
</div>
<div
className={`${message.contentType === 'text'
? getMessageSender(message) === currentUser._id
? getMessageSender(message) === currentUser?._id
? 'bg-blue-700 text-white rounded-l-full rounded-tr-full px-3 py-2'
: 'bg-gray-400 dark:bg-gray-700 text-white rounded-r-full rounded-t-full px-3 py-2'
: getMessageSender(message) === currentUser._id ? 'bg-white dark:bg-blue-600 text-white rounded-l-lg rounded-tr-lg px-1 py-1'
: getMessageSender(message) === currentUser?._id ? 'bg-white dark:bg-blue-600 text-white rounded-l-lg rounded-tr-lg px-1 py-1'
: 'bg-gray-400 dark:bg-gray-700 text-white rounded-lg px-1 py-1'
}`}
>
Expand Down Expand Up @@ -341,7 +341,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
</div>

</div>
{getMessageSender(message) == currentUser._id && message.recieverSeen && <small>seen</small>}
{getMessageSender(message) == currentUser?._id && message.recieverSeen && <small>seen</small>}
</div>
))}
<div ref={messagesEndRef} />
Expand Down
131 changes: 10 additions & 121 deletions src/Components/instructor/chat/instructorChat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,117 +29,6 @@ const InstructorChat: React.FC = () => {
const [isLoading, setLoading] = useState<boolean>(false)
const navigate = useNavigate()



// // peer connection -------------------------------
// const [peerId, setPeerId] = useState<string>('');
// const [peer, setPeer] = useState<Peer | null>(null);
// // const localVideoRef = useRef<HTMLVideoElement>(null);
// // const remoteVideoRef = useRef<HTMLVideoElement>(null);
// const [remoteStream, setRemoteStream] = useState<any>(null)
// const [localStream, setLocalStream] = useState<any>(null)
// const [call, setCall] = useState<any>(null);
// const [isRing,setRing]=useState<any>(false)

// // const [input,setInput]= useState<any>(null);

// useEffect(() => {
// const newPeer = new Peer();

// newPeer.on('open', (id) => {
// setPeerId(id);

// });

// newPeer.on('call', (incomingCall) => {
// console.log('what is the problem')
// navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
// // if (localVideoRef.current) {
// // localVideoRef.current.srcObject = stream;
// setLocalStream(stream)
// // }
// incomingCall.answer(stream);
// incomingCall.on('stream', (remoteStream) => {
// // if (remoteVideoRef.current) {
// // remoteVideoRef.current.srcObject = remoteStream;
// setRemoteStream(stream)
// // }
// });
// setCall(incomingCall);
// });
// });

// setPeer(newPeer);

// return () => {
// newPeer.destroy();
// };
// }, []);

// useEffect(() => {
// if (socket) {
// const handleConnectedPeer = (data: any) => {
// console.log('reached data', data);

// const is = window.confirm('are you sure');

// if (is) {
// // setAnswer(true)
// // setRing(false)
// // socket?.emit('answerCall',{roomId:data.roomId,peerId:data?.peerId})
// callPeer(data.peerId);
// } else {
// socket?.emit('rejectCall', { roomId: data.roomId, peerId: data?.peerId })
// setRing(false)

// }


// };

// socket.on('incomingCall', handleConnectedPeer);
// socket?.on('answerCall', (data) => {
// console.log('the call is accepted')
// });

// socket?.on('rejectCall', (data) => {
// console.log('the call is rejected')
// });


// return () => {
// socket.off('incomingCall', handleConnectedPeer);
// };
// }
// }, [socket,]);



// const callPeer = (id: string) => {
// console.log('this is callpeer', id)
// navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
// // if (localVideoRef.current) {
// console.log('stream reached', stream)
// // localVideoRef.current.srcObject = stream;
// setLocalStream(stream)
// // }
// const outgoingCall = peer?.call(id, stream);
// outgoingCall?.on('stream', (remoteStream: any) => {
// // if (remoteVideoRef.current) {
// console.log(' remote stream reached', stream)
// // remoteVideoRef.current.srcObject = remoteStream;
// setRemoteStream(remoteStream)
// // }
// });
// setCall(outgoingCall);
// });

// };
// console.log(peerId);
// const handleClick = () => {
// socket?.emit('outGoingCall', { peerId: peerId, roomId:currentChat.roomId,userId:data.data._id });
// setRing(true)
// }
const [peerId, setPeerId] = useState<string>('');
const [peer, setPeer] = useState<Peer | null>(null);
const [remoteStream, setRemoteStream] = useState<any>(null);
Expand Down Expand Up @@ -264,7 +153,7 @@ const InstructorChat: React.FC = () => {
};

const handleClick = () => {
socket?.emit('outGoingCall', { peerId: peerId, roomId: currentChat.roomId, userId: data.data._id });
socket?.emit('outGoingCall', { peerId: peerId, roomId: currentChat.roomId, userId: data.data?._id });
setRing(true);
};
const rejectCall = () => {
Expand Down Expand Up @@ -301,7 +190,7 @@ const InstructorChat: React.FC = () => {
if (socket) {
socket.emit('join-room', roomId);
console.log(`Joined room ${roomId}`);
socket?.emit('seen-message', { sender: currentChat._id, chat: users?.chatId });
socket?.emit('seen-message', { sender: currentChat?._id, chat: users?.chatId });
}
} catch (error) {
console.error(error);
Expand All @@ -315,7 +204,7 @@ const InstructorChat: React.FC = () => {

if (socket) {
socket.on('getOnlineUser', handleOnlineUsers);
socket.emit('onlineUsers', { userId: data.data._id });
socket.emit('onlineUsers', { userId: data.data?._id });
getData();
}

Expand All @@ -328,7 +217,7 @@ const InstructorChat: React.FC = () => {

const getData = async () => {
setLoading(true)
const response = await dispatch(getChatByUserIdAction({ userId: data.data._id }));
const response = await dispatch(getChatByUserIdAction({ userId: data.data?._id }));
if (response.payload && response.payload.success) {
console.log('the chat is ', response.payload.data)
const sortedData = response.payload.data.sort((a: any, b: any) => {
Expand All @@ -337,9 +226,9 @@ const InstructorChat: React.FC = () => {
const uniqueParticipants = new Set<string>();
const otherParticipants = sortedData.reduce((acc: any[], chat: any) => {
chat.participants.forEach((participant: any) => {
if (participant._id !== data.data._id && !uniqueParticipants.has(participant._id)) {
uniqueParticipants.add(participant._id);
acc.push({ chatId: chat._id, participant, lastSeen: chat?.lastSeen, updatedAt: chat?.updatedAt, subscriptionType: chat?.subscriptionType });
if (participant?._id !== data.data?._id && !uniqueParticipants.has(participant?._id)) {
uniqueParticipants.add(participant?._id);
acc.push({ chatId: chat?._id, participant, lastSeen: chat?.lastSeen, updatedAt: chat?.updatedAt, subscriptionType: chat?.subscriptionType });
}
});
return acc;
Expand All @@ -357,9 +246,9 @@ const InstructorChat: React.FC = () => {
if (socket && currentChat) {
const handleMessageReceive = (message: any) => {
console.log('Message received:', message);
console.log(message.sender, currentChat._id)
console.log(message.sender, currentChat?._id)

if (message.sender === currentChat._id) {
if (message.sender === currentChat?._id) {
message.sender = currentChat

} else {
Expand All @@ -373,7 +262,7 @@ const InstructorChat: React.FC = () => {
};

const handleTypingEvent = (data: any) => {
if (data.sender === currentChat._id) {
if (data.sender === currentChat?._id) {
setTyping({ isTyping: true, sender: data.sender });
setTimeout(() => {
setTyping({ isTyping: false, sender: data.sender });
Expand Down
2 changes: 1 addition & 1 deletion src/Components/user/profile/UserDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { CiEdit } from "react-icons/ci";
import { FileUpload } from '@/utils/cloudinary/imgVideoUpload'; // Ensure this path is correct based on your project structure
import { FileUpload } from '@/utils/cloudinary/imgVideoUpload';
import { useAppDispatch, useAppSelector } from '@/hooks/hooke';
import { RootState } from '@/redux/store';
import { format } from 'date-fns';
Expand Down

0 comments on commit 821603a

Please sign in to comment.