Skip to content

Commit 43e3134

Browse files
theadityachoudhurytheadityachoudhury
committed
Added : Chat component, profile component and cosmetic fixes
1 parent e5564b2 commit 43e3134

File tree

6 files changed

+179
-13
lines changed

6 files changed

+179
-13
lines changed

‎client/src/Components/Header.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useUserContext } from '../context/UserProvider';
55
import FilesList from './Tabs/FilesList';
66
import Runner from './Tabs/Runner';
77
import UsersList from './Tabs/UsersList';
8+
import UserChat from './Tabs/UserChat';
9+
import ProfilePage from './Tabs/Profile';
810

911
enum Tab {
1012
Files = 'files',
@@ -42,9 +44,9 @@ const Header: React.FC = () => {
4244
case Tab.Users:
4345
return <UsersList />;
4446
case Tab.Chat:
45-
return <div className="flex-grow">Chat Content</div>;
47+
return <UserChat />;
4648
case Tab.Profile:
47-
return <div className="flex-grow">Profile Content</div>;
49+
return <ProfilePage />;
4850
default:
4951
return <div>Select a tab</div>;
5052
}

‎client/src/Components/Tabs/Profile.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { useUserContext } from "../../context/UserProvider"; // Assuming this context exists
2+
import React from "react";
3+
import Loader from "../Loader";
4+
5+
const ProfilePage = () => {
6+
const { user } = useUserContext(); // Assuming user context provides user details
7+
8+
if (!user) {
9+
return <Loader /> // Handle loading state if user data is asynchronously fetched
10+
}
11+
12+
return (
13+
<div className="text-black min-w-64 max-w-full h-full flex flex-col mx-2">
14+
<div className="space-y-2">
15+
<p className="text-3xl text-white font-poppins font-thin">Profile</p>
16+
<hr />
17+
</div>
18+
19+
<div className="">
20+
<div className="bg-gray-800 text-white rounded-md p-4">
21+
<div>
22+
<p className="text-lg font-semibold">Name</p>
23+
<p>{`${user.name.fname} ${user.name.lname}`}</p>
24+
</div>
25+
<div>
26+
<p className="text-lg">Email</p>
27+
<p>{user.email}</p>
28+
</div>
29+
</div>
30+
31+
<button className="mt-4 bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
32+
Edit Profile
33+
</button>
34+
</div>
35+
</div>
36+
);
37+
};
38+
39+
export default ProfilePage;

‎client/src/Components/Tabs/UserChat.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { useState } from "react";
2+
import { useChat } from "../../context/ChatProvider";
3+
import { useUserContext } from "../../context/UserProvider";
4+
5+
const UserChat = () => {
6+
const { messages, sendMessage } = useChat();
7+
const { user } = useUserContext();
8+
const [message, setMessage] = useState<string>("");
9+
10+
const handleSendMessage = () => {
11+
if (message.trim()) {
12+
sendMessage({ username: `${user?.name.fname} ${user?.name.lname}`, message });
13+
setMessage("");
14+
}
15+
};
16+
17+
return (
18+
<div className="text-black min-w-56 max-w-full h-full flex flex-col" onKeyDown={(e) => {
19+
if (e.key === 'Enter') handleSendMessage()
20+
}}>
21+
<div className="space-y-2">
22+
<p className="text-3xl text-white font-poppins font-thin">
23+
Chat
24+
</p>
25+
<hr />
26+
</div>
27+
28+
<div className="overflow-y-auto flex-grow p-2">
29+
<div className="space-y-2">
30+
{messages.map((msg, index) => (
31+
<div
32+
key={index}
33+
className={`text-left text-lg text-white ${msg.username === 'YourUsername' ? 'bg-blue-700 self-message' : 'bg-gray-800 other-message'
34+
} rounded-md`}
35+
>
36+
<div className="flex items-center justify-between">
37+
<div className="text-sm font-medium">
38+
{msg.username}
39+
</div>
40+
</div>
41+
<div className="text-md">
42+
{msg.message}
43+
</div>
44+
</div>
45+
))}
46+
</div>
47+
</div>
48+
49+
<div className="p-2 flex gap-2">
50+
<input
51+
type="text"
52+
value={message}
53+
onChange={(e) => setMessage(e.target.value)}
54+
className="w-full p-2 rounded-md text-black"
55+
placeholder="Type a message..."
56+
/>
57+
<button
58+
onClick={handleSendMessage}
59+
className="bg-blue-700 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600"
60+
>
61+
Send
62+
</button>
63+
</div>
64+
</div>
65+
);
66+
};
67+
68+
export default UserChat;

‎client/src/Components/Tabs/UsersList.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const UsersList = () => {
66
const colors = ['bg-red-700', 'bg-blue-700', 'bg-green-700', 'bg-yellow-700', 'bg-indigo-700', 'bg-purple-700', 'bg-pink-700'];
77

88
return (
9-
<div className="text-black min-w-64 max-w-full h-full">
9+
<div className="text-black min-w-64 max-w-full h-full m-2">
1010
<div className="space-y-2">
1111
<p className="text-3xl text-white font-poppins font-thin">
1212
Users List
@@ -19,7 +19,7 @@ const UsersList = () => {
1919
{usersInRoom.map((user, index) => (
2020
<div key={index} className="text-center">
2121
<div className={`text-3xl ${colors[Math.floor(Math.random() * colors.length)]} font-bold font-mono rounded-md p-1 px-3`}>
22-
{user.username[0].toLowerCase()}
22+
{user.username[0].toUpperCase()}
2323
</div>
2424
<p className="text-lg text-white">{user.username}</p>
2525
</div>

‎client/src/context/AppProvider.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ChatProvider } from "./ChatProvider";
12
import { CodeEditorProvider } from "./CodeEditorProvider";
23
import { FileProvider } from "./FileProvider";
34
import { RoomProvider } from "./RoomProvider";
@@ -11,15 +12,17 @@ function AppProvider({ children }: { children: React.ReactNode }) {
1112
<UserContextProvider>
1213
<SocketProvider>
1314
<RoomProvider>
14-
<CodeEditorProvider>
15-
<FileProvider>
16-
<RunnerProvider>
17-
<RouterProvider>
18-
{children}
19-
</RouterProvider>
20-
</RunnerProvider>
21-
</FileProvider>
22-
</CodeEditorProvider>
15+
<ChatProvider>
16+
<CodeEditorProvider>
17+
<FileProvider>
18+
<RunnerProvider>
19+
<RouterProvider>
20+
{children}
21+
</RouterProvider>
22+
</RunnerProvider>
23+
</FileProvider>
24+
</CodeEditorProvider>
25+
</ChatProvider>
2326
</RoomProvider>
2427
</SocketProvider>
2528
</UserContextProvider>

‎client/src/context/ChatProvider.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { createContext, useContext, useEffect, useState } from "react";
2+
import { useSocket } from "./SocketProvider";
3+
import { useRoom } from "./RoomProvider";
4+
5+
type Message = {
6+
username: string;
7+
message: string;
8+
};
9+
10+
type ChatContextType = {
11+
messages: Message[];
12+
sendMessage: (message: Message) => void;
13+
};
14+
15+
const ChatContext = createContext<ChatContextType | undefined>(undefined);
16+
17+
export const ChatProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
18+
const { socket } = useSocket();
19+
const { currentRoom } = useRoom();
20+
const [messages, setMessages] = useState<Message[]>([]);
21+
22+
console.log(messages);
23+
24+
const sendMessage = (message: Message) => {
25+
setMessages((prevMessages) => [...prevMessages, message]);
26+
socket.emit("sendMessage", { message, roomId: currentRoom }); // Replace with your socket event name
27+
};
28+
29+
// Assuming socket event to receive messages
30+
useEffect(() => {
31+
socket.on("messageReceived", (message: Message) => {
32+
setMessages((prevMessages) => [...prevMessages, message]);
33+
});
34+
35+
return () => {
36+
socket.off("messageReceived");
37+
}
38+
}, [socket]);
39+
40+
const value: ChatContextType = {
41+
messages,
42+
sendMessage,
43+
};
44+
45+
return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
46+
};
47+
48+
export const useChat = (): ChatContextType => {
49+
const context = useContext(ChatContext);
50+
if (!context) {
51+
throw new Error("useChat must be used within a ChatProvider");
52+
}
53+
return context;
54+
};

0 commit comments

Comments
 (0)