weewoo
This commit is contained in:
NotII
@@ -1,379 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Plus,
|
||||
MessageCircle,
|
||||
Loader2,
|
||||
RefreshCw
|
||||
} from "lucide-react";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { getCookie } from "@/lib/client-utils";
|
||||
|
||||
interface Chat {
|
||||
_id: string;
|
||||
buyerId: string;
|
||||
vendorId: string;
|
||||
storeId: string;
|
||||
lastUpdated: string;
|
||||
orderId?: string;
|
||||
}
|
||||
|
||||
interface UnreadCounts {
|
||||
totalUnread: number;
|
||||
chatCounts: Record<string, number>;
|
||||
}
|
||||
|
||||
export default function ChatList() {
|
||||
const router = useRouter();
|
||||
const [chats, setChats] = useState<Chat[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [unreadCounts, setUnreadCounts] = useState<UnreadCounts>({ totalUnread: 0, chatCounts: {} });
|
||||
const [previousTotalUnread, setPreviousTotalUnread] = useState<number>(0);
|
||||
const [selectedStore, setSelectedStore] = useState<string>("");
|
||||
const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]);
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
// Initialize audio element
|
||||
useEffect(() => {
|
||||
// Create audio element for notification sound
|
||||
audioRef.current = new Audio('/notification.mp3');
|
||||
|
||||
// Fallback if notification.mp3 doesn't exist - use browser API for a simple beep
|
||||
audioRef.current.addEventListener('error', () => {
|
||||
audioRef.current = null;
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Function to play notification sound
|
||||
const playNotificationSound = () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.currentTime = 0;
|
||||
audioRef.current.play().catch(err => {
|
||||
console.log('Error playing sound:', err);
|
||||
// Fallback to simple beep if audio file fails
|
||||
try {
|
||||
const context = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
const oscillator = context.createOscillator();
|
||||
oscillator.type = 'sine';
|
||||
oscillator.frequency.setValueAtTime(800, context.currentTime);
|
||||
oscillator.connect(context.destination);
|
||||
oscillator.start();
|
||||
oscillator.stop(context.currentTime + 0.2);
|
||||
} catch (e) {
|
||||
console.error('Could not play fallback audio', e);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Fallback to simple beep if audio element is not available
|
||||
try {
|
||||
const context = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
const oscillator = context.createOscillator();
|
||||
oscillator.type = 'sine';
|
||||
oscillator.frequency.setValueAtTime(800, context.currentTime);
|
||||
oscillator.connect(context.destination);
|
||||
oscillator.start();
|
||||
oscillator.stop(context.currentTime + 0.2);
|
||||
} catch (e) {
|
||||
console.error('Could not play fallback audio', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch vendor ID and stores
|
||||
useEffect(() => {
|
||||
const fetchVendorData = async () => {
|
||||
try {
|
||||
// Get auth token from cookies
|
||||
const authToken = getCookie("Authorization");
|
||||
|
||||
if (!authToken) {
|
||||
toast.error("You need to be logged in to view chats");
|
||||
router.push("/auth/login");
|
||||
return;
|
||||
}
|
||||
|
||||
// Set up axios with the auth token
|
||||
const authAxios = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
// First, get vendor info using the /auth/me endpoint
|
||||
const vendorResponse = await authAxios.get('/auth/me');
|
||||
console.log("Vendor auth response:", vendorResponse.data);
|
||||
|
||||
// Access correct property - the vendor ID is in vendor._id
|
||||
const vendorId = vendorResponse.data.vendor?._id;
|
||||
|
||||
if (!vendorId) {
|
||||
console.error("Vendor ID not found in profile response:", vendorResponse.data);
|
||||
toast.error("Could not retrieve vendor information");
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch vendor's store using storefront endpoint
|
||||
const storeResponse = await authAxios.get(`/storefront`);
|
||||
console.log("Store response:", storeResponse.data);
|
||||
|
||||
// Handle both array and single object responses
|
||||
if (Array.isArray(storeResponse.data)) {
|
||||
// If it's an array, use it as is
|
||||
setVendorStores(storeResponse.data);
|
||||
|
||||
if (storeResponse.data.length > 0) {
|
||||
setSelectedStore(storeResponse.data[0]._id);
|
||||
}
|
||||
} else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) {
|
||||
// If it's a single store object, convert it to an array with one element
|
||||
const singleStore = [storeResponse.data];
|
||||
setVendorStores(singleStore);
|
||||
setSelectedStore(storeResponse.data._id);
|
||||
} else {
|
||||
console.error("Expected store data but received:", storeResponse.data);
|
||||
setVendorStores([]);
|
||||
toast.error("Failed to load store data in expected format");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching vendor data:", error);
|
||||
toast.error("Failed to load vendor data");
|
||||
setVendorStores([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchVendorData();
|
||||
}, [router]);
|
||||
|
||||
// Fetch chats and unread counts when store is selected
|
||||
const fetchChats = async () => {
|
||||
if (!selectedStore && vendorStores.length > 0) {
|
||||
setSelectedStore("all"); // Set default "all" if we have stores but none selected
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const endpoint = selectedStore && selectedStore !== "all"
|
||||
? `/chats?storeId=${selectedStore}`
|
||||
: "/chats";
|
||||
|
||||
const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/api${endpoint}`, {
|
||||
headers: {
|
||||
Authorization: getCookie("Authorization") || "",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
setChats(response.data || []);
|
||||
|
||||
// Fetch unread counts after loading chats
|
||||
await fetchUnreadCounts();
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch chats:", error);
|
||||
toast.error("Failed to load chat conversations");
|
||||
setChats([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Add polling effect
|
||||
useEffect(() => {
|
||||
if (selectedStore) {
|
||||
fetchChats();
|
||||
|
||||
// Poll for updates every 10 seconds
|
||||
const intervalId = setInterval(fetchChats, 10000);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}
|
||||
}, [selectedStore]);
|
||||
|
||||
// Handle chat selection
|
||||
const handleChatClick = (chatId: string) => {
|
||||
router.push(`/dashboard/chats/${chatId}`);
|
||||
};
|
||||
|
||||
// Handle store change
|
||||
const handleStoreChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedStore(e.target.value);
|
||||
};
|
||||
|
||||
// Create a new chat
|
||||
const handleCreateChat = () => {
|
||||
router.push("/dashboard/chats/new");
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex justify-between items-center">
|
||||
<span>Loading chats...</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="animate-pulse space-y-4">
|
||||
{[1, 2, 3].map((n) => (
|
||||
<div key={n} className="h-16 bg-muted rounded-md"></div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Select
|
||||
value={selectedStore || "all"}
|
||||
onValueChange={(value) => setSelectedStore(value)}
|
||||
>
|
||||
<SelectTrigger className="w-48">
|
||||
<SelectValue placeholder="All Stores" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Stores</SelectItem>
|
||||
{vendorStores.map((store) => (
|
||||
<SelectItem key={store._id} value={store._id}>
|
||||
{store.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => fetchChats()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
<span className="ml-2">Refresh</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleCreateChat} size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
New Chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[200px]">Customer</TableHead>
|
||||
<TableHead>Last Activity</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="h-24 text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : chats.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="h-24 text-center">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<MessageCircle className="h-8 w-8 text-muted-foreground mb-2" />
|
||||
<p className="text-muted-foreground">No chats found</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
chats.map((chat) => (
|
||||
<TableRow
|
||||
key={chat._id}
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleChatClick(chat._id)}
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar>
|
||||
<AvatarFallback>
|
||||
{chat.buyerId?.slice(0, 2).toUpperCase() || 'CU'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="font-medium">Customer {chat.buyerId.slice(0, 4)}</div>
|
||||
{chat.orderId && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Order #{chat.orderId}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{formatDistanceToNow(new Date(chat.lastUpdated), { addSuffix: true })}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{unreadCounts.chatCounts[chat._id] > 0 ? (
|
||||
<Badge variant="destructive" className="ml-1">
|
||||
{unreadCounts.chatCounts[chat._id]} new
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">Read</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleChatClick(chat._id);
|
||||
}}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -250,6 +250,7 @@ export default function ChatTable() {
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -260,6 +261,17 @@ export default function ChatTable() {
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
window.open(`/dashboard/chats/${chat._id}`, '_blank');
|
||||
}}
|
||||
>
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user