3- getGroupMembers query added

convex/users.ts

@@ -103,4 +103,26 @@ export const getMe = query({
 	},
 });
 
-// TODO: add getGroupMembers query -- later
+export const getGroupMembers = query({
+	args: { conversationId: v.id("conversations") },
+	handler: async (ctx, args) => {
+		const identity = await ctx.auth.getUserIdentity();
+
+		if (!identity) {
+			throw new ConvexError("Unauthorized");
+		}
+
+		const conversation = await ctx.db
+			.query("conversations")
+			.filter((q) => q.eq(q.field("_id"), args.conversationId))
+			.first();
+		if (!conversation) {
+			throw new ConvexError("Conversation not found");
+		}
+
+		const users = await ctx.db.query("users").collect();
+		const groupMembers = users.filter((user) => conversation.participants.includes(user._id));
+
+		return groupMembers;
+	},
+});

package.json

@@ -26,7 +26,8 @@
     "react-hot-toast": "^2.4.1",
     "svix": "^1.21.0",
     "tailwind-merge": "^2.2.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/home/conversation.tsx

@@ -4,18 +4,26 @@ import { MessageSeenSvg } from "@/lib/svgs";
 import { ImageIcon, Users, VideoIcon } from "lucide-react";
 import { useQuery } from "convex/react";
 import { api } from "../../../convex/_generated/api";
+import { useConversationStore } from "@/store/chat-store";
 
 const Conversation = ({ conversation }: { conversation: any }) => {
 	const conversationImage = conversation.groupImage || conversation.image;
 	const conversationName = conversation.groupName || conversation.name;
 	const lastMessage = conversation.lastMessage;
 	const lastMessageType = lastMessage?.messageType;
 	const me = useQuery(api.users.getMe);
-	//
+
+	const { setSelectedConversation, selectedConversation } = useConversationStore();
+	const activeBgClass = selectedConversation?._id === conversation._id;
 
 	return (
 		<>
-			<div className={`flex gap-2 items-center p-3 hover:bg-chat-hover cursor-pointer `}>
+			<div
+				className={`flex gap-2 items-center p-3 hover:bg-chat-hover cursor-pointer
+					${activeBgClass ? "bg-gray-tertiary" : ""}
+				`}
+				onClick={() => setSelectedConversation(conversation)}
+			>
 				<Avatar className='border border-gray-900 overflow-visible relative'>
 					{conversation.isOnline && (
 						<div className='absolute top-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-foreground' />

src/components/home/group-members-dialog.tsx

@@ -1,4 +1,3 @@
-import { users } from "@/dummy-data/db";
 import {
 	Dialog,
 	DialogContent,
@@ -9,8 +8,16 @@ import {
 } from "@/components/ui/dialog";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Crown } from "lucide-react";
+import { Conversation } from "@/store/chat-store";
+import { useQuery } from "convex/react";
+import { api } from "../../../convex/_generated/api";
 
-const GroupMembersDialog = () => {
+type GroupMembersDialogProps = {
+	selectedConversation: Conversation;
+};
+
+const GroupMembersDialog = ({ selectedConversation }: GroupMembersDialogProps) => {
+	const users = useQuery(api.users.getGroupMembers, { conversationId: selectedConversation._id });
 	return (
 		<Dialog>
 			<DialogTrigger>
@@ -39,7 +46,9 @@ const GroupMembersDialog = () => {
 												{/* [email protected] */}
 												{user.name || user.email.split("@")[0]}
 											</h3>
-											{user.admin && <Crown size={16} className='text-yellow-400' />}
+											{user._id === selectedConversation.admin && (
+												<Crown size={16} className='text-yellow-400' />
+											)}
 										</div>
 									</div>
 								</div>

src/components/home/right-panel.tsx

@@ -5,13 +5,14 @@ import MessageInput from "./message-input";
 import MessageContainer from "./message-container";
 import ChatPlaceHolder from "@/components/home/chat-placeholder";
 import GroupMembersDialog from "./group-members-dialog";
+import { useConversationStore } from "@/store/chat-store";
 
 const RightPanel = () => {
-	const selectedConversation = true;
+	const { selectedConversation, setSelectedConversation } = useConversationStore();
 	if (!selectedConversation) return <ChatPlaceHolder />;
 
-	const conversationName = "John Doe";
-	const isGroup = true;
+	const conversationName = selectedConversation.groupName || selectedConversation.name;
+	const conversationImage = selectedConversation.groupImage || selectedConversation.image;
 
 	return (
 		<div className='w-3/4 flex flex-col'>
@@ -20,22 +21,24 @@ const RightPanel = () => {
 				<div className='flex justify-between bg-gray-primary p-3'>
 					<div className='flex gap-3 items-center'>
 						<Avatar>
-							<AvatarImage src={"/placeholder.png"} className='object-cover' />
+							<AvatarImage src={conversationImage || "/placeholder.png"} className='object-cover' />
 							<AvatarFallback>
 								<div className='animate-pulse bg-gray-tertiary w-full h-full rounded-full' />
 							</AvatarFallback>
 						</Avatar>
 						<div className='flex flex-col'>
 							<p>{conversationName}</p>
-							{isGroup && <GroupMembersDialog />}
+							{selectedConversation.isGroup && (
+								<GroupMembersDialog selectedConversation={selectedConversation} />
+							)}
 						</div>
 					</div>
 
 					<div className='flex items-center gap-7 mr-5'>
 						<a href='/video-call' target='_blank'>
 							<Video size={23} />
 						</a>
-						<X size={16} className='cursor-pointer' />
+						<X size={16} className='cursor-pointer' onClick={() => setSelectedConversation(null)} />
 					</div>
 				</div>
 			</div>

src/store/chat-store.ts

@@ -0,0 +1,30 @@
+import { Id } from "../../convex/_generated/dataModel";
+import { create } from "zustand";
+
+export type Conversation = {
+	_id: Id<"conversations">;
+	image?: string;
+	participants: Id<"users">[];
+	isGroup: boolean;
+	name?: string;
+	groupImage?: string;
+	groupName?: string;
+	admin?: Id<"users">;
+	isOnline?: boolean;
+	lastMessage?: {
+		_id: Id<"messages">;
+		conversation: Id<"conversations">;
+		content: string;
+		sender: Id<"users">;
+	};
+};
+
+type ConversationStore = {
+	selectedConversation: Conversation | null;
+	setSelectedConversation: (conversation: Conversation | null) => void;
+};
+
+export const useConversationStore = create<ConversationStore>((set) => ({
+	selectedConversation: null,
+	setSelectedConversation: (conversation) => set({ selectedConversation: conversation }),
+}));