47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
/**
|
|
* @file app/servers/[serverId]/channels/[channelId]/page.tsx
|
|
* @description Page component for viewing a specific channel and its messages.
|
|
*/
|
|
|
|
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";
|
|
|
|
/**
|
|
* Server component that fetches and renders a channel's details and message feed based on route parameters.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {Promise<{ channelId: string }>} props.params - Async route parameters containing the channel ID.
|
|
* @returns {Promise<JSX.Element>} The rendered channel page view or triggers a 404 notFound error.
|
|
*/
|
|
export default async function ChannelPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ channelId: string }>;
|
|
}) {
|
|
const { channelId } = await params;
|
|
|
|
// Parallel loading of channel data and messages
|
|
const [channel, channelMessages] = await Promise.all([
|
|
getChannelById(channelId),
|
|
getChannelMessages(channelId),
|
|
]);
|
|
|
|
if (!channel) redirect("/");
|
|
|
|
return (
|
|
<div className="flex p-4 flex-col h-full bg-background">
|
|
{/* Header */}
|
|
<AppHeader title={channel.name} showMembersButton />
|
|
|
|
{/* Messages Feed */}
|
|
<ChatMessages channelName={channel.name} messages={channelMessages} />
|
|
|
|
{/* Input Field */}
|
|
<ChatInput />
|
|
</div>
|
|
);
|
|
}
|