add chat item component and edit delete message

components/chat/chat-item.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as z from "zod";
+import axios from "axios";
+import qs from "query-string";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { Member, MemberRole, Profile } from "@prisma/client";
+import { UserAvatar } from "@/components/user-avatar";
+import { ActionTooltip } from "@/components/action-tooltip";
+import { Edit, FileIcon, ShieldAlert, ShieldCheck, Trash } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useModal } from "@/hooks/use-modal-store";
+
+interface ChatItemProps {
+    id: string;
+    content: string;
+    member: Member & {
+        profile: Profile;
+    };
+    timestamp: string
+    fileUrl: string | null;
+    deleted: boolean;
+    currentMember: Member;
+    isUpdated: boolean;
+    socketUrl: string;
+    socketQuery: Record<string, string>;
+}
+
+const roleIconMap = {
+    "GUEST": null,
+    "MODERATOR": <ShieldCheck className="h-4 w-4 ml-2 text-indigo-500"/>,
+    "ADMIN": <ShieldAlert className="h-4 w-4 ml-2 text-rose-500"/>,
+}
+
+const formSchema = z.object({
+    content: z.string().min(1),
+})
+
+export const ChatItem = ({
+    id,
+    content,
+    member,
+    timestamp,
+    fileUrl,
+    deleted,
+    currentMember,
+    isUpdated,
+    socketUrl,
+    socketQuery,
+}: ChatItemProps) => {
+    const [isEditing, setIsEditing] = useState(false); 
+    const { onOpen } = useModal();
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape" || event.keyCode === 27) {
+                setIsEditing(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            content: content
+        }
+    });
+
+    const isLoading = form.formState.isSubmitting;
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        try {
+            const url = qs.stringifyUrl({
+                url: `${socketUrl}/${id}`,
+                query: socketQuery,
+            });
+
+            await axios.patch(url, values);
+
+            form.reset();
+            setIsEditing(false);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    useEffect(() => {
+        form.reset({
+            content: content,
+        })        
+    }, [content]);
+
+    const filetype = fileUrl?.split(".").pop();
+
+    const isAdmin = currentMember.role === MemberRole.ADMIN;
+    const isModerator = currentMember.role === MemberRole.MODERATOR;
+    const isOwner = currentMember.id === member.id;
+    const canDeleteMessage = !deleted && (isAdmin || isModerator || isOwner);
+    const canEditMessage = !deleted && isOwner && !fileUrl;
+    const isPDF = filetype == "pdf" && fileUrl;
+    const isImage = !isPDF && fileUrl;
+
+
+    return (
+        <div className="relative group flex items-center hover:bg-black/5 p-4 transition w-full">
+            <div className="group flex gap-x-2 items-start w-full">
+                <div className="cursor-pointer hover:drop-shadow-md transition">
+                    <UserAvatar src={member.profile.imageUrl}/>
+                </div>
+                <div className="flex flex-col w-full">
+                    <div className="flex items-center gap-x-2">
+                        <div className="flex items-center">
+                            <p className="font-semibold text-sm hove:underline cursor-pointer">
+                                {member.profile.name}
+                            </p>
+                            <ActionTooltip label={member.role}>
+                                {roleIconMap[member.role]}
+                            </ActionTooltip>
+                        </div>
+                        <span className="text-xs text-zinc-500 dark:text-zinc-400">
+                            {timestamp}
+                        </span>
+                    </div>
+                    {isImage && (
+                        <a
+                            href={fileUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="relative aspect-square rounded-md mt-2 overflow-hidden border flex items-center bg-secondary h-48 w-48"
+                        >
+                            <Image
+                             src={fileUrl}
+                             alt={content}
+                             fill
+                             className="object-cover"
+                            />
+                        </a>
+                    )}
+                    {isPDF && (
+                        <div className="relative flex items-center p-2 mt-2 rounded-md bg-background/10">
+                            <FileIcon className="h-10 w-10 fill-indigo-200 stroke-indigo-400 "/>
+                            <a
+                                href={fileUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="ml-2 text-sm text-indigo-500 dark:text-indigo-400 hover:underline"
+                            >
+                                PDF File
+                            </a>
+                        </div>
+                    )}
+                    {!fileUrl && !isEditing && (
+                        <p className={cn(
+                            "text-sm text-zinc-600 dark:text-zinc-300",
+                            deleted && "italic text-zinc-500 dark:text-zinc-400 text-xs mt-1"
+                        )}>
+                            {content}
+                            {isUpdated && (
+                                <span className="text-[10px] ml-2 text-zinc-500 dark:text-zinc-400">
+                                    (edited)
+                                </span>                            
+                            )}
+                        </p>                    
+                    )}
+                    {!fileUrl && isEditing && (
+                        <Form {...form}>
+                            <form 
+                                className="flex items-center w-full gap-x-2 pt-2"                            
+                                onSubmit={form.handleSubmit(onSubmit)}>
+                                    <FormField
+                                        control={form.control}
+                                        name="content"
+                                        render={({ field }) => (
+                                            <FormItem className="flex-1">
+                                                <FormControl>
+                                                    <div className="relative w-full">
+                                                        <Input
+                                                            disabled={isLoading}
+                                                            className="p-2 bg-zinc-200/90 dark:bg-zinc-700/75 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-zinc-600 dark:text-zinc-200"
+                                                            placeholder="Edited message"
+                                                            {...field}
+                                                        />
+                                                    </div>
+                                                </FormControl>
+
+                                            </FormItem>
+                                        )}
+                                />
+                                <Button disabled={isLoading} size="sm" variant="primary">
+                                    Save
+                                </Button>
+                            </form>
+                            <span className="text-[10px] mt-1 text-zinc-400">
+                                Press escape to cancel, enter to save
+
+                            </span>
+                        </Form>
+                    )}
+                </div>
+            </div>
+            {canDeleteMessage && (
+                <div className="hidden group-hover:flex items-center gap-x-2 absolute p-1 -top-2 right-5 bg-white dark:bg-zinc-800 border rounded-sm">
+                    {canEditMessage && (
+                        <ActionTooltip label="Edit">
+                            <Edit
+                                onClick={() => setIsEditing(true)}
+                                className="cursor-pointer ml-auto w-4 h-4 text-zinc-500 hover:text-zinc-600 dark:hove:text-zinc-300 transition"
+                            />
+
+                        </ActionTooltip>
+                    )}
+                    <ActionTooltip label="Delete">
+                        <Trash
+                            onClick={() => onOpen("deleteMessage", {
+                                apiUrl: `${socketUrl}/${id}`,
+                                query: socketQuery,
+                             })}
+                            className="cursor-pointer ml-auto w-4 h-4 text-zinc-500 hover:text-zinc-600 dark:hove:text-zinc-300 transition"
+                        />
+
+                    </ActionTooltip>
+                </div>
+            )}
+        </div>
+    )
+}

components/chat/chat-messages.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import { Member, Message, Profile } from "@prisma/client";
+import { format } from "date-fns"
 
 import { ChatWelcome } from "./chat-welcome";
 import { useChatQuery } from "@/hooks/use-chat-query";
 import { Loader2, ServerCrash } from "lucide-react";
 import { Fragment } from "react";
+import { ChatItem } from "./chat-item";
+
+const DATE_FORMAT = "d MMM yyyy, HH:mm";
 
 type MessageWithMemberWithProfile = Message & {
     member: Member & {
@@ -84,9 +88,20 @@ export const ChatMessages = ({
                 {data?.pages.map((group, i) => (
                     <Fragment key={i}>
                         {group.items.map((message: MessageWithMemberWithProfile) => (
-                            <div key={message.id}>
+                            <ChatItem 
-                                {message.content}
+                                key={message.id}
-                            </div>
+                                id={message.id}                                
+                                currentMember={member}
+                                member={message.member}
+                                content={message.content}
+                                fileUrl={message.fileUrl}
+                                deleted={message.deleted}
+                                timestamp={format(new Date(message.createdAt), DATE_FORMAT)}  
+                                isUpdated={message.updatedAt !== message.createdAt}
+                                socketUrl={socketUrl}
+                                socketQuery={socketQuery}                                                      
+                                
+                            />
                         ))}
                     </Fragment>          
                 ))}

components/modals/delete-message-modal.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import qs from "query-string";
+import axios from "axios";
+import { useState } from "react";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { useModal } from "@/hooks/use-modal-store";
+import { Button } from "@/components/ui/button";
+
+
+export const DeleteMessageModal = () => {
+    const { isOpen, onClose, type, data } = useModal();
+
+    const isModalOpen = isOpen && type === "deleteMessage";
+    const { apiUrl, query } = data;
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const onClick = async () => 
+    {
+        try 
+        {
+            setIsLoading(true);
+
+            const url = qs.stringifyUrl({
+                url: apiUrl || "",
+                query,
+            })
+
+            await axios.delete(url);
+
+            onClose();
+        } 
+        catch (error) 
+        {
+            console.log(error);
+        } 
+        finally 
+        {
+            setIsLoading(false);
+            onClose();
+        }
+    }
+
+    return (
+        <Dialog open={isModalOpen} onOpenChange={onClose}>
+            <DialogContent className="bg-white text-black p-0 overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center font-bold">
+                        Delete Message
+                    </DialogTitle>
+                    <DialogDescription className="text-center text-zinc-500">
+                        Are you sure you want to do this? <br/>
+                        The message will be permenantly deleted.
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="bg-gray-100 px-6 py-4">
+                    <div className="flex items-center justify-between w-full">
+                        <Button disabled={isLoading} onClick={onClose} variant="ghost">
+                            Cancel
+                        </Button>
+                        <Button disabled={isLoading} onClick={onClick} variant="primary">
+                            Confirm
+                        </Button>
+                    </div>
+
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/providers/modal-provider.tsx

@@ -12,6 +12,7 @@ import { DeleteServerModal } from "@/components/modals/delete-server-modal";
 import { DeleteChannelModal } from "@/components/modals/delete-channel-modal";
 import { EditChannelModal } from "@/components/modals/edit-channel-modal";
 import { MessageFileModal } from "@/components/modals/message-file-modal.tsx";
+import { DeleteMessageModal } from "@/components/modals/delete-message-modal";
 
 export const ModalProvider = () => {
     const [isMounted, setIsMounted] = useState(false);
@@ -36,6 +37,7 @@ export const ModalProvider = () => {
             <DeleteChannelModal/>
             <EditChannelModal/>
             <MessageFileModal/>
+            <DeleteMessageModal/>
         </>
     )
 }

hooks/use-modal-store.ts

@@ -2,7 +2,7 @@
 import { Channel, ChannelType, Server } from "@prisma/client";
 import { create } from "zustand";
 
-export type ModalType = "createServer" | "invite" | "editServer" | "members" | "createChannel" | "leaveServer" | "deleteServer" | "deleteChannel" | "editChannel" | "messageFile";
+export type ModalType = "createServer" | "invite" | "editServer" | "members" | "createChannel" | "leaveServer" | "deleteServer" | "deleteChannel" | "editChannel" | "messageFile" | "deleteMessage";
 
 interface ModalData {
     server?: Server;

pages/api/socket/messages/[messageId].ts

@@ -0,0 +1,143 @@
+import { currentProfilePages } from "@/lib/current-profile-pages";
+import { db } from "@/lib/db";
+import { NextApiResponseServerIo } from "@/types";
+import { MemberRole } from "@prisma/client";
+import { NextApiRequest } from "next";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponseServerIo) {
+    if (req.method !== "DELETE" && req.method !== "PATCH") {
+        return res.status(405).json({ error: "Method not allowed" });
+    }
+
+    try {
+        const profile = await currentProfilePages(req);
+        const { serverId, channelId, messageId } = req.query;
+        const { content } = req.body;
+
+        if (!profile) {
+            return res.status(401).json({ error: "Unauthorized" });
+        }
+
+        if (!serverId) {
+            return res.status(400).json({ error: "Server ID Missing" });
+        }
+
+        if (!channelId) {
+            return res.status(400).json({ error: "Channel ID Missing" });
+        }
+
+        const server= await db.server.findFirst({
+            where: {
+                id: serverId as string,
+                members: {
+                    some: {
+                        profileId: profile.id
+                    }
+                },
+            },
+            include: {
+                members: true
+            }
+        });
+
+        if (!server) {
+            return res.status(404).json({ error: "Server not found" });
+        }
+
+        const channel = await db.channel.findFirst({
+            where: {
+                id: channelId as string,
+                serverId: server.id,
+            },
+        });
+
+        if (!channel) {
+            return res.status(404).json({ error: "Channel not found" });
+        }
+
+        const member = server.members.find((member) => member.profileId === profile.id);
+
+        if (!member) {
+            return res.status(404).json({ error: "Member not found" });
+        }
+
+        let message = await db.message.findFirst({
+            where: {
+                id: messageId as string,
+                channelId: channel.id,
+            },
+            include: {
+                member: {
+                    include: {
+                        profile: true,
+                    }
+                }
+            }
+        });
+
+        if (!message || message.deleted) {
+            return res.status(404).json({ error: "Message not found" });
+        }
+
+        const isMessageOwner = message.memberId === member.id;
+        const isAdmin = member.role === MemberRole.ADMIN;
+        const isModerator = member.role === MemberRole.MODERATOR;
+        const canModify = isMessageOwner || isAdmin || isModerator;
+
+        if (!canModify) {
+            return res.status(401).json({ error: "Unauthorized" });
+        }
+
+        if (req.method === "DELETE") {
+            message = await db.message.update({
+                where: {
+                    id: messageId as string,
+                },
+                data: {
+                    fileUrl: null,
+                    content: "This message has been deleted.",
+                    deleted: true,
+                },
+                include: {
+                    member: {
+                        include: {
+                            profile: true,
+                        }
+                    }
+                }
+            });
+        }
+
+        if (req.method === "PATCH") {
+            if (!isMessageOwner) {
+                return res.status(401).json({ error: "Unauthorized" });
+            }
+
+            message = await db.message.update({
+                where: {
+                    id: messageId as string,
+                },
+                data: {
+                    content,
+                },
+                include: {
+                    member: {
+                        include: {
+                            profile: true,
+                        }
+                    }
+                }
+            });
+        }
+
+        const updateKey = `chat:${channelId}:messages:update`;
+
+        res?.socket?.server?.io?.to(updateKey).emit(updateKey, message);
+
+        return res.status(200).json(message);
+        
+    } catch (error) {
+        console.error(error);
+        return res.status(500).json({ error: "Internal Error" });
+    }
+}