fix: member active status in server's chat

Author: devaaravmishra

components/chat/chat-header.tsx

@@ -4,7 +4,7 @@ import MobileToggle from "@/components/mobile-toggle";
 import SocketIndicator from "@/components/socket-indicator";
 import { MemberWithProfile } from "@/types/server";
 import { Profile } from "@prisma/client";
-import UserAvatarWraper from "../user-avatar-wrapper";
+import UserAvatarWrapper from "../user-avatar-wrapper";
 import { ChatVideoButton } from "./chat-video-button";
 
 interface ChatHeaderProps {
@@ -36,10 +36,7 @@ const ChatHeader = ({
 				<Hash className="w-5 h-5 text-zinc-500 dark:text-zinc-400 mr-2" />
 			)}
 			{type === "conversation" && (
-				<UserAvatarWraper
-					imageUrl={imageUrl || ""}
-					profile={callee?.profile || ({} as Profile)}
-				/>
+				<UserAvatarWrapper profile={callee?.profile || ({} as Profile)} />
 			)}
 			<p className="font-semibold text-md text-black dark:text-white ml-2">
 				{name}

components/chat/chat-item.tsx

@@ -14,11 +14,11 @@ import { ActionTooltip } from "@/components/action-tooltip";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import UserAvatar from "@/components/user-avatar";
 import { useModal } from "@/hooks/use-modal-store";
 import { cn } from "@/utils/cn";
 import axios from "axios";
 import { useParams, useRouter } from "next/navigation";
+import UserAvatarWrapper from "../user-avatar-wrapper";
 
 interface ChatItemProps {
 	id: string;
@@ -134,7 +134,7 @@ const ChatItem = ({
 					onClick={onMemberClick}
 					className="cursor-pointer hover:drop-shadow-md transition"
 				>
-					<UserAvatar src={member.profile.imageUrl} />
+					<UserAvatarWrapper profile={member.profile} />
 				</div>
 				<div className="flex flex-col w-full">
 					<div className="flex items-center gap-x-2">

components/modals/members-modal.tsx

@@ -21,7 +21,6 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import UserAvatar from "@/components/user-avatar";
 import { useModal } from "@/hooks/use-modal-store";
 import { ServerWithMembersWithProfiles } from "@/types/server";
 
@@ -39,6 +38,7 @@ import {
 import { MemberRole } from "@prisma/client";
 import axios from "axios";
 import { useRouter } from "next/navigation";
+import UserAvatarWrapper from "../user-avatar-wrapper";
 
 const roleIcons = {
 	GUEST: null,
@@ -108,10 +108,7 @@ const MembersModal = () => {
 				<ScrollArea className="mt-8 max-h-[420px] pr-6">
 					{server?.members?.map((member) => (
 						<div key={member?.id} className="flex items-center gap-x-2 mb-6">
-							<UserAvatar
-								src={member?.profile.imageUrl}
-								isOnline={member?.profile?.isOnline}
-							/>
+							<UserAvatarWrapper profile={member?.profile} />
 							<div className="flex flex-col gap-y-1">
 								<div className="text-xs font-semibold items-center flex gap-x-1">
 									{member?.profile.name}

components/user-avatar-wrapper.tsx

@@ -4,15 +4,14 @@ import { useOnlineStatus } from "@/hooks/use-online-status";
 import { Profile } from "@prisma/client";
 import UserAvatar from "./user-avatar";
 
-interface UserAvatarWraperProps {
-	imageUrl: string;
+interface UserAvatarWrapperProps {
 	profile: Profile;
 }
 
-const UserAvatarWraper = ({ imageUrl, profile }: UserAvatarWraperProps) => {
+const UserAvatarWrapper = ({ profile }: UserAvatarWrapperProps) => {
 	const { isUserOnline } = useOnlineStatus(profile || ({} as Profile));
 
-	return <UserAvatar src={imageUrl} isOnline={isUserOnline} />;
+	return <UserAvatar src={profile?.imageUrl} isOnline={isUserOnline} />;
 };
 
-export default UserAvatarWraper;
+export default UserAvatarWrapper;