Chneemann/waveform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(chat): add PATCH /api/messages/[messageId] endpoint and message inline editing UI

Browse source
This commit is contained in:
Chneemann 2026-08-31 09:24:37 +02:00
parent 4f49caf1f1
commit e610b6c9db
No known key found for this signature in database
3 changed files with 204 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
app/api/messages/[messageId]/route.ts
View file

@ -1,6 +1,6 @@
/**
* @file app/api/messages/[messageId]/route.ts
* @description API route handler for deleting a specific message.
* @description API route handlers for deleting and updating individual chat messages.
*/
import { auth } from "@/auth";
@ -48,7 +48,7 @@ export async function DELETE(
return NextResponse.json({ error: "Message not found" }, { status: 404 });
}
// Check permissions (Is the user the creator of the message?)
// Check Permissions
if (existingMessage.userId !== session.user.id) {
return NextResponse.json(
{ error: "You do not have permission to delete this message" },
@ -56,7 +56,7 @@ export async function DELETE(
);
}
// 3. Nachricht löschen
// Delete message
await db.delete(messages).where(eq(messages.id, messageId));
return NextResponse.json({ success: true });
@ -68,3 +68,79 @@ export async function DELETE(
);
}
}
/**
* Handles the PATCH request to update the content of a specific message by its ID.
* Verifies user authentication, request body content, and ensures the user owns the message before updating.
*
* @async
* @function PATCH
* @param {Request} req - The incoming HTTP request object containing the updated message content.
* @param {Object} context - The route context.
* @param {Promise<{ messageId: string }>} context.params - A promise resolving to the route parameters containing the message ID.
* @returns {Promise<NextResponse>} JSON response containing the updated message object or an error message with appropriate HTTP status codes.
*/
export async function PATCH(
req: Request,
{ params }: { params: Promise<{ messageId: string }> },
) {
try {
const { messageId } = await params;
const session = await auth();
if (!session?.user?.id) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const { content } = await req.json();
if (!content?.trim()) {
return NextResponse.json(
{ error: "The content cannot be empty" },
{ status: 400 },
);
}
// Check Message and Owner
const [existingMessage] = await db
.select({
id: messages.id,
memberId: messages.memberId,
userId: members.userId,
})
.from(messages)
.innerJoin(members, eq(messages.memberId, members.id))
.where(eq(messages.id, messageId))
.limit(1);
if (!existingMessage) {
return NextResponse.json({ error: "Message not found" }, { status: 404 });
}
// Check Permissions
if (existingMessage.userId !== session.user.id) {
return NextResponse.json(
{ error: "You do not have permission to edit this message" },
{ status: 403 },
);
}
// Update message
const [updatedMessage] = await db
.update(messages)
.set({
content: content.trim(),
updatedAt: new Date(),
})
.where(eq(messages.id, messageId))
.returning();
return NextResponse.json(updatedMessage);
} catch (error) {
console.error("API Message PATCH error:", error);
return NextResponse.json(
{ error: "Internal Server Error" },
{ status: 500 },
);
}
}

2
app/api/messages/route.ts
View file

@ -58,6 +58,8 @@ export async function POST(req: Request) {
content: content.trim(),
channelId,
memberId: member.id,
createdAt: new Date(),
updatedAt: new Date(),
})
.returning();

145
components/chat/ChatItem.tsx
View file

@ -1,6 +1,6 @@
/**
* @file components/chat/ChatItem.tsx
* @description Single message row component with support for user avatars, metadata, and deletion handling.
* @description Single message row component supporting inline editing, deletion, and user association details.
*/
"use client";
@ -9,7 +9,7 @@ import type { Message, Member, User } from "@/db/schema";
import { UserAvatar } from "../ui/UserAvatar";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Trash2 } from "lucide-react";
import { Check, Pencil, Trash2, X } from "lucide-react";
/**
* Composite message type extending base database Message with populated member and user relation.
@ -18,6 +18,7 @@ import { Trash2 } from "lucide-react";
* @property {string} id - The unique identifier of the message.
* @property {string} content - The text content of the message.
* @property {string} createdAt - The timestamp when the message was created.
* @property {string} [updatedAt] - The timestamp when the message was last updated.
* @property {Member & { user: User }} member - The associated member and user relational data.
*/
export type MessageWithMember = Message & {
@ -39,7 +40,8 @@ interface ChatItemProps {
}
/**
* Renders an individual chat message row displaying user avatar, sender name, timestamp, and text content.
* Renders an individual chat message row displaying user avatar, sender name, timestamp,
* edited indicator, and inline editing or deletion capabilities.
*
* @async
* @param {ChatItemProps} props - The component props.
@ -50,10 +52,17 @@ interface ChatItemProps {
export function ChatItem({ message, currentUserId }: ChatItemProps) {
const router = useRouter();
const [isDeleting, setIsDeleting] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const [content, setContent] = useState(message.content);
const [isLoading, setIsLoading] = useState(false);
const user = message.member?.user;
const fullName = user ? user.username.trim() : "Deleted Member";
const isOwner = user?.id === currentUserId;
const isUpdated =
message.updatedAt &&
new Date(message.updatedAt).getTime() >
new Date(message.createdAt).getTime();
const formattedTime = new Date(message.createdAt).toLocaleTimeString(
"de-DE",
@ -64,11 +73,11 @@ export function ChatItem({ message, currentUserId }: ChatItemProps) {
);
/**
* Handles the asynchronous deletion of the chat message.
* Handles the asynchronous deletion of the chat message via API.
*
* @async
* @function handleDelete
* @returns {Promise<void>} Resolves when the deletion process completes or fails.
* @returns {Promise<void>} Resolves when the deletion completes or fails.
*/
const handleDelete = async () => {
if (isDeleting) return;
@ -80,7 +89,7 @@ export function ChatItem({ message, currentUserId }: ChatItemProps) {
});
if (!response.ok) {
throw new Error("Error while deleting");
throw new Error("Failed to delete message");
}
router.refresh();
@ -91,12 +100,58 @@ export function ChatItem({ message, currentUserId }: ChatItemProps) {
}
};
/**
* Handles the asynchronous update of the chat message content via API.
*
* @async
* @function handleEdit
* @returns {Promise<void>} Resolves when the message update completes or fails.
*/
const handleEdit = async () => {
if (!content.trim() || isLoading) return;
try {
setIsLoading(true);
const response = await fetch(`/api/messages/${message.id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ content }),
});
if (!response.ok) {
throw new Error("Failed to update message");
}
setIsEditing(false);
router.refresh();
} catch (error) {
console.error("Error editing the message:", error);
} finally {
setIsLoading(false);
}
};
/**
* Handles keyboard events during inline editing (Enter to save, Escape to cancel).
*
* @function handleKeyDown
* @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event object.
* @returns {void}
*/
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
e.preventDefault();
handleEdit();
} else if (e.key === "Escape") {
setIsEditing(false);
setContent(message.content);
}
};
return (
<div className="flex items-start gap-3 group p-2 rounded-xl hover:bg-surface transition-colors">
{/* Avatar Component */}
<UserAvatar user={user} size="md" />
{/* Message Content & Top Bar */}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<div className="flex items-baseline gap-2 min-w-0">
@ -104,25 +159,71 @@ export function ChatItem({ message, currentUserId }: ChatItemProps) {
{fullName}
</span>
<span className="text-xs text-muted shrink-0">{formattedTime}</span>
{isUpdated && (
<span className="text-[10px] text-muted shrink-0">(edited)</span>
)}
</div>
{/* Delete Button */}
{isOwner && (
<button
type="button"
onClick={handleDelete}
disabled={isDeleting}
className="opacity-0 group-hover:opacity-100 p-1 text-muted hover:text-red-400 focus:outline-none transition-all cursor-pointer shrink-0 disabled:opacity-50"
aria-label="Delete message"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
{/* Action Buttons */}
{isOwner && !isEditing && (
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-all">
<button
type="button"
onClick={() => setIsEditing(true)}
className="p-1 text-muted hover:text-foreground focus:outline-none transition-all cursor-pointer shrink-0"
aria-label="Edit Message"
>
<Pencil className="w-3.5 h-3.5" />
</button>
<button
type="button"
onClick={handleDelete}
disabled={isDeleting}
className="p-1 text-muted hover:text-red-400 focus:outline-none transition-all cursor-pointer shrink-0 disabled:opacity-50"
aria-label="Delete message"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
</div>
)}
</div>
<p className="text-foreground text-sm leading-relaxed wrap-break-words mt-0.5">
{message.content}
</p>
{/* Inline Edit Input vs. Regular Content */}
{isEditing ? (
<div className="mt-1 flex items-center gap-2">
<input
type="text"
value={content}
onChange={(e) => setContent(e.target.value)}
onKeyDown={handleKeyDown}
disabled={isLoading}
className="w-full bg-background border border-surface rounded px-2 py-1 text-sm text-foreground outline-none focus:ring-1 focus:ring-accent"
autoFocus
/>
<button
type="button"
onClick={handleEdit}
disabled={isLoading}
className="p-1 text-muted hover:text-foreground cursor-pointer"
>
<Check className="w-4 h-4" />
</button>
<button
type="button"
onClick={() => {
setIsEditing(false);
setContent(message.content);
}}
className="p-1 text-muted hover:text-foreground cursor-pointer"
>
<X className="w-4 h-4" />
</button>
</div>
) : (
<p className="text-foreground text-sm leading-relaxed wrap-break-words mt-0.5">
{message.content}
</p>
)}
</div>
</div>
);