infoalloggi-monorepo/apps/infoalloggi/src/components/chat/chat.tsx

"use client";

import { memo } from "react";
import ChatBottombar from "~/components/chat/chat-bottombar";
import { ChatList } from "~/components/chat/chat-list";
import ChatTopbar from "~/components/chat/chat-topbar";
import { useLiveChat } from "~/hooks/chatHooks";
import type { ChatsChatid } from "~/schemas/public/Chats";
import type { Session } from "~/server/api/trpc";
import { api } from "~/utils/api";

const Chat = memo(
	({ chatId, userData }: { chatId: ChatsChatid; userData: Session }) => {
		const liveChat = useLiveChat(chatId, userData);
		const [userinfo] = api.chat.getUserInfosByChat.useSuspenseQuery({
			chatId,
		});

		return (
			<div className="flex h-full w-full flex-col justify-between">
				<div className="shrink-0">
					<ChatTopbar
						chatId={chatId}
						userData={userData}
						chatUserData={userinfo}
						onlineStatus={liveChat.onlineUsers}
					/>
				</div>
				<ChatList
					chatId={chatId}
					userData={userData}
					messages={liveChat.messages}
					query={liveChat.query}
					typingStatus={liveChat.typingStatus}
				/>

				<div className="shrink-0 border-t">
					<ChatBottombar
						chatId={chatId}
						userData={userData}
						chatUserData={userinfo}
					/>
				</div>
			</div>
		);
	},
	(prevProps, nextProps) =>
		prevProps.chatId === nextProps.chatId &&
		prevProps.userData.id === nextProps.userData.id,
);
Chat.displayName = "Chat";

export default Chat;