54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import type { ChatsChatid } from "~/schemas/public/Chats";
|
||
|
|
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 { api } from "~/utils/api";
|
||
|
|
import type { Session } from "~/server/api/trpc";
|
||
|
|
import { memo } from "react";
|
||
|
|
|
||
|
|
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;
|