waveform/app/(app)/servers/[serverId]/channels/[channelId]/page.tsx

64 lines
2 KiB
TypeScript

/**
* @file app/servers/[serverId]/channels/[channelId]/page.tsx
* @description Dynamic page component for displaying a specific channel within a server, including its messages and chat input.
*/
import { auth } from "@/auth";
import { redirect } from "next/navigation";
import { AppHeader } from "@/components/layout/AppHeader";
import { ChatInput } from "@/components/chat/ChatInput";
import { ChatMessages } from "@/components/chat/ChatMessages";
import { getChannelById } from "@/lib/services/channel.service";
import { getChannelMessages } from "@/lib/services/message.service";
import { getServerById } from "@/lib/services/server.service";
/**
* Renders the channel view by fetching server, channel, and message details in parallel based on route parameters.
*
* @async
* @param {Object} props - The component props.
* @param {Promise<{ serverId: string; channelId: string }>} props.params - A promise resolving to the route parameters containing serverId and channelId.
* @returns {Promise<JSX.Element>} The rendered channel page interface.
*/
export default async function ChannelPage({
params,
}: {
params: Promise<{ serverId: string; channelId: string }>;
}) {
const session = await auth();
const { serverId, channelId } = await params;
// Parallel loading of server, channel, and messages
const [server, channel, channelMessages] = await Promise.all([
getServerById(serverId),
getChannelById(channelId),
getChannelMessages(channelId),
]);
if (!channel || !server) redirect("/");
return (
<div className="flex p-4 flex-col h-full bg-background">
{/* Header */}
<AppHeader
title={channel.name}
showMembersButton
server={{ id: server.id, name: server.name }}
/>
{/* Messages Feed */}
<ChatMessages
channelName={channel.name}
messages={channelMessages}
currentUserId={session?.user?.id}
/>
{/* Input Field */}
<ChatInput
serverId={server.id}
channelId={channel.id}
channelName={channel.name}
/>
</div>
);
}