add chat item component and edit delete message
This commit is contained in:
parent
952f93cab0
commit
5da047a274
242
components/chat/chat-item.tsx
Normal file
242
components/chat/chat-item.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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}>
|
||||
{message.content}
|
||||
</div>
|
||||
<ChatItem
|
||||
key={message.id}
|
||||
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>
|
||||
))}
|
||||
|
||||
79
components/modals/delete-message-modal.tsx
Normal file
79
components/modals/delete-message-modal.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -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;
|
||||
|
||||
143
pages/api/socket/messages/[messageId].ts
Normal file
143
pages/api/socket/messages/[messageId].ts
Normal file
@ -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" });
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user