elmeg-demo/frontend/components/feed/activity-feed.tsx
fullsizemalt ec3e327d94
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
fix(frontend): Handle non-JSON API responses safely in ActivityFeed
2025-12-21 00:58:36 -08:00

87 lines
3.4 KiB
TypeScript

"use client"
import { useEffect, useState } from "react"
import { getApiUrl } from "@/lib/api-config"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar, MessageSquare, Star, Users } from "lucide-react"
import Link from "next/link"
import { WikiText } from "@/components/ui/wiki-text"
interface FeedItem {
type: string
timestamp: string
data: any
user: {
id: number
username: string
avatar?: string
}
}
export function ActivityFeed() {
const [feed, setFeed] = useState<FeedItem[]>([])
const [loading, setLoading] = useState(true)
useEffect(() => {
const fetchFeed = async () => {
try {
const res = await fetch(`${getApiUrl()}/feed/`)
if (!res.ok) {
const text = await res.text()
console.error('Feed API error:', res.status, text)
setFeed([]) // Fallback to empty
return
}
const data = await res.json()
setFeed(data)
} catch (error) {
console.error('Failed to fetch feed:', error)
setFeed([])
} finally {
setLoading(false)
}
}
fetchFeed()
}, [])
if (loading) return <div>Loading activity...</div>
return (
<div className="space-y-4">
{feed.map((item, idx) => (
<Card key={idx}>
<CardContent className="pt-6">
<div className="flex items-start gap-4">
{item.type === "review" && <Star className="h-5 w-5 text-yellow-500 mt-0.5" />}
{item.type === "attendance" && <Calendar className="h-5 w-5 text-blue-500 mt-0.5" />}
{item.type === "post" && <MessageSquare className="h-5 w-5 text-green-500 mt-0.5" />}
<div className="flex-1 space-y-1">
<p className="text-sm">
<span className="font-medium">{item.user.username || "Anonymous"}</span>
{item.type === "review" && " reviewed a show"}
{item.type === "attendance" && " attended a show"}
{item.type === "post" && " posted in a group"}
</p>
{item.type === "review" && (
<div className="text-sm text-muted-foreground italic">
"<WikiText text={item.data.blurb} />"
</div>
)}
{item.type === "post" && (
<p className="text-sm text-muted-foreground line-clamp-2">{item.data.content}</p>
)}
<p className="text-xs text-muted-foreground">
{new Date(item.timestamp).toLocaleDateString()}
</p>
</div>
</div>
</CardContent>
</Card>
))}
{feed.length === 0 && (
<p className="text-center text-muted-foreground">No recent activity.</p>
)}
</div>
)
}