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

83 lines
2.5 KiB
TypeScript

/**
* @file app/(app)/servers/[serverId]/channels/[channelId]/page.tsx
* @description Dynamic server channel page component performing authentication, parameter validation, parallel data fetching, and rendering the chat layout.
*/
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";
/**
* Regular expression for validating UUID string formats.
*
* @type {RegExp}
*/
const UUID_REGEX =
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
/**
* Renders the channel chat view by validating parameters, checking user session, fetching channel data, and displaying headers, messages, and input controls.
*
* @async
* @function ChannelPage
* @param {Object} props - The component props containing route parameters.
* @param {Promise<{ serverId: string; channelId: string }>} props.params - Route parameters containing server and channel identifiers.
* @returns {Promise<JSX.Element>} The rendered channel page layout.
*/
export default async function ChannelPage({
params,
}: {
params: Promise<{ serverId: string; channelId: string }>;
}) {
const { serverId, channelId } = await params;
// 1. Check the UUID format for BOTH parameters
if (!UUID_REGEX.test(serverId) || !UUID_REGEX.test(channelId)) {
redirect("/");
}
// 2. Auth Guard
const session = await auth();
if (!session?.user?.id) {
redirect("/login");
}
// 3. Parallel Loading of Data
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 min-h-0 overflow-hidden">
<AppHeader
title={channel.name}
showMembersButton
server={{ id: server.id, name: server.name }}
/>
<ChatMessages
type="chat"
name={channel.name}
initialMessages={channelMessages}
currentUserId={session?.user?.id}
/>
<ChatInput
type="chat"
serverId={server.id}
channelId={channel.id}
placeholderName={channel.name}
/>
</div>
);
}