93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
/**
|
|
* @file components/chat/ChatInput.tsx
|
|
* @description Client component providing an input field to create messages via REST API.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
/**
|
|
* Props for the ChatInput component.
|
|
*
|
|
* @interface ChatInputProps
|
|
* @property {string} channelName - The name of the channel displayed in the input placeholder.
|
|
* @property {string} channelId - The ID of the channel where the message will be sent.
|
|
* @property {string} serverId - The ID of the server containing the channel.
|
|
*/
|
|
interface ChatInputProps {
|
|
channelName: string;
|
|
channelId: string;
|
|
serverId: string;
|
|
}
|
|
|
|
/**
|
|
* Renders an input field for sending chat messages within a channel.
|
|
*
|
|
* @param {ChatInputProps} props - Component properties.
|
|
* @returns {JSX.Element} The ChatInput component.
|
|
*/
|
|
export function ChatInput({
|
|
channelName,
|
|
channelId,
|
|
serverId,
|
|
}: ChatInputProps) {
|
|
const [content, setContent] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
/**
|
|
* Handles key press events, submitting the message on 'Enter' (without Shift).
|
|
*
|
|
* @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.
|
|
*/
|
|
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
|
|
if (!content.trim() || isLoading) return;
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const response = await fetch("/api/messages", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
content,
|
|
channelId,
|
|
serverId,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Error while sending");
|
|
}
|
|
|
|
setContent("");
|
|
router.refresh();
|
|
} catch (error) {
|
|
console.error("Error sending the message:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-background shrink-0">
|
|
<div className="bg-surface border border-surface rounded-lg p-2.5 flex items-center focus-within:ring-1 focus-within:ring-accent transition-all">
|
|
<input
|
|
type="text"
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
disabled={isLoading}
|
|
placeholder={`Message to #${channelName}`}
|
|
className="w-full bg-transparent outline-none text-foreground placeholder-muted text-sm disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|