94 lines
3.9 KiB
TypeScript
94 lines
3.9 KiB
TypeScript
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { mockRentalRequests } from "@/lib/mockData";
|
|
import type { RentalRequest, MessageEntry } from "@/types";
|
|
import { getI18n } from "@/locales/server";
|
|
import type { Locale } from "@/locales/server";
|
|
import Link from "next/link";
|
|
import { MessageSquareQuote, ToyBrick } from "lucide-react";
|
|
import { format } from 'date-fns';
|
|
|
|
const currentUserId = 1; // Assume this is the logged-in user's ID
|
|
|
|
// Helper function to get the other participant in a conversation
|
|
const getOtherParticipant = (request: RentalRequest, currentUserId: number) => {
|
|
if (request.toy.ownerId === currentUserId) {
|
|
return { id: request.requesterId, name: request.requesterName };
|
|
}
|
|
return { id: request.toy.ownerId, name: request.toy.ownerName };
|
|
};
|
|
|
|
export default async function MessagesPage({ params }: { params: { locale: Locale } }) {
|
|
const t = await getI18n();
|
|
const locale = params.locale;
|
|
|
|
const userConversations = mockRentalRequests.filter(req =>
|
|
(req.toy.ownerId === currentUserId || req.requesterId === currentUserId) &&
|
|
req.messages && req.messages.length > 0
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.messages.title')}</h1>
|
|
<p className="text-muted-foreground">{t('dashboard.messages.description')}</p>
|
|
</div>
|
|
|
|
{userConversations.length === 0 ? (
|
|
<Card className="text-center py-12 shadow-md">
|
|
<CardHeader>
|
|
<MessageSquareQuote className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
|
|
<CardTitle>{t('dashboard.messages.no_messages_title')}</CardTitle>
|
|
<CardDescription>{t('dashboard.messages.no_messages_description')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Link href={`/${locale}/`} passHref>
|
|
<Button size="lg">
|
|
<ToyBrick className="mr-2 h-5 w-5" />
|
|
{t('dashboard.messages.go_find_toys')}
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{userConversations.map(request => {
|
|
const otherParticipant = getOtherParticipant(request, currentUserId);
|
|
const lastMessage = request.messages![request.messages!.length - 1];
|
|
const formattedTimestamp = lastMessage ? format(new Date(lastMessage.timestamp), 'PPp') : '';
|
|
|
|
return (
|
|
<Card key={request.id} className="shadow-md hover:shadow-lg transition-shadow">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-headline">
|
|
{t('dashboard.messages.conversation_with', { name: otherParticipant.name })}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t('dashboard.messages.about_toy', { toyName: request.toy.name })}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{lastMessage && (
|
|
<div className="text-sm text-muted-foreground">
|
|
<p className="font-medium text-foreground line-clamp-2">
|
|
{t('dashboard.messages.last_message_from', { senderName: lastMessage.senderName, text: lastMessage.text })}
|
|
</p>
|
|
<p className="text-xs mt-1">{formattedTimestamp}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Link href={`/${locale}/dashboard/messages/${request.id}`} passHref>
|
|
<Button variant="outline">{t('dashboard.messages.view_conversation_button')}</Button>
|
|
</Link>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|