69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { useContext, useState } from 'react';
|
|
import { Trash2 } from 'lucide-react';
|
|
import AttachmentPreview from './AttachmentPreview.tsx';
|
|
import { ChatMessagesProps } from '@/types/types.ts';
|
|
import { useChat } from '@/context/chat/useChat.ts';
|
|
import { AuthContext } from '@/utils/AuthProvider.tsx';
|
|
|
|
type AnimatedMessageProps = {
|
|
message: ChatMessagesProps;
|
|
onDelete: (messageId: number) => void;
|
|
};
|
|
|
|
const AnimatedMessage = ({ onDelete, message }: AnimatedMessageProps) => {
|
|
const { user } = useContext(AuthContext);
|
|
const { me, groupOwner } = useChat();
|
|
const [isRemoving, setIsRemoving] = useState(false);
|
|
|
|
const handleDelete = () => {
|
|
setIsRemoving(true);
|
|
setTimeout(() => {
|
|
onDelete(message.message_id);
|
|
}, 300);
|
|
};
|
|
|
|
return (
|
|
<li
|
|
className={` whitespace-pre-wrap ml-2 rounded-lg p-1 group hover:bg-zinc-900
|
|
${isRemoving ? 'transition-all duration-300 opacity-0 -translate-x-full' : 'opacity-100'}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<span
|
|
title={`${new Intl.DateTimeFormat('en-GB', {
|
|
timeStyle: 'medium',
|
|
dateStyle: 'short',
|
|
})?.format(message.sent_at)}`}
|
|
>
|
|
{message.sender}: {message.message}
|
|
</span>
|
|
{message.attachment_urls && (
|
|
<div className="mt-2 flex flex-col gap-2">
|
|
{message.attachment_urls.length > 0
|
|
? message.attachment_urls.map((url, index) => (
|
|
<AttachmentPreview
|
|
key={`${message.message_id}-${index}`}
|
|
url={url}
|
|
/>
|
|
))
|
|
: null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{me.isGroupOwner ||
|
|
message.sender == user?.username ||
|
|
(me.isGroupAdmin &&
|
|
me.isGroupOwner &&
|
|
message.sender_id !== groupOwner) ? (
|
|
<Trash2
|
|
className="opacity-0 group-hover:opacity-100 h-5 w-5 ml-2 flex-shrink-0 cursor-pointer text-gray-400 hover:text-red-500 transition-colors duration-200"
|
|
onClick={handleDelete}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default AnimatedMessage;
|